Skip to content
Hue by Hue

Design system

Every token and component, rendered live with the active brand theme and color mode. Switch them here to preview; sites set their brand once in site.config.ts.

Color mode
Compact version

How it's organized

Three layers, from raw to specific.

  1. Raw values

    The palette, the type scale and the spacing unit, with plain names and no meaning yet.

  2. Roles

    Names that say what something does, like background, primary and border. Components only use these.

  3. Themes

    Each project points the roles at its own values, which is how one system looks like many sites.

Raw colors

Every raw color, named by hue and step. Components never use these directly, but a theme can add its own.

neutral
50
100
200
300
400
500
600
700
800
900
950
red
50
100
200
300
400
500
600
700
800
900
950
orange
50
100
200
300
400
500
600
700
800
900
950
amber
50
100
200
300
400
500
600
700
800
900
950
green
50
100
200
300
400
500
600
700
800
900
950
teal
50
100
200
300
400
500
600
700
800
900
950
blue
50
100
200
300
400
500
600
700
800
900
950
violet
50
100
200
300
400
500
600
700
800
900
950
pink
50
100
200
300
400
500
600
700
800
900
950

Color roles

Roles, not values. Every component uses only these, and each theme points them at different raw colors. Values here follow the current theme and color mode.

Surfaces

Backgrounds that hold content. Each has a matching foreground for text on it.

  • Aa
    --background--foreground

    The page.

    …

  • Aa
    --card--card-foreground

    Raised containers: cards, list rows.

    …

  • Aa
    --popover--popover-foreground

    Floating layers: menus, selects, dialogs, toasts.

    …

  • Aa
    --muted--muted-foreground

    Quiet fills: tab lists, table footers, empty states.

    …

  • Aa
    --document--document-foreground

    Long-form content on a page-like surface.

    …

  • Aa
    --wash--wash-foreground

    Dark wash over a photo, for text placed on it.

    …

Actions

Things people press. Primary is the one main action per view.

  • Aa
    --primary--primary-foreground

    Main buttons, checked controls, links, progress.

    …

  • Aa
    --secondary--secondary-foreground

    Secondary buttons and less prominent fills.

    …

  • Aa
    --accent--accent-foreground

    Hover and highlight states for ghost/outline items.

    …

Feedback

Meaning, always paired with an icon or text, never color alone.

  • Aa
    --destructive--destructive-foreground

    Errors and irreversible actions.

    …

  • Aa
    --success--success-foreground

    Completed or valid states.

    …

Lines & focus

Structure and keyboard focus.

  • --border

    Decorative dividers and container edges.

    …

  • --input

    Form control edges (3:1 against the page).

    …

  • --ring

    Focus indicator (3:1 against the page).

    …

  • --overlay

    Scrim behind dialogs.

    …

  • --brand-mark

    Decorative mark beside the wordmark (3:1 against the page).

    …

  • --document-rule

    Rule across the top of a document surface.

    …

  • --wash-ring

    Focus indicator on photos (3:1 against the wash).

    …

Charts

Series colors meet 3:1 against cards and the page. Lines also differ by dash and marker.

  • --chart-1

    Series 1

    …

  • --chart-2

    Series 2

    …

  • --chart-3

    Series 3

    …

  • --chart-4

    Series 4

    …

  • --chart-5

    Series 5

    …

  • --chart-grid

    Grid lines and axis lines.

    …

  • --chart-axis

    Axis labels (text contrast).

    …

  • Aa
    --chart-tooltip--chart-tooltip-foreground

    Tooltip surface.

    …

Status

Project lifecycle states used by StatusBadge.

  • Aa
    --status-idea--status-idea-foreground

    Idea

    …

  • Aa
    --status-building--status-building-foreground

    Building

    …

  • Aa
    --status-testing--status-testing-foreground

    Testing

    …

  • Aa
    --status-retired--status-retired-foreground

    Retired

    …

Contrast

Every text and control pair, checked against WCAG AA for the current theme and mode. The same check runs on every theme in light and dark, and a miss fails the build.

Calculating contrast…

Typography

Type styles by role, then the font roles and the raw scale. Themes set one size for phones and one for desktop.

  • type-display · --display-*

    A sample of this style

    Home hero headline.

  • type-h1 · --h1-*

    A sample of this style

    Page title.

  • type-h2 · --h2-*

    A sample of this style

    Section heading.

  • type-h3 · --h3-*

    A sample of this style

    Card and sub-section heading.

  • type-body · --body-*

    A sample of this style

    Running text.

  • type-small · --small-*

    A sample of this style

    Small print and captions.

  • type-eyebrow · --eyebrow-*

    A sample of this style

    Short label above a heading.

  • font-sans · --font-body

    Sphinx of black quartz, judge my vow

    Body copy and UI.

  • font-heading · --font-display

    Sphinx of black quartz, judge my vow

    Headings (with --heading-weight and --heading-tracking).

  • type-h3 · --font-subheading

    Sphinx of black quartz, judge my vow

    H3 and smaller headings.

  • font-mono · --font-code

    Sphinx of black quartz, judge my vow

    Code, numbers in tables.

  • text-xs · --type-size-xs

    The quick brown fox

  • text-sm · --type-size-sm

    The quick brown fox

  • text-base · --type-size-base

    The quick brown fox

  • text-lg · --type-size-lg

    The quick brown fox

  • text-xl · --type-size-xl

    The quick brown fox

  • text-2xl · --type-size-2xl

    The quick brown fox

  • text-3xl · --type-size-3xl

    The quick brown fox

  • text-4xl · --type-size-4xl

    The quick brown fox

  • text-5xl · --type-size-5xl

    The quick brown fox

Spacing

One base unit, and every space is a multiple of it. Controls are at least 44 by 44 pixels, big enough for a thumb.

  • 1 × --space-unit
  • 2 × --space-unit
  • 3 × --space-unit
  • 4 × --space-unit
  • 6 × --space-unit
  • 8 × --space-unit
  • 12 × --space-unit
  • 16 × --space-unit
  • tap · --space-tap-target

Shape and elevation

Corner radius comes from one value, and a theme can set it to zero for square corners. Shadows show what sits above what.

  • rounded-xs--radius × 0.25
  • rounded-sm--radius × 0.5
  • rounded-md--radius
  • rounded-lg--radius × 1.5
  • rounded-xl--radius × 2
  • rounded-control--shape-control
  • rounded-surface--shape-surface
  • rounded-pill--shape-pill
  • shadow-control--elevation-control

    Buttons and inputs.

  • shadow-raised--elevation-raised

    Cards.

  • shadow-lifted--elevation-lifted

    Hovered cards, docked bars.

  • shadow-overlay--elevation-overlay

    Dialogs, menus, toasts.

  • drop-shadow-cutout--elevation-cutout

    Cutout images (a filter, follows the shape).

Motion

Durations and easing curves. All of it switches off when someone asks their device for less motion.

  • --motion-fastSmall state changes: hover, press.
  • --motion-baseDefault for transitions.
  • --motion-slowLarger movements: panels, dialogs, page transitions.
  • --motion-ambientOne cycle of a slow ambient loop. Loops stop on their own.
  • --motion-staggerDelay between items animating in sequence.
  • --motion-easingMost movement.
  • --motion-easing-enterThings arriving.
  • --motion-easing-exitThings leaving.
  • --motion-easing-settleA small overshoot: landing, press spring-back.

Every transition uses --motion-base and --motion-easing by default. With prefers-reduced-motion: reduce, motion tokens collapse to 0ms and animations are switched off globally. Charts read the same preference in JavaScript.

Components

Buttons, forms, tabs, cards, overlays, badges and more. Styled through tokens only, so a theme change restyles all of them.

Button

Default and large sizes meet the 44 × 44 tap target. Use small only in dense, pointer-first layouts.

Input, Textarea, Label

Enter an email address like name@example.com.

Checkbox, Radio group, Switch, Select

Plan

Tabs

Default tabs: the active tab is a raised chip.
Line tabs: the active tab is underlined.

Card

Weekend experiment
A small idea, tested in public.
Testing
Cards use the surface radius, the raised elevation and the card colors from the active theme.

Dialog and Toast

Badge and StatusBadge

DefaultSecondaryOutlineDestructive
IdeaBuildingTestingRetired

Status names are fixed and generic (idea, building, testing, retired). Themes restyle them through the --status-* tokens; each state also has its own icon.

SegmentedControl

A radio group in a pill: arrow keys move between options, and the selected option has a fill and shadow, not only a color. Disabled options stay readable so a note can say why.

FileDropzone

Upload files

Drag files here or choose them.
PNG, JPG or PDF · up to 5.0 MB each · max 3 files

UI only: uploads here are simulated. Files over 2 MB fail part-way to show the error state; wrong types and files over 5 MB are rejected before upload.

Charts

Charts use the chart colors, a written summary and a data table, and series differ by pattern as well as color.

Line chart

Weekly sessions by experimentAll three experiments grow over six weeks. A leads throughout, peaking at 240 in week 5; B closes the gap to 210 by week 6; C roughly doubles from 40 to 104.

Bar chart

Visits and sign-ups by channelSearch brings the most visits (420), but email converts best: 44 sign-ups from 180 visits.

How it grows

When a project needs something the system doesn't have, I build it inside that project first. Once three or more projects use it, I think about moving it here. That keeps the system small, and every part of it earned.