DESIGN SYSTEM SPECIFICATION

Good Health 247 Design Language.

Our complete catalog of colors, typography scales, spacing tokens, button variations, cards, and interactive motions.

1. Color Palette Swatches

Primary (Deep Blue) & Secondary (Purple)

Blue Primary (Light)

#2563eb / HSL: 221.2 83.2% 53.3%

Main brand CTA theme

Blue Primary (Dark)

#3b82f6 / HSL: 217.2 91.2% 59.8%

Contrast theme for dark screens

Purple Secondary (Light)

#7c3aed / HSL: 262.1 83.3% 57.8%

Features and hover alerts

Purple Secondary (Dark)

#8b5cf6 / HSL: 263.4 70% 50.4%

Contrast secondary dark accent

Accent (Emerald)

Emerald Accent (Light)

#10b981 / HSL: 142.1 76.2% 36.3%

Status, trust metrics and indicators

Emerald Accent (Dark)

#059669 / HSL: 142.1 70.6% 45.3%

Dark mode status labels

Background & Neutral Systems

Background (Light)

#ffffff / HSL: 0 0% 100%

White paper style light mode

Background (Dark)

#090a0f / HSL: 230 40% 4.5%

Obsidian deep-slate dark mode

Border (Light)

#e2e8f0 / HSL: 220 13% 91%

Divider line light mode

Border (Dark)

#1e293b / HSL: 217.2 32.6% 17.5%

Divider line dark mode

2. Typography Hierarchy

DISPLAY (text-display) - clamp(3rem, 8vw, 5.5rem)

Display Title

Used exclusively for Hero headers and massive landing screens.

HEADING XL (text-heading-xl) - clamp(2rem, 5vw, 3rem)

Extra Large Section Heading

Used for major section starts and core page layouts.

HEADING LG (text-heading-lg) - 1.75rem / 28px

Large Component Heading

Used inside cards, modals, and workflow subsections.

HEADING MD (text-heading-md) - 1.35rem / 21px

Medium Subheading Title

Used for list labels and settings labels.

BODY LG (text-body-lg) - 1.125rem / 18px

This is a large reading block paragraph. Excellent for summary descriptors directly below main display headers.

BODY MD (text-body-md) - 1rem / 16px

This is the standard corporate body reading text size. Muted default shades are standard to maintain visual breathing space while remaining fully readable.

CAPTION (text-caption) - 0.875rem / 14px

Footnotes, subheaders, placeholder labels, and form helper validations utilize caption weights.

MICRO (text-micro) - 0.75rem / 12px

TAG ACCENTS, TIMESTAMPS, PIPELINE LABELS

3. Modular Spacing Tokens

Space 1 (0.25rem)

4px / p-1 / w-1

Space 2 (0.5rem)

8px / p-2 / w-2

Space 4 (1rem)

16px / p-4 / w-4

Space 6 (1.5rem)

24px / p-6 / w-6

Space 8 (2rem)

32px / p-8 / w-8

Space 12 (3rem)

48px / p-12 / w-12

Space 16 (4rem)

64px / p-16 / w-16

4. Reusable Button Catalog

Button Variants

Button Sizes

State Visualizers

5. Card showroom & Glass Panels

STANDARD CARD

Regular Design System Card

Hover over this container to preview translate offset transitions.

This card uses our design system standard styling: soft borders (`border-border/80`), slightly rounded corners (`rounded-2xl`), and a clean CSS translate-up and shadow transition when hovered.

GLASS PANEL

Premium Glassmorphic Card

Features backdropped blur filters and glowing borders.

This uses the `.glass-panel` utility with `backdrop-filter: blur(16px)` and subtle alpha-white borders (`border-white/10`). Hovering reveals a violet border glow overlay that adapts to dark and light mode themes.

6. Motion Laboratory

Reveal Controls

Test our reusable <Reveal> scroll animations. Select a variant direction below and hit "Trigger Animation" to watch the preview block reload.

Animation Variant

Animating Target

Framer Motion trigger state: "slide-up"

Triggered