> ## Documentation Index
> Fetch the complete documentation index at: https://devkit4ai.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Branding and Styling

> Update Tailwind tokens and UI chrome to match your product.

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:

<Steps>
  <Step title="Update App Configuration">
    Customize your app name, description, and navigation in `config/app.config.ts`. This sets your primary brand identity.

    See [App Configuration](/starter-kit/customization/app-config) for detailed instructions.
  </Step>

  <Step title="Configure Brand Colors">
    Update your color palette in `tailwind.config.ts` to match your brand guidelines.

    See [Color Customization](#color-customization) below.
  </Step>

  <Step title="Add Your Logo">
    Replace the text logo with your brand logo image in the header component.

    See [Logo Implementation](#logo-implementation) below.
  </Step>

  <Step title="Customize Typography">
    Update font families and typography settings in your Tailwind configuration.

    See [Typography](#typography) below.
  </Step>

  <Step title="Update Favicon">
    Replace `public/favicon.ico` with your branded favicon.

    Generate favicons at [favicon.io](https://favicon.io) or similar tools.
  </Step>

  <Step title="Test Dark Mode">
    Ensure all brand colors work well in both light and dark modes.

    See [Theme Configuration](/starter-kit/customization/theme-config) for dark mode details.
  </Step>
</Steps>

## Color Customization

### Tailwind Color Palette

The Starter Kit uses Tailwind CSS for styling. Update your brand colors in `tailwind.config.ts`:

```typescript tailwind.config.ts theme={null}
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;
```

<Tip>
  Use a color palette generator like [Tailwind Color Generator](https://uicolors.app/create) to create consistent color scales from your brand colors.
</Tip>

### Applying Brand Colors

Once configured, use your brand colors throughout your components:

```tsx theme={null}
// 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:

```tsx theme={null}
<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`:

```typescript config/app.config.ts theme={null}
export const appConfig: AppConfig = {
  logo: {
    text: "Your Brand",
    href: "/"
  },
}
```

### Image Logo

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

<Steps>
  <Step title="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
    ```
  </Step>

  <Step title="Update Header Component">
    Replace the text logo with an image in `components/project/header.tsx`:

    ```tsx components/project/header.tsx theme={null}
    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>
    ```
  </Step>

  <Step title="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
  </Step>
</Steps>

### Logo with Icon and Text

Combine an icon with text for a complete brand mark:

```tsx components/project/header.tsx theme={null}
<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`:

```typescript tailwind.config.ts theme={null}
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`:

```tsx app/layout.tsx theme={null}
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:

```typescript tailwind.config.ts theme={null}
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`:

```tsx components/project/header.tsx theme={null}
<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

### Footer Styling

Customize footer appearance in `components/project/footer.tsx`:

```tsx components/project/footer.tsx theme={null}
<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`:

```css app/globals.css theme={null}
@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:

```css app/globals.css theme={null}
: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:

```tsx theme={null}
<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:

```typescript lib/design-tokens.ts theme={null}
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:

```typescript components/ui/button.tsx theme={null}
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

<AccordionGroup>
  <Accordion title="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
  </Accordion>

  <Accordion title="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
  </Accordion>

  <Accordion title="Mobile Responsiveness">
    * Test navigation collapse on mobile screens
    * Verify logo scales appropriately
    * Check touch target sizes (minimum 44x44px)
    * Test footer layout on narrow screens
  </Accordion>

  <Accordion title="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
  </Accordion>
</AccordionGroup>

## Next Steps

<CardGroup cols={2}>
  <Card title="App Configuration" icon="sliders" href="/starter-kit/customization/app-config">
    Configure branding, navigation, and layout settings
  </Card>

  <Card title="Theme Configuration" icon="moon" href="/starter-kit/customization/theme-config">
    Set up light and dark mode theming
  </Card>

  <Card title="Custom Pages" icon="file-plus" href="/starter-kit/customization/custom-pages">
    Create branded landing and feature pages
  </Card>

  <Card title="Component Library" icon="boxes" href="/starter-kit/customization/component-library">
    Use pre-built components with your branding
  </Card>
</CardGroup>