Components · 46 built, 0 hard-coded colours

Built once, from the tokens.

Every button, field and card in Plinth reads its colour, type, radius and spacing from one token set. Change a token and every component follows, in light, dark and high contrast.

Overview
Usage
Code
Accessibility

color.primary.600
radius.md · 10px
space.4 · 16px
font.body · 15/22

Components: 46
Tokens: 212
Contrast: AA

Buttons

Four variants, three sizes. One focus ring, one radius.

Fill: primary.600
Hover: primary.700
Radius: radius.md
Padding: space.3 / 5
Focus: focus.ring 2px

Fields and controls

Labels always visible, help text before errors, never colour alone.

Full name Your full nameAda Whitcombe As it appears on your invoices. Work email ada@whitcombe-studio Add a full address, like name@company.test Plan Team · 10 seats Billed monthly. Change any time.

Workspace region

EuropeNorth AmericaAsia Pacific

Where your data is stored.

Email me release notes

I agree to the terms of use

Keep me signed in on this device

Seats10

Border: border.default
Focus: focus.ring
Error: danger.600
Height: size.control · 44px
Label: font.label · 13/18

Cards

Surface, border and shadow come from elevation tokens; content decides the height.

Weekly active teams

12,480 +8.2%

Last 9 weeksTarget 12,000

New

Starter kit

Tokens, 46 components and page templates, ready to drop into a new project.

Imogen Hale

Design lead

Our last release shipped with no visual review. The components caught everything.

ReviewerMaintainer

Feedback

Alerts, badges and progress share one set of status colours.

Tokens updated. 4 values changed in this release.

Published. Version 3.2 is live for every team.

Heads up. The old Chip component retires in 4.0.

Migration to v378%