Design System
Comprehensive guide to the design tokens, typography, colors, and components used across the Healthcare Data Platform.
Typography
Headings (Outfit)
Heading 1
Outfit Bold 48px
Heading 2
Outfit Semibold 36px
Heading 3
Outfit Semibold 30px
Heading 4
Outfit Semibold 24px
Body (Inter)
Large body text. Used for lead paragraphs and introductions. The quick brown fox jumps over the lazy dog.
Inter Regular 18px
Default body text. Used for general content. The quick brown fox jumps over the lazy dog.
Inter Regular 16px
Small text. Used for captions and secondary information.
Inter Regular 14px
APEX Display (Cormorant Garamond)
Editorial Heading
Article Title Style
APEX Body (DM Sans)
Editorial body text for magazine layouts.
Standard article reading text style.
Color Palette
Semantic Colors
Primary
Secondary
Accent
Muted
Destructive
Success
Card
Popover
Background
Bg Secondary
APEX Magazine Theme
Apex Bg
Apex Secondary
Apex Accent
Apex Warm
Apex Muted
Gradients
Hero Gradient
Accent Gradient
CTA Gradient
Shadows & Effects
Components
Buttons
Cards & Containers
Simple Card
Standard card container with border and background color. Used for most content blocks.
Secondary Background
Container using the secondary background color for subtle differentiation.
Interactive Card
Hover me! This card uses the .interactive-card utility class for hover effects.
Hover Effect Card
Uses .card-hover for a lift effect on hover.