# Spot Bench design system Version 0.1 · 23 Sep 2026 · working name, nothing locked. A visual version lives at [`design-system/index.html`](design-system/index.html). Machine-readable tokens are in [`tokens.css`](tokens.css). --- ## 1. Brand idea **Every price wears its gold date.** Every price, sheet, slip and public page carries a stamp: `PRICED AT GOLD $4,700 · 23 SEP 2026`. That one element does four jobs: 1. **Trust.** It shows where the number came from. 2. **Subscription hook.** When gold moves past the shop's threshold, the stamp goes stale, and reprinting is the paid action. 3. **Citable pages.** AI answer engines quote a number with a date. 4. **Recognition.** It is the one thing that appears everywhere, so it acts as the brand's signature. **Who it is for:** the jeweler behind the counter, not the person who owns the ring. When a design choice could look like a consumer jewelry brand, choose the one that looks like a bench tool. --- ## 2. Principles | Principle | In practice | |---|---| | The screen is the tool; the paper is the brand | Speed and clarity on screen. Care and polish on what gets printed. | | Money is sacred | Prices are always Ink, in mono, with tabular digits. Never coloured, never italic. | | One accent, one meaning | Oxblood means "dated price". Nothing else uses it. | | Show staleness, never hide it | A stale price gets a grey, dashed stamp, not a hidden warning. | | Black-only on paper | Printouts must read on a cheap laser printer. Colour never carries meaning on paper. | | The shop's brand first on paper | The shop's name and logo go on top. Ours appears once, in the footer. | | Talk like the counter | Envelope wording ("Size up one, 14k"), not software wording. | --- ## 3. Identity ### Name **Spot Bench** (working). Jewelers already say "spot" for the day's metal price and "bench" for the repair desk. Domain and trademark: **UNKNOWN**, check before committing. | Alternative | For | Against | |---|---|---| | Bench Sheet | Names the printed thing; close to "jewelry repair price sheet" searches | Generic, hard to own | | Pennyweight | The trade's unit (dwt); distinctive, ownable | Obscure outside the bench | | Karat Slip | Warm; names the output | UK uses "carat" for gold too; "slip" is vague | | Retip | Short verb the trade knows | Names one repair out of twelve | ### Logo - **Wordmark:** "Spot Bench" in Instrument Sans 650, tracking −3%. - **Mark:** an outlined rounded rectangle (the ticket or ingot) above a solid gold bar. Two shapes only, so it holds up on a laser print and in a 16 px browser tab. - **Clear space:** the height of the gold bar × 4 on every side. - **Minimum size:** mark at 16 px; wordmark at 80 px wide. - **Colours:** Ink mark with a Gold bar on light backgrounds; Paper mark with Gold-on-dark on Charcoal; solid black when printed. - **Don't:** gems, crowns, diamonds, gradients, or the gold bar as a fill behind text. ```svg ``` ### The date stamp (signature component) | State | Look | When | |---|---|---| | Fresh | 1.5 px solid Oxblood border, filled Oxblood dot, Oxblood mono caps | Price uses gold within the shop's threshold | | Stale | 1.5 px dashed Graphite border, hollow dot, Graphite text | Gold moved past the threshold (default 10%) since the price or sheet | | Print | Solid black border and dot | Every printout | - **Text pattern:** `GOLD $4,700 · 23 SEP 2026`. A long form, `PRICED AT GOLD …`, is allowed in the hero. - **Specs:** Plex Mono 500, 12 px (15 px in the hero), tracking +6%, radius 6 px, padding 6 × 10 px. It may rotate −2° in marketing only, never in the tool. --- ## 4. Colour | Token | Hex | Contrast on Paper | Use | Never | |---|---|---|---|---| | `--paper` | `#f6f1e7` | — | App and page background | — | | `--card` | `#fffdf8` | — | Controls, cards, panels | — | | `--ink` | `#17150f` | 16.2:1 | Text, all money, primary button | — | | `--graphite` | `#4a463f` | 8.3:1 | Secondary text, labels, stale stamp | Prices | | `--rule` | `#ddd5c6` | — | Hairlines, control outlines | Text | | `--gold` | `#c08a36` | 2.7:1 (decorative) | Logo bar, metal share of the price bar, answer-block rule | Any text | | `--gold-text` | `#7a531c` | 6.0:1 | "Gold added +$19.25" amounts | Prices themselves | | `--oxblood` | `#8e2f2a` | 7.2:1 | Date stamp only | Buttons, errors, anything else | | `--charcoal` | `#1e211f` | — | "Gold today" bar, dark logo tile | Large page backgrounds | | `--gold-on-dark` | `#d9a650` | 7.4:1 on Charcoal | The gold number on the Charcoal bar | Light backgrounds | **Rules** - No red or green for price changes. An increase is `+$x` in Gold text; no change is `$0.00` in Graphite. - Errors use Ink text with an icon and plain words. Oxblood is not an error colour. - One Oxblood element per screen. --- ## 5. Typography Two families, both free on Bunny Fonts or Google Fonts. | Role | Family | Weight | Size / line height | Tracking | Notes | |---|---|---|---|---|---| | Display | Instrument Sans | 650 | 40–56 / 1.02 | −3.5% | Marketing and public page H1 | | Heading | Instrument Sans | 650 | 20–28 / 1.1 | −2% | Section and repair names | | Body | Instrument Sans | 400 | 16 / 1.5 | 0 | Minimum 16 px on mobile | | Small | Instrument Sans | 400 | 14 / 1.45 | 0 | Helper text | | Price (hero) | IBM Plex Mono | 500 | 60 / 1.0 | −5% | Tabular. Cents at 45% size, raised | | Numbers (tables) | IBM Plex Mono | 400–500 | 13–14 | 0 | Tabular, right-aligned | | Label | IBM Plex Mono | 500 | 11 / 1.2 | +12%, caps | Field labels, table heads | | Stamp | IBM Plex Mono | 500 | 12 (15 hero) | +6%, caps | See §3 | **Why mono for money:** the digits line up in columns, the price reads like a ticket rather than an advert, and it prints cleanly at 9 pt. **Why no serif:** serif figures make prices look like a jewelry advert. A serif (Fraunces) is allowed only if the "shop stationery" alternative (§11) is chosen. **Fallbacks:** `"Avenir Next", "Segoe UI", system-ui, sans-serif` and `ui-monospace, "SFMono-Regular", Menlo, monospace`. --- ## 6. Space, shape, elevation - **Spacing scale (4 px base):** 4 · 8 · 12 · 16 · 24 · 32 · 48. - **Radius:** 4 px for paper (sheets, slips), 8 px for controls and buttons, 14 px for panels and cards, 30 px for the phone frame in marketing only. Pill shapes only for toggles. - **Elevation:** shadows only on things that act like paper (sheets, slips, the phone mock). Controls use a 1–1.5 px outline instead. - **Tap targets:** at least 44 × 44 px. Counter staff use one hand, gloves and loupes. - **Layout:** the tool is designed at 380 px wide first. Desktop is the same column centred, with the sheet preview beside it. --- ## 7. Components ### Gold today bar Charcoal background, 8 px radius. Left: `Gold today` (mono 12.5). Right: `$4,700/oz` in Gold-on-dark (mono 14). It sits at the top of the tool because it's the first thing staff check each morning. ### Repair picker A full-width select on Card with a 1.5 px Ink outline and 600 weight. It lists the shop's saved repairs in envelope wording. ### Metal switch A four-segment control (`10k · 14k · 18k · Plat`). The selected segment is Ink with Paper text; the others are Card with a Rule outline. Mono 13. ### Price block Label `COUNTER PRICE`, the hero price in mono, then the fresh stamp, then the **breakdown bar**: an 8 px bar with Ink for labour and Gold for metal, and a legend showing both amounts. Then **since your last sheet**: `Since your last sheet (gold $4,150, 02 Sep): gold added +$19.25`. ### Buttons | Type | Look | Use | |---|---|---| | Primary | Ink fill, Paper text, 650, 8 px radius, 14 × 16 padding | One per screen: "Print counter sheet", "Reprint at today's gold" | | Secondary | Transparent, 1.5 px Ink outline | "Start a take-in slip" | | Text | Ink with an underline | Tertiary actions | ### Counter mat (customer-facing printout) - **Header:** the shop's logo and name on the left, the stamp on the right, and a 2 px black rule below. - **Body:** a two-column table (Repair | Price). Prices are right-aligned mono. Hairlines are `#ddd`. - **Footer:** "Prices follow the gold price and may change." on the left; `Priced with Spot Bench` in mono on the right. - **Print spec:** Letter and A4, one page for up to 20 repairs, black only. - **Never shows** old prices, gold added, or formula internals. ### Staff sheet (in the app, printable) Columns: Repair · Minutes · Last sheet · Gold added · Today. It stays behind the counter. ### Take-in slip - **Layout:** a 6 px Ink top border and a slip number (`TAKE-IN SLIP · #1042`). Customer name and phone. Repair lines with dashed separators. The stamp. A promised date. The total in mono at 28 px. - **Claim stub:** below a dotted tear line, the slip number, customer name and date. ### Gold-move alert email - **Subject:** `Gold moved 13% since your last sheet`. - **Body:** `$4,150 → $4,700` in mono 34, then the biggest single change, then a primary button: "Reprint at today's gold". - **Tone:** no urgency language. ### Public repair page (SEO and AI answers) 1. Breadcrumb in mono (`spotbench.com / repairs / ring-sizing-price`). 2. An H1 phrased as the question people search. 3. The stamp: `WORKED AT GOLD $X · DATE`. 4. An **answer block** with a 3 px Gold left rule. The number and date come within the first 40 words. 5. The formula in a mono block on Paper. 6. A worked example at today's gold. 7. A range table citing public price lists. 8. 3–5 FAQs in customer wording. 9. One call to action for jewelers: "Price this at your counter". No "find a jeweler" (that's a marketplace, which is banned). --- ## 8. Voice and words | Say | Not | |---|---| | Gold today | Gold typed, spot feed | | Your last sheet | Book band | | Gold added +$19.25 | Move, delta | | Size up one, 14k | Ring resize (upsize) — 14 karat gold | | Print the sheet | Export PDF, Generate | | Prices are stale | Market volatility detected | | — | Revolutionize, AI-powered, seamless, unlock, supercharge | - Sentence case everywhere except mono labels and the stamp. - Numbers: `$4,700`, `$233.25`, `14k`, `0.40 dwt`, dates as `23 Sep 2026`. - Always show the formula when asked. Never say "our algorithm". --- ## 9. Imagery - **Use:** real bench photos (ring mandrel, torch, loupe, a hand at the counter, envelopes), in daylight with a warm cast, cropped tight. - **Avoid:** deckle-edged art paper, marble and silk flat-lays, diamonds on velvet, stock "happy couple" shots, AI-generated jewelry (jewelers can tell). - **Product shots:** the phone at an angle next to the printed counter mat on a real counter. --- ## 10. Accessibility - All text meets WCAG AA (4.5:1). Every text token above is 6:1 or better on its background. - Gold (`#c08a36`) is decorative only and never carries meaning alone. The breakdown bar always has a text legend. - Stale state is shown by dashed border + hollow dot + the word "Stale", never by colour alone. - Body text is never below 14 px; inputs are 16 px so iOS doesn't zoom. - Honour reduced motion. The tool needs no animation. --- ## 11. Alternatives (if tests point elsewhere) | Direction | Idea | Choose if | Cost | |---|---|---|---| | **Dated ticket** (this system) | Tool-first screen, black-only paper, oxblood stamp | Default | The stamp has to be used everywhere | | Shop stationery first | Our brand almost invisible; the product is a handsome sheet in the shop's name (Fraunces serif, cream paper) | Jewelers care more about looking professional than speed | Weak recognition for our name; public pages have no look to carry | | Gold ticker | Dark UI with the gold number as hero; the alert is the product | The alert converts better than the calculator | Feels like finance to an older buyer; dark screens print badly | | Quiet luxury (Phase 0 C) | Hairline gold, italic serif prices | Only for high-end ateliers | Consumers misread it; italic figures read slowly; gold text fails contrast (3.1:1) | --- ## 12. Before locking Test with five independent jewelers: 1. **Five-second test** on the tool screen: "What does this do, and who is it for?" Any "it prices my ring" answer means the brand reads as consumer. 2. **Print test:** the counter mat on their own printer. Would they put it out? Would they remove the footer? 3. **Name test:** say the shortlisted names aloud and see which they recall a week later. Sample values throughout: gold $4,700 and last-sheet gold $4,150 are typed, not a live feed; minutes and weights are Phase 0 defaults.