Skip to content
v2.1

Decisions SW-204 to SW-323

SW-323 — Motion pass across the app

Section titled “SW-323 — Motion pass across the app”
  • Date: 11 November
  • Decision: Route changes use the View Transitions API (content cross-fades with a short upward settle while the sidebar and top bar stay still); the sidebar’s active marker slides; drawers, dialogs, menus, toasts, tabs and accordions share enter and exit motion; one set of timing tokens (120, 180, 240 ms and the brand curves); hover and press feedback is colour only. No new dependency, no shadows, gradients or glass, transform and opacity only, nothing on the critical path over 240 ms, all off under reduced motion, kiosk and TV get fades only.
  • Why: The owner wanted the experience to feel “peak everywhere” when moving between screens. The restrictions keep it fast, accessible and on-brand.
  • Status: current.
  • Implemented in: tokens/tokens.json (motion), docs/motion.md, docs/ui-brand-spec.md section E. App: frontend/src/index.css, route transition code.

SW-322 — One loader everywhere: the opening box

Section titled “SW-322 — One loader everywhere: the opening box”
  • Date: 11 November
  • Decision: Every loading state uses the box-opening animation. Pages, panels, dialogs and fallbacks use the full loader; buttons, table rows and fields use a compact inline box that follows the text colour. Ring spinners and grey skeleton blocks used as loading states are removed. Reduced motion shows the still open logo; every loader keeps a polite role="status" label.
  • Why: The owner’s instruction was to “keep the box opening loading animation everywhere”. It gives one brand-owned loading cue instead of two looks, and the old ring had its own dark-mode bugs.
  • Status: current.
  • Implemented in: motion/box-open/ (CSS, SVG markup, React LogoLoader, BoxSpinner, BoxArt). App: components/boxOpen/css.ts.

SW-317 — Aurora ID card uses brand colours; loader built from the storyboard

Section titled “SW-317 — Aurora ID card uses brand colours; loader built from the storyboard”
  • Date: 11 November
  • Decision: The shipped Aurora card template’s default colours become the brand palette (Maker Teal header, Citron ribbon, Warm Cream body, Deep Ink text, Workshop Orange tail); layout unchanged. The loader is finished from the owner’s 8-frame storyboard, to be retimed if a video arrives.
  • Why: Cards should look like Space Works out of the box in every space. Other reasons not recorded.
  • Status: current.
  • Implemented in: tokens/tokens.json (cards.aurora, loader), motion/box-open/.

SW-316 — Dark theme is one solid black family

Section titled “SW-316 — Dark theme is one solid black family”
  • Date: 11 November
  • Decision: Dark is one neutral family everywhere (landing, spaces, features, docs, sign-in, member area, staff console, /control/, display screens): page #000000, surface #0B0B0B, panel #141414, hover #1C1C1C, line #2C2C2C, Cream text, muted greys at AA contrast. Teal, Citron and orange are accents only (buttons, focus, status, highlights). Token names are unchanged. A correction added the shipped line colour as #2C2C2C, not the #262626 first written.
  • Why: The owner said mixing pure black with green-tinted surfaces “is not working out”. Two families on one screen looked like a mistake; tinted surfaces cost contrast (teal on the lit panel was about 1.76:1); brand colour works better as an accent than as a floor; black is calmer on OLED phones.
  • Status: current. Supersedes the green-tinted values of SW-275 and SW-300 and the surface part of SW-225.
  • Implemented in: tokens/tokens.css, tokens/tokens.json (dark), docs/ui-brand-spec.md, docs/whats-new-v2.0.md (before and after per token). App: frontend/src/index.css.

SW-313 — Cold-start splash: the box opens and flies to the navbar

Section titled “SW-313 — Cold-start splash: the box opens and flies to the navbar”
  • Date: 11 November
  • Decision: On a cold page load the box unfolds and then flies into the header logo position, once per page load, about 1.2 to 1.6 s, shown by a small inline block before the app mounts. Reduced motion gives a still image and a fade.
  • Why: The owner asked for a loading animation of “the SpaceWorks logo closed to open and moving to the navbar”. The inline block means the first load is never blank.
  • Status: current.
  • Implemented in: docs/motion.md, docs/whats-new-v2.0.md. App: index.html inline splash.

SW-306 — Patch on landing pages (rules)

Section titled “SW-306 — Patch on landing pages (rules)”
  • Date: 11 November
  • Decision: Patch appears on the landing pages (home, features, spaces where it fits) under the brand rules: never inside or beside the box symbol (so not over the tiled-symbol background), counts as the section’s one bold moment, decorative beside real copy, a still frame under reduced motion, light and dark versions from the design system, never recoloured or flipped by CSS.
  • Why: The owner asked to “use the mascot Patch in landing pages and all”. The rules keep the mascot from competing with the logo.
  • Status: current. Replaces the “404 only” scope of SW-57.
  • Implemented in: mascot/ and mascot/dark/. App: frontend/public/brand/patch/.

SW-300 — Landing scroll story, symbol background, restrained motion

Section titled “SW-300 — Landing scroll story, symbol background, restrained motion”
  • Date: 11 November
  • Decision: The landing page gets a scroll-driven story (pinned hero scene, product preview rising into frame, a sticky stage beside scrolling steps, reveal on scroll), with a full static version for reduced motion, short screens and phones. A low-opacity tiled Space Works symbol sits behind the hero and overview, edges masked so the centre stays clean. The scroll story favours restraint: calm motion, whitespace, one accent at a time. The dark palette is reviewed as one system.
  • Why: The owner found the landing page lacked the scrolling feel of the SpaceWorks website and asked for it to be “professional, clean”. Behaviour was modelled on the website; nothing was copied (SW-277).
  • Status: current, except the green-tinted dark values, replaced by SW-316.
  • Implemented in: docs/motion.md (scroll reveal), docs/ui-brand-spec.md. App: landing page.

SW-299 — Only the free Gilroy weights ship

Section titled “SW-299 — Only the free Gilroy weights ship”
  • Date: 11 November (first decided 9 November in SW-219, licence accepted in SW-222)
  • Decision: Only the free Gilroy weights are used: Light (300) and ExtraBold (800), for light display text and display headings. Every other weight, and any place the free files cannot be embedded, uses Outfit (SIL Open Font Licence). Unbounded stays as the one accent face. The paid weights (Regular, Medium, SemiBold, Bold) are removed and are never to be re-added. Fallback if the free licence ever becomes a problem: Outfit everywhere.
  • Why: The project does not hold a licence for the paid Gilroy weights and the owner is “not planning to buy” one. SW-222 recorded that the owner accepts the redistribution risk of the free licence. A note in the ledger (SW-276) flags that the free licence restricts making the font files available to third parties, which a public repository may do, and that the paid files remain in older git history (history is not rewritten).
  • Status: current.
  • Implemented in: fonts/ (Gilroy Light and ExtraBold, Outfit, Unbounded, fonts/LICENSES/), tokens/tokens.css (@font-face), site/public/kit/fonts/. Commit 7dca9a4.

SW-277 — The landing page is original, in the app’s own design language

Section titled “SW-277 — The landing page is original, in the app’s own design language”
  • Date: 11 November
  • Decision: The hub home page is an original landing page built in the app’s design language (brand guidelines, tokens, colour fields, existing illustrations). Nothing is ported or copied from the separate SpaceWorks website repository. Docs are promoted from it.
  • Why: The owner corrected an earlier plan to port the website: “don’t work on SpaceWorks-Website in this repo, make a proper landing page for this with the design language.”
  • Status: current (supersedes the first half of SW-277).
  • Implemented in: App: landing page. Design repo: the tokens and rules it draws on.

SW-275 — Spaces home and directory with brand character; richer dark palette

Section titled “SW-275 — Spaces home and directory with brand character; richer dark palette”
  • Date: 11 November
  • Decision: The public home is built around the makerspace listing: a compact hero with search, then a grid of space cards above the fold with loading, empty, no-results and error states. Cards lead with the space’s own cover image and logo and show what the space offers, with brand colour only as a fallback. The page must be “cool”: brand character, hover and focus lift that respects reduced motion, brand illustrations in empty states, a sticky search on phones, an equally polished dark version.
  • Why: The owner wanted a proper main page like the makerspace listing, and later that “Find a space” list only makerspaces with image and logo (no “borrow a tool” wording).
  • Status: partly superseded: the “teal-tinted dark surfaces” part is replaced by SW-316.
  • Implemented in: App: spaces pages. Design repo: docs/ux-spec.md listing patterns.

SW-273 — Settings grouped by task (senior UX pass outcome)

Section titled “SW-273 — Settings grouped by task (senior UX pass outcome)”
  • Date: 11 November
  • Decision: Space settings are in seven groups (Space, People, Areas, Money, Communication, Integrations, Administration) with search and one line of help per page, from one translated catalogue. “Modules” is shown as “Areas & add-ons” in user-facing text only. One name per place.
  • Why: Outcome of the review in SW-255; settings were hard to find. A test enforces help coverage so new pages cannot skip it.
  • Status: current.
  • Implemented in: docs/ux-spec.md. App: /admin/settings/<section>.

SW-255 — A senior UX and product review before release

Section titled “SW-255 — A senior UX and product review before release”
  • Date: 10 November
  • Decision: After every feature lands and before the browser pass, a research-backed review of settings and admin information architecture and usability heuristics, with proper grouping of settings.
  • Why: The owner asked that UX and UI be “proper” “like a senior UX designer / product engineer” once all features existed.
  • Status: current (outcome recorded in SW-273).
  • Implemented in: Design repo: docs/ux-spec.md, docs/ux-screens-longtail.md.

SW-247 — Tagline “Run the space, not spreadsheets.”; “Lending” becomes “Inventory”

Section titled “SW-247 — Tagline “Run the space, not spreadsheets.”; “Lending” becomes “Inventory””
  • Date: 10 November
  • Decision: The product tagline is “Run the space, not spreadsheets.”, used as the README banner headline and tagline, in the official brand colours (tokens from this repo). User-facing “Lending” becomes “Inventory” everywhere.
  • Why: The owner asked: “change lending everywhere to inventory, also follow the brand colour and tagline”. The product manages inventory as a whole; lending is one part of it (SW-349 repeats this for the README).
  • Status: current.
  • Implemented in: brand/readme/ banner, docs/ui-brand-spec.md voice notes. App: copy and navigation.

SW-245 — Professional README banner in the main repo

Section titled “SW-245 — Professional README banner in the main repo”
  • Date: 10 November
  • Decision: The main repo README gets a professional banner with the logo and rounded corners.
  • Why: Owner request (“a proper professional README banner with logo, rounded corners and all”). The same treatment was later applied to this repo (SW-372).
  • Status: current.
  • Implemented in: App: docs/readme/. Design repo: brand/readme/.

SW-235 — Ease-of-use pass; design repo synced to the black palette

Section titled “SW-235 — Ease-of-use pass; design repo synced to the black palette”
  • Date: 10 November
  • Decision: An ease-of-use pass before release (minimal installer questions, guided first-run setup, optional features hidden until switched on, plain-language labels, one-line help). Part (c): sync this repo’s tokens to the true-black palette, commit as the owner with no trailers, and push to the default branch.
  • Why: The owner asked to “make it easier for users and all”. The sync keeps this repo from showing a palette the product no longer uses.
  • Status: current.
  • Implemented in: tokens/, commit 7dca9a4.

SW-225 — Dark mode becomes true black

Section titled “SW-225 — Dark mode becomes true black”
  • Date: 10 November
  • Decision: Dark mode uses a #000 page with near-black raised surfaces, keeping the Maker Teal accent, Citron focus and AA contrast. The owner clarified: “keep the dark theme to somewhat that”, meaning keep its look, hue and hierarchy and only deepen it toward black (smallest token change, no redesign).
  • Why: Reason not recorded beyond the owner’s request; the design-changes page notes true black is cheaper and calmer on OLED phones.
  • Status: partly superseded: the layers above the black page stayed teal-tinted until SW-316 made the whole family neutral. Dark line stayed as before at this step.
  • Implemented in: tokens/tokens.css, docs/whats-new-v2.0.md.

SW-222 — Free Gilroy weights: licence risk accepted

Section titled “SW-222 — Free Gilroy weights: licence risk accepted”
  • Date: 9 November
  • Decision: Use only the free Gilroy weights with Outfit and Unbounded. No commercial licence will be purchased. The owner accepts the redistribution risk of the free licence; the fallback is Outfit everywhere.
  • Why: The owner’s call after the licence question was raised; no budget for the paid weights.
  • Status: current (restated by SW-299).
  • Implemented in: fonts/README.md, fonts/LICENSES/.

SW-220 — Designer font is a real Outfit family

Section titled “SW-220 — Designer font is a real Outfit family”
  • Date: 9 November
  • Decision: The card and certificate designer offers a real Outfit font family. A data migration moves stored designs from Gilroy to Outfit.
  • Why: So the font name in the picker matches what is actually drawn, since the paid Gilroy weights are gone.
  • Status: current.
  • Implemented in: App: designer font list and a data migration.

SW-219 — Release 0.12.0 owner choices: fonts

Section titled “SW-219 — Release 0.12.0 owner choices: fonts”
  • Date: 9 November
  • Decision: Part (a): free Gilroy weights for display, Outfit for body and interface, Unbounded as the one accent face; commercial Gilroy weights removed; dark mode keeps the shipped token palette.
  • Why: Same as SW-299. The dark-mode clause was then replaced by SW-225.
  • Status: current for fonts; dark clause superseded by SW-225 and then SW-316.
  • Implemented in: fonts/, tokens/.
Section titled “SW-210 — Public makerspace header shows the space’s own logo”
  • Date: 7 November
  • Decision: When a makerspace has uploaded a logo, the shared public header shows it instead of the Space Works symbol plus the makerspace name, keeping an accessible home name and correct links. Without an uploaded image it shows the Space Works symbol and the name.
  • Why: Reason not recorded. It matches the rule that tenant logos belong to the makerspace and never animate (SW-362).
  • Status: current.
  • Implemented in: docs/ui-brand-spec.md (logo use). App: shared public tenant header.

SW-204 — Light mode is the default

Section titled “SW-204 — Light mode is the default”
  • Date: 7 November
  • Decision: Space Works starts in light mode. A saved light or dark choice is respected, including across tabs and when storage is blocked. A visitor whose system is dark but who has no saved choice still starts light.
  • Why: Reason not recorded. Tests labelled dark must actually select dark.
  • Status: current.
  • Implemented in: docs/theming.md, docs/lessons-learned.md (lesson 29). App: theme provider and the pre-paint script.

Part of Design decisions, with the reason for each, published from docs/decisions.md. Edit it there.