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 should feel like one identity transforming without breaking.
The problem
Hardcoded brand colors scattered across templates make redesigns painful and inconsistent. Styling decisions were living in code instead of content.
My role
Design + build
Theme DNA Design System
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.
Key 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.
- 23 templates token-driven
- Zero hardcoded brand colors
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.