Foundation

Precise tools, calm surfaces.

Veraforge is the shared visual language for our product surfaces: deep indigo for action, warm amber for emphasis, an 8pt spatial rhythm, and components that are accessible before they are decorative.

Where to start

Colors

Semantic tokens for background, text, borders and intent states, plus the raw brand ramps behind them.

Typography

Space Grotesk for display, Inter for reading. One scale from caption to hero.

Components

Button, Input, Checkbox and Modal — every variant and state, with copyable usage.

The system in one screen

Sign in to Veraforge

At least 12 characters.

Show code
import { Button, Input, Checkbox } from "@/design-system/veraforge";

<Input label="Work email" type="email" required />
<Checkbox label="Keep me signed in on this device" defaultChecked />
<Button type="submit" fullWidth>Continue</Button>