The colors, type, layout and mark of Spinbox, written once, checked, and made into the files each
place that draws Spinbox reads: the website (Starlight), the dashboard (Tailwind, shadcn's
variables) and anything else (dist/tokens.json).
See it: index.html is the laboratory.
It draws the site's landing and a docs page, the dashboard's workspaces with their states, a
dialog and a toast; where the app as it is is shown; the mark's guide -
sizes, clear space, the lockup, the grounds it goes on and what it is not; the palette by what
each color is for; and the same page at a phone's and a tablet's width - in dark or light and
through protanopia, deuteranopia or tritanopia, with every pair the palette is held to.
| Source | What it makes |
|---|---|
palette.toml |
dist/: tokens.css (every role as --spin-*), starlight.css (the website's --sl-color-*), dashboard.css (shadcn's HSL variables, light on :root, dark on .dark, and the dashboard's radius, scrim, dense type scale, heading tracking, motion and a terminal's black surface and sixteen ANSI colours as --terminal-*), tokens.json, and perception.js and simulate.svg for the preview |
spin's dashboard/e2e/catalog.spec.ts |
screens/: every route, tab, dialog and menu of the app in both themes at 1440 and 390 px, and what each draws that this palette does not have - a colour, a face, a size, a radius, contrast, overflow, a target too small (task screens SCREENS=<dir>). The catalog and the audit are committed; the images, hundreds a release, are an archive on a release of this repository that screens.json names and Pages unpacks. See them |
assets/mark.png |
logos/: the stack of disks, cut from the mark as it was drawn (1024 px on a clear ground): the tile on the brand's navy (512, 256; the touch icon at 180, the favicon at 64 and 32) for a dark ground, clear (512, 256) for a light one, and clear with its shadow drawn for the dark page (mark-dark-*, 512, 256), where the light one's grey shadow read as a pale ring. Each is the drawing reduced; a size it would have to enlarge fails |
go tool task # palette and mark: check, and write dist/ and logos/
go tool task report # every pair, its contrast or its distance in each view
go tool task preview # http://127.0.0.1:4330/
go tool task check # what CI runs: fails on a pair below its floor, or a stale dist/ or logos/
go tool task is go-tools' task command, the one tool
go.mod takes: it runs the Task versions.yaml pins, the version CI runs, with go-tools' commands
on its PATH. task check also fails on a workflow step that is not one task (taskgate) and on a
package install that skips Socket Firewall (sfw check).
cmd/palette checks every pair that carries meaning, in both modes, before it writes anything:
- Contrast, WCAG 2.2: the product's text at 7:1 on every surface, secondary text, links, labels and status text at 4.5:1, an input's edge and the focus ring at 3:1.
- Distance, CIEDE2000 (checked against Sharma's test data): two surfaces that meet, a border
against what it bounds, a selected and a hovered row against a plain one, and every status
against every other and against the accent - as drawn, on an office's IPS panel, on the same
panel at 30% backlight, and through each dichromacy (Machado, Oliveira and Fernandes 2009,
severity 1.0), protan and deutan also on the IPS panel. The floors are in
checks.go, each with its reason; they follow spin-stack's sibling CONSTRUCT. - Charts (
[chart],tokens.json'schart): eight series in a fixed order and three threshold statuses, one set for both modes because Grafana draws one dashboard JSON in either theme. Each holds 3:1 on dark's page and on light's, and each series is held apart from the next, and each status from the others, at the meaning tier. - No meaning by hue alone: a status carries a shape too (the preview's states: a dot, a diamond, a square), since a floor for colour-vision deficiencies is a floor, not comfort.
Type and layout are tokens too: IBM Plex Sans and Mono (fonts/, OFL), a 16 px reading size
(below it iOS zooms into a focused input) and 14 px for the dashboard's tables, a 72ch measure,
24 px for any pointer target and 44 px on a coarse pointer (WCAG 2.2, 2.5.8 and 2.5.5).
Motion is four durations and one easing (--spin-duration-*, --spin-ease): a movement says
what something does or that it answered a hand, runs once, and is its end state under reduced
motion.
Each consumer copies the file made for it and holds the copy to this repository's, as the
website's refgen holds its reference to spin: a stale copy fails that consumer's check, not this
one's. The mapping from roles to each consumer's variables is cmd/palette/outputs.go.
Apache License 2.0, as spin. The fonts are IBM Plex under the SIL Open Font License
(fonts/LICENSE-IBM-Plex.txt).