Stackmates · Edition 1.0.0
Folio 01
A field manual for
calm app interfaces.
The Stackmates app-interface design system is a small, opinionated set of components — atoms through patterns — built against a single DESIGN.md source of truth. Paper-like surfaces, generous whitespace, one accent. This is the specimen: every tier, ruled and numbered, the way a type foundry catalogues a face.
§00
Specification
The design language in one column. Every component in this manual is measured against these constraints — they are not preferences.
- Theme
- paper — warm canvas, ink, one accent
- Grid
- 4px base · 8px dominant rhythm
- Type
- 16px body · 32px display ceiling
- Depth
- borders over shadows · max nest 2
- Source
- one DESIGN.md · zero raw hex
- Motion
- 80–200ms · reduced-motion first
Index
The catalogue plates
Each tier owns one level of composition. The constraint — a component may only contain components from a lower tier — is what keeps the system legible.
- IDXCatalogue● SetSearchable map of design-system tiers, labs, and workflow studies.Owns — The findability layer for routes, tags, status, and promotion intent.search · tags · status
- AIDArchitecture Diagrams○ In studyA&ID schematics for architecture documentation using the ui-symbols language.Owns — Agency-owned diagram metadata rendered with reusable ui-symbols organisms.A&ID · agency · docs
- RFPRFP Cockpit○ In studyCanonical VariationWorkbench seed for the DRMG Sales RFP review cockpit.Owns — Three complete workflow variants compared before promotion through shared workbench chrome.workbench · queue · evidence · matrix
- WBWorkbench Index○ In studySearchable readiness index for complex-interface variation workbenches.Owns — Workbench job, target user, variants, evidence, downstream pull, readiness, and next proof.readiness · evidence · pull
- RTRealtime Interfaces○ In studyInteraction patterns for audio input, streamed output, interruption, tool feedback, and low-latency repair loops.Owns — The menu category for realtime AI control surfaces: voice capture, streaming response states, event timelines, and recoverable handoffs.audio · stream · interrupt
- GEOGeospatial Opportunity○ In studyProvider-agnostic map workbench for solar roof layout and opportunity scanning.Owns — Reusable geospatial review organism, typed overlay contracts, solar summaries, and local brief output.map · solar · provider seam
- WPWorkflow Patterns○ In studySearchable index of workflow pattern studies for operational surfaces.Owns — Workflow groups, states, responsive behavior, and promotion criteria.jobs · states · criteria
- 00Typography● SetType scale, rhythm, copy hierarchy, numeric treatment.Owns — The page-level rules for headings, body text, labels, and data.Fraunces · system · mono
- 01Atoms● SetZero-composition primitives — buttons, inputs, badges, dots.Owns — A single visual or interactive primitive. Composes nothing below it.forwardRef · CVA · data-slot
- 02Molecules● SetTwo to five atoms composed for one job — selects, comboboxes.Owns — One job done by a handful of atoms. Never contains another molecule.compound · keyboard nav
- 03Organisms○ In studyMulti-molecule features — tables, panels, toolbars.Owns — A feature-complete section built from molecules and atoms.@container · TanStack
- 04Blocks○ In studyPage-section compositions — list views, notice strips.Owns — A full-width page region assembled from organisms.tier scaffolded
- 05Patterns○ In studyReusable stateful UX — shells, wizards, kanban boards.Owns — A reusable interaction pattern that carries its own internal state.stateful · headless
- VTPVoice-to-Project-Planning○ In studySimulated workbench for comparing transcript-first, timeline-first, and command-first AI planning interfaces.Owns — Voice-to-project-planning fixtures, reusable PlanningSessionWorkbench organism, colocated presentation projection, and composition-only design-system evidence.voice · stream · tool repair
── end of index · §01 and §02 are set in type · §03–§05 in study