Design system

Point.The systembehind this site.

A small system, used with discipline: seven colours, five type roles, eight spacing steps, three motions and one accent. This page is built from it, and so is every other page here.

Colour

Seven values. One of them is loud.

Click a swatch to copy its value.

Type

Five roles. Nothing decorative.

Display
Inter 800 · −0.05em · 0.92
To the point
Heading
Inter 700 · −0.035em · 1.04
One shell. Two people.
Editorial
Georgia italic · 1.35
Reduced until only the decision is left.
Body
Inter 400 · 17/27
Every element is a claim on someone’s attention.
Meta
Inter 600 · 11 · +0.16em caps
Exhibit A · Healthcare · 2025
Space

Eight steps.

space.1 · 4px
space.2 · 8px
space.3 · 12px
space.4 · 16px
space.5 · 24px
space.6 · 40px
space.7 · 64px
space.8 · 104px
Components

Live, not pictured.

PrimarySecondaryText link →
Note — dashed red marks anything unconfirmed.
Motion

Three curves.

ease.out
Entrances, reveals
ease.inOut
Page transitions, the point
ease.bounce
The period landing. Used twice, no more.
Accessibility

Measured, not assumed.

AaInk on Paper20.2 : 1AAA
AaPaper on Ink20.2 : 1AAA
AaPoint on Ink5.7 : 1AA
AaPoint text on Paper5.1 : 1AA
AaMute on Paper5.6 : 1AA
AaInk on Point5.7 : 1AA
AaPoint on Paper (large only)3.5 : 1AA large only

Ratios are computed from the token values when this page is built. Reduced-motion is respected everywhere. Every target is at least 44 px.