ShrubberyDocs
Sign in

Design System (DS v3)

Definition

The token-based visual language for Shrubbery's UI: the sage palette (Inter sans, Cormorant Garamond serif, JetBrains Mono mono), brand OKLCH color overrides, motion tokens, and the bento chrome elevation system introduced in Sprint 38.

This is a design-time artefact used by maintainers and Claude, not a runtime surface. End-user docs should reference UI behaviour, not design-system internals.

Role

The Design System is the single source of truth for visual decisions. It lives in the design/ folder and in src/app/globals.css. Key surfaces:

  • globals.css @theme inline block — brand OKLCH overrides for emerald, rose, and amber Tailwind palettes; motion tokens (--duration-*, --ease-*); --radius-derived scale.
  • Bento chrome — elevation in dark mode uses a lightness ladder (raised surfaces get lighter + edge border, never shadow). Utilities: shadow-bento, shadow-bento-hero, rounded-2xl on bento cards.
  • design/ folder — design reference files including Design System v4.html (exploration only, not token-migrated) and dark-mode-elevation.md.

DS v4 (Bento Grove / Bento Clearing) exists as a design-time exploration only. Its rounded-10/14/16 scale is absent from globals.css. Do not treat it as the live system or assume its tokens exist.

The in-app /design-system showcase route was retired in Sprint 39. The design system is maintained as a repo artefact, not as a running page.

Lifecycle

Not a stateful concept. The design system is a set of tokens and conventions, not an entity with transitions.

(none — this is a design-time internal concept)

Last updated: 22 June 2026