Switch · spring 0.8
Design & software studio — Ankara
We design the system
under the interface.
Veld designs and builds products for teams whose first version has outgrown its first draft — the interface, the system behind it and the software underneath, from one studio.
Trusted by product teams at
NorthlineCarta HealthOrbit LogisticsFabrikMeridian EnergySableTarn RoboticsHelixKestrel
NorthlineCarta HealthOrbit LogisticsFabrikMeridian EnergySableTarn RoboticsHelixKestrel
Selected work
Products that hold their shape.
Eight products, one rule: the system is designed before the screens, so the fortieth screen costs less than the first.
Home · 1440
Sheet · 390
12 col · 24 gutter · 8 px base
v3 · 41 screens
Wireframe systemOne grid, 41 screens, two widths — the skeleton before any pixel
SystemWireframe
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 like software
SystemGuideline
Segmented · 300 ms
DayWeekMonth
Sheet · momentum
Loading · segments
Motion studiesSprings, sheets and segments — the studies we post 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
What we do
Three services.
One system.
Each one is a part of the mark, and each one is built only from the layer below it.
Throughput1,284u
OEE87%
Open alarms03
Output per hour
Shift A · 06:00–14:00
06:0010:0014:00
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); }
Card / default · spec
radius 10 · pad 16
Start
260
150
16
44
28
Most products don't break on the first screen. They break on the fortieth.
How we work
Four steps. No surprises.
01Audit
Two weeks inside your product. What exists, what repeats, and what is silently drifting apart.
02System
Tokens, components, rules. Written down, built once, versioned — in Figma and in code at the same time.
03Interface
Screens assembled from the system, designed and coded in the same sprint. Nothing is drawn twice.
04Handover
Documentation, Figma and code in one repository. Your team ships the forty-first screen without us.
0
Screens rebuilt on one system, last engagement
0
Components in the shared library
0%
Screens covered by system components
0wk
Design-system handover, start to finish
“Veld gave us the thing we had been missing — a system our engineers actually use. The second product took a third of the time.”
Product lead — manufacturing platform
