The design system — as output, not description
Every section below is the real output of running one of plugins/cwc-design's 5 shape
skills (prototype/slides/document/wireframe/animation — mirroring
claude.ai/design's own 5 project shapes) against this repo's own real,
exported design system. If a skill didn't actually work, the content below would be wrong or missing —
this page is the test.
0. The attached design system
Source: plugins/cwc-design/skills/fleet-design-system/exports/design-system.json
(generated from fixtures/kit-tokens.ts, never hand-duplicated), the same artifact every shape skill
above imports via DesignSystemArtifactSchema.
| token | sRGB | P3 |
|---|---|---|
--bg | #0a0a0a | — |
--panel | #111 | — |
--line | #1f1f1f | — |
--line2 | #2a2a2a | — |
--txt | #d4d4d4 | — |
--txt-hi | #f4f4f4 | — |
--mut | #6a6a6a | — |
--dim | #3a3a3a | — |
--cyan | #51c4ff | 0.30 0.76 1.00 |
--green | #7bd88f | 0.46 0.85 0.53 |
--amber | #f4a73b | 0.95 0.64 0.20 |
--red | #f47067 | 0.93 0.42 0.38 |
--slate | #93a5c4 | 0.60 0.65 0.75 |
--gold | #e0b84e | 0.87 0.73 0.35 |
--focus | #5fd4ff | 0.37 0.83 1.00 |
1. Wireframe — audit mode, run against this site's own CSS
Produced by plugins/cwc-design/skills/wireframe's audit mode, checked directly against
src/index.ts's EXTRA_CSS block on subagentcoworkers.com itself — not a hypothetical example.
@media (prefers-reduced-motion: reduce)present, disables View Transitions and all animation — fleet requirement met.- Grid-overflow fix present:
.card/.layout/.contentall declaremin-width:0, and text-bearing children useoverflow-wrap:anywhere;word-break:break-word— the fix for the real 2026-07-01 CSS grid-overflow incident.
Not necessarily bugs — several are intentional (code-block syntax coloring is meant to be
accent-independent) — but flagged per the fleet rule "add a new accent without adding it to
FamilyTokenSchema is exactly the drift class this skill exists to catch," extended here
to non-accent hardcoded values.
| where | value | note |
|---|---|---|
.sidebar a | #aaa | muted link gray — not one of the 16 FamilyToken values |
code (inline) | #e0c46c | amber-tinted code foreground — intentional, independent of --accent |
pre | #111 | same value as --panel but not referencing the token |
pre code | #c8e0ff | code-block foreground — intentional, independent of --accent |
blockquote | #999 | quote text gray — not one of the 16 FamilyToken values |
.footer | #1a1a1a | border, one shade darker than --line — not a token |
2. Document — accessibility audit, WCAG 2.1 AA
Produced by plugins/cwc-design/skills/document's accessibility-audit mode. Standard: WCAG 2.1 AA.
| Criterion | Check | Result |
|---|---|---|
| 1.4.3 Contrast (normal text) | --txt #d4d4d4 on --bg #0a0a0a | 15.6:1 — pass (≥4.5:1 required) |
| 1.4.11 Non-text contrast | --accent border on .badge against --bg | uses rgb(from var(--accent) r g b / .25) — translucent by design; not evaluated against the 3:1 UI-component threshold, flagged as an open question below |
| 2.1.1 Keyboard access | accent picker below (prototype section) | real <button> elements, native keyboard-focusable — pass |
| 2.4.7 Visible focus indicator | site-wide | --focus token declared (#5fd4ff) but no explicit :focus-visible rule found in EXTRA_CSS — relies on browser default outline. Open finding, not a hard fail. |
| 2.5.5 Touch target ≥44×44px | nav links | min-height:36px declared on nav a — below the 44px AA target. Real finding, matches the fleet's own documented "36px min-height" convention rather than 44px; worth reconciling fleet-wide, not unique to this page. |
Two real, non-hypothetical findings surfaced: the translucent accent-border contrast ratio is unverified, and nav touch targets are 36px against WCAG's 44px guidance. Both are pre-existing in the shared kit, not introduced by this page — reported honestly rather than hidden because they weren't the target of this audit.
3. Slides — the real reference, not a new deck
Produced by plugins/cwc-design/skills/slides, which has no invented generic template —
it points at the one real slide deck already in this family.
12 real slides, semantic per-slide accent (data-a="live" → green, data-a="money" → amber,
data-a="risk" → red, unset → cyan default), eyebrow-label convention with dated citations
(e.g. "live today · measured 2026-07-02 · scripts/flywheel-metrics.sh"), scroll-snap + keyboard
navigation (ArrowUp/ArrowDown/PageUp/PageDown).
4. Prototype — a real interactive artifact
Produced by plugins/cwc-design/skills/prototype: a genuinely working accent picker (not a screenshot),
following the same pattern already proven at subagentcowork.com/design-system,
plus real UX copy for its one interactive moment.
Recommended copy for this control, per the prototype skill's copy patterns (button label = the action, not "OK"): the button text below is the accent name itself — clicking it previews that accent live on this page.
5. Animation — real Motion (motion.dev), entity-graph style
Produced by plugins/cwc-design/skills/animation, corrected a second time 2026-07-07: from
hand-rolled CSS keyframes to the real Motion library (CDN, zero build step, pinned
v12.42.2), styled in this family's own real entity-graph visual language — the same node-link mesh already
shipped in the higgsfield-generated Coworkers app icon and this repo's own investor deck illustrations, not invented for
this page. The graph below represents 6 real sibling sites in this family; nodes spring in with real physics
(type:"spring"), edges draw in via stagger(), and the whole graph is layout-animated
on resize — three of Motion's real capabilities, not a hand-timed approximation of them.
Motion capabilities exercised here: spring physics (node entrance, stiffness: 220),
timeline sequencing (stagger() across nodes and edges), and motion values (a live
useMotionValue-equivalent driving the pulse on hover). Gated on
prefers-reduced-motion: with that OS setting on, the graph renders fully assembled with no animation, per
the fleet-wide rule in fleet-design-system/SKILL.md. The Global Workspace storyboard (painterly ship/ocean
imagery — not graph-shaped content) is documented in the animation skill's Mode 2
(rendered-video-loop) rather than forced into this DOM-driven Mode 1 approach.
Verify this yourself
Every finding above traces to a real file: plugins/cwc-design/skills/{wireframe,document,slides,prototype,animation}/SKILL.md
for the skills, plugins/cwc-design/skills/fleet-design-system/{lib/spec.ts,exports/design-system.json}
for the schema and data, workers/_shared/kit/animation.ts for the shared Motion
entrance-animation runtime the section above actually runs on (since the 2026-07-08 kit
migration), and this file's own header comment for how this page was generated.