MonobankDS Tokens

372 design tokens — colors, gradients, typography, spacing, radius, elevation

Semantic Colors Color Primitives Gradients Typography Spacing Radius Elevation Stroke
Semantic Colors
Text
Background
Border
Icon
Primary & Status
Color Primitives
Neutral
Blue
Red
Green
Purple
Yellow-Orange
Teal
Pink
Gradients
Diagonal (135deg)
Vertical (180deg)
Card (3-stop, 135deg)
Multi-stop & Overlay
Typography
Display
The quick brown fox.ds-display-large — 48 Bold
The quick brown fox.ds-display-medium — 40 Semi
The quick brown fox.ds-display-small — 32 Semi
The quick brown fox.ds-display-small-bold — 32 Bold
Heading
The quick brown fox jumps.ds-heading-large — 28 Semi
The quick brown fox jumps.ds-heading-medium — 24 Bold
The quick brown fox jumps.ds-heading-medium-small — 22 Bold
The quick brown fox jumps over.ds-heading-small — 20 Semi
The quick brown fox jumps over.ds-heading-small-bold — 20 Bold
The quick brown fox jumps over the lazy.ds-heading-xsmall — 18 Semi
The quick brown fox jumps over the lazy.ds-heading-xsmall-bold — 18 Bold
Body 16
The quick brown fox jumps over the lazy dog.ds-body-regular-16 — 16 Regular
The quick brown fox jumps over the lazy dog.ds-body-medium-16 — 16 Medium
The quick brown fox jumps over the lazy dog.ds-body-semibold-16 — 16 Semi
The quick brown fox jumps over the lazy dog.ds-body-bold-16 — 16 Bold
Body 14
The quick brown fox jumps over the lazy dog and runs away.ds-body-regular-14 — 14 Regular
The quick brown fox jumps over the lazy dog and runs away.ds-body-medium-14 — 14 Medium
The quick brown fox jumps over the lazy dog and runs away.ds-body-semibold-14 — 14 Semi
The quick brown fox jumps over the lazy dog and runs away.ds-body-bold-14 — 14 Bold
Caption
The quick brown fox jumps over the lazy dog and runs far away.ds-caption-regular-12 — 12 Regular
The quick brown fox jumps over the lazy dog and runs far away.ds-caption-medium-12 — 12 Medium
The quick brown fox jumps over the lazy dog and runs far away.ds-caption-semibold-12 — 12 Semi
The quick brown fox jumps over the lazy dog.ds-caption-medium-10 — 10 Medium
Text Color Modifiers
Primary text color.ds-text-primary — #000
Secondary text color.ds-text-secondary — #808080
Tertiary text color.ds-text-tertiary — #b2b2b2
Inverse text color.ds-text-inverse — #fff
Error text color.ds-text-error — #fa5255
Link text color.ds-text-link — #3578c3
Accent text color.ds-text-accent — #294e90
Cashback text color.ds-text-cashback — #009994
Pundiki text color.ds-text-pundiki — #d23bea
Promo text color.ds-text-promo — #e756b4
Spacing
Border Radius
Elevation
Stroke Weights
Copied!