Design system
One token set, one HTML skeleton (#hdr / nav / main / .footer), shared by every site in the subagentjobs.com family. Each site aliases --accent to a different token so they're tell-apart-able without inventing off-brand colors. Everything on this page is rendered with the live sharedCss() this site actually ships — resize the window or toggle the accent picker below and the whole page responds, because it isn't a mockup.
Accent picker
Swap --accent live. This is the entire mechanism that tells the family apart.
Color tokens
Family
| site | accent token | role |
|---|---|---|
| subagentjobs.com | --cyan |
job board + A2A agent |
| subagentdata.com | --cyan |
wc2026-bracket, the Chrome-canary/iPhone-16-Pro reference build |
| subagentworkers.com | --cyan |
RAG over Cloudflare's own docs |
| subagentdb.com | --cyan |
natural-language-to-SQL |
| subagentetl.com | --cyan |
Kimball pipeline dashboard |
| subagentcowork.com | --cyan |
this site |
| subagentcoworkers.com | --green |
the coworkers platform, tell-apart via accent only |
| subagentcontracts.com | --amber |
durable contracts — dogfooded by the two docs sites above |
| subagenttasks.com | --red |
the task primitive — this session's own 44 tasks, backing contracts' objective checks |
Typography scale
H1 — 1.7em, txt-hi
H2 — 1.3em, txt-hi, bottom rule
H3 — 1em, txt-hi
Body paragraph in --txt, monospace throughout (ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas), text-wrap:pretty for tidy rag. Inline code uses --panel fill and an amber-tinted foreground (#e0c46c) independent of accent, so code reads the same on every family site.
function sharedCss() {
return `:root{ --accent:var(--cyan) }`;
}Components
1px --line border, 8px radius, 18px padding. The unit every homepage grid is built from.
b inside a card always takes --accent.
Three across on desktop, stacks to one column under 820px.
badge component — relative-color syntax border (rgb(from var(--accent) r g b / .25)) over a hex fallback, so unsupporting browsers still get a solid line.
Progressive enhancement
| technique | what it does here |
|---|---|
| Display-P3 widening | @supports (color: color(display-p3 1 1 1)) + @media (color-gamut: p3) redeclares every accent token in wider-gamut coordinates — visibly more saturated on an iPhone 16 Pro Max or a P3 monitor, identical sRGB elsewhere. |
| Cross-document View Transitions | @view-transition{navigation:auto} — a same-origin link click cross-fades instead of hard-cutting, zero JS, disabled under prefers-reduced-motion. |
| Safe-area insets | env(safe-area-inset-top/bottom) pads the sticky header and main content so nothing sits under the Dynamic Island or the home indicator. |
| Relative color syntax | Chrome 119+ derives the badge border from --accent at render time instead of a second hardcoded token. |
text-wrap: balance / pretty | Headings balance across lines; paragraphs avoid orphans. |
Where this is dogfooded
This token set isn't a spec sitting next to the code — the two docs sites you're likely reading this from (subagentcowork.com, subagentcoworkers.com) and subagentcontracts.com all ship the exact CSS on this page, not a derivative of it.