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.

Color model — tuned punchy, not pastel. A single vivid primary / action color (teal by default; the theme builder swaps it for any of the 6 M-FISH brand strands — magenta, violet, blue, teal, green, lime). Success stays green, distinct from the primary; error/warning/info stay distinct too.

Color

green = brand & success · red = error · blue = info · neutral = structure

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 (static reference). Use the Theme builder in the top bar to apply a primary + secondary live across the whole site

Teal · SaaSView resultsActive On

Green · DocsView resultsActive On

BlueView resultsActive On

Blue (deep)View resultsActive On

MagentaView resultsActive On

RedView resultsActive On

VioletView resultsActive On

EmeraldView resultsActive On

IndigoView resultsActive On

Status — success · error · warning · info

Success ink--ds-green-ink

Error ink--ds-red-ink

Warning ink--ds-warn-ink

Info ink--ds-info-ink

Danger (fill)--ds-danger

Neon mint (decor)--ds-green-neon

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

SaaS-only extras — not in the design kit; extra hues for denser SaaS data-viz (never used on Docs). Namespaced --ds-cat-saas-*.

Pink--ds-cat-saas-pink

Indigo--ds-cat-saas-indigo

Cyan--ds-cat-saas-cyan

Gold--ds-cat-saas-gold

Orange--ds-cat-saas-orange

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)