If you see this, you might not be working on the right device. Creating a design system needs more space: use your computer!If you see this, you might not be working on the right device. Creating a design system needs more space: use your computer!
BETA

Design System

Design Tokens

Imports your tokens into Figma as native Variables.

RatioDS generates a full design system from a single ratio: color scales, typography, spacing, and component tokens, ready to bring into Figma or code.

Use the Figma frame button next to each section to copy it as an SVG,
then press CtrlV in Figma to paste editable vectors.

Brand Palette

Update the default colors to match your design system, then add more below if you need them: new colors join the end of the palette.

Basewhite · black · transparent

White and Black anchor the Neutral scale at steps 0 and 1000. Click either swatch to set a custom off-white or off-black, useful for slightly warm or cool neutral extremes.

AAA
21
edit

White

#ffffff

AAA
21
edit

Black

#000000

Transparent

transparent

Secondary13 steps · 0–1000
Adds a subtle brand hue tint to the neutral scale, making it feel intentionally paired.
AAA
21

0

#ffffff

L 100%

AAA
19.42

50

#f5f6f8

L 97%

AAA
17.24

100

#e6e9ed

L 93%

AAA
14.7

200

#d4d8e0

L 88%

AAA
11.58

300

#b9c1ce

L 81%

AAA
8.11

400

#95a2b5

L 71%

AA
4.76
AA-lg
4.41

500

#64748b

L 55%

AA
5.43
AA-lg
3.87

600

#596b85

L 52%

AA
6.32
AA-lg
3.32

700

#4f617a

L 49%

AAA
8.32

800

#414f63

L 42%

AAA
10.02

900

#394351

L 38%

AAA
14.46

950

#242a32

L 28%

AAA
21

1000

#000000

L 0%

Brand Accent
Pin your input hex as the exact 500 shade. The full scale is generated around it.
AAA
19.42

50

#f6f5ff

L 97%

AAA
17.12

100

#e9e5ff

L 93%

AAA
14.51

200

#d9d1ff

L 88%

AAA
11.29

300

#c3b4ff

L 81%

AAA
7.64

400

#a689ff

L 71%

AA
5.7
AA-lg
3.69

500

#7c3aed

L 54%

AA
6.73
AA-lg
3.12

600

#7804f4

L 51%

AAA
7.61

700

#6e00e2

L 48%

AAA
9.46

800

#5b0bbc

L 42%

AAA
10.89

900

#4a2291

L 38%

AAA
15.03

950

#2d1a57

L 28%

Secondary
Pin your input hex as the exact 500 shade. The full scale is generated around it.
AAA
19.53

50

#f2f8f6

L 97%

AAA
17.29

100

#deecea

L 93%

AAA
14.91

200

#c4dfda

L 88%

AAA
11.86

300

#9cccc5

L 81%

AAA
8.37

400

#62b1a7

L 71%

AA-lg
3.74
AA
5.61

500

#0d9488

L 60%

AA
4.71
AA-lg
4.46

600

#008277

L 55%

AA
6.06
AA-lg
3.47

700

#006f66

L 49%

AAA
8.01

800

#005b53

L 42%

AAA
9.76

900

#004d47

L 38%

AAA
14.29

950

#08302c

L 28%

Edit colors to match your palette, and add more if you need.

Feedback Colors

Status colors, derived from your palette or set manually

Derive semantic colors from your brand palette for a cohesive feel.
Success#16a34aSemantic
AAA 20.06

BG Subtle

#f0fdf4

AAA 19.12

BG

#dcfce7

AAA 14.96

Border

#86efac

AA 5.02
AA-large 4.19
AA Large: WCAG AA for large text only (≥18pt regular or ≥14pt bold), 3:1 contrast ratio. Does not satisfy AA for body text.

Text

#15803d

AA-large 3.3
AA Large: WCAG AA for large text only (≥18pt regular or ≥14pt bold), 3:1 contrast ratio. Does not satisfy AA for body text.
AA 6.37

Solid

#16a34a

Button

#ffffff on solid

Positive states, confirmations, completed actions Form validation ✓, success toasts, progress complete, status badges
Warning#d97706Semantic
AAA 20.25

BG Subtle

#fffbeb

AAA 18.86

BG

#fef3c7

AAA 14.56

Border

#fcd34d

AA 5.02
AA-large 4.18
AA Large: WCAG AA for large text only (≥18pt regular or ≥14pt bold), 3:1 contrast ratio. Does not satisfy AA for body text.

Text

#b45309

AA-large 3.19
AA Large: WCAG AA for large text only (≥18pt regular or ≥14pt bold), 3:1 contrast ratio. Does not satisfy AA for body text.
AA 6.59

Solid

#d97706

Button

#ffffff on solid

Caution, needs attention, degraded state Alerts, degraded service banners, expiry notices, pending states
Error#dc2626Semantic
AAA 19.12

BG Subtle

#fff1f2

AAA 17.49

BG

#ffe4e6

AAA 11.06

Border

#fca5a5

AA 6.47
AA-large 3.25
AA Large: WCAG AA for large text only (≥18pt regular or ≥14pt bold), 3:1 contrast ratio. Does not satisfy AA for body text.

Text

#b91c1c

AA 4.83
AA-large 4.35
AA Large: WCAG AA for large text only (≥18pt regular or ≥14pt bold), 3:1 contrast ratio. Does not satisfy AA for body text.

Solid

#dc2626

Button

#ffffff on solid

Destructive actions, failures, validation errors Field errors, failed uploads, destructive dialogs, permission denied
Info#2563ebSemantic
AAA 19.3

BG Subtle

#eff6ff

AAA 17.21

BG

#dbeafe

AAA 11.65

Border

#93c5fd

AA 6.7
AA-large 3.13
AA Large: WCAG AA for large text only (≥18pt regular or ≥14pt bold), 3:1 contrast ratio. Does not satisfy AA for body text.

Text

#1d4ed8

AA 5.17
AA-large 4.06
AA Large: WCAG AA for large text only (≥18pt regular or ≥14pt bold), 3:1 contrast ratio. Does not satisfy AA for body text.

Solid

#2563eb

Button

#ffffff on solid

Neutral information, hints, status messages Tooltips, onboarding hints, changelog notices, informational banners

In the export: semantic colors become alias tokens referencing your primitive color scales, with WCAG-rated light/dark mode variants in Figma Variables.

Type Scale

Modular scale · 9 steps · ratio 1.33

Opens a dialog to add either a font variant, the whole scale rendered in an alternate typeface (for example RTL/Arabic or a secondary language), or a display font pairing, where headings above a chosen size use a different typeface and weight than body text. Each font’s weight (Thin 100 → Black 900) can be set independently and controls the CSS font-weight applied in previews and exports.
Viewport:

Viewport type scale is based on . To add more viewports, create new breakpoints.

px
Type any font name (e.g. Helvetica or Georgia). If the font is installed locally, the preview renders in that typeface automatically.
%
= 24px
%
Preview text
px/5.61rem
Large
Line height
%
= 135px
Letter spacing
%
= 0px
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
px/4.209rem
Large
Line height
%
= 101px
Letter spacing
%
= 0px
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
px/3.157rem
Large
Line height
%
= 77px
Letter spacing
%
= 0px
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
px/2.369rem
Large
Line height
%
= 57px
Letter spacing
%
= 0px
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
px/1.777rem
Large
Line height
%
= 42px
Letter spacing
%
= 0px
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
px/1.333rem
Line height
%
= 32px
Letter spacing
%
= 0px
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
px/1rem
Line height
%
= 24px
Letter spacing
%
= 0px
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
px/0.875rem
Small
12–15px: Use sparingly. Avoid for body copy. Best for captions, labels, and helper text where space is tight.

Below 12px: Not accessible. WCAG 1.4.4 requires text to remain readable at 200% zoom; text this small fails at any zoom level.
Line height
%
= 21px
Letter spacing
%
= 0px
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
px/0.75rem
Small
12–15px: Use sparingly. Avoid for body copy. Best for captions, labels, and helper text where space is tight.

Below 12px: Not accessible. WCAG 1.4.4 requires text to remain readable at 200% zoom; text this small fails at any zoom level.
Line height
%
= 18px
Letter spacing
%
= 0px
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.

Breakpoints

4 breakpoints · proportional preview relative to widest

1440px
margin 80px
margin 80px
col 77px
gutter 32px
col 77px
gutter 32px
col 77px
gutter 32px
col 77px
gutter 32px
col 77px
gutter 32px
col 77px
gutter 32px
col 77px
gutter 32px
col 77px
gutter 32px
col 77px
gutter 32px
col 77px
gutter 32px
col 77px
gutter 32px
col 77px
1440px
Width
px
Margin
px
Gutter
px
Columns
content 1280px · col 77px
1280px
margin 64px
margin 64px
col 74px
gutter 24px
col 74px
gutter 24px
col 74px
gutter 24px
col 74px
gutter 24px
col 74px
gutter 24px
col 74px
gutter 24px
col 74px
gutter 24px
col 74px
gutter 24px
col 74px
gutter 24px
col 74px
gutter 24px
col 74px
gutter 24px
col 74px
1280px
Width
px
Margin
px
Gutter
px
Columns
content 1152px · col 74px
768px
margin 32px
margin 32px
col 74px
gutter 16px
col 74px
gutter 16px
col 74px
gutter 16px
col 74px
gutter 16px
col 74px
gutter 16px
col 74px
gutter 16px
col 74px
gutter 16px
col 74px
768px
Width
px
Margin
px
Gutter
px
Columns
content 704px · col 74px
390px
margin 16px
margin 16px
col 84px
gutter 8px
col 84px
gutter 8px
col 84px
gutter 8px
col 84px
390px
Width
px
Margin
px
Gutter
px
Columns
content 358px · col 84px

Sidebar support, coming soon

Define fixed sidebar widths per breakpoint; content area will be recalculated automatically.

Soon

Spacing

21 steps · padding-x, column gap, inline spacing

Horizontal spacing, used for padding-left/right, column-gap, and inline gaps.

px
px
px
px
px
px
px
px
px
px
px
px
px
px
px
px
px
px
px
px
px
px

Shadow

7 tokens

0 1px 2px 0 rgba(0,0,0,0.05)

0 2px 4px 0 rgba(0,0,0,0.06), 0 1px 2px -1px rgba(0,0,0,0.06)

0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1)

0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1)

0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1)

0 25px 50px -12px rgba(0,0,0,0.25)

inset 0 2px 4px 0 rgba(0,0,0,0.06)

Border Radius

4 tokens

px
px
px
px

Opacity

Previewing light · 16 levels

Dots check each level as foreground text over the canvas, so low opacities are expected to fail: they’re meant for borders, dividers, and overlays, not text.

%
%
%
%
%
%
%
%
%
%
%
%
%
%
%
%
below 4.5:1, large text onlybelow 3:1, not readable

Icon Sizes

Four standard icon sizes paired with your type scale, showing how icon and text align in real UI.

XS
12px
Status
xs12px text5px gap
SM
16px
Continue
base16px text6px gap
MD
24px
Notifications
lg21px text7px gap
LG
40px
Design Tokens
2xl38px text9px gap

Matched text step is the closest size in your type scale to each icon size. Update your type scale settings to see different pairings.

Type on colour

Every background paired with the step of its own family that reads best on it, and the ratio it actually achieves. Judging a pairing by eye is how a system ends up with headings nobody can read.

Great typography begins with readability

Indigo/100 + Indigo/95012.25 AAA

Great typography begins with readability

Indigo/600 + Indigo/506.22 AA

Great typography begins with readability

Indigo/900 + Indigo/5010.07 AAA

Great typography begins with readability

Teal/100 + Teal/95011.77 AAA

Great typography begins with readability

Teal/600 + Teal/504.38 AA-lg

Great typography begins with readability

Teal/900 + Teal/509.07 AAA

Great typography begins with readability

Neutral/100 + Neutral/100017.24 AAA

Great typography begins with readability

Neutral/600 + Neutral/05.43 AA

Great typography begins with readability

Neutral/900 + Neutral/010.02 AAA

Blur scale

4 steps · maps to backdrop-filter: blur() in Figma

0px
px
8px
px
16px
px
32px
px

Export

Get your tokens into Figma as native Variables

Component sets

7 of 50 ready

The plugin builds these as real Figma component sets. Every fill, padding, corner, and shadow on every variant points at one of your Variables, so re-theming the tokens re-themes the component.

Nothing runs on import. Open the RatioDS plugin in Figma (update it to the latest version, the Components section is new), tick a component, and it builds the set for you: it creates every variant, wires the variant properties (Size, State, Variant), and binds each property to the matching Variable.

Buttonactions
Size3×Variant5×State2=30 variants54 bound variables
Linkactions
State3=3 variants5 bound variables
Inputforms
State3=3 variants15 bound variables
Checkboxforms
Checked2×State2=4 variants16 bound variables
Radioforms
Checked2×State2=4 variants16 bound variables
Badgedisplay
Tone5=5 variants14 bound variables
Chip & tagdisplay
Selected2=2 variants11 bound variables

Coming soon · 43

Icon buttonButton groupInput groupTextareaSelectSwitchSliderFile uploadNumber inputPassword inputCredit card inputOTP inputRatingSegmented controlAvatarProgressSpinner & skeletonStatAlertToastTooltipEmpty stateTabsBreadcrumbPaginationStepsNavbarDropdown menuCardModalDrawerPopoverAccordionInverse surfaceTableList groupDescription listTimelineCalendarTime pickerCommand paletteSnippetTree
Ready to use.

Figma plugin

Download this JSON, open the RatioDS plugin in Figma, and import it. It builds native Variables, Light / Dark modes and documentation artboards: auto-layout frames with color swatches, a type ramp, spacing bars, shadow previews and radius shapes. Runs on the free Professional plan, no Enterprise needed.

35 color vars9 font sizes42 spacing7 shadows4 radius4 breakpoints
Figma Chrome Extension

Import artboards

Figma Chrome Extension

Install

Select and copy any section of this page directly into Figma as editable layers, no script or plugin console needed. Great for capturing the full RatioDS documentation view.