Customization
Customize branding, content, and appearance
Once StudyStudio is deployed, you will likely want to update branding, text, images, and other visual elements to match your business. This page covers everything you can safely change and where to find it.
Logo
File: app/components/logo.tsx
The logo component supports a black variant (used on light backgrounds like the navbar) and a white variant (used on dark backgrounds). To replace the logo, update the component's asset and the sparkle icon beside it.
Brand Colors
File: app/globals.css
The primary brand color is #228B22 (forest green). It is defined in two places:
/* Fumadocs docs theme */
--color-fd-primary: hsl(120, 61%, 34%);
/* App theme token (inside @theme inline) */
--color-primary: #228b22;To change the brand color, update both values to your desired color. The docs theme and the app theme should stay in sync.
Font
File: app/layout.tsx
The application uses Plus Jakarta Sans loaded via next/font/google. Replace the import and configuration with any Google Font.
Text and Translations
Directory: messages/
All user facing text is stored in JSON translation files, one per language (en, de, es, fr, it). Each file is organized by namespace (nav, hero, pricing, footer, app.*, etc.). To change any text, find the matching key and update the value in all five files.
Landing Page Sections
Directory: app/components/ and app/[locale]/
Each landing page section is a separate component (header.tsx, hero.tsx, features-section.tsx, testimonials.tsx, pricing.tsx, faq.tsx, footer.tsx, and more). Edit them directly to change the marketing site.
StudyStudio Features
| Feature | Where |
|---|---|
| Notebook workspace | app/[locale]/dashboard/notebook/[notebookId]/ |
| Study tools (Studio panel) | convex/audioOverviews.ts, dataTables.ts, mindMaps.ts, reports.ts, flashcards.ts, quizzes.ts |
| AI prompts | Inside each Convex generator file |
| Billing plans | Admin Dashboard → Billing Config |
| Featured notebooks | Admin Dashboard → Featured Notebooks |
| Docs content | content/docs/*.mdx |
| Legal pages | app/[locale]/privacy/, terms/, refund/ |
What Not to Modify
Avoid modifying these directories unless you are confident in what you are doing. They contain core application logic and breaking them will cause the application to stop working.
| Directory | Contains |
|---|---|
convex/ | Convex schema, queries, mutations, actions, auth |
lib/ | Auth clients, Stripe client, utility functions |
app/api/ | API route handlers (auth, payments, AI) |
proxy.ts | Next.js proxy / i18n middleware |
i18n/ | Internationalization routing config (not translations) |
Deploying Changes
After making your changes locally, save the files and push to Git. If you are using Vercel, changes deploy automatically within a few minutes. If you are on a custom server, SSH in and pull the latest changes, rebuild, and restart.