Design Tokens Preview
This page is a live preview of the theme variables defined in app/assets/css/main.css. It helps validate the palette, typography scale, spacing rhythm, radius, and elevation.
Color Palette
Hover cards to verify contrast and borders.
Background
--color-background
#FFFFFF
Surface
--color-surface
#FFFFFF
Surface Muted
--color-surface-muted
#F9F9F9
Foreground
--color-foreground
#121212
Foreground Muted
--color-foreground-muted
#2B2B2B
Foreground Subtle
--color-foreground-subtle
#595958
Border
--color-border
#CDD7DA
Border Muted
--color-border-muted
#E2E6E9
Navy
--color-navy
#242D35
Teal Dark
--color-teal-dark
#053747
Slate Dark
--color-slate-dark
#1E4B59
Brand
--color-brand
#037791
Brand 2
--color-brand-2
#00ADC1
Brand Muted
--color-brand-muted
#69C4DA
Link Alt
--color-link-alt
#226CA6
Slate Gray
--color-slate-gray
#375F6C
Warning
--color-warning
#D2AE34
Input Text
--color-input
#567481
Input Border
--color-input-border
#CDD7DA
Input Border Strong
--color-input-border-strong
#BDBDBC
Input Border Soft
--color-input-border-soft
#D1D1D1
Typography
Open Sans + weight-driven hierarchy.
Display / H1
36px / 47.2px · 600
Calm confidence for complex decisions.
Heading / H2
32px / 36px · 600
A clear hierarchy that feels enterprise-grade.
Subheading / H3
24px / 31.92px · 400
Precise typography and measured whitespace.
Subheading / H4
18px / 27px · 600
Interactive elements stay crisp and readable.
Body
12.8px / 19.2px · 400
This theme favors high-contrast text, subtle borders, and restrained shadows to communicate trust and authority.
Link / Button
16px / 24px · 600
Primary interactive accent uses the teal brand color.
Components
Buttons, inputs, radius, and elevation.
Buttons
Link Button
Inputs
Search
Search (rounded)
Text Area
Radius
None
--radius-none
0px
Small
--radius-sm
2px
Image
--radius-image
2.8px
Medium
--radius-md
4px
Large (Modal)
--radius-lg
8px
Pill
--radius-pill
50px
Elevation
Subtle (Hover)
--shadow-sm
0 2px 4px rgba(0 0 0 / 0.1)
Standard
--shadow-md
0 4px 8px rgba(0 0 0 / 0.15)
Elevated
--shadow-lg
0 10px 20px rgba(0 0 0 / 0.15)
Modal
--shadow-xl
0 10px 40px rgba(0 0 0 / 0.15)
Backdrop
--shadow-2xl
0 20px 60px rgba(0 0 0 / 0.2)
Modal Preview
Background surface
Modal Title
This preview follows the modal spec: white surface, top corners rounded, light border, and a focused elevation level.