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
Want this generated from your brand automatically? Glyph exports production-ready brand tokens.