Skip to content
v2.1

Space Works brand → SpaceWorks UI: design-system spec

Design-system specification. The brand export and typography sections were refreshed from Figma on 15 October 2026. App-specific implementation notes below describe the prior integration, not verification of another repository.

Binding source rule (owner). Every visual decision comes from exactly two sources: the brand PDF (brand/space-works-brand-guidelines-v1.pdf) for visual identity, and the UX reference boards (scratchpad/crops/*.png, summarised in ux-spec.md) for layout and UX. All existing app functionality is kept and re-themed. Every token below names its source:

  • brand: a verbatim brand hex, or white (p.4 and p.16 draw white cards).
  • brand-mix: a per-channel sRGB mix of brand colours (Deep Ink, Warm Cream, white, or a brand accent with one of those). The mix is stated.
  • Ref: a colour pixel-sampled from the UX reference boards. Ref-mix: a sampled reference colour mixed with a brand neutral.

Nothing else (no OKLCH shifts, no black, no invented hues).

Current rule (v2.0.1, 2026-11-13): SW-316 (2026-11-11) permits and requires the neutral black dark family. Brand guidelines v2 are current (SW-373, 2026-11-13); v1 and measured UX boards remain historical sources. H.5 also preserves black as the final functional tenant-label fallback. (1A-N05) — supersedes the line above; see docs/current-rules.md#cr-dark-01.

Reproducibility. Every number in this document comes from stdlib Python scripts, now copied to docs/design-revamp/research/tools/:

Script Job
pdfx2.py inflate the PDF objects and page streams
pdf2svg.py, logo_list.py, logo_build.py vector extraction to SVG
brand_tokens_v2.py the token derivation and every contrast ratio
brand_contract_v2.py the tenant contract plus a 4,096-colour sweep
png.py, sample_reference.py reference-board pixel sampling
otfinfo.py font metrics

The maths is WCAG 2.x relative luminance. It reproduces the PDF’s own tested pairs exactly:

Pair Ratio
cream on teal 5.68
ink on cream 13.60
ink on orange 5.51
ink on yellow 10.37
ink on citron 13.23
ink on sky 9.23
orange on cream 2.47

Derivation rules for brand-mix tokens:

  • Text inks. Mix the brand colour toward Deep Ink in light mode, or toward Warm Cream in dark mode, at the smallest step that reaches ≥4.6:1 on every background in the universal set. The universal set is bg, surface, panel, hover and the five *-soft fills.
  • Soft fills. panel plus 12 % of the tone, stored as an opaque triplet. No alpha anywhere.
  • Hover and active. Mix the fill 10 % / 20 % away from its label colour (toward Deep Ink when the label is cream, toward Cream when the label is ink), so label contrast only rises. One exception: when that step is imperceptible (<1.06:1) and stepping toward the label still keeps ≥4.5, it steps toward the label. That only happens on the near-white pastels.

0. Key decisions

Section titled “0. Key decisions”
# Decision Source / why
D1 The light canvas is Warm Cream with white cards. Superseded 11 November 2026 (SpaceWorks decisions 225, 316): dark is one solid black neutral family: a #000000 page and neutral grey layers (surface #0B0B0B, panel #141414, hover #1C1C1C) with no green-tinted surfaces. Teal, Citron and Orange are accents only, never a surface. Text is Cream, focus is Citron. Token names are unchanged. The Deep Ink set survives only as the light-mode .sw-island-dark subtree; in dark, :root.dark .sw-island-dark re-joins the black family so a dark page never shows a green field. owner: “single solid black everywhere, no mixing of pure black and green dark” (decision 316)
D2 accent = Maker Teal in light. In dark it stays Maker Teal #006E63 with Cream labels (5.68:1); it is 3.41:1 on the black page, 3.20:1 on surface and 2.99:1 on panel, so a selected teal fill on panel is paired with a label, not relied on alone. brand-mix.
D3 secondary is renamed brand (the action colour of a stranger-facing surface; default = accent; tenant-overridable). emphasis = Workshop Orange: Space Works’ own, never tenant-overridable, one bold moment per layout. brand p.9 “teal = primary · actions; orange = energy · emphasis”; p.13 “use one bold moment”
D4 Danger is sampled from the UX reference boards, because the brand has no red: #B91C1C text/fill, #991B1B hover, #FCA5A5 card border (dark text). reference org5 danger zone (sampled, C.0)
D5 Solid *-soft tokens replace every bg-{tone}/NN. Translucent text is banned. Codex (1): text-on-accent/75 on teal = 3.90:1
D6 Status = word (mandatory) on a soft pill. Light mode uses the brand-tested solid pastel + ink pairs; dark mode uses soft + tone-ink. Icons are optional. brand p.10 “add a word or icon to every status”; UX spec P10 tinted pills
D7 Typography, superseded 11 November 2026 (decision 299): only the FREE Gilroy weights ship, Light 300 and ExtraBold 800. Display headings use Gilroy ExtraBold, light display text uses Gilroy Light, and everything else (body, labels, controls, IDs) uses Outfit 400–700 (OFL). Unbounded 500–600 (OFL) for one short accent phrase. The paid Gilroy Regular/Medium/Semibold/Bold are never shipped. The 15 October 2026 four-weight arrangement is withdrawn. owner: “I am not planning to buy a licence”
D8 Shape follows the brand’s own product mock (p.16, measured): controls r 10, window/cards r 16, tags fully round, no shadows, hairlines = Deep Ink @ 18 % in light; in dark the line hairline is neutral #2C2C2C and is decorative, about 1.3 to 1.5:1 (1.50 on black, 1.41 on surface, 1.32 on panel), never the only thing that identifies a control. The UX reference uses pill buttons; one token switches it. brand p.16 vector; UX spec P11
D9 Light-mode sidebar = Citron field with Deep Ink labels and a filled teal active item. Dark-mode sidebar = solid near-black #0B0B0B (decision 316). The nav is text-only. Neither the brand mock (p.16) nor the UX reference (org5) puts icons in the sidebar. brand p.16; reference org5
D10 Attention counters and low-stock tags use emphasis (orange + ink; p.16 “2 left” is an orange tag). danger is reserved for destructive actions and errors. brand p.16
D11 No “System” theme option. The existing Light/Dark toggle stays as it is. owner
D12 Logo masters are exported directly from the Figma component library into logo/. All three horizontal variants are supplied as masters, including reversed and one-colour ink. current Figma component library

Current rule (v2.0.1, 2026-11-13): D11 is superseded by SW-364 (2026-11-13): Light / Dark / System, light fallback, System follows the device only when chosen or configured as the space default. D6 is superseded by CR-STATUS-01: small success/warn/info marks retain solid fills and on-* labels in both themes. D8/D9 retain 10 px controls, 16 px cards and the Citron/neutral text-only sidebar; measured reference styles are not alternate defaults. (1A-N06) — supersedes the line above; see docs/current-rules.md#cr-theme-01.

On this topic

Section titled “On this topic”