Branding

Branding is entirely config-driven. You'll edit one file (site.config.ts) and drop a few images in public/assets/. No code changes.

Brand name and tagline

Edit config/site.config.ts:

export const siteConfig = {
  name: 'ToolFinder',
  tagline: 'Discover the best developer tools',
  description: 'A curated directory of tools...',  // for SEO
  // ...
};

These propagate to:

• Header logo text
• <title> and meta description
• Every email's sign-off
• Open Graph tags
• Footer copyright

Logos

Drop your logos into public/assets/, keeping the same filenames the config expects:

If you want different paths, edit them in config/site.config.ts → logo.light / logo.dark.

Favicon

Replace:

• public/assets/favicon/favicon.ico

And while you're there, drop in matching sizes for mobile icons:

• public/assets/favicon/apple-touch-icon.png (180×180)
• public/assets/favicon/icon-192.png
• public/assets/favicon/icon-512.png

Update public/site.webmanifest if the paths change.

Generate a full favicon set in seconds at realfavicongenerator.net.

Open Graph image

Replace public/assets/og-image.png with a 1200×630 image. This is what shows up when someone shares your URL on Twitter, Slack, Discord, etc.

Update the path in site.config.ts → ogImage if you rename it.

Social links

social: {
  twitter: '@yourhandle',       // or full URL
  github: 'https://github.com/yourorg',
  discord: 'https://discord.gg/xxxx',
},

Only the keys you set will render — empty / missing keys are ignored.

Contact emails

Shown in the footer, About page, and used as reply-to on emails:

contact: {
  email:        'hello@mydirectory.com',
  supportEmail: 'support@mydirectory.com',
  privacyEmail: 'privacy@mydirectory.com',
},

Footer text

footer: {
  copyright:   `© ${new Date().getFullYear()} My Directory. All rights reserved.`,
  description: 'A curated directory of ...',
},

SEO keywords & language

keywords: ['developer tools', 'directory', 'SaaS'],
language: 'en',
locale:   'en_US',
themeColor: '#000000',       // mobile browser address bar color

Layout & display settings

Some branding choices aren't files — they're toggles. In the admin panel at /admin/design → Layout, you control whether the logo and cover image appear, independently, on:

• Catalog cards — the listing grid
• Item page — the individual project detail page

Turn the image off for a dense, text-first directory; keep it on for a visual, screenshot-led one. Submitters are only asked to upload the media you actually display. These settings live in the site_settings table and apply site-wide without a redeploy.

Changing colors (quick)

Branding colors come from the theme, not site.config.ts. See Theming.

• Pick a preset → defaultColorTheme = 'supabase' in themes.config.ts
• Or build your own via tweakcn.com and paste it in

Fonts

Default fonts are set in app/layout.tsx (imported from next/font). To change:

1. Import the new font in app/layout.tsx
2. Assign it to the font-sans / font-mono CSS variable in your active theme (in themes.config.ts)

Replacing stock images

The project ships with example images in public/ (directory photos, partner logos, etc.). Replace or remove as you like. Most are referenced from config files or marketing components — grep for a filename to find its usage.