The Developer's Brand Kit Checklist: 23 Files You Need Before Launch

You hit npm run build. The Vercel deployment goes green. You drop the link in your founders' Discord, and the preview card is a broken gray square. Your favicon is the default Next.js triangle. You spent 40 hours perfecting your Postgres schema and tRPC routes, but to anyone clicking your link on Twitter, it looks like a weekend tutorial project.

Brand consistency isn't a marketing problem; it's an engineering problem. When you hardcode #3b82f6 in 47 different React components, you create technical debt. When you forget your apple-touch-icon.png, iOS users adding your PWA to their home screen get an ugly, pixelated screenshot of your homepage.

Before you launch, your repository needs a specific set of 23 files. This is the exact checklist you need to map your design system to your codebase, configure your meta tags, and instruct AI coding assistants on how to use your brand.

The Core Design System (Files 1-5)

Your brand needs a source of truth. If you use standard Tailwind colors, your app looks like a template. If you randomly pick hex codes, your hover states will lack contrast. You need a mathematically calculated 11-step color scale (50-950) injected into your CSS variables.

1. globals.css Define your brand colors using OKLCH CSS variables. OKLCH provides uniform perceptual lightness, meaning your brand-500 and danger-500 will have the exact same contrast ratio against white text.

@tailwind base;
@tailwind components;
@tailwind utilities;
 
@layer base {
  :root {
    --brand-50: 97.5% 0.01 250;
    --brand-500: 55% 0.12 250;
    --brand-950: 15% 0.05 250;
    /* Map 50-950 scale here */
  }
  .dark {
    --brand-50: 15% 0.05 250;
    --brand-500: 65% 0.12 250;
    --brand-950: 97.5% 0.01 250;
  }
}
**2. `tailwind.config.ts`**
Never overwrite the base `colors` object. Always extend it, and map your CSS variables using the `oklch()` function so Tailwind's opacity modifiers (`bg-brand-500/50`) work correctly.
 
```typescript
import type { Config } from 'tailwindcss'
 
export default {
  content: ['./app/**/*.{ts,tsx}', './components/**/*.{ts,tsx}'],
  theme: {
    extend: {
      colors: {
        brand: {
          50: 'oklch(var(--brand-50) / <alpha-value>)',
          500: 'oklch(var(--brand-500) / <alpha-value>)',
          950: 'oklch(var(--brand-950) / <alpha-value>)',
        }
      }
    }
  }
} satisfies Config

3. tokens.json You need a framework-agnostic JSON file of your design tokens. When you eventually need to build a React Native mobile app or send your system to a designer in Figma, this file prevents them from manually typing hex codes.

4. fonts.css Stop using Google Fonts. Loading external fonts adds a 300ms DNS resolution penalty and causes Cumulative Layout Shift (CLS). Define your local fonts here with font-display: swap.

5. Inter-var.woff2 (or your chosen brand font) Serve your fonts locally. You only need the .woff2 format in 2024. Drop .ttf and .woff entirely; they are dead weight. A single variable .woff2 file is typically under 100kb and covers all font weights from 100 to 900.

The Favicon Stack (Files 6-11)

The old standard of dropping a single favicon.ico in your root directory is dead. Modern browsers, iOS home screens, and Android PWAs require a specific matrix of files.

If you use the Next.js App Router, placing these exact files in your app/ directory automatically generates the correct <link> tags in your document head.

6. favicon.ico The legacy fallback. This file must be exactly 32x32 pixels. It is only loaded by older browsers or specific RSS readers that ignore SVG.

7. icon.svg The modern standard. This file scales infinitely and supports media queries. You can configure this SVG to switch to a white logo when the user's system is in dark mode.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <style>
    path { fill: #000; }
    @media (prefers-color-scheme: dark) {
      path { fill: #fff; }
    }
  </style>
  <path d="..." />
</svg>

8. apple-touch-icon.png Required for iOS devices. When a user bookmarks your site to their home screen, iOS ignores your SVG and looks for this specific file. It must be exactly 180x180 pixels with a solid background. iOS does not support transparency here; transparent pixels will render as black.

9. manifest.webmanifest The JSON file that dictates how your app behaves when installed on Android. It defines the app name, theme color, and points to your larger icon files.

10. android-chrome-192x192.png Referenced in your web manifest for Android home screens.

11. android-chrome-512x512.png Referenced in your web manifest for the Android splash screen when your PWA boots up.

Social & SEO Assets (Files 12-16)

When your URL is pasted into Slack, Discord, or Twitter, the platform scrapes your meta tags to generate a preview card. Without these files, your conversion rate from social shares drops to near zero.

12. opengraph-image.png The standard Open Graph image. It must be exactly 1200x630 pixels. Use PNG, not SVG or WebP. iMessage and LinkedIn parsers frequently choke on modern image formats. Stick to raw PNGs for social cards.

13. twitter-image.png While X/Twitter often falls back to the Open Graph image, explicitly providing a Twitter image ensures your card renders correctly as a summary_large_image.

14. opengraph-image.alt.txt If you are using Next.js, dropping this text file next to your opengraph-image.png automatically populates the og:image:alt meta tag, fixing accessibility warnings in Lighthouse audits.

15. robots.txt Dictates crawler behavior. Even if you want everything indexed, you need this file to point to your sitemap.

16. sitemap.xml Essential for Google Search Console. If your site has dynamic routes (like /blog/[slug]), generate this file dynamically via a route handler rather than hardcoding it.

The AI Context Files (Files 17-18)

You are using Cursor, GitHub Copilot, or Claude to write components. If you prompt "make a primary button," the AI will hallucinate bg-blue-500 because it doesn't know your brand context. You must explicitly inject your design system into the AI's context window.

Generating this 11-step color scale, the CSS variables, and the AI context files manually takes hours of tweaking in Figma and translating to code. OneMinuteBranding handles this entire stack. For a $49 one-time payment, it generates your Tailwind config, CSS variables, logos, and AI context files in 60 seconds. You copy-paste the output directly into your repository.

17. CLAUDE.md (or .cursorrules) This file sits in your project root. Cursor and Claude automatically read it before generating code. It forces the AI to use your specific design tokens instead of generic Tailwind utilities.

- Primary brand color: `bg-brand-500`
- Text colors: Use `text-slate-900` for light mode, `text-slate-50` for dark mode.
- Border radius: Always use `rounded-md`. Never use `rounded-full` for buttons.
- Do NOT use standard Tailwind colors like `blue-500` or `red-500`. 
- For destructive actions, use `bg-danger-500`.

18. components/ui/button.tsx The baseline component. Your AI needs a reference implementation of your brand. By defining a strictly typed Button component that utilizes your brand-500 color and specific border radius, the AI will mimic this pattern for all future components it generates.

The Logo Matrix (Files 19-23)

Your logo isn't a single file. Different contexts require different formats, color variations, and aspect ratios.

19. logo-light.svg Your primary horizontal logo (icon + text) optimized for light backgrounds. The text should be dark gray or black.

20. logo-dark.svg Your primary horizontal logo optimized for dark backgrounds. The text must be white or very light gray. If you try to use CSS filter: invert(1) on your light logo to save time, your brand color mark will also invert, ruining your brand identity. You need a dedicated dark mode file.

21. logomark.svg Just the icon, no text. Used for constrained spaces like application headers, mobile navbars, or avatar placeholders.

22. logo-monochrome.svg A single-color version of your logomark. Set the fill to currentColor. This allows you to use the SVG inline in your React components and color it dynamically using Tailwind text utilities (text-slate-400). This is mandatory for footer watermarks.

23. email-signature-logo.png Do not use SVGs in your email signatures. Gmail, Outlook, and Apple Mail have notoriously terrible SVG support. Export a highly compressed, 200px wide PNG of your logo specifically for automated transactional emails and team signatures.

The 23-File Checklist

FAQ

Should I use SVG or PNG for Open Graph images? PNG. Always. Open Graph parsers in iMessage, Slack, and older social networks routinely fail to render SVGs. A 1200x630 PNG guarantees your preview card renders correctly across every platform.

Do I actually need a full 50-950 color scale? Yes. You cannot build a UI with just one hex code. Your primary button background is 500. The hover state needs 600. The subtle background of a selected list item needs 50. The border of an active input needs 200. If you don't generate the full mathematical scale, you will end up guessing hex codes and destroying your UI's contrast ratios.

Can I just use standard Tailwind colors like blue-500? No. Standard Tailwind colors are globally recognizable. If you use blue-500, your app immediately looks like a default template. You must override the default palette with a custom generated scale to establish brand authority.

Verify your repository right now. Open your terminal at the root of your project and run this script to see exactly which brand files you are missing before you hit deploy.

#!/bin/bash
FILES=(
  "tailwind.config.ts" "app/globals.css" "app/favicon.ico" 
  "app/icon.svg" "app/apple-touch-icon.png" "app/opengraph-image.png"
  "CLAUDE.md" "public/logo-light.svg" "public/logo-dark.svg"
)
 
for file in "${FILES[@]}"; do
  if [ -f "$file" ]; then
    echo "✅ Found: $file"
  else
    echo "❌ Missing: $file"
  fi
done