Privacy choices

This site may send the owner a minimal page-visit notice with page, browser, device type, and resolution. If you accept analytics, it can also remember an anonymous visit/session ID and collect richer engagement signals.

Read the privacy notice
AlexPersonal Operating System
Alex OS Online
Back to Projects
LinkedIn
ProjectJuly 13, 2026

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.

Category
cms_web
Tech stack
Next.js, Tailwind CSS, MySQL
Metrics
23 templates token-driven, Zero hardcoded brand colors
Role
Design + build

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.

Problem

Hardcoded brand colors scattered across templates make redesigns painful and inconsistent. Styling decisions were living in code instead of content.

Outcome

One place to change the brand; 23 templates follow instantly, including AI-generated content.

design-systemtokenssystem

Explore with Alex OS

Theme DNA replaced scattered hardcoded colors with a single database-driven token layer — 23 templates now restyle from one change.

Theme DNA Design System

A database-driven design token system built in Next.js, Tailwind CSS, and MySQL. Design tokens — colors, accents, styling rules — live in the CMS database, not in code. Every template reads from that source. Change the brand once; all 23 templates follow.

Problem → Decision → Build

Why Tokens in the Database, Not in a Config File

Storing tokens in MySQL means the same data layer that drives content also drives appearance. That made it straightforward to extend the system to AI-generated content — the AI voice and visual profile layer reads the same DNA, so generated output matches the brand automatically without extra styling logic.

Measurable Outcomes

23 templates are fully token-driven (13 detail, 10 page). Zero hardcoded brand colors remain in the codebase — enforced as a project convention, not just a goal. A single database edit now propagates a brand change across all rendering surfaces, including AI-generated content.