Style guide
Every colour, size and shared component, drawn from the tokens in design-system.css. Use these instead of new values; npm run lint:design keeps new literals out.
Colour
Jungle green is the brand and the only accent. Slate is the neutral ramp. Themes swap the semantic colours below; the ramps stay put.
Jungle
-
--jungle-50 -
--jungle-100 -
--jungle-200 -
--jungle-300 -
--jungle-400 -
--jungle-500 -
--jungle-600 -
--jungle-700 -
--jungle-800 -
--jungle-900 -
--jungle-950
Slate
-
--slate-50 -
--slate-100 -
--slate-200 -
--slate-300 -
--slate-400 -
--slate-500 -
--slate-600 -
--slate-700 -
--slate-800 -
--slate-900 -
--slate-950
Meaning
-
--accent -
--accent-contrast -
--fg -
--muted-fg -
--bg -
--box-bg -
--plain-bg -
--border -
--wc-success -
--wc-warning -
--wc-danger -
--wc-info-bg -
--wc-paper -
--wc-desk -
--wc-surface-raised -
--wc-surface-overlay
Text
-
--wc-text-2xsCards that do things -
--wc-text-xsCards that do things -
--wc-text-captionCards that do things -
--wc-text-smCards that do things -
--wc-text-baseCards that do things -
--wc-text-lgCards that do things -
--wc-text-xlCards that do things -
--wc-text-2xlCards that do things -
--wc-text-titleCards that do things
Corners, shadows and space
-
--wc-radius-xs -
--wc-radius-sm -
--wc-radius-md -
--wc-radius-lg -
--wc-radius-xl -
--wc-radius-2xl -
--wc-radius-pill
-
--wc-shadow-sm -
--wc-shadow-card -
--wc-shadow-raised -
--wc-shadow-overlay
-
--wc-space-1 -
--wc-space-2 -
--wc-space-3 -
--wc-space-4 -
--wc-space-5 -
--wc-space-6 -
--wc-space-7
Charts
One series colour, one empty track and the three status colours, from the --wc-chart-* tokens. Every chart in the app draws with them: practice weeks and trends, writing stats, level and hold meters.
Buttons
Fields
Shown on Home and in the tab.
Enter an email address.
Messages
Info: the stack was copied to your library.
Saved with your account.
Two people are editing this card.
That file could not be read.
No stacks yet
Start one from a template or import a file.