Start
Foundations
A compact set of semantic roles makes every surface readable in light, dark, high-contrast, and reduced-motion environments.
Color is semantic
Apps consume roles. The design kit owns their values in both appearances.
--backgroundThe page canvas and default document color.
--surfaceCards, rails, and grouped controls.
--foregroundPrimary text and high-emphasis icons.
--mutedSupporting copy and secondary metadata.
--lineQuiet hairline separation between adjacent regions.
--control-borderA 3:1 boundary for same-canvas inputs and selectors.
--focusThe visible keyboard-focus indicator.
Appearance
Light is the first-visit default; Dark and System remain explicit user choices.
- Put
data-theme="light"on the server-rendered<html>element. - Wrap the app once in
DesignThemeProvider; pass a CSP nonce when the route requires one. - Render
ThemeColorSyncnext to the provider so browser chrome follows the resolved appearance. - Offer
ThemeToggleanywhere appearance is user-visible. It always exposes Light, Dark, and System. - Never encode meaning in a theme-specific literal. Test the same state in both appearances.
Typography
MonoLisa Text carries the interface; MonoLisa Code is reserved for machine-readable material.
The scale favors strong page introductions, compact labels, and comfortable body copy. Use shared text-size and weight roles before inventing a local step. Headings should describe document structure; visual scale does not replace semantic rank.
Display · 56Systems should feel inevitable.
Title · 32One language across every surface.
Heading · 24Structure before decoration.
Body · 16Readable product copy uses a comfortable line height and an honest measure.
Label · 14Interface label and supporting metadata
Caption · 12 monoJUNGLE-DESIGN-TOKEN
.product-heading {
color: var(--foreground);
font: var(--font-weight-medium) var(--text-title) / 1.08 var(--font-text);
letter-spacing: -0.04em;
}
Spacing and shape
A four-pixel base rhythm supports both dense tools and calm reading surfaces.
Use the --space-* scale for relationships, not arbitrary coordinates. Shared controls honor the minimum interactive target even when their visible treatment is compact. Corners stay precise: sharp structure, small utility rounding, and fully rounded control capsules are deliberate categories.
Motion
Movement explains continuity; it never delays input.
Route stages enter from 14px and leave toward 10px over 180ms with the standard easing curve. Only the changing stage moves—the persistent rail does not. All decorative movement collapses under prefers-reduced-motion: reduce, and interactive state remains understandable without animation.