Orchard Design System

On this page

Overview

This page is the canonical design-system contract for the canopy worker portal (services/canopy-web) and its Orchard theme. It is what plugin authors and jurisdiction maintainers should treat as canon: every color token, type-scale entry, spacing step, radius, motion rule, voice guideline, and reusable component named here is part of the contract, not a suggestion.

It is translated faithfully from the design team’s design/canopy-web/ (§3, "Design system (the contract)"), supplemented by the final Palette-Revision values (folded into this page). The visual reference is Design System.html in the design project.

NOTE
This page is the design intent. The implemented source-of-truth for the live tokens is rulesets/georgia/notices/components/orchard.typ (notice rendering), services/canopy-web/src/theme.rs (the ColorPalette struct and css_variables() emitter), and services/canopy-web/static/css/canopy-web.css (the --orchard-* CSS variables and utility classes). When those files and this page disagree on a literal value, the code is what ships; this page records the design the code is meant to realize.

3. Design system (the contract)

All colors are exposed as --orchard-{name} CSS variables. Theme switching is [data-theme="dark"] on <body>; the light palette is the default (:root / [data-theme="light"]), and a @media (prefers-color-scheme: dark) block applies the dark palette when [data-theme="system"] is set.

3.1 Color tokens

Brand

Token Light Dark Purpose

--orchard-primary

#1e5146

#3a9080

Headers, primary actions, brand identity

--orchard-primary-hover

#2d7060

#4ba692

Hover state

--orchard-accent

#ecbf44

#ecbf44

Decorative only — rules, overlines, leaves
IMPORTANT
The accent gold (#ecbf44, Orchard Gold) has strict scope. It is for brand and decoration only: the center leaf of the canopy mark, section rule accents (the 14–40px gold lines), selected-row indicators (left rail + soft tint), and overline labels (sparingly). Gold is never used for functional warning UI (use warning amber #e08a2b), status pills, or body text (it fails contrast on white at any size). A second gold (#D0AE56, "DHS Logo Gold") exists only for rendering the Georgia DHS agency seal in co-branded materials and is out of scope for general UI.

Surface

Token Light Dark

--orchard-surface

#f1f6f3

#131c18

--orchard-surface-raised

#ffffff

#1c2a23

--orchard-surface-sunken

#dde5e0

#0e1612

Text

Token Light Dark

--orchard-text

#031018

#e4e4e7

--orchard-text-body

#38424b

#d3dcd7

--orchard-text-muted

#4d6259

#a8d5c5

Chrome

Token Light Dark

--orchard-border

#c8d9cf

#2d4035

--orchard-border-soft

#e2eae4

#243530

Semantic (foreground + soft bg)

Each semantic family has a base foreground token plus a -bg (soft background) and a -text (readable-on-bg foreground) variant. The info family was the addition introduced by the Palette Revision (previously missing).

Token Light Dark

--orchard-success

#2c9a5c

#5cc080

--orchard-success-bg

#d8f0e1

#1f4231

--orchard-success-text

#1c6b3e

#a3e3b9

--orchard-warning

#e08a2b

#e8a85a

--orchard-warning-bg

#fbe6c8

#3e2a0e

--orchard-warning-text

#8e510f

#f0c587

--orchard-error

#c8412e

#e07060

--orchard-error-bg

#f5d6cf

#3e1812

--orchard-error-text

#8a2916

#e4a094

--orchard-info

#3a8a8f

#5ab5ba

--orchard-info-bg

#d6ebec

#163336

--orchard-info-text

#275f63

#8fc8cc

The semantic tints also drive several functional UI recipes whose values are intentionally pinned (so the recipe stays consistent across jurisdictions even when a jurisdiction overrides the primary palette):

  • Status pills (.u-status-*) — light: approved #d8f0e1 on #1c6b3e, pending #fbe6c8 on #8e510f, denied #f5d6cf on #8a2916, info #d6ebec on #275f63, neutral on --orchard-surface-sunken / --orchard-text; dark: approved #1f4231 on #a3e3b9, pending #3e2a0e on #f0c587, denied #3e1812 on #e4a094, info #163336 on #8fc8cc.

  • Expedited / time-sensitive banner — uses --orchard-warning (amber), not the gold accent. Gold is brand-only.

  • Service error panel — light: #fbe6c8 bg, #f0c587 border, #8e510f text; dark: #3e2a0e bg, #6b4810 border, #f0c587 text.

  • Discrepancy row — a tint of the new error: light #fbeae6 bg with a --orchard-error left edge; dark #3e1812 bg.

NOTE
The brand layer (--orchard-primary, --orchard-primary-hover, --orchard-accent) and the leaf-mark SVG colors are intentionally fixed; the Palette Revision moved only the semantic, surface, text, and dark-mode layers.

3.2 Type

  • Display + body: Montserrat 400 / 500 / 600 / 700.

  • Mono: JetBrains Mono 400 / 500 / 600 for IDs, hex, timestamps, config.

Scale:

Use Size Weight Letter-spacing

Hero display

42px

700

-1px

Page title

28px

700

-0.4px

Section title

22px

700

-0.3px

Card title

17px

700

-0.2px

Body large

14px

500

normal

Body

12px

500

normal

Caption

10.5px

500

normal

Overline

9.5px

700

2px (uppercase)

Numbers in mono always use tabular figures:

font-variant-numeric: tabular-nums;
font-feature-settings: "tnum";

3.3 Spacing

4px base. Most things land on 8, 12, 16, 20.

Token Value Use

--sp-1

4px

Hairline

--sp-2

6px

Tight inline rhythm, pill padding

--sp-3

8px

Default gap

--sp-4

12px

Compact card padding

--sp-5

16px

Default card padding

--sp-6

20px

Section gap

--sp-8

24px

Page padding

--sp-10

32px

Hero padding

3.4 Radii

Token Value

--r-sm

3px

--r-md

4px

--r-lg

6px

--r-xl

8px

--r-2xl

10px

--r-3xl

12px

3.5 Motion

Only two animations exist in the system:

  • cy-pulse — skeleton loaders. 1.6s ease-in-out. Opacity 1 ↔ 0.55.

  • cy-caret-blink — input carets. 1.05s steps(2). Never on UI elements.

Honor prefers-reduced-motion: reduce by disabling both.

3.6 Voice

The system speaks like a thoughtful caseworker, not a SaaS app.

  • Editorial · not chirpy. "Nothing in your queue." not "Oops! Looks empty 😊"

  • Name the service, not the user. "canopy-ievs service unreachable" not "Something went wrong."

  • Numbers in mono. Case IDs, hex, timestamps in JetBrains Mono with tabular-nums. Counts in body sans.

  • Time relative, then exact. "14m ago", "Yesterday 16:48", "May 11". Detail rails always include the ISO timestamp.

3.7 Components

Reusable primitives (see Design System.html for live examples):

Component Description

PanelFrame

The unit of composition. Card with overline + gold rule header.

Overline

Small-caps brand label.

GoldRule

2px gold horizontal accent.

BigNumber

Tabular-num display number (sm/md/lg/xl/xxl sizes).

Delta

Directional micro-stat with semantic color.

StatusPill

approved / pending / denied / info / neutral / discrepancy.

EditorialFlag

Eyebrow-style status (replaces pills in editorial layouts).

ProgramStripe

3px colored left edge identifying program.

ProgramTag

Solid colored chip with white text per program.

MiniBar

Horizontal bar for inline stats.

LeafGlyph

Decorative single-leaf brand mark.

Sparkline

Tiny inline trend.

HeroStrip

Dark-green band with greeting + big stat + leaf watermark.

3.8 Accessibility commitments

  • Contrast ≥ AA (4.5:1 body, 3:1 large/UI) in both modes. Audited per release.

  • Full keyboard path for every interaction. ⌘K opens the palette. Tab order = visual order.

  • Focus rings always visible (2px gold accent on :focus-visible). Never removed for aesthetics.

  • Semantic landmarks (<main>, <nav>, <header>, <aside>), role="tablist", aria-current="page", aria-selected.

  • Status pills never rely on color alone — always accompanied by a label.

  • prefers-reduced-motion disables cy-pulse and cy-caret-blink.

Edit this page · default