Themes & Design DNA

A portable visual language.

Design DNA defines the tokens shared by the live preview, Visual Review, generated CSS, and framework packages.

Theme selectors

The generated stylesheet includes light and dark palettes. Apply a class or data attribute to the document root or to a subtree.

<html data-theme="dark">
  <body>...</body>
</html>

<!-- Class selectors are supported too -->
<section class="light">...</section>

Token groups

Core colorsBackground, surfaces, text, borders, accent, and muted content.

Semantic colorsSuccess, warning, danger, and information colors with foreground pairs.

InteractionFields, placeholders, focus rings, selection, and disabled states.

TypographyFont stacks, size scale, line heights, and mono fallback.

Shape & elevationCard and form radii, pill shapes, shadows, and focus elevation.

MotionShared durations, easing, and reduced-motion behavior.

Install generated globals.css

Download or copy the stylesheet from Design DNA. Load it after your reset or framework base stylesheet so the generated tokens remain available to application styles.

/* app entry stylesheet */
@import './reset.css';
@import './globals.css';

.product-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--surface);
  color: var(--foreground);
  box-shadow: var(--shadow-sm);
}

Keep both modes.

Even if a product launches in one mode, retaining both generated palettes prevents later theme work from becoming a breaking token migration.