Skip to main content
Complete your app’s visual identity by customizing colors, typography, logo, and brand elements. The Starter Kit provides a centralized branding system that makes it easy to apply your brand consistently across all pages and components.

​
Branding Checklist

Follow this checklist to apply your brand to the Starter Kit:
1

Update App Configuration

Customize your app name, description, and navigation in config/app.config.ts. This sets your primary brand identity.See App Configuration for detailed instructions.
2

Configure Brand Colors

Update your color palette in tailwind.config.ts to match your brand guidelines.See Color Customization below.
3

Add Your Logo

Replace the text logo with your brand logo image in the header component.See Logo Implementation below.
4

Customize Typography

Update font families and typography settings in your Tailwind configuration.See Typography below.
5

Update Favicon

Replace public/favicon.ico with your branded favicon.Generate favicons at favicon.io or similar tools.
6

Test Dark Mode

Ensure all brand colors work well in both light and dark modes.See Theme Configuration for dark mode details.

​
Color Customization

​
Tailwind Color Palette

The Starter Kit uses Tailwind CSS for styling. Update your brand colors in tailwind.config.ts:
tailwind.config.ts
import type { Config } from "tailwindcss";

const config: Config = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  darkMode: "class",
  theme: {
    extend: {
      colors: {
        // Your primary brand color
        primary: {
          50: '#f0fdf4',
          100: '#dcfce7',
          200: '#bbf7d0',
          300: '#86efac',
          400: '#4ade80',
          500: '#22c55e',  // Main primary color
          600: '#16a34a',
          700: '#15803d',
          800: '#166534',
          900: '#14532d',
          950: '#052e16',
        },
        // Your secondary/accent color
        accent: {
          50: '#fef2f2',
          100: '#fee2e2',
          200: '#fecaca',
          300: '#fca5a5',
          400: '#f87171',
          500: '#ef4444',  // Main accent color
          600: '#dc2626',
          700: '#b91c1c',
          800: '#991b1b',
          900: '#7f1d1d',
          950: '#450a0a',
        },
      },
    },
  },
  plugins: [],
};

export default config;
Use a color palette generator like Tailwind Color Generator to create consistent color scales from your brand colors.

​
Applying Brand Colors

Once configured, use your brand colors throughout your components: 
// Primary button
<button className="bg-primary-500 hover:bg-primary-600 text-white">
  Get Started
</button>

// Accent text
<h1 className="text-accent-500 dark:text-accent-400">
  Welcome to Your App
</h1>

// Gradient background
<div className="bg-gradient-to-r from-primary-500 to-accent-500">
  Hero section
</div>

​
Dark Mode Colors

Define dark mode variants for your colors: 
<div className="bg-primary-500 dark:bg-primary-700">
  Content adapts to theme
</div>

​
Logo Implementation

​
Text Logo (Default)

The Starter Kit uses a text logo by default, configured in config/app.config.ts:
config/app.config.ts
export const appConfig: AppConfig = {
  logo: {
    text: "Your Brand",
    href: "/"
  },
}
To use an image logo instead, modify components/project/header.tsx:
1

Add Logo Files

Place your logo files in the public directory:
public/
├── logo-light.svg  # Logo for light mode
├── logo-dark.svg   # Logo for dark mode
└── logo.svg        # Single logo for both modes
2

Update Header Component

Replace the text logo with an image in components/project/header.tsx:
components/project/header.tsx
import Image from 'next/image'
import { useTheme } from 'next-themes'

// Inside the Header component:
const { theme } = useTheme()

<Link href={appConfig.logo.href} className="flex items-center space-x-2">
  <Image
    src={theme === 'dark' ? '/logo-dark.svg' : '/logo-light.svg'}
    alt={appConfig.name}
    width={120}
    height={40}
    priority
  />
</Link>
3

Optimize Logo Size

Ensure your logo dimensions are appropriate:
  • Desktop: 120-180px wide, 32-48px tall
  • Mobile: Scale proportionally or use a compact version
  • Use SVG format for crisp rendering at all sizes

​
Logo with Icon and Text

Combine an icon with text for a complete brand mark:
components/project/header.tsx
<Link href={appConfig.logo.href} className="flex items-center gap-2">
  <Image
    src="/icon.svg"
    alt=""
    width={32}
    height={32}
    className="shrink-0"
  />
  <span className="font-bold text-lg text-primary-500 dark:text-primary-400">
    {appConfig.logo.text}
  </span>
</Link>

​
Typography

​
Font Configuration

Customize typography in tailwind.config.ts:
tailwind.config.ts
const config: Config = {
  theme: {
    extend: {
      fontFamily: {
        sans: ['Inter', 'system-ui', 'sans-serif'],
        serif: ['Merriweather', 'Georgia', 'serif'],
        mono: ['Fira Code', 'monospace'],
        display: ['Poppins', 'sans-serif'],
      },
      fontSize: {
        'xs': ['0.75rem', { lineHeight: '1rem' }],
        'sm': ['0.875rem', { lineHeight: '1.25rem' }],
        'base': ['1rem', { lineHeight: '1.5rem' }],
        'lg': ['1.125rem', { lineHeight: '1.75rem' }],
        'xl': ['1.25rem', { lineHeight: '1.75rem' }],
        '2xl': ['1.5rem', { lineHeight: '2rem' }],
        '3xl': ['1.875rem', { lineHeight: '2.25rem' }],
        '4xl': ['2.25rem', { lineHeight: '2.5rem' }],
        '5xl': ['3rem', { lineHeight: '1' }],
        '6xl': ['3.75rem', { lineHeight: '1' }],
      },
    },
  },
};

​
Loading Custom Fonts

Use Next.js font optimization in app/layout.tsx:
app/layout.tsx
import { Inter, Poppins } from 'next/font/google'

const inter = Inter({ 
  subsets: ['latin'],
  variable: '--font-inter',
  display: 'swap',
})

const poppins = Poppins({ 
  weight: ['400', '600', '700'],
  subsets: ['latin'],
  variable: '--font-poppins',
  display: 'swap',
})

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en" className={`${inter.variable} ${poppins.variable}`}>
      <body className="font-sans">
        {children}
      </body>
    </html>
  )
}
Update Tailwind to use the CSS variables:
tailwind.config.ts
fontFamily: {
  sans: ['var(--font-inter)', 'system-ui', 'sans-serif'],
  display: ['var(--font-poppins)', 'sans-serif'],
}

​
Component Customization

​
Header Styling

Customize header appearance in components/project/header.tsx:
components/project/header.tsx
<header className="sticky top-0 z-50 w-full border-b border-gray-200 dark:border-gray-800 bg-white/80 dark:bg-gray-950/80 backdrop-blur-md">
  <nav className="container mx-auto flex h-16 items-center justify-between px-4">
    {/* Logo and navigation */}
  </nav>
</header>
Styling options:
  • Transparent header: Remove bg-white/80 and backdrop-blur-md
  • Colored header: Use bg-primary-500 text-white
  • Shadow: Add shadow-sm or shadow-md
  • Height: Adjust h-16 (64px) to your preference
Customize footer appearance in components/project/footer.tsx:
components/project/footer.tsx
<footer className="border-t border-gray-200 dark:border-gray-800 bg-gray-50 dark:bg-gray-900">
  <div className="container mx-auto px-4 py-12">
    {/* Footer content */}
  </div>
</footer>

​
Global Styles

​
Custom CSS

Add global brand styles in app/globals.css:
app/globals.css
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  /* Custom scrollbar */
  ::-webkit-scrollbar {
    width: 12px;
  }
  
  ::-webkit-scrollbar-track {
    @apply bg-gray-100 dark:bg-gray-900;
  }
  
  ::-webkit-scrollbar-thumb {
    @apply bg-primary-500 rounded-full;
  }
  
  /* Focus styles */
  *:focus-visible {
    @apply outline-2 outline-offset-2 outline-primary-500;
  }
}

@layer components {
  /* Custom button variant */
  .btn-brand {
    @apply px-6 py-3 bg-primary-500 hover:bg-primary-600 
           text-white font-semibold rounded-lg 
           transition-colors duration-200
           focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2;
  }
}

​
CSS Variables

Define brand-specific CSS variables for dynamic theming:
app/globals.css
:root {
  --brand-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --brand-shadow: 0 10px 40px rgba(102, 126, 234, 0.2);
  --brand-radius: 0.75rem;
}

.dark {
  --brand-shadow: 0 10px 40px rgba(102, 126, 234, 0.1);
}
Use in components: 
<div style={{ 
  background: 'var(--brand-gradient)',
  boxShadow: 'var(--brand-shadow)',
  borderRadius: 'var(--brand-radius)',
}}>
  Branded element
</div>

​
Brand Consistency

​
Design Tokens

Create a centralized design token file for consistency:
lib/design-tokens.ts
export const designTokens = {
  colors: {
    brand: {
      primary: '#22c55e',
      secondary: '#ef4444',
      accent: '#3b82f6',
    },
  },
  spacing: {
    xs: '0.5rem',
    sm: '1rem',
    md: '1.5rem',
    lg: '2rem',
    xl: '3rem',
  },
  borderRadius: {
    sm: '0.375rem',
    md: '0.5rem',
    lg: '0.75rem',
    xl: '1rem',
  },
  shadows: {
    sm: '0 1px 2px 0 rgb(0 0 0 / 0.05)',
    md: '0 4px 6px -1px rgb(0 0 0 / 0.1)',
    lg: '0 10px 15px -3px rgb(0 0 0 / 0.1)',
  },
} as const

​
Component Variants

Use class-variance-authority for consistent component styling:
components/ui/button.tsx
import { cva, type VariantProps } from 'class-variance-authority'

const buttonVariants = cva(
  'inline-flex items-center justify-center rounded-lg font-semibold transition-colors',
  {
    variants: {
      variant: {
        default: 'bg-primary-500 text-white hover:bg-primary-600',
        secondary: 'bg-gray-200 text-gray-900 hover:bg-gray-300',
        outline: 'border-2 border-primary-500 text-primary-500 hover:bg-primary-50',
      },
      size: {
        sm: 'h-9 px-4 text-sm',
        md: 'h-11 px-6 text-base',
        lg: 'h-14 px-8 text-lg',
      },
    },
    defaultVariants: {
      variant: 'default',
      size: 'md',
    },
  }
)

​
Testing Your Brand

  • Test all pages to ensure consistent header/footer appearance
  • Verify logo displays correctly at all screen sizes
  • Check that all brand colors are applied consistently
  • Ensure hover states use brand colors
  • Switch between light and dark modes
  • Verify all brand colors have appropriate dark mode variants
  • Check logo visibility in both themes
  • Ensure sufficient contrast in both modes
  • Test navigation collapse on mobile screens
  • Verify logo scales appropriately
  • Check touch target sizes (minimum 44x44px)
  • Test footer layout on narrow screens
  • Verify color contrast meets WCAG AA standards (4.5:1 for text)
  • Test keyboard navigation with brand colors
  • Ensure focus indicators are visible
  • Check that logo alt text is descriptive

​
Next Steps

App Configuration

Configure branding, navigation, and layout settings

Theme Configuration

Set up light and dark mode theming

Custom Pages

Create branded landing and feature pages

Component Library

Use pre-built components with your branding