Design Reference

On this page

Overview

The canopy design team ships two design packages, committed in-repo under design/. The durable, human-readable reference — the architectural decisions, the Orchard design-system contract, the implied schemas, and the hard rules — is published here in Antora. The source artifacts the reference describes (the .jsx primitives the Askama/Dioxus code must match, the runnable .html artboards, and the renders/ PNG baselines) stay under design/. Every UI MR diffs its implementation against both: the reference page for intent, the .jsx/artboard for exact shape.

The reference pages

  • Orchard Design System — color tokens, type scale, spacing, radii, motion, voice, components, accessibility (the shared contract).

  • Worker Portal Design Reference — the architectural decisions (ADR-linked), the TOML schemas the composition runtime loads, and the plugin-author hard rules.

  • Applicant Portal Design Reference — thesis, auth model + locked decisions, information architecture, voice, schemas, API sketch, customer↔worker wiring.

  • Worker Portal Mockups — the eight production worker surfaces captured as Mermaid layouts + token annotations.

Source artifacts (design/)

Package Location Contents

Worker portal

design/canopy-web/

dashboard/primitives.jsx — canonical PanelFrame / Overline / GoldRule / BigNumber / Delta / EditorialFlag / ProgramStripe / ProgramTag / MiniBar / LeafGlyph / Sparkline / HeroStrip (the Askama macros in services/canopy-web/templates/_primitives/orchard.html must match these shapes); dashboard/{compositions,customize,panels,states}.jsx, case-detail/.jsx, studio/.jsx; ~16 runnable HTML artboards; and renders/ — per-surface PNG, light
dark, the visual-regression baseline.

Applicant portal

design/canopy-portal/

portal-stream/*.jsx — the canonical reference implementation (lib.jsx primitives/tokens, shell.jsx responsive shell, entry-apply.jsx, recover.jsx, home.jsx, messages.jsx, change.jsx, renewal.jsx, card.jsx, kill-switch.jsx, …), each mapping to roughly one Plan 3 MR; runnable .html prototypes; and the dev-only design-canvas.jsx / tweaks-panel.jsx inspection harness (NOT part of the implementation).

PNG/JPG binaries route through git-lfs; .jsx / .html are linguist-vendored (see .gitattributes).

How to diff a UI MR against the design

  1. Read the relevant reference page above for the surface you’re touching.

  2. Compare your component’s tokens / sizes / states against the matching .jsx primitive (design/canopy-web/dashboard/primitives.jsx for worker, design/canopy-portal/portal-stream/*.jsx for applicant). The Dioxus / Askama translation must preserve interaction model, accessibility, and token usage exactly.

  3. For visual regression, refresh screenshots and compare to the renders/ baselines / HTML artboards:

    cargo xtask e2e --no-refresh --project=screenshots --project=supervisor --project=analyst
# PNGs land at test-results/e2e/screenshots/

  4. If the implementation cannot match the design, escalate to the design team — do not deviate silently.

Related

Edit this page · default