Foundations · Components · Documentation
The first version of the design system
behind our B2B products.
Before this, every new screen meant deciding again how a button, a table or an empty state should look. I built version 1.0 in Figma: foundations, components with all their states, and short usage notes next to each one so developers could follow them without asking.
See version 2.0, Foundry ↗
I set the foundations, designed each component and wrote the usage notes.
Grid, spacing, type, color, icons, shadows, images, buttons, inputs, navigation, feedback, cards, tables and more.
One typeface, an open-source icon set in five sizes and a spacing scale in multiples of four.
01 / Foundations
Small rules that every screen inherits.
Spacing uses multiples of 4, text sizes are in rem (1rem = 16px) so they respect browser settings, and the layout is a 12-column grid with a 1200px maximum width. The palette has one primary navy for structure and actions, neutral grays for text and borders, and four secondary ramps for data and status.
02 / Components
Every component with every state.
Each component shows default, hover, press, focus and disabled, with the transition timing (400ms ease in/out) written next to it. I added notes where people usually made different choices, like how to pair Cancel and Save in the same modal.
03 / What came next
Why there is a version 2.0.
Version 1.0 lived in Figma and worked well for one product. Once a second product started using it, the gaps showed: colors were defined as raw values instead of roles, the bright accents failed contrast on buttons, and code drifted from the file.
That led to Foundry, a token-based version shared by both products, with accessibility fixed in the values themselves.