Token

System Builder

Generate a complete CSS :root block from your own colour, type, and spacing decisions.

Define your design tokens using the controls below. The System Builder generates an 11-step colour scale from your primary hue, a modular type scale from your base size, and a spacing scale from your base unit. Copy the :root output directly into your project stylesheet.

Design Tokens

Brand / Project Name

Primary Colour

Secondary Colour

UI Font

Spacing Base Unit (px)

4px

Border Radius

Shadow Depth

CSS Output

Unlock full access →

Stay current

Field Notes in your inbox

Practical observations on design systems, component architecture, and UX methodology. No promotional content. Published when there is something worth saying.

Practitioner methodology Editorial standards WCAG 2.1 AA PIPEDA & GDPR compliant