Design System

Weave

by Entangle

The system behind everything Entangle ships. Tokens, components, and patterns that scale across every surface.

01 · Colour

Four hue families on a warm neutral base

Each palette is hand-tuned for perceptual uniformity with 11-step scales that hold contrast across light and dark surfaces.

Brand#635bff

Coral#f97316

Mint#10b981

Sand#eab308

Full colour reference →

02 · Typography

Three faces, one voice

Display

The new standard

Suisse Int’l Light 300 · -0.03em tracking · 1.05 line-height

Body

Token-driven components that respect the system while giving engineers the flexibility they need to build fast. Comfortable for long-form content, UI labels, and general body text across every surface.

Suisse Int’l Book 400 · 18px · 1.6 line-height

Mono

font-mono tabular-nums tracking-wide

const token = getToken('color.brand.500'); // #635bff

Suisse Int’l Mono 500 · 16px · 0.02em tracking

Full typography reference →

03 · Components

Built for production

Button

4 variants · 3 sizes · asChild support

Input

3 sizes · validation states · aria-invalid

Card

NONE
elevation

SM
elevation

MD
elevation

LG
elevation

XL
elevation

5 elevation levels · compound sub-components

Full component reference →