Color model — tuned punchy, not pastel. A single vivid primary / action color (brand teal by default; pick a different hue below). Success stays green, distinct from the primary; error/warning/info stay distinct too. The spectral rainbow is expanded into a 9-hue categorical palette for tags / wayfinding / data-viz. Tints are deepened and lines strengthened so nothing reads washed-out — yet every pair still passes WCAG AA (see the Accessibility page).

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; current default = teal)

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 (default)Run recipeView resultsActive On

GreenRun recipeView resultsActive On

CobaltRun recipeView resultsActive On

AzureRun recipeView resultsActive On

MagentaRun recipeView resultsActive On

CrimsonRun recipeView resultsActive On

VioletRun recipeView resultsActive On

Deep emerald (rec.)Run recipeView resultsActive On

IndigoRun recipeView 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 rainbow — 9 hues from the spectral gradient (tags / charts / wayfinding — never status)

Pink--ds-cat-pink

Magenta--ds-cat-magenta

Violet--ds-cat-violet

Indigo--ds-cat-indigo

Cobalt--ds-cat-blue

Azure--ds-cat-cyan

Teal--ds-cat-teal

Gold--ds-cat-gold

Orange--ds-cat-orange

Spectral accent (heading emphasis — recomposed from the rainbow, 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)

---