ALYZE Design System — Visual Swatch Sheet

Surfaces

#ECE8E1

--background

Page background

#FAF7F2

--card

Cards, panels, modals

#F5F1EB

--secondary

Hover states, input bg

#E4DFD6

--muted

Active/pressed states

#D4CEC4

--border

Edges, dividers, inputs

Text & Brand Colors

#3A342E

--foreground

All non-interactive text

#635B52

--muted-foreground

Labels, captions, metadata

#998153

--primary

Buttons, links, focus rings

#C1A875

--ring

Focus outlines

#8B9A6F

--accent

Active nav, gradient end

#D4BC8E

--primary-border

Decorative borders

Sidebar

#F5F1EB

--sidebar

Sidebar background

#998153

--sidebar-icon

Nav icons

#8B9A6F

--sidebar-icon-active

Active nav icon

#E4DFD6

--sidebar-accent

Active nav item bg

Status Colors

#2e7d32

--success

Success indicators (bg/border/icon only)

#e8f5e9

--success-bg

Success background tint

#e65100

--warning

Warning / destructive

#fff3e0

--warning-bg

Warning background tint

Health Score Palette

⚠️ Health colors are never used as text color. They appear as pill backgrounds, progress bar fills, border accents, and chart elements. Text inside is always --foreground.

Risk 0–39

Caution 40–79

Optimal 80–100

Good 101–115

Excellent 116+

Neutral No data

Chart Colors — 10 Colorblind-Accessible Categorical

1

2

3

4

5

6

7

8

9

10

Steel
#5B8BA0 Terracotta
#C27849 Plum
#8E6B99 Teal
#4A9B8E Dusty Rose
#D4828F Olive
#6B7A3A Sky
#7BAFD4 Sienna
#8C5E3F Mauve
#B07BA5 Slate
#6B7B8A

Typography Scale

H1

48px / 200 / 1.2

Your Health, Decoded

H2

36px / 200 / 1.3

Blood Work Insights

H3

28px / 600 / 1.3

Cardiovascular Health

H4

22px / 600 / 1.4

Overall Health Score

Body

16px / 400 / 1.5

Your lipid panel results show improvement from last quarter. LDL cholesterol is trending downward while HDL remains stable.

Small

14px / 400 / 1.5

Last updated 3 days ago · 12 biomarkers analyzed

Caption

12px / 400 / 1.4

Reference range: 100–199 mg/dL

Label

11px / 600 / 1.3 / uppercase

Section Label

Accent Font

EB Garamond

A Healthier Tomorrow Starts Here

Score Display Scale

87

Hero · 40px

92

Large · 34px

78

Medium · 22px

64

Small · 16px

Button Variants

Focus Ring

--ring: #C1A875 · 2px outline, 2px offset

Shadows

Small --shadow-sm

Medium --shadow-md

Large --shadow-lg

Layout Tokens

6px

Border Radius

--radius: 6px

sidebar

Sidebar Width

256px

Decorative Gradient Bar

    linear-gradient(90deg, --primary-border #D4BC8E → --accent #8B9A6F)
  

Key Design Rules

Rule 1

Text color is only --foreground or --muted-foreground — never colored by state.

Rule 2

--primary is reserved for interactive elements — buttons, links, focus rings. Never for passive text.

Rule 3

Health state is communicated via background tints, pills, and bars — never text color.

Rule 4

No hardcoded hex values in components — everything references CSS custom properties.

Rule 5

Dark mode flips automatically via .dark class on <html>. All tokens adapt.