Switch · spring 0.8
Selected work
Products that
hold their shape.
Eight kinds of work we do, drawn in the system's own language. Every engagement starts with the skeleton and ends with the screens.
Home · 1440
Sheet · 390
12 col · 24 gutter · 8 px base
v3 · 41 screens
Wireframe systemOne grid, two widths, 41 screens
System
Veld guidelines · v4.2
184 pages
Foundations
Colour
Type
Spacing
Grid
Components
Motion
Voice
Handoff
Colour roles 2.1
Type scale 3.0
displayInterfaces
headingInterfaces
bodyInterfaces
labelInterfaces
Spacing 4.0
Buttons 6.2
Motion 7.1
ease-out · 22,61,36,100 · 240–800 ms
Colour roles 2.1
Type scale 3.0
displayInterfaces
headingInterfaces
bodyInterfaces
labelInterfaces
Spacing 4.0
Buttons 6.2
Motion 7.1
ease-out · 22,61,36,100 · 240–800 ms
Figma guideline184 pages, nine chapters, versioned
System
Segmented · 300 ms
DayWeekMonth
Sheet · momentum
Loading · segments
Motion studiesSprings, sheets, segments — as posted on X
Motion
Hero CTA · 14 days · 12,480 sessions
B wins · +48%
Variant A
Learn more
Variant B
Start a project →
A3.1%
B4.6%
A/B — hero CTATwo components, fourteen days, one answer
Research
Tokens · 212 · synced to code
color.signal#FF2A00
color.ground#121212
color.surface#1E1E1E
color.document#E7E7E7
space.416 px
radius.m14 px
type.display92 / 98
motion.out240 ms
:root {
--color-signal: #FF2A00;
--color-ground: #121212;
--space-4: 1rem;
--radius-m: 14px;
--ease-out: cubic-bezier(.22,.61,.36,1);
}
.btn { background: var(--color-signal); }
Token library212 tokens, Figma and CSS from one source
SystemSoftware
Flow · operator · 5 steps · 2 decisions
01Onboarding
02Verify
03Dashboard
04Line detail
05Report
Operator flowFive steps, two decisions, no dead ends
Product
Card / default · spec
radius 10 · pad 16
Start
260
150
16
44
28
Component specRedlines the engineer never has to ask about
System
Throughput1,284u
OEE87%
Open alarms03
Output per hour
Shift A · 06:00–14:00
06:0010:0014:00
Operator consoleData-dense, tabular, one signal colour
Product
0
Products shipped on a written system
0×
Faster second product, on average
0%
Handed over with code, not only files
0–14
Weeks, typical engagement
