Four pillars, one personality tic
The system is flat, calm, and restrained, with a single Memphis-flavored signature: the chunky offset stamp that appears when you press a button. Restraint with a personality tic.
Trustworthy
Every element earns trust. Full borders, honest numbers, transparent service framing.
Scientific
Mono labels, structured grids, exact numbers. PhD-led interpretation reflected in every detail.
Warm
We test homes, not patients. Cream paper, never hospital white. Approachable, human, never clinical.
Consistent
Store and website share one token dialect, byte-for-byte. Change one, backport to the other.
Cream paper, navy ink, one green stamp
Brand green is held in reserve for CTAs and decisive accents. Per-category hues identify, they don't dominate, and they never leave their own sections.
The Brand Green
Readable green: the text tokens
Bright brand green fails WCAG AA as small text on cream. Green text on light surfaces always uses the darkened tokens; both revert to the bright green in dark mode (already ~10:1 there).
Structure · theme-aware ink & paper
Headings, borders, stamp shadows. The structural ink.
Body copy.
THE page surface. Never sterile white.
Elevated surfaces only: cards, drawers, modals.
Reserved for dark-mode depth.
Test Categories · "Earthy Natural"
Chosen 2026-06-09 so Mold, Water, and Drug Residue no longer collide in the blue-purple range. The store runs five worlds (Mold & Mycotoxins merged); the website keeps a sixth moss token for mycotoxin content.
Category banner meshes are always-dark: the hue is blended toward fixed navy and never inverts. Text on a mesh uses cream-fixed.
Supporting
Opt-in only, semantic inversion
Dark mode activates only via the header toggle (data-theme="dark", persisted to localStorage). System prefers-color-scheme is deliberately ignored; light is BioDwell's first impression.
Charcoal body copy. White cards. Bright green stamps.
Warm-gray body. Elevated #181F2D cards. Lifted green.
| Token | Light | Dark | Meaning |
|---|---|---|---|
| --color-bd-navy | #1A1F2E | #EAE4D4 | the ink: structure, headings, borders |
| --color-bd-charcoal | #32373C | #B5AFA9 | body copy |
| --color-bd-cream | #FAF8F5 | #0D121B | the paper: page background |
| --color-bd-white | #FFFFFF | #181F2D | elevated surface |
| --color-bd-green | #33CC66 | #3ED878 | the stamp — shipped both repos 2026-06-12 |
| --color-navy-fixed / --color-cream-fixed | never flip | video scrims, footers, text-on-green | |
Product photos get filter: brightness(0.95) saturate(0.95) in dark mode. Every UI change ships with a verified dark-mode pass; both modes are real.
Three faces, three jobs
A printed title plate, a fountain-penned paragraph, a stenciled stamp underneath.
All h1–h5. Line-height 1.05, tracking −0.015em. Headlines set one word in italic <em> for emphasis ("Know what's in"). The .mega scale reaches clamp(2.75rem, 13vw, 13rem).
Everything else: body at 1rem/1.6, buttons at 600, titles at 600/1.125rem. Cap line length at 65–75ch. Titles use sans, not serif; serif at title scale reads decorative.
Mono-as-Stencil rule: eyebrows, lab numbers, kit IDs, category tags, stat sources. Never body copy, never CTA labels, never headlines; anything else is costume.
The Section Cadence
Then body copy in DM Sans carries the substance. Every section that introduces a new topic runs this cadence: eyebrow → headline → body. The eyebrow is a section badge, not scaffolding; don't repeat it above every block.
store eyebrow carries the 8px green dot · website version uses surface modifiers (--on-dark mixes to 78% cream)
Font loading: the store self-hosts all three faces as woff2 (variable). The website still loads static weights from Google Fonts; close the parity gap when touched.
Never: Plus Jakarta, Inter, Anton, or any generic AI-tool face. The brand owns these three.
Flat at rest, stamped on action
No diffuse drop shadows. No glassmorphism. Surfaces sit on the cream paper with full borders or nothing; depth arrives only when you act on something.
Cards: 2px navy border, 18px radius, then translate(-4px,-4px) + 8px 8px 0 navy on hover. Buttons go −8px/10px. Chips use the 4px small stamp.
Same gesture, inverted ink: the shadow is cream (10px 10px 0 #FAF8F5) when the surface is navy-fixed.
box-shadow: 0 4px 24px rgba(0,0,0,.12) belongs to a different design system. If a hover needs more weight, deepen the offset, never add blur.
Stamp-On-Action rule: the offset shadow responds to hover and focus. A surface wearing it at rest reads as a clip-art badge.
The shared vocabulary
Building blocks that mirror byte-for-byte between the store and the website.
Sticker & markers
Product card anatomy
City Water — Citycheck Deluxe
Circular photo + category-colored ring + wash background. Stars are gold #F4B400. Photography-forward: real kit photos, never abstract CSS art.
Inputs
Cream surface, 2px navy border, 10px radius. Focus = 3px navy outline at 3px offset (same treatment as buttons). Error = #dc2626 border + message below.
Promo bar
Navy-fixed bar, cream text, green code. 44px close target, session-dismissed. The exit-intent popup must never stack with the cookie banner.
Hero pattern (store): full-bleed autoplay video under a navy-fixed gradient scrim, sticker badge, italic-accent headline, two CTAs, credibility card, and a 44px pause control on every video (WCAG 2.2.2). Category icons: Icons8 3D Fluency set at /icons/icon-<cat>-3d.png; UI icons stay inline SVG line icons, stroke-width 2.
Deliberate, manual, stamped
Motion sells the hand-stamped promise: short, decisive, exponential ease-out. Nothing floats aimlessly.
WCAG AA, verified in both modes
The 2026-04 audit fails are resolved: green-on-light text tokens shipped, button text pinned navy-on-green, video pause controls and reduced-motion live.
Touch targets
All interactive elements ≥ 44×44px, including video pause, promo close, chat send.
Focus visible
Global: 3px green outline at 3px offset. Buttons: lift + stamp + 3px navy (cream on dark). Keyboard-only via :focus-visible.
Skip link & reflow
Visible on Tab. Page uses overflow-x: clip so 400% zoom reflow survives (WCAG 1.4.10).
The laws of the notebook
Each of these exists because something broke or drifted without it.
The One Stamp Rule
Green is the rubber stamp: primary CTA, eyebrow dot, decisive accents. One or two green elements per page; never a green section, headline, or background.
The Theme-Fixed Exception
Theme-fixed surface → theme-fixed text. bd-navy flips to cream-tan in dark mode; on green that's 1.3:1 and unreadable. Pin with navy-fixed/cream-fixed.
The Per-Category Quarantine
Category hues live inside their own sections, never on global chrome. The shop's category nav is the single named exception. Never two hues in one section unless it's an explicit comparison.
Stamp-On-Action / No-Diffuse
The offset shadow answers hover and focus, never decorates rest states. Blur shadows are banned everywhere; deepen the offset instead.
Mono-as-Stencil / Eyebrow Hierarchy
Mono is stamped on top of warmth: labels, IDs, eyebrows only. The eyebrow→headline→body cadence opens sections; it isn't repeated as scaffolding.
Light is the first impression
Dark mode is a deliberate user opt-in, not a system default, and every change is verified in both modes before it ships.
Voice & framing
Do
- "Know what's in your home" · direct, personal
- "Every result, read and interpreted in writing by Dr. Mark Arvin's team" · the service IS the product
- "Lab tests anyone can mail order" · plain-language confidence
- "Shop tests", "Find your test" · calm verbs, no pressure
Don't
- Clinical/healthcare framing: no PHI, HIPAA, or clinician-referral language. We test buildings.
- Drop the word "service": it's never just a lab report
- Position the customer as an inspector: sample collection only, no meters or cameras
- Health-outcome attribution, fear-mongering all-caps warnings, "Buy Now"
Also banned: emojis in UI, gradient text, colored accent stripes thicker than 1px, em dashes in site copy, hand-authored illustrative SVG that hasn't been rasterized and honestly evaluated.
The canonical token block
Mirrors the live source of truth: biodwell-astro-v4/src/styles/global.css (store) and biodwell.com/apps/web/src/styles/global.css (website).
/* ═══ BioDwell Design Tokens v2.0 — 2026-06 ═══ */
@theme {
/* Brand core — semantic, INVERT in dark mode */
--color-bd-green: #33CC66; /* canonical logo green — shipped both repos 2026-06-12 */
--color-bd-navy: #1A1F2E; /* the ink */
--color-bd-charcoal: #32373C; /* body copy */
--color-bd-cream: #FAF8F5; /* the paper */
--color-bd-white: #FFFFFF; /* elevated surfaces */
/* Fixed — identical in both modes */
--color-navy-fixed: #1A1F2E;
--color-cream-fixed: #FAF8F5;
--color-charcoal-fixed: #32373C;
/* Accessible green text (light surfaces; revert to bright in dark) */
--color-bd-green-text: #1B7232; /* 5.7:1 on cream, AA */
--color-bd-green-accent: #2A8C44; /* 4.0:1, AA Large */
/* Derived */
--color-bd-green-tint: color-mix(in srgb, var(--color-bd-green) 85%, #FFFFFF);
--color-bd-green-shade: color-mix(in srgb, var(--color-bd-green) 88%, #1A1F2E);
--color-bd-navy-deep: color-mix(in srgb, #1A1F2E 70%, #000000);
/* Category — "Earthy Natural" (2026-06-09) */
--color-water: #44749D; /* steel blue */
--color-drugs: #8A6BA8; /* plum */
--color-allergen: #C99A3B; /* ochre */
--color-mold: #5B8A5A; /* sage */
--color-radon: #BC5B3C; /* terracotta */
/* website also carries: --color-category-mycotoxin: #4F6F3C (moss) */
/* per-category washes: color-mix(in srgb, 12%, #FFFFFF) — 20% toward #181F2D in dark */
/* Status */
--color-bd-amber: #B07A1F; /* #FCD34D in dark */
--color-star: #F4B400;
--color-error: #991b1b; --color-error-border: #dc2626;
/* Type */
--font-display: 'DM Serif Display', Georgia, serif;
--font-body: 'DM Sans Variable', 'DM Sans', -apple-system, sans-serif;
--font-mono: 'JetBrains Mono Variable', 'JetBrains Mono', 'SF Mono', Menlo, monospace;
/* Radius */
--radius-sm: 10px; --radius-md: 16px; --radius-lg: 20px; --radius-pill: 999px;
/* Motion */
--duration-fast: 160ms; --duration-base: 220ms; --duration-enter: 320ms;
--easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
/* Lift & Ring: 0.28s cubic-bezier(0.16, 1, 0.3, 1) */
/* Offset stamps — reference bd-navy so they auto-invert */
--shadow-offset: 6px 6px 0 var(--color-bd-navy);
--shadow-offset-sm: 4px 4px 0 var(--color-bd-navy);
}
/* Dark mode — opt-in only via html[data-theme="dark"] (header toggle) */
:root[data-theme="dark"] {
--color-bd-navy: #EAE4D4; /* ink goes warm cream-tan */
--color-bd-charcoal: #B5AFA9;
--color-bd-cream: #0D121B; /* paper goes deep blue-black */
--color-bd-white: #181F2D;
--color-bd-green: #3ED878; /* green lifts */
--color-bd-green-text: #3ED878;
--color-bd-green-accent: #3ED878;
--color-bd-amber: #FCD34D;
color-scheme: dark;
} Layout: .container-wide 1440px · .container-narrow 960px · .section clamp(3rem, 6vw, 6rem) · website header 90px. Full written canon: Brain → projects/biodwell-ecommerce/design-system.md.