BioDwell Design System

Design Principles

Every design decision at BioDwell should reflect these four pillars.

Trustworthy

Every element earns trust. Clean layouts, certified badges, transparent information.

Scientific

Precision in data, clarity in results. PhD-led analysis reflected in every detail.

Warm

We test homes, not patients. Approachable, human, never clinical or cold.

Consistent

One system, everywhere. Store, app, emails, marketing — always recognizably BioDwell.

Color System

Our palette balances scientific authority with natural warmth.

Core Brand

BioDwell Green

#33CC66

Primary action, growth, trust. CTAs, links, success states.

Charcoal

#32373C

Primary text, secondary buttons, footer background.

Deep Navy

#1A1F2E

Hero backgrounds, premium sections, dark mode base.

Warm Cream

#FAF8F5

Alt backgrounds, warm sections. Avoids sterile white.

Green Scale

50

100

200

300

400

500

600

700

800

900

Test Categories

Water

#3B82F6

Drugs

#8B5CF6

Allergen

#F59E0B

Mycotoxin

#10B981

Mold

#6366F1

Radon

#EF4444

Semantic

Success

#10B981

Warning

#F59E0B

Error

#EF4444

Info

#3B82F6

Typography

Two fonts. One for personality, one for clarity.

Display — Headlines & Titles

DM Serif Display

Used for hero headlines, section titles, and feature callouts. Adds warmth and gravitas — feels scientific but not sterile. Pairs biodwell.com's authority with editorial elegance.

Heroes Section Titles Marketing

Body — UI & Content

DM Sans

Used for everything else — body text, buttons, navigation, labels, product descriptions. Geometric, clean, highly legible. Compatible with biodwell.com's existing system font approach but with more character.

Buttons Navigation Body Text

Type Scale

4xl 42px What's Really In Your Home?

3xl 30px How It Works

2xl 24px Bundle & Save

xl 20px Water — Citycheck Deluxe

base 16px Lab-certified test kits shipped to your door with expert analysis.

sm 14px Standard 5-day turnaround with expert consultation.

xs 12px WATER • 10-12 DAY TURNAROUND

Components

Reusable building blocks for every BioDwell interface.

Buttons

Rule: Green = primary action (buy, submit, confirm). Charcoal = secondary action (add to cart, save). Ghost = tertiary (details, learn more). Max 1 green button per section.

Badges & Tags

Water Drugs of Abuse Allergen Mycotoxin Mold Radon

Best Seller Rush Available Out of Stock New

Product Card

Best Seller

Water

City Water — Citycheck Deluxe

Our most thorough city water testing with 115+ analytes.

$295 per kit

Rush

Drugs of Abuse

Full Panel (Rush)

17-drug panel with priority 1-day rush processing.

$895 per kit

Allergen

Indoor Allergens — 14 Panel

Most comprehensive allergen panel with pollen detection.

$899 per kit

Trust Badges

EPA-Compliant Labs

Secure & Confidential

1-5 Day Results

Accuracy Guaranteed

Form Inputs

First Name

Email

Promo Code

Spacing & Radius

Consistent spacing creates rhythm. Consistent radius creates identity.

Spacing Scale

4

Inline element gap

8

Tight spacing

12

Label to input

16

Card padding (small)

24

Card padding, grid gap

32

Section inner padding

48

Section gap

64

Section vertical padding

Border Radius

3px

bd

Buttons, inputs, cards

8px

bd-md

Form groups, panels

12px

bd-lg

Feature cards, sections

50px

bd-pill

Badges, pills, tags

Ecommerce Components

Core patterns for the shopping experience.

Navigation Header

FREE SHIPPING on orders over $500 — Lab-certified results you can trust

BioDwell

Home About Us Services Shop Contact

biodwell.com > Shop

Rules: Promo bar = charcoal-600 bg. Header sticky on scroll. Search & cart buttons min 44x44px (WCAG touch targets). Cart count badge = green circle. Active nav link = charcoal + font-semibold.

Toast Notifications

Added to cart — Water Citycheck Deluxe

Check your inbox for code WELCOME10!

Please enter a valid email address

Rules: Fixed bottom-center. Pill shape. Charcoal bg for success, red for errors. Auto-dismiss after 3s. Slide-up animation.

FAQ Accordion

Every kit includes collection supplies, step-by-step instructions, a prepaid return label, lab analysis by our certified team, and a detailed results report with expert consultation.

Rules: Active question = green text. Chevron rotates 180deg. Answer slides with max-height transition. Border-bottom separators.

Quantity Selector

1

3

Star Ratings

4.9 (164 reviews)

Rules: Stars = bd-green fill. Empty stars = 30% opacity. Rating number = bold charcoal. Count = gray-400 in parens.

Loading Skeleton

Rules: Match card dimensions exactly. Use pulse animation. Gray-200 base. Transition to real content with fade.

Empty States

Your cart is empty

Add some test kits to get started

No results found

Try a different search term

Accessibility

WCAG 2.1 AA compliance across all BioDwell properties.

Contrast Ratios

10.5:1AAACharcoal on white

15.1:1AAAWhite on navy

2.4:1FailWhite on green (use only for large text/decorative)

5.5:1AAWhite on green-700 (use for readable green text)

9.8:1AAACharcoal on cream

Green Text Rule

Never use BioDwell Green (#33CC66) as small body text on white or cream backgrounds — it fails WCAG AA (2.4:1 ratio). For readable green text, use green-700 (#1E8449) or darker. Green is safe as: button backgrounds with white text, icon accents, large decorative headlines, and badges on dark backgrounds.

Touch Targets & Focus

44px

Minimum Touch Target

All interactive elements must be at least 44x44px. Use padding to achieve this on small icons.

Focus Ring Pattern

focus:border-bd-green focus:ring-2 focus:ring-bd-green/10

Skip to Products

Skip Navigation

sr-only by default, visible on focus. Links to #products-section.

Motion & Animation

Purposeful movement that feels responsive, not flashy.

Transition Tokens

--ease-default0.3s cubic-bezier(0.4, 0, 0.2, 1)Most UI transitions

--ease-fast0.2s easeHover states, color changes

--ease-slow0.7s easeScroll reveal animations

--ease-slide0.35s cubic-bezier(0.4, 0, 0.2, 1)Cart drawer, modal slide

Keyframe Animations

fadeInUp

Scroll reveal, toasts

pulse-dot

Hero eyebrow dot

shimmer

Skeleton loading

modalIn

Modal entrance

Z-Index Scale

500

Toast notifications

400

Checkout overlay

300

Modals

201

Cart drawer

200

Cart overlay

150

Search overlay

100

Sticky header

99

Breadcrumb

Responsive Breakpoints

600px

sm

768px

md

900px

lg

1024px

xl

1200px

max-width

Dark Mode Tokens

--bg: #1a1a1a

--bg-alt: #2a2a2a

--input-bg: #333

--border: #3a3a3a

Dark mode rule: All colors invert via CSS custom property overrides on body.dark-mode. Brand green (#33CC66) stays unchanged in both modes. Charcoal text becomes #e5e5e5. Category tinted backgrounds darken to their respective muted shades.

Page Patterns

Repeatable layout structures for every BioDwell page.

Store Page Flow

1

Hero — Dark navy gradient, headline, CTA, stats, trust badges, category icons

2

Why Testing Matters — Fear-based stat cards on white bg

3

How It Works — 4-step flow on cream bg

4

Most Popular — Horizontal scroll cards on white bg

5

Product Grid by Category — 3-col grid, grouped sections on cream/white alternating

6

Bundles — 3-col cards with savings callout

7

Social Proof — Testimonials + transformation stories on cream bg

8

FAQ — Accordion centered, max-width 760px

9

Footer — Dark charcoal, 4-col grid, newsletter, cert badges

Section alternation rule: Alternate white → cream → white → cream backgrounds. Dark navy reserved for hero and premium callout sections only. Every section has 64px vertical padding.

Scroll Reveal Pattern

Elements enter with .reveal class. IntersectionObserver adds .visible when in viewport.

.reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }

Brand Guidelines

Voice, imagery, and iconography rules.

Voice & Tone

Do

"What's Really In Your Home?" — Direct, personal, creates urgency
"PhD-led analysis, shipped to your door" — Authority + convenience
"Find out in days, not months" — Speed as differentiator
"Trusted by 2,000+ families" — Social proof, human

Don't

"Our laboratory conducts environmental analysis" — Too clinical, cold
"Samples must be collected per EPA Protocol 524.2" — Too technical
"WARNING: Your home may contain hazardous..." — Fear-mongering
"Buy Now" — Too pushy, not brand-aligned

Tone: Concerned-parent, not lab-technician. We test homes, not patients. Authoritative but warm. "Shop Tests" not "Buy Now". "Get My Kit" not "Purchase".

Icon System

Shield

Lock

Clock

Check

Droplet

Search

Heart

Cart

Rules: SVG inline only (no icon fonts, no sprite sheets). Stroke-width: 2. ViewBox: 0 0 24 24. Color: currentColor inherits from parent. Default size: 20-24px.

Product Photography

160px circle

Circle format: 160x160px, border-radius: 50%

Double-ring: Inner ring = 2px solid category color. Outer ring = 1px solid category color at 30% opacity, 5px offset.

Hover: scale(1.05) + rotate(2deg), 0.4s cubic-bezier

Shadow: 0 4px 16px rgba(0,0,0,0.08)

Category tint: Background area uses category-light color

Design Tokens

Complete token set for Figma, Tailwind, or CSS custom properties.

/* ═══ BioDwell Design Tokens v1.0 ═══ */
:root {
  /* ── Brand Colors ── */
  --bd-green: #33CC66;
  --bd-green-hover: #2BB85A;
  --bd-green-700: #1E8449;     /* for readable green text */
  --bd-charcoal: #32373C;
  --bd-charcoal-hover: #23282D;
  --bd-navy: #1A1F2E;
  --bd-cream: #FAF8F5;

  /* ── Category Colors ── */
  --cat-water: #3B82F6;        --cat-water-light: #EFF6FF;     --cat-water-dark: #1D4ED8;
  --cat-drugs: #8B5CF6;        --cat-drugs-light: #F5F3FF;     --cat-drugs-dark: #6D28D9;
  --cat-allergen: #F59E0B;     --cat-allergen-light: #FFFBEB;  --cat-allergen-dark: #D97706;
  --cat-mycotoxin: #10B981;    --cat-mycotoxin-light: #ECFDF5; --cat-mycotoxin-dark: #059669;
  --cat-mold: #6366F1;         --cat-mold-light: #EEF2FF;      --cat-mold-dark: #4F46E5;
  --cat-radon: #EF4444;        --cat-radon-light: #FEF2F2;     --cat-radon-dark: #DC2626;

  /* ── Semantic ── */
  --success: #10B981;          --success-light: #ECFDF5;
  --warning: #F59E0B;          --warning-light: #FFFBEB;
  --error: #EF4444;            --error-light: #FEF2F2;
  --info: #3B82F6;             --info-light: #EFF6FF;

  /* ── Typography ── */
  --font-display: 'DM Serif Display', Georgia, serif;
  --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --fs-xs: 12px;   --fs-sm: 14px;   --fs-base: 16px;
  --fs-lg: 18px;   --fs-xl: 20px;   --fs-2xl: 24px;
  --fs-3xl: 30px;  --fs-4xl: 42px;
  --lh-tight: 1.12;   --lh-snug: 1.3;
  --lh-normal: 1.6;   --lh-relaxed: 1.7;
  --ls-tight: 0.01em;  --ls-normal: 0.3px;
  --ls-wide: 0.5px;    --ls-widest: 1px;

  /* ── Radius ── */
  --radius: 3px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 50px;

  /* ── Shadows ── */
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 20px rgba(0,0,0,0.08);
  --shadow-lg: 0 8px 40px rgba(0,0,0,0.1);
  --shadow-xl: 0 16px 48px rgba(0,0,0,0.12);
  --shadow-green: 0 4px 14px rgba(51,204,102,0.3);

  /* ── Z-Index ── */
  --z-breadcrumb: 99;   --z-header: 100;
  --z-search: 150;       --z-cart-overlay: 200;
  --z-cart-drawer: 201;  --z-modal: 300;
  --z-checkout: 400;     --z-toast: 500;

  /* ── Transitions ── */
  --ease-default: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --ease-fast: 0.2s ease;
  --ease-slow: 0.7s ease;
  --ease-slide: 0.35s cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Breakpoints ── */
  --bp-sm: 600px;   --bp-md: 768px;
  --bp-lg: 900px;   --bp-xl: 1024px;
  --bp-max: 1200px;

  /* ── Layout ── */
  --max-width: 1200px;
  --section-padding: 64px;
  --card-padding: 24px;
  --grid-gap: 28px;
}

/* ── Dark Mode Overrides ── */
body.dark-mode {
  --bg: #1a1a1a;
  --bg-alt: #2a2a2a;
  --text: #e5e5e5;
  --text-light: #bbb;
  --input-bg: #333;
  --border: #3a3a3a;
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 20px rgba(0,0,0,0.4);
}