Design Systems
Brand Kit Applier
Applies your brand tokens consistently across the entire codebase
About this skill
Brand Kit Applier
Applies a brand identity systematically across a Lovable project. Updates Tailwind config, replaces hardcoded colors, swaps fonts, enforces spacing tokens, and ensures the brand stays consistent as the codebase grows.
What it does
- Inventories all existing styling (hardcoded colors, font declarations, magic numbers)
- Updates tailwind.config to define your brand tokens
- Updates index.css CSS variables
- Replaces hardcoded styling across the codebase with token references
- Verifies no leftover violations remain
Brand kit checklist included
Guides you through capturing every required token: colors (background, surface, text primary/muted, accent, hover, error, success, warning), typography (heading, body, mono fonts plus letter spacing rules), and shape (border radius scale, spacing base unit).
Anti-AI patterns it avoids
- No purple/indigo unless explicitly requested (the AI tell)
- No Inter for headlines (overused signal)
- Varied border-radius across cards (not uniform)
- Asymmetric layouts (not three-column-feature-grid AI default)
SKILL.md preview
---
name: brand-kit-applier
description: Use when applying a brand identity (colors, fonts, spacing tokens) consistently across a Lovable project, or when rebranding an existing build.
---
# Brand Kit Applier
Applies a brand identity systematically across a Lovable project.