Theme DNA Design System
A database-driven design token system ("Theme DNA") that every public template consumes — change the brand once, and 23 templates restyle themselves. No hardcoded colors anywhere.
Theme DNA Design System
The component's states are shown side-by-side as a static comparison strip.
Content
Theme DNA stores design tokens (colors, accents, styling rules) in the CMS database and exposes them to every rendering surface. All 13 detail templates and 10 page templates consume tokens instead of hardcoded values, enforced as a hard rule in the project conventions. An AI voice/visual profile layer builds on the same DNA so generated content matches the brand automatically.
Decisions
The rule is enforced in two places at once: structurally, by making all 23 templates read tokens, and culturally, by writing "no hardcoded brand colors" into the project's own convention file, so every future change — human or AI-assisted — inherits the constraint. Migration was done as full sweeps rather than opportunistically, because a token system at 80% adoption gives you two sources of truth instead of one. The AI voice and image layer reads the same DNA, which is why generated content lands on-brand without per-generation styling instructions.
Outcome
One place to change the brand; 23 templates follow instantly, including AI-generated content.
Problem
Hardcoded brand colors scattered across templates make redesigns painful and inconsistent. Styling decisions were living in code instead of content.
Limitations
Tokens cover color and styling rules first. Typography is newer ground — the current font direction ships as a real CMS setting with three candidates, not a settled choice.
How this was built
Built with AI assistance (Claude Code). The architecture, the decisions and the trade-offs are mine; a lot of the implementation was written in pair with the model. I work this way deliberately — it's why one person can run a system this size — and the reasoning behind every call here is documented above.
- Category
- CMS & Web
- Tech stack
- Next.js
- Tailwind CSS
- MySQL
- Metrics
- 23 templates token-driven
- Zero hardcoded brand colors
- Role
- Design + build