Branding and Styling - Dev Kit for AI

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:

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.

Configure Brand Colors

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

Add Your Logo

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

Customize Typography

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

Update Favicon

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

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: "/"
  },
}

Image Logo

To use an image logo instead, modify components/project/header.tsx:

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

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>

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

Visual Consistency Check

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

Dark Mode Verification

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

Mobile Responsiveness

Test navigation collapse on mobile screens
Verify logo scales appropriately
Check touch target sizes (minimum 44x44px)
Test footer layout on narrow screens

Accessibility

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

​Branding Checklist

​Color Customization

​Tailwind Color Palette

​Applying Brand Colors

​Dark Mode Colors

​Logo Implementation

​Text Logo (Default)

​Image Logo

​Logo with Icon and Text

​Typography

​Font Configuration

​Loading Custom Fonts

​Component Customization

​Header Styling

​Footer Styling

​Global Styles

​Custom CSS

​CSS Variables

​Brand Consistency

​Design Tokens

​Component Variants

​Testing Your Brand

​Next Steps

App Configuration

Theme Configuration

Custom Pages

Component Library

Branding Checklist

Color Customization

Tailwind Color Palette

Applying Brand Colors

Dark Mode Colors

Logo Implementation

Text Logo (Default)

Image Logo

Logo with Icon and Text

Typography

Font Configuration

Loading Custom Fonts

Component Customization

Header Styling

Footer Styling

Global Styles

Custom CSS

CSS Variables

Brand Consistency

Design Tokens

Component Variants

Testing Your Brand

Next Steps