foundations
Foundations
The Savi token system, adopted exactly. Values are generated from the theme model. Color is cool neutral with an indigo / teal / orange brand triad; type is Inter on a perfect-fourth scale; spacing and radius share the same restraint.
Neutral color
Text and surface roles. Cool neutral.
text-primary--savi-color-text-primary
text-secondary--savi-color-text-secondary
text-disabled--savi-color-text-disabled
surface-base--savi-color-surface-base
surface-elevated--savi-color-surface-elevated
surface-muted--savi-color-surface-muted
Brand and messaging ramps
Each role has a muted, base, and bold step plus a contrast-safe on-color. Emphasis variants map to these.
primary-muted--savi-color-primary-muted
primary-base--savi-color-primary-base
primary-bold--savi-color-primary-bold
secondary-muted--savi-color-secondary-muted
secondary-base--savi-color-secondary-base
secondary-bold--savi-color-secondary-bold
accent-muted--savi-color-accent-muted
accent-base--savi-color-accent-base
accent-bold--savi-color-accent-bold
success-muted--savi-color-success-muted
success-base--savi-color-success-base
success-bold--savi-color-success-bold
warning-muted--savi-color-warning-muted
warning-base--savi-color-warning-base
warning-bold--savi-color-warning-bold
danger-muted--savi-color-danger-muted
danger-base--savi-color-danger-base
danger-bold--savi-color-danger-bold
info-muted--savi-color-info-muted
info-base--savi-color-info-base
info-bold--savi-color-info-bold
Type scale
Inter, perfect-fourth ratio, anchored at 16px.
display · 51pxAnd it came to pass
headingLg · 38pxAnd it came to pass
headingMd · 28pxAnd it came to pass
headingSm · 21pxAnd it came to pass
bodyLg · 16pxAnd it came to pass
bodySm · 12pxAnd it came to pass
metaLg · 14pxAnd it came to pass
metaSm · 13pxAnd it came to pass
Spacing scale
Perfect-fourth, comfortable density.
2xs · 7px
xs · 9px
sm · 12px
md · 16px
lg · 21px
xl · 28px
2xl · 38px
Radius
Squircle family.
sm
md
lg
xl
2xl
Elevation
Soft shadow preset. Quiet by default.
sm
md
lg
xl