Design Tokens
Design tokens are the single source of truth to name and store decisions about the user interface.
Color
Primary Dark
--color-primary-dark
#213229
Main dark color for text, backgrounds, and borders
Primary Light
--color-primary-light
#EEF2F5
Main light color for backgrounds and light text
Primary White
--color-primary-white
#ffffff
Pure white for backgrounds and contrast
Accent Urgent
--accent-urgent
#e2745d
Urgent/important actions, highlights, warnings (legacy color)
Accent Primary
--accent-primary
#e2745d
Primary accent for general highlights
Accent Secondary
--accent-secondary
#1f7a4d
Secondary accent (currently CTA green)
Accent (Legacy)
--color-accent
#e2745d
Legacy support - maps to accent-urgent (legacy color)
CTA Green
--color-cta-green
#1f7a4d
In-progress green motif (maps to accent-secondary)
CTA Green 20
--color-cta-green-20
rgba(31, 122, 77, 0.2)
CTA green at 20% opacity
CTA Green 10
--color-cta-green-10
rgba(31, 122, 77, 0.1)
CTA green at 10% opacity
CTA Green 05
--color-cta-green-05
rgba(31, 122, 77, 0.05)
CTA green at 5% opacity
Secondary Gray
--color-secondary-gray
rgba(33, 50, 41, 0.8)
Primary dark at 80% opacity for muted text
Secondary Gray 80
--color-secondary-gray-80
rgba(33, 50, 41, 0.8)
Legacy: same as secondary-gray, kept for backward compatibility
Secondary Light
--color-secondary-light
#999999
Neutral gray for subtle text
Primary Light 40
--color-primary-light-40
rgba(238, 242, 245, 0.4)
Primary light at 40% opacity
Primary Light 24
--color-primary-light-24
rgba(238, 242, 245, 0.24)
Primary light at 24% opacity
Primary Light 10
--color-primary-light-10
rgba(238, 242, 245, 0.1)
Primary light at 10% opacity
Typography
Hero XL
--text-hero-xl
4rem (64px)
Main hero headings
The quick brown fox jumps over the lazy dog
Hero LG
--text-hero-lg
3rem (48px)
Large hero headings
The quick brown fox jumps over the lazy dog
Section XL
--text-section-xl
3rem (48px)
Large section titles
The quick brown fox jumps over the lazy dog
Section LG
--text-section-lg
2.25rem (36px)
Standard section titles
The quick brown fox jumps over the lazy dog
Section MD
--text-section-md
1.875rem (30px)
Medium section titles
The quick brown fox jumps over the lazy dog
Body LG
--text-body-lg
1.125rem (18px)
Large body text
The quick brown fox jumps over the lazy dog
Body MD
--text-body-md
1rem (16px)
Standard body text
The quick brown fox jumps over the lazy dog
Body SM
--text-body-sm
0.875rem (14px)
Small body text
The quick brown fox jumps over the lazy dog
Caption
--text-caption
0.75rem (12px)
Captions and small text
The quick brown fox jumps over the lazy dog
Font Weights
Aa
--font-weight-normal
400
Aa
--font-weight-medium
500
Aa
--font-weight-semibold
600
Aa
--font-weight-bold
700
Line Heights
--line-height-none
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor.
--line-height-tight
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor.
--line-height-snug
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor.
--line-height-normal
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor.
--line-height-relaxed
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor.
--line-height-loose
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor.
--line-height-loose-plus
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor.
Spacing
Based on 8px grid system (n×8)
XS
0.5rem (8px)
1×8px grid unit
SM
1rem (16px)
2×8px grid unit
MD
1.5rem (24px)
3×8px grid unit
LG
2rem (32px)
4×8px grid unit
XL
3rem (48px)
6×8px grid unit
2XL
4rem (64px)
8×8px grid unit
3XL
5rem (80px)
10×8px grid unit
4XL
6rem (96px)
12×8px grid unit
5XL
8rem (128px)
16×8px grid unit
6XL
10rem (160px)
20×8px grid unit
7XL
12rem (192px)
24×8px grid unit
8XL
16rem (256px)
32×8px grid unit
Border Radius
Small
--radius-sm
0.25rem (4px)
Small elements
Medium
--radius-md
0.5rem (8px)
Buttons and small cards
Large
--radius-lg
0.75rem (12px)
Standard cards and images
XL
--radius-xl
1rem (16px)
Large cards
2XL
--radius-2xl
1.5rem (24px)
Special elements
3XL
--radius-3xl
2rem (32px)
Hero elements
Shadows
Soft
--shadow-soft
Cards and elevated elements
Medium
--shadow-medium
Hover states and modals
Large
--shadow-large
Prominent elements
Z-Index Scale
Dropdown
--z-dropdown
1000
Sticky
--z-sticky
1020
Fixed
--z-fixed
1030
Modal Backdrop
--z-modal-backdrop
1040
Modal
--z-modal
1050
Popover
--z-popover
1060
Tooltip
--z-tooltip
1070
Guidelines
Accessibility
Accessible design enables people of all abilities to interact with, understand, and navigate our apps.
- • Focus states with visible outlines
- • High contrast ratios for text
- • Semantic HTML structure
- • Screen reader friendly components
- • Keyboard navigation support
Content
Clear, concise, and conversational language to get teams where they need to go.
- • Use plain language
- • Be consistent with terminology
- • Write for accessibility
- • Keep messaging clear and concise
Styles
Grid
Grid is used to position content and create consistent page layouts.
Container
--container-max-width: 88rem (1408px)
--container-padding: 1.5rem (24px)
Column 1
Column 2
Column 3
Column 4
Responsive breakpoints: Mobile (<768px), Tablet (768px-1024px), Desktop (>1024px)
Buttons
Primary Button
Outline Button
Secondary Button (on dark)
Button Sizes
Cards
Default Card
Standard card with padding and shadow. Hover for elevation effect.
Feature Card
Centered content for feature highlights.
Article Card
Image-focused layout for articles.
Elevation
Elevations are layered surfaces that form the foundation of UI.
Soft Shadow
Cards and elevated elements
Medium Shadow
Hover states and modals
Large Shadow
Prominent elements
Border
Define boundaries, separate components, and add visual emphasis.
Primary Dark Border
Primary Light 10% Border
2px Primary Dark Border
Iconography
Icons are visual representations of commands and common actions.
UI Icons
Arrow, chevron, menu, close
Social Icons
LinkedIn, Twitter, Email
Medical Icons
Stethoscope, microscope, heartbeat
Feature Icons
Diagnostics, AI, speed
Components
Live previews of key interface components. These use the same React components deployed across the site, ensuring the design system stays in sync with production UI.
Form Elements
Thank you for your message! We'll get back to you within 24 hours.
There was an error sending your message. Please try again or contact us directly.
Testimonial Carousel
We are transforming pediatric healthcare through the power of RPM Rapid Precision Medicine. The platform saves us hours and helps us make confident treatment decisions.
Dr. Stephen Kingsmore
President and CEO, Rady Children's Institute for Genomic Medicine
Rapid genomic sequencing has revolutionized how we care for critically ill newborns. Getting answers in 48 hours instead of weeks has changed everything.
Dr. David Dimmock
Medical Director, Rady Children's Institute for Genomic Medicine
The clinical decision support helped us make confident treatment decisions. Having genomic intelligence at the point of care transforms how we practice medicine.
Dr. Michael Aslam
Neonatologist
We're setting a new standard of care for newborns and children with rare undiagnosed diseases. Rapid precision medicine is advancing how we deliver personalized care.
Dr. Narayanan Veeraraghavan
Associate Medical Director, Rady Children's Institute
The power of rapid whole genome sequencing in the NICU has transformed our ability to diagnose and treat rare genetic conditions. It's changing lives in real time.
Dr. Shimul Chowdhury
Clinical Geneticist
Rapid Whole Genome Sequencing has truly been a game changer in the PICU and CVICU.
Dr. Jason Knight
Medical Director - PICU, CHOC Children's Hospital of Orange County
The fact that I can send off a sample and get a result within a few days on a critically ill patient is just amazing to me.
Jennifer Burton
MS, CGS - Clinical Genetic Counselor, Children's Hospital of Illinois