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.

Rebrand this DirectoryKit project to match:

Brand name: {brand}
Tagline: {one-liner, under 60 chars}
Short description: {1 sentence for SEO}
Long description: {2-3 sentences for footer}
Domain: {yourdomain.com}
Contact: {hello@yourdomain.com}, {support@yourdomain.com}, {privacy@yourdomain.com}
Socials: twitter {@handle}, github {org or empty}, discord {invite or empty}
Primary theme color (hex): {#...}
Update:

config/site.config.ts — every field that maps to the info above (name, tagline, description, url, contact, social, footer, keywords, themeColor).
Tell me which files to drop into public/assets/ (logo.svg, logo-white.svg, favicon.ico, og-image.png) and their recommended dimensions. Don't generate the images — just list them.
If config/themes.config.ts → defaultColorTheme doesn't match the vibe of this brand, suggest a better preset ID and update it.
Preserve all TypeScript types.

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

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.