Tailwind Brand Tokens Template

Use this template to map your brand identity into Tailwind so your product UI and marketing pages stay visually consistent.

Starter Token Structure

export default {
  theme: {
    extend: {
      colors: {
        brand: {
          primary: 'var(--brand-primary)',
          secondary: 'var(--brand-secondary)',
          accent: 'var(--brand-accent)',
          neutral: {
            50: 'var(--brand-neutral-50)',
            100: 'var(--brand-neutral-100)',
            900: 'var(--brand-neutral-900)'
          },
          success: 'var(--brand-success)',
          warning: 'var(--brand-warning)',
          error: 'var(--brand-error)'
        }
      }
    }
  }
};

Implementation Checklist

• Define CSS custom properties for each token
• Map semantic names in Tailwind config
• Use token classes in shared components first
• Run contrast checks on button and text states