Foundations

Tokens, made visible.

Every value below is a named token in ds-tokens.css. Swatches read live var(--ds-*) values, so they are always in sync. See Foundations · Colors for the full 10-ramp system, brand-exact stops, and the mapping from every semantic token to its ramp position.

Color model. The system uses 10 tonal ramps: neutral, warm-grey (structure) · red, gold (error, warning) · lime, green, teal, blue, violet, magenta (the 6 M-FISH brand strands). Primary/action = teal by default — the theme builder swaps it for any brand strand. Every semantic role is aliased to a ramp stop and shifted off brand-exact stops so no semantic token equals a brand-bright or brand-deep hex.

Color

ground · ink · primary · categorical spectrum · see Foundations · Colors for status semantics

Ground & ink

Canvas--ds-bg

Sunken / alt--ds-bg-alt

Surface--ds-surface

Raised panel--ds-panel

Ink--ds-ink

Ink dim / body--ds-ink-dim

Muted--ds-muted

Primary — the action color (vivid; teal by default, set in the theme builder)

Primary (fill)--ds-primary

Hover--ds-primary-hover

Ink (AA text/link)--ds-primary-ink

Soft / selected--ds-primary-soft

Hue comparison — the 6 M-FISH strands. Every hex below is a stop from the tonal ramp on the Colors sub-page. Use the Theme builder in the top bar to apply a primary + secondary live across the whole site.

LimeView resultsActive On

GreenView resultsActive On

Teal · defaultView resultsActive On

BlueView resultsActive On

VioletView resultsActive On

MagentaView resultsActive On

Categorical · the 6 M-FISH strands — the design kit's shared spectrum (Docs + SaaS), magenta → lime. Tags / charts / wayfinding — never status.

Magenta--ds-cat-magenta

Violet--ds-cat-violet

Blue--ds-cat-blue

Teal--ds-cat-teal

Green--ds-cat-green

Lime--ds-cat-lime

Spectral accent (heading emphasis) — the full M-FISH strand spectrum, magenta → lime, AA-legible per theme

replicate · detect · excise · validate

Typography

Poppins (UI) · JetBrains Mono (data/code)

display / 30The quick brown fox

h1 / 24The quick brown fox

h2 / 19The quick brown fox

h3 / 16The quick brown fox

body / 14The quick brown fox jumps over the lazy dog

small / 13The quick brown fox jumps over the lazy dog

label / mono 12Eyebrow label

Spacing, radius & elevation

4px base · 8px rhythm

Spacing scale

1 · 4

2 · 8

3 · 12

4 · 16

6 · 24

8 · 32

12 · 48

Radius

xs · 4

sm · 6

md · 8

lg · 12

pill

Elevation (light reads depth from shadow; dark from borders + sheen)

shadow-1

shadow-2

shadow-3

Brand motifs

the genome / immune-system language — used sparingly, never as decoration

What makes this ownable vs. a generic SaaS theme: a small set of motifs from the marketing site's genome / immune-system identity — the banded chromosome (an LST), the green "watched locus", a sequencing loader, and the mono "lab readout" numerals.

Chromosome / brand mark

Sequencing loader

44,827,161

Mono tabular numerals

Surveillance line (watched-locus divider)