@garden-co/design-system v0.1.3
Jazz Design System
Getting Started
First, install packages
pnpm iThen run the development server:
pnpm devOpen http://localhost:3000 with your browser to see the result.
This project uses next/font to automatically optimize and load Inter, a custom Google Font.
The design sysem is created to enable developers to create apps and components quickly, which have baked in design decisions, allowing you to focus on the code.
Design Tokens
The design system purposefully reduces the number of decisions a designer needs to make, mainly reducing design decisions to whether something is:
default- the default appearancehighlight- a more prominent appearancemuted- a less prominent appearance
These tokens have baked in light & dark modes, so the colour reacts to be less/more prominent corresponding to the background colour.
They also handle text and background colours interchangably, this means a text-highlight is not the same colour as a bg-highlight so can be used correspondingly, for example to create double prominence on text, you can make the text 'bolder' and the background a transparent primary colour, to really emphasise text, the same applies to muted, which would have a similar but opposite effect.
The design system is centered around the variable primary, with the secondary variable and some highlight variables being created from this single variable, this allows the entire theme to be quickly updated by changing this colour, converting the entire theme to a harmonious colour palette.