Design system
Foundation
The layer under everything else: colour, type and components named so that a designer and an engineer reach for the same token without a meeting.
- Client
- Sprout
- Year
- 2025
- Role
- Design systems
A design system earns its keep at the naming layer. Ours uses plain produce names — KangKong, Ubas, Carrot, Blueberry, Mango, Tomato — because "primary-500" tells you nothing about what a colour is for, and everyone forgets which of the six greens is the green.
Each token ships with its contrast pairs already resolved, so accessible combinations are the default path rather than an audit finding. The components are drawn from the same scale, which is why a screen assembled from them looks designed rather than assembled.
The gradient set is the one place the system is allowed to be expressive. Five ramps, all starting from the same violet, so a marketing page can feel different from the product without leaving the brand.