Design System · Patterns reference
Patterns
Compositions of elements — reference only. Per charter §3, components live in each consuming app, not in the design system. This page catalogs the compositions the fork carries as reusable recipes: shape, purpose, and the elements to reach for. Consumers implement each pattern locally from elements + tokens.
01
Patterns registry
Every composition row in the registry, grouped by style layer. No live demos — the shape is the specification.
20 composition patterns registered. Each row names its
style-layer classification (object · component · overlay) and points at the CSS module where the pattern's
base class lives.
| Pattern | Layer | File | Description |
|---|---|---|---|
.ss-header App header | component | components/header.css | The ink-900 bar — brand, tabs and actions on the on-dark token family. |
.ss-tab Top tab | component | components/header.css | Header navigation tab — brand underline marks the current page. |
.ss-sidenav Side nav | component | components/sidenav.css | The product left rail — ink-900 with the on-dark family, brand spine on the active item. Persistent on desktop; slides in as a drawer (--ss-motion-duration-page/--ss-motion-ease-in-out) with a scrim below 900px. |
.ss-card Card / panel | component | components/card.css | The container base — surface, hairline, radius-md. |
.ss-loc Location card | component | components/card.css | Shop card — name, address, ID, platform tiles, footer. Lifts on hover. |
.ss-field Detail field row | object | components/card.css | Label/value grid row — mono uppercase key, hairline divider. |
.ss-assignee Assignee pill | object | components/chip.css | Avatar + name for multi-user attribution. |
.ss-composer Voice composer | component | components/form.css | Textarea + mic. The mic owns the bottom-right corner. |
.ss-bubble Intake bubble | component | components/conversation.css | Chat bubble — user = ink, system = brand tint. |
.ss-confirm Confirmation card | component | components/conversation.css | Receipt card with a brand spine — what the system just did. |
.ss-check Processing checklist | component | components/conversation.css | Stepped progress — the live step breathes quietly. |
.ss-feed Activity feed | component | components/conversation.css | Icon + event + mono time rows. |
.ss-empty Empty state | component | components/feedback.css | Dashed well with a quiet explanation and one action. |
.ss-banner Banner | component | components/feedback.css | Inline warning / blocked / info strip. |
.ss-table Dense table | component | components/table.css | Locations at scale — sticky mono headers, compacted platform tiles. |
.ss-metric-hero Hero workload metric | object | components/reviews.css | ONE hero figure per view — prominence from scale, not colour. Meter fills green with work done. |
.ss-facet Filter facet | object | components/reviews.css | Selectable count + label chip; active = ink fill (the toggle’s selection language). |
.ss-dotline Dot-separated meta line | object | components/reviews.css | ONE rule for every “token · token · token” list — divider spacing can never drift. |
.ss-review Review card | component | components/reviews.css | Assembled from card + quote + stars + dotline; the spine is the reserved --ss-color-accent accent. |
.ss-palette Command palette | effect | components/motion-effects.css | Glass layer spawning in — scale 0.96→1, rise 8px. The scrim stays sharp. |