Reusable system

Tokens first. Components second.

The DotBridge Beta visual system is exported as CSS custom properties and tokens.json. It prioritizes orientation, evidence, and calm contrast across product surfaces.

Design tokens

A small system with visible roles.

Canvas--color-canvas

Surface--color-surface

Ink--color-text

Bridge blue--color-accent

Type--font-sans · --font-mono · --type-*

Space--space-1 … --space-9

Radius--radius-sm · --radius-md · --radius-lg

Motion--motion-fast · --motion-base · --motion-slow

Primitives

Reusable states with one visual language.

Buttons

Primary →Secondary

Badges

Betareadyblockeddonestalled

Card

EVIDENCE

Receipt

One clear object, one state, one next step.

Callout

Code

state: ready
receipt: required

Diagram

intent→door→receipt