Design tokens

One set of values, everywhere

Every colour, type size, space, radius and shadow in Gridnivo. The same names live in Figma variables, CSS and Tailwind. Click any value to copy it.

Tip: click any value to copy it

Colour

Brand and neutral ramps

Purple carries actions and focus. Ink and greys do everything else.

BRAND

NEUTRAL

Semantic roles

Typography

Geist and Geist Mono

Geist for interface and prose. Geist Mono for figures and code, with tabular numbers so columns line up.

display-xl84 / 92 · 500 · -4.5%Find the component

display-md52 / 56 · 500 · -4%Ship the screen

heading-lg44 / 52 · 500Section heading

heading-sm20 / 28 · 600Card heading

text-lg18 / 28 · 400Lead text reads at eighteen pixels.

text-md16 / 24 · 400Body text, buttons and inputs.

text-sm14 / 20 · 500Labels, table cells and captions

mono-sm13 / 20 · 500$45,231.89 · 0.3s · #715AFF

Spacing

A 4px scale

8 between controls, 16 inside popovers, 24 inside cards and dialogs.

Radius

Rounded, never bubbly

Shadows

Borders lead, shadows follow

shadow-xsButtons, inputs

shadow-smCards, search

shadow-mdMenus, popovers

shadow-brandHighlighted plan

Export

One source, every format

Variables in Figma, built to JSON, CSS and Tailwind.

:root {
  --gn-surface: #FFFFFF;
  --gn-text: #0A0A0A;
  --gn-brand: #715AFF;
  --gn-border: #E4E4E7;
  --gn-radius-md: 10px;
}

.dark {
  --gn-surface: #0A0A0A;
  --gn-text: #FAFAFA;
  --gn-brand: #8C79FF;
  --gn-border: #27272A;
}

All tokens are free

Use the tokens today

Download the token files for free, or get them inside the Figma Lite file.

Buy now

Preview in Figma