INTERFACE STYLES / DESIGN LANGUAGE

A familiar foundation.
For something new.

The visual language of Interface Styles, collected in one place. Explore the palette, type, and small details that make a working interface feel calm and coherent.

01 / Grounded

Deep violet anchors navigation and primary actions.

02 / Clear

Subtle borders and layered surfaces give content structure.

03 / Adaptable

Light and dark palettes preserve the same visual rhythm.

02 / PALETTE

Colors with a purpose

light palette

These CSS variables capture the editor’s palette. Change appearance in the top bar to inspect either theme. Click any swatch to copy its current value.

Violet & feedback

Surfaces & text

Token badges

03 / TYPOGRAPHY

System type. Precise hierarchy.

Native system fonts keep the interface quick and familiar. Monospace distinguishes token paths and technical values.

Page title · 26px / 650 / −0.7px

A place for every detail

Dialog title · 20px / 700 / −0.4px

Edit your collection

Interface text · 13px / 400 / 1.45

Small decisions make a coherent whole.

Supporting text · 11px

Useful context, quietly presented.

Token path · 12px / monospace

color.brand.primary → #5436a4

Font stacks

--mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
--sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Helvetica, Arial, sans-serif;

04 / COMPONENTS

The everyday building blocks

The same button, field, badge, and icon styles used in the editor. Hover, tab, and type to explore their interaction states. These examples stay on this page.

Actions

6px corners · visible keyboard focus

Fields

Token name

Validation exampleUse lowercase names, such as color.brand.

Semantic badges

colorstringdimensionshadowbordergradientdurationcubicBezier

Tinted backgrounds, fine borders, descriptive labels.

Feedback

Changes saved

Review before continuing

Something needs your attention

Interface icons

layers

folder

file

search

plus

copy

undo

redo

settings

info

check

trash

24 × 24 viewBox · 1.7px stroke · rounded caps and joins

05 / GEOMETRY

Soft edges. Consistent spacing.

Corner radii

--radius-sm6px

--radius-md8px

--radius-lg12px

Recurring spacing

4px

8px

12px

16px

24px

28px

From field gaps to dialog padding; values used throughout the UI.

06 / USE WITH AI

Build with these styles

The style system is two plain CSS files, so people and AI models can use it without a build step. Give a model this section (or the brief at the bottom) and it has everything it needs: files, setup, what each token is for, component markup, and the rules to follow.

1 / Files

File	What it holds
`tokens.css`	Design tokens only: CSS custom properties for every theme variant, in light and dark. The single source of truth for color, radius and fonts.
`styles.css`	Reusable component classes plus this page's layout. Reads tokens with `var(--token)`; contains no color values.
`index.html`	This guide, with the theme switcher script. A working example of every token and component.

2 / Set up

Link both files (tokens first), then choose a variant and an appearance on the <html> element. Appearance is light or dark; follow the system setting with matchMedia("(prefers-color-scheme: dark)"). Every variant ships both appearances.

Name	`data-variant`	Character
Violet & Mist	`violet-mist` (default; omit the attribute)	Deep violet, cool lilac surfaces
Sand & Clay	`sand-clay`	Warm paper surfaces, espresso chrome, terracotta accent
Moss & Fern	`moss-fern`	Sage surfaces, forest chrome, fern-green accent
Mono & Signal	`mono-signal`	Neutral grays, near-black chrome, one orange signal color
Midnight & Gold	`midnight-gold`	Ivory surfaces, navy chrome, gold highlights
Ocean & Foam	`ocean-foam`	Pale foam surfaces, sea-blue chrome, cyan-teal accent
Rose & Plum	`rose-plum`	Blush surfaces, plum chrome, rose accent

<!doctype html>
<html lang="en" data-variant="sand-clay" data-theme="light">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="tokens.css" />
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>...</body>
</html>

/* Omit data-variant for the base Violet & Mist variant. */

3 / Which token for what

Role	Tokens	Use for
Surfaces	`--bg-0` `--bg-1` `--bg-2` `--bg-3` `--bg-hover`	Page (0), cards, menus and dialogs (1), inputs and code blocks (2), secondary buttons and selected fills (3), hover over those (hover). Also `--sidebar-bg`, `--table-header-bg`, `--row-hover`.
Text	`--fg-0` `--fg-1` `--fg-2` `--fg-3`	Headings and body (0), secondary text (1), labels and captions (2), fine print (3). All four meet 4.5:1 on every `--bg-*` surface.
Borders	`--border` `--border-strong` `--border-control`	Dividers and card edges (decorative), emphasis and dashed edges, then borders of inputs and buttons (meets 3:1, use it for any control edge).
Brand	`--primary` `--primary-hover` `--accent` `--accent-weak` `--on-primary-muted`	Filled buttons and the active row, always with white text (`--on-primary-muted` for secondary text on them). `--accent` for links, focus outlines and selected text. `--accent-weak` is a tinted background that `--accent` text sits on.
Status	`--danger` `--danger-weak` `--warn` `--ok`	Errors, warnings, success. Always pair with an icon or text; never color alone.
Top bar	`--chrome` `--chrome-border` `--chrome-focus` `--chrome-surface` `--on-chrome`	The dark navigation bar and the controls in it only.
Badges	`--type-<kind>-bg\|fg\|border`	Kinds: color, string, dimension, shadow, border, gradient, motion. Use through `.type-badge.<kind>`.
Effects	`--focus-ring` `--shadow-xs\|md\|lg\|tooltip` `--backdrop`	Input focus halo, elevation for menus, dialogs and tooltips, and the dialog overlay.
Geometry and type	`--radius-sm\|md\|lg` `--sans` `--mono`	6, 8 and 12px corners; system sans for UI, monospace for tokens and code. Spacing has no tokens: use 4, 8, 12, 16, 24 or 28px.

4 / Components

Reuse these classes instead of restyling. Hover, focus and disabled states are built in.

<!-- Buttons: .btn, .btn.primary, .btn.danger -->
<button class="btn primary">Save</button>
<button class="btn">Cancel</button>
<button class="btn danger">Delete</button>

<!-- Field with a visible label and an error tied to the input -->
<div class="field">
  <label for="name">Token name</label>
  <input id="name" class="invalid" aria-invalid="true" aria-describedby="name-err" />
  <span id="name-err" class="error">Use lowercase names.</span>
</div>

<!-- Badge: .type-badge + color | string | dimension | shadow | border | gradient | duration -->
<span class="type-badge color">color</span>

<!-- Card: compose from tokens (no card class) -->
.card {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  color: var(--fg-0);
}

Other reusable pieces in styles.css: .tabs/.tab, .cmenu, .modal-backdrop/.modal, .toast, kbd and .icon. Icons are inline SVG, 24 × 24 viewBox, 1.7px stroke, round caps. Classes starting with .guide- belong to this page; don't reuse them.

5 / Rules

Use var(--token) for every color. Never write a hex value, and never copy a variant's values into new CSS.
Use tokens only in the pairings above. Don't put --fg-* text on --primary, or --accent text on a --bg-* you haven't checked.
Everything must work in light and dark and in every variant. Switch data-variant and data-theme to test.
Meet WCAG 2.2 AA: 4.5:1 text, 3:1 control edges and focus outlines, visible :focus-visible, labels on every field, keyboard operation, and targets of at least 24 × 24px.
Prefer semantic HTML (button, a, label, headings) over ARIA.
Don't invent tokens. If one is missing, add it to every variant (light and dark) in tokens.css, then run node scripts/check-contrast.mjs.

6 / Prompt to paste

Copy this into an AI assistant before asking it to build an interface.

Build the UI with the "Interface styles" design system.
- Include tokens.css, then styles.css. Set <html data-variant="VARIANT" data-theme="light">
  (variants: violet-mist, sand-clay, moss-fern, mono-signal, midnight-gold, ocean-foam, rose-plum).
- Style only with var(--token) values from tokens.css. No hex colors, no new tokens.
- Surfaces: --bg-0 page, --bg-1 cards/dialogs, --bg-2 inputs. Text: --fg-0 to --fg-3.
  Control borders: --border-control. Buttons/active rows: --primary with white text.
  Links and focus: --accent. Status: --danger, --warn, --ok, always with an icon or text.
- Reuse .btn, .field, .type-badge, .tabs, .cmenu, .modal and .toast from styles.css.
- Radii: --radius-sm/md/lg. Fonts: --sans, --mono. Spacing: 4, 8, 12, 16, 24, 28px.
- Meet WCAG 2.2 AA in light and dark: visible focus, labelled fields, keyboard access.

A familiar foundation.For something new.