IYU Labs / Design / 02

Graphite, white and cobalt.

Graphite for the first visit. Cool white for light mode. A restrained blue accent marks the next action, with a deeper shade on light backgrounds.

Color follows a role

These values come from the same token source that generates the website styles. The specimen theme is independent of your site theme.

Specimen theme

Changes these specimens only.

A product in progress.

Page, text, supporting text and actions working together. These are the website’s real buttons.

--page

The page background.

#101218

--surface

Contained specimens and editable fields.

#191d26

--text

Headings and body copy.

#f4f6fa

--muted

Supporting text and captions.

#a8b0c0

--accent

The primary action fill.

#8eacff

--accent-ink

Links and visible focus.

#acc2ff

--on-accent

Text on the primary action.

#101827

--line

Grouping and decorative separators.

#303744

--field

Input boundaries.

#77839b

--tint

Project frames and quiet highlights.

#222d48

--danger

Validation and failure text.

#ffb1b8

Check a color pair

ForegroundBackground

Make it readable.

This is body text in the selected color pair.

17.30:1

Passes AA for body text.
Also passes AAA for body text.

WCAG contrast for opaque sRGB colors. Large text means at least 24px regular or approximately 18.7px bold. Borders that identify controls need 3:1; decorative rules do not.

Use the pair, not just the color

Pair accent with on-accent for a filled action. Use accent-ink for links. Use text or muted on page, surface and tint. The line token separates groups; field is the stronger boundary for controls.

Download JSON tokens Download CSS tokens

A theme before the first paint

The root page starts dark. An inline script reads the explicit choice stored under iyu-theme-v1 before paint. ThemeToggle writes that choice and updates the root data-theme attribute. Blocked browser storage keeps the default usable.

Documentation previews use their own data-theme attribute. Their selectors do not change the website preference. Product screenshots retain the product’s actual colors in either site theme.

/* Existing utility aliases in globals.css map to semantic roles. */
@theme inline {
  --color-ink: var(--text);
  --color-paper: var(--page);
  --color-brass: var(--accent-ink);
  --color-brass-soft: var(--tint);
}
/* "brass" is a retained utility name. The current accent is cobalt. */