A ground-up design system: colour tokens, a complete component library, and documentation that gave a fast-moving team a single source of truth, helping them ship UI 4× faster with cleaner handoffs and fewer inconsistencies.
The Story
Datum had validated its idea. The MVP was done, the product direction was clear, and full launch was next, which meant a large cross-functional team was about to build simultaneously on a product with real momentum. That's when the absence of a design system becomes expensive.
The brief was clear: build the single source of truth before anything else ships. Not a collection of reusable frames. A proper design system.
The brand guidelines existed. The colours were defined. My job was to translate all of that into infrastructure the whole company could build on."
The Problem
Datum had the right raw materials: brand colours, guidelines, tone of voice, a clear product identity. What didn't exist yet was the layer between those brand decisions and the actual product. The system that translates "these are our colours" into "this is exactly which colour goes on a primary button in a disabled state," documented in a way that removes assumptions entirely.
Without that layer, a team defaults to individual judgment. Different shades of the same colour. Components built twice. Handoff friction on every ticket. Inconsistency invisible on any single screen but obvious across the product as a whole.
The Users
Datum's design system served three distinct users internally: designers who needed consistent components to build with, engineers who needed clean token structures to build from, and product managers who needed a shared language to align decisions across teams. The system had to work for all three without asking any of them to adapt to it.
The Approach
The system followed a deliberate sequence, each phase only beginning once the previous one was stable.
Colour first: 14 named palettes, 96 tokens, each with documented use cases. Typography followed, with a clear hierarchy from display to caption. Spacing, grids, and layout foundations came next.
Every component built from the ground up: buttons, inputs, dropdowns, modals, headers, tables, icons, with full state and variant coverage. Pick up any component and know exactly what you're getting, without asking anyone.
Each component was documented with naming conventions, usage rules, and state guidance. Token structure mapped directly to developer output. As Datum scaled, the system evolved with it.
The Design
Color — Every colour tied to a real use case. No colour exists in the system without a reason.
Typography — A complete type hierarchy from display headlines to captions, consistent across all product surfaces.
Core components — Buttons, input fields, dropdowns, modals, headers, tables, and icons, all built as variant-rich component sets and continuously maintained as the product evolves.
The Impact
With the system in place, the team shipped UI 4× faster.
It became the single source of truth across design, engineering, and product. Decisions that once required back-and-forth became simple lookups. Handoffs became cleaner. It prevented inconsistencies that would have accumulated across parallel workstreams before they could form. New team members had a reference that answered their questions before they needed to ask.
The system is still being built on, growing with the product rather than against it.
Or shoot me an email at giftobidokachi@gmail.com