Get started
Get started
Design principles
The decisions behind Foundry. Use these as a review checklist when shipping new product UI.
01
Clarity over decoration
Every surface earns its place. Prefer hierarchy from type weight, space, and color roles — not gradients, glows, or extra chrome.
02
Tokens before one-offs
If a value appears twice, it becomes a token. Components never invent raw hex, arbitrary padding, or unique radii.
03
One accent, used sparingly
Primary actions and focus rings carry the accent. Neutrals do the heavy lifting so screens stay calm under product density.
04
Concentric structure
Nested radii obey outer = inner + padding. Cards, inputs, and buttons nest optically instead of looking glued together.
05
Accessible by default
Visible focus, AA contrast, 44px touch targets on mobile, keyboard-reachable overlays, and reduced-motion safe animation.
06
Motion with purpose
150–250ms for chrome interactions. Animate opacity and transform. Open slightly slower than close. Never transition: all.
When to break a rule