Foundations
The tokens under every component: colour roles for light and dark, the three type families, and the space, radius, shadow and motion scales.
Every value on this page is read from the kit's own stylesheets when the site is built. They ship as WAIMAKERS brand tokens, WAIMAKERS brand theme, WAIMAKERS kit stylesheet, WAIMAKERS fonts stylesheet and cn util and state recipes.
Palette
The raw colours. Components never use these directly; they reach them through the roles below, so a theme can change without touching a component.
--cream#f8f5f0--cream-2#f2eee6--paper#ffffff--ink#1a1a1a--ink-2#3a3a3a--ink-3#6b6b6b--orange#ff6635--orange-deep#e55020--orange-tint#ffe9df--navy#0a1628--teal#1a3a52--peach#ffa67e--amber#cc6b3d--fog#e8e6e0--mist#b8b5af--slate#3d4148--graphite#595959--redoklch(0.577 0.245 27.325)--red-lightoklch(0.65 0.2 27.325)--green#40715b--green-lightoklch(0.78 0.105 160)
Colour roles and contrast
What each colour is for. The site follows your system theme; both themes render here side by side, and the kit components in each panel pick the theme up from the roles. Ratios are measured in your browser from the rendered colours: text against its surface at 4.5:1, controls and focus at 3:1.
Light
Surfaces
--groundvar(--cream)--surfacevar(--paper)--surface-sunkenvar(--cream-2)--surface-raisedvar(--paper)
Text
--textvar(--ink)--text-mutedvar(--ink-2)--text-subtlevar(--ink-3)--accent-textvar(--text)
Lines and focus
--borderrgb(26 26 26 / 10%)--border-strongrgb(26 26 26 / 18%)--border-controlcolor-mix(in srgb, var(--ink-3) 85%, var(--paper))--focus-ringvar(--text)
Accent
--accentvar(--orange)--accent-strongvar(--orange-deep)--accent-washvar(--orange-tint)
Status
--dangervar(--red)--danger-strongcolor-mix(in srgb, var(--red) 85%, var(--ink))--danger-washcolor-mix(in srgb, var(--red) 8%, var(--paper))--danger-fgvar(--paper)--danger-textcolor-mix(in srgb, var(--red) 80%, var(--ink))--okvar(--green)--ok-washcolor-mix(in srgb, var(--green) 10%, var(--paper))--ok-textvar(--green)--attentionvar(--orange)--attention-washvar(--orange-tint)--attention-textcolor-mix(in srgb, var(--orange-deep) 75%, var(--ink))--infovar(--teal)--info-washcolor-mix(in srgb, var(--teal) 8%, var(--paper))--info-textvar(--teal)
Charts
--chart-series-1var(--orange-deep)--chart-series-2var(--text-subtle)
Dark
Surfaces
--groundvar(--navy)--surfacecolor-mix(in srgb, var(--teal) 30%, var(--navy))--surface-sunkencolor-mix(in srgb, var(--navy) 60%, #000000)--surface-raisedcolor-mix(in srgb, var(--teal) 55%, var(--navy))
Text
--textvar(--cream)--text-mutedvar(--mist)--text-subtlecolor-mix(in srgb, var(--mist) 78%, var(--navy))--accent-textvar(--orange)
Lines and focus
--borderrgb(248 245 240 / 14%)--border-strongrgb(248 245 240 / 24%)--border-controlcolor-mix(in srgb, var(--mist) 60%, var(--navy))--focus-ringvar(--text)
Accent
--accentvar(--orange)--accent-strongvar(--peach)--accent-washcolor-mix(in srgb, var(--orange) 16%, var(--navy))
Status
--dangervar(--red-light)--danger-strongcolor-mix(in srgb, var(--red-light) 85%, var(--cream))--danger-washcolor-mix(in srgb, var(--red-light) 16%, var(--navy))--danger-fgvar(--ink)--danger-textcolor-mix(in srgb, var(--red-light) 70%, var(--cream))--okvar(--green-light)--ok-washcolor-mix(in srgb, var(--green) 24%, var(--navy))--ok-textvar(--green-light)--attentionvar(--orange)--attention-washvar(--accent-wash)--attention-textvar(--orange)--infocolor-mix(in srgb, var(--teal) 40%, var(--cream))--info-washcolor-mix(in srgb, var(--teal) 70%, var(--navy))--info-textcolor-mix(in srgb, var(--teal) 40%, var(--cream))
Charts
--chart-series-1var(--orange)--chart-series-2var(--text-subtle)
Type
Three families with three jobs. The scale is fluid where it matters: titles, ledes and body text grow with the viewport, everything else holds still.
Build the thing your team needs
var(--font-display)Agents draft the meeting notes, you decide what goes out.
var(--font-body)kit
--text-titleclamp(30px, 5vw, 38px)Weekly review is ready--text-h224pxWeekly review is ready--text-h319pxWeekly review is ready--text-ledeclamp(17px, 1.5vw, 21px)Weekly review is ready--text-bodyclamp(15px, 1.4vw, 17px)Weekly review is ready--text-small13.5pxWeekly review is ready--text-eyebrow12pxAgents
Space
A 4px base that doubles as it grows. Use the tokens for gaps and padding so screens keep one rhythm.
--space-14px--space-28px--space-312px--space-416px--space-524px--space-632px--space-748px--space-864px--space-996px
Radius
Soft corners. Things you press are pills; surfaces use the card radius.
--radius-sm10px--radius14px--radius-lg22px--radius-card18px--radius-pill999px
Shadow and layers
Flat surfaces carry no shadow; a hairline separates them. Only things that float above the page, menus, popovers, dialogs, sheets and toasts, take the overlay shadow.
--shadow-card--shadow-sm--shadow-overlay
--z-sticky- 30
--z-overlay- 40
--z-modal- 50
--z-toast- 100
Motion
One ease, four durations. Motion is quick and settles softly. With reduced motion switched on in your system, the kit keeps the change and drops the movement.
--dur-micro80ms--dur-fast120ms--dur-base220ms--dur-slow360ms
--easecubic-bezier(0.16, 1, 0.3, 1)Wordmark and fonts
Use the wordmark files as they are. Never set WAIMAKERS in a typeface; the mark is drawn. The fonts are open source under the SIL Open Font License.
