01 FOUNDATIONS
Design Tokens
The visual language of Wobble OS.
Colours, spacing and reusable values that create consistency across every project.
Purpose
Design Tokens are reusable values used throughout Wobble OS.
Instead of hard coding colours, spacing or shadows, every component references these shared values.
This keeps the system consistent and easy to maintain.
Colours
The core colour palette used throughout Wobble OS.
Canvas
HEX #F8F7F3
CSS —wobble-color-canvas
Moss
HEX #6D8B74
CSS —wobble-color-moss
Paper
HEX #FFFFFF
CSS —wobble-color-paper
Clay
HEX #C47A5A
CSS —wobble-color-moss
Ink
HEX #202020
CSS—wobble-color-ink
Sky
HEX #BFD8E6
CSS —wobble-color-sky
Stone
HEX #CFC9C2
CSS —wobble-color-stone