From 268e442c7e46cd9b319c3e2f69c2da7028dd4c18 Mon Sep 17 00:00:00 2001 From: Manuel de Brito Fontes Date: Mon, 26 Oct 2026 13:44:01 -0300 Subject: [PATCH] wordmark: Spinbox, written once, the word the prose uses The lockup said `spinbox` while the docs mock on the same page, the website's header and the dashboard's sidebar said `Spinbox`: a system that is the one source of the identity had two spellings of the name. The word is a token now, `type.wordmark`, in tokens.json, tokens.css and dashboard.css as --spin-wordmark, for the dashboard's catalog audit to hold its sidebar to and the website's reference its title. Co-Authored-By: Claude Fable 5.1 --- cmd/palette/main.go | 1 + cmd/palette/outputs.go | 3 +++ dist/dashboard.css | 1 + dist/tokens.css | 1 + dist/tokens.json | 3 ++- index.html | 6 +++--- palette.toml | 4 ++++ 7 files changed, 15 insertions(+), 4 deletions(-) diff --git a/cmd/palette/main.go b/cmd/palette/main.go index d03dcce..dc5a032 100644 --- a/cmd/palette/main.go +++ b/cmd/palette/main.go @@ -44,6 +44,7 @@ type palette struct { LineHeight float64 `toml:"line_height"` HeadingWeight int `toml:"heading_weight"` HeadingTracking float64 `toml:"heading_tracking"` + Wordmark string } Layout struct { Measure, Sidebar int diff --git a/cmd/palette/outputs.go b/cmd/palette/outputs.go index 1ea515c..89875e0 100644 --- a/cmd/palette/outputs.go +++ b/cmd/palette/outputs.go @@ -82,6 +82,7 @@ func tokensCSS(p palette, dark, light map[string]rgb) string { for _, k := range names { fmt.Fprintf(&b, "\t--spin-brand-%s: %s;\n", k, strings.ToUpper(p.Brand[k])) } + fmt.Fprintf(&b, "\t--spin-wordmark: %q;\n", p.Type.Wordmark) fmt.Fprintf(&b, "\t--spin-font-sans: '%s', %s;\n", p.Type.Sans, p.Type.FallbackSans) fmt.Fprintf(&b, "\t--spin-font-mono: '%s', %s;\n", p.Type.Mono, p.Type.FallbackMono) fmt.Fprintf(&b, "\t--spin-text-reading: %dpx;\n\t--spin-text-dense: %dpx;\n", p.Type.ReadingSize, p.Type.DenseSize) @@ -211,6 +212,8 @@ func dashboardCSS(p palette, dark, light map[string]rgb) string { } b255 := func(v float64) int { return int(math.Round(v * 255)) } fmt.Fprintf(&b, "\t--scrim: rgb(%d %d %d / %g);\n", b255(navy.r), b255(navy.g), b255(navy.b), p.Tint.Scrim) + // The word the sidebar writes beside the mark: the app's catalog audit holds its text to this. + fmt.Fprintf(&b, "\t--spin-wordmark: %q;\n", p.Type.Wordmark) fmt.Fprintf(&b, "\t--spin-font-sans: '%s', %s;\n\t--spin-font-mono: '%s', %s;\n", p.Type.Sans, p.Type.FallbackSans, p.Type.Mono, p.Type.FallbackMono) for _, k := range []string{"xs", "sm", "base", "lg", "xl", "2xl", "3xl"} { step, ok := p.Type.DenseScale[k] diff --git a/dist/dashboard.css b/dist/dashboard.css index 6a00602..38f28af 100644 --- a/dist/dashboard.css +++ b/dist/dashboard.css @@ -52,6 +52,7 @@ :root { --radius: 4px; --scrim: rgb(17 24 39 / 0.6); + --spin-wordmark: "Spinbox"; --spin-font-sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; --spin-font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace; --spin-text-xs: 12px; diff --git a/dist/tokens.css b/dist/tokens.css index d9782e0..21f0f84 100644 --- a/dist/tokens.css +++ b/dist/tokens.css @@ -46,6 +46,7 @@ --spin-brand-frost: #EAF0F6; --spin-brand-mint: #5FE3D6; --spin-brand-navy: #111827; + --spin-wordmark: "Spinbox"; --spin-font-sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; --spin-font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace; --spin-text-reading: 16px; diff --git a/dist/tokens.json b/dist/tokens.json index f80e5f5..baeeb49 100644 --- a/dist/tokens.json +++ b/dist/tokens.json @@ -106,6 +106,7 @@ }, "LineHeight": 1.6, "HeadingWeight": 600, - "HeadingTracking": -0.02 + "HeadingTracking": -0.02, + "Wordmark": "Spinbox" } } diff --git a/index.html b/index.html index 5f572df..60456e9 100644 --- a/index.html +++ b/index.html @@ -176,7 +176,7 @@
-
spinbox
+
Spinbox

Spinbox brand system

One palette, one mark and one type for the site, the dashboard and everything else that draws Spinbox - each color checked here, and copied from here by each of them. This page is the laboratory; the product is at the website.

@@ -272,8 +272,8 @@

Clear space

A quarter of the mark's height on every side, dashed above: no text or edge inside it.

Lockup

-
spinbox
-

The mark, then spinbox in IBM Plex Mono 600, its cap height the mark's middle disk.

+
Spinbox
+

The mark, then Spinbox in IBM Plex Mono 600 - the word the prose uses, capitalised, its cap height the mark's middle disk.

Not

stretched
diff --git a/palette.toml b/palette.toml index 9917010..94160b6 100644 --- a/palette.toml +++ b/palette.toml @@ -85,6 +85,10 @@ dense_scale = { xs = [12, 16], sm = [13, 20], base = [14, 22], lg = [16, 24], xl line_height = 1.6 # reading; dense text takes 1.45 heading_weight = 600 heading_tracking = -0.02 # em: mono headings are wide; this tightens them to read as one word +# The name beside the mark, and in every header: the word the prose uses, since a lowercase mark +# beside a capitalised product was two spellings of one name. The dashboard's catalog audit holds +# its sidebar to this; the website's reference holds its title to it. +wordmark = "Spinbox" # Layout. A measure readers keep their place in, targets fingers hit, and corners that read as # one product from the site to the dashboard.