Components

Ethos Veterinary Health

Design Tokens

Primitive values and semantic aliases sourced from the Figma token library.

Primitive Colors

Raw ramps — never reference these directly in components. Use semantic tokens instead.

Teal
50#E6F4F6
100#C2E4E8
200#89CAD1
300#4AABB5
400#158B97
500#006E7D
600#006072
700#005163
800#004750
900#002F36
Green
50#F4FBF0
100#E3F5D7
200#CCEDB8
300#AADB7D
400#88C957
500#6AB53A
600#4E9626
700#3A7519
800#285610
900#173808
Red
50#FDEDEF
100#FAD0D4
200#F4A0A8
300#EC6672
400#D93545
500#C42233
600#B11A29
700#961523
800#7A101C
900#550B13
Gray
50#F7F6F6
100#EEEDEC
200#CCC9C7
300#B0ABA8
400#948E8A
500#6D6863
600#585350
700#4D4B45
800#332F2D
900#1A1B16
Yellow
50#FEFDE6
100#FEF9C3
200#FDF28B
300#FCE94F
400#FBDB1A
500#F3C507
600#D19E05
700#A67506
800#89570A
900#76460E
Neutral
cream-50#F4F3D9
white#FFFFFF
black#000000

Semantic Colors

CSS custom properties — always use these in components. Override per-section using the <Theme> wrapper.

Brand
Primary--primary
Primary Hover--primary-hover
Primary Dark--primary-dark
Primary Subtle--primary-subtle
Primary Border--primary-border
On Primary--on-primary
Text
Foreground--foreground
Muted Foreground--muted-foreground
Text on Dark--text-on-dark
Text Disabled--text-disabled
On Surface--on-surface
Surface
Background--background
Card--card
Muted--muted
Surface Overlay--surface-overlay
Disabled Fill--disabled-fill
Secondary--secondary
Border
Border Subtle--border-subtle
Border--border
Border Strong--border-strong
Icon Subtle--icon-subtle
Icon--icon
Status
Success--success
Success Subtle--success-subtle
Success Text--success-foreground
Warning--warning
Warning Subtle--warning-subtle
Warning Text--warning-foreground
Error--error
Error Subtle--error-subtle
Error Text--error-foreground
Emergency--emergency
Accent
Accent--accent
Accent Foreground--accent-foreground
Accent Subtle--accent-subtle

Typography

All styles use Inter. Font family: --font-sans

StylePreviewSizeLine HtTrackingUsage
Heading / H1Heading H132px40px-0.5pxPage titles
Heading / H2Heading H228px36px-0.25pxSection headers
Heading / H3Heading H324px32px0pxCard headers
Heading / H4Heading H420px28px0pxSub-section headers
Subheading / LargeSubheading Large18px26px0pxFeature labels
Subheading / MedSubheading Med16px24px0pxList headers
Body / LargeBody Large16px26px0pxPrimary body text
Body / MediumBody Medium14px22px0pxSecondary body text
Body / SmallBody Small12px18px0pxSupporting copy
Label / LargeLabel Large14px20px0.1pxButton text, tabs
Label / MediumLabel Medium12px16px0.5pxChips, badges
Label / SmallLabel Small10px14px0.5pxMicro labels
OverlineOverline10px16px1.5pxSection overlines
CaptionCaption12px16px0.4pxCaptions, footnotes

Spacing

--space-0
0px
--space-2
2px
--space-4
4px
--space-6
6px
--space-8
8px
--space-10
10px
--space-12
12px
--space-16
16px
--space-20
20px
--space-24
24px
--space-32
32px
--space-40
40px
--space-48
48px
--space-64
64px
--space-80
80px

Radius

none0px--r-none
sm4px--r-sm
md8px--r-md
lg12px--r-lg
xl16px--r-xl
pill999px--r-pill

Shadows

sm
md
lg
xl
brand

Ethos Veterinary Health · Figma → Code · 2026