Design tokens
Named design decisions (colors, typography, spacing, radius, shadows) exported into code-friendly formats like CSS variables, Tailwind config, or JSON.
What are design tokens? →Semantic color tokens
Tokens named by role (surface, text-muted, border, accent, danger) instead of raw hue, so the same names work across light and dark themes.
How semantic color tokens work →WCAG contrast ratio
A measurement of readability between foreground and background colors, expressed as a ratio from 1:1 to 21:1. Higher ratios mean better readability.
WCAG contrast guarantee →WCAG AA / AAA
Accessibility conformance targets. AA is the practical baseline for most product UIs (4.5:1 for normal text); AAA is stricter (7:1) and often constrains color choices significantly.
WCAG AA vs AAA for UI design →Semantic colors
State/meaning colors like success, warning, danger, and info. They are used consistently across components regardless of brand palette.
Color tokens vs CSS variables
Color tokens are the abstract, named design decisions; CSS variables are one way to implement them in code. A token can also export to Tailwind config or JSON without ever becoming a CSS variable.
CSS variables theme generator →HSL color model
A color model describing color as hue, saturation, and lightness. Easier for humans to reason about than RGB when generating consistent palettes or shade ramps.
OKLCH color model
A perceptually uniform color space (lightness, chroma, hue) where equal numeric steps look like equal visual steps. Useful for generating accessible shade ramps that don't shift unexpectedly in perceived brightness.
Design system
A shared set of tokens, components, and patterns used across a product so teams build consistent, accessible UI without re-deciding the same details every time.
SaaS design system guide →Atomic design
A methodology that organizes UI into atoms (colors, type, spacing), molecules (small components), organisms (composed sections), templates, and pages.
Vibe
A high-level style preset that guides the generator’s choices (palette character, typography mood, density, and overall UI feel).
Direction
A controlled variation inside a Vibe that pushes the look in a specific art direction while staying recognizable and coherent.
Preset
A saved configuration you can reuse later (e.g. a palette + typography + settings snapshot).
Preview
A real UI layout used to validate that tokens work in context (surfaces, borders, typography hierarchy, component states), not just as swatches.
Theme templates →Export
The output you copy into a project: CSS variables, Tailwind theme extension, JSON tokens, or shadcn/ui-oriented variables. The goal is production usage without ChromUI running.
Exports hub →Design token JSON
A portable, framework-agnostic export format for tokens (often nested by category: color, typography, spacing) that other tools or build pipelines can consume.
Design tokens JSON export →Tailwind theme extension
Custom colors, spacing, or other values added to Tailwind's config under `theme.extend`, so generated tokens become usable utility classes.
Tailwind theme export →shadcn/ui theme variables
CSS variables following shadcn/ui's naming convention (background, foreground, primary, muted, border, etc.) so generated tokens drop into shadcn-based components.
shadcn/ui export →Dark mode token pairing
Generating a light and dark theme together from the same semantic roles, so surfaces, text, and accents stay consistent in meaning across both modes instead of being re-picked independently.
Surface color
A token role for backgrounds at different elevations (page, card, panel, popover), used to create visual separation between layered UI elements.
Muted text
A lower-emphasis text color token used for secondary labels, metadata, and captions. A common accessibility failure point because it's often pushed past readable contrast for visual quietness.
Accent color
The token used for primary actions and highlights (buttons, links, active states) that needs to stay visible against multiple surface colors.
Color palette generator
A tool that produces a set of colors, typically from a seed color, harmony rule, or style preset. The starting point before tokens, accessibility checks, or exports.
Accessible color palette generator →Color harmony
Relationships between hues on the color wheel (complementary, analogous, triadic) used as a starting rule for generating palettes that feel cohesive.
UI color system
The full structure of how color is organized in a product: backgrounds, surfaces, text, borders, states, and dark mode, not just a brand palette.
UI color systems guide →