# Garage Rafid — design system ## The intention **"Eerst uitleggen, dan pas sleutelen."** The site should feel like being explained to, calmly, by someone who has nothing to hide. Every visual decision below serves that one sentence. The recurring gesture of the whole site is a **translation**: something the customer notices, on the left, in their own words; what the garage does about it, on the right, in the garage's precise register; the price always sitting on the customer's side of that line. --- ## Colour Six named values, all taken from the workshop's own material world rather than from a colour trend. No brand colours existed, so the palette had to be derived from the trade itself. | Token | Hex | What it is, and where it comes from | |---|---|---| | `--papier` | `#EFF0EA` | The page field. Off-white with a faint green-grey cast: workshop daylight falling on a printed work order. Deliberately **not** cream. | | `--papier-diep` | `#E4E6DD` | Recessed bands, used to separate the process block and the practical block from the flow. | | `--papier-warm` | `#F7F8F3` | Raised paper: the werkbon panel, the language card, the service notes. | | `--inkt` | `#141C22` | Body text. A blue-black, the colour of ballpoint on a job card, never pure black. | | `--inkt-zacht` | `#4A5761` | Secondary prose. 6.5:1 on `--papier`. | | `--overall` | `#1E4A5E` | Workwear petrol blue. The colour of a mechanic's jacket. Structural colour: service glyphs, panel tints. | | `--overall-diep` | `#102D3B` | The dark field: hero, contact header, footer. | | `--amber` | `#DE8B1B` | Indicator amber. The colour of the lamp on your dashboard that made you go looking for a garage. Attention and primary action only. | | `--amber-diep` | `#96570A` | Amber as text on light. 5.0:1 on `--papier`. | **The idea behind the pairing:** amber is the car speaking, petrol blue is the mechanic answering. That is the whole business in two colours. Amber is rationed hard — the primary button, the active nav marker, the tell-tales, the small mono labels, and nothing else. Contrast, all measured: ink on paper 16:1, soft ink on paper 6.5:1, light text on the dark field 11.5:1, soft light on dark 6.9:1, ink on amber 7.3:1, amber on the dark field 5.3:1. **Amber buttons carry ink text, never white** — white on amber is only 2.7:1 and would have failed. ### Why this is not one of the AI-default looks The nearest default is "cream + serif + terracotta". This isn't it, and the differences are structural rather than cosmetic: the field is a cool green-grey off-white, not cream; the accent is a saturated signal amber, not muted terracotta; the display face is a wide grotesque, not a high-contrast serif; and the dominant structural colour is a deep petrol blue that the default look has no equivalent for. The first thing a visitor sees is a dark blue field, which sets the register before any paper shows. --- ## Type Three faces, each given a **job that carries meaning**, not just a size on a scale. This is the typographic form of the translation idea. | Role | Face | Why | |---|---|---| | **Signage** — headings, nav, buttons | **Archivo**, widened (`wdth` 106–118), 600–700 | A grotesque with a real width axis. Set wide, it reads as painted workshop signage and European industrial lettering. Sturdy, plain, entirely un-slick. | | **Speech** — all prose, and the customer's own sentences | **Source Serif 4** (variable, optical sizing on) | A serif does the human voice. Large x-height, built for screen reading, comfortable at 18px for an older reader. Inverting the usual grotesque-body / serif-display arrangement is part of what makes the page not look templated. | | **The work order** — labels, numbers, the phone number, technical asides | **IBM Plex Mono** | An engineering typeface with warmth. It carries everything that would be printed or typed rather than spoken: codes, prices, addresses, step numbers. | Loaded from Google Fonts in one request, with full local fallback stacks (Georgia / Helvetica / Menlo) so a page opened straight off the filesystem without a network still holds its composition. **Scale** (all fluid, `clamp()`): ``` hero 2.5rem → 5rem line-height .98, tracking -.022em, wdth 116 h1 2.1rem → 3.4rem h2 1.6rem → 2.5rem h3 1.2rem → 1.5rem lead 1.125rem → 1.375rem said 1.125rem → 1.4rem the customer's sentences, italic serif prose 1.125rem (18px) fixed — this is the reading size body 1.0625rem (17px) fixed floor mono .875rem (14px) uppercase, .12–.16em tracking, labels only ``` Body text never drops below 17px, prose is 18px, and every label on the site sits at the 14px mono floor. The single exception is the tracked "GARAGE" line of the stacked wordmark at 12px, which is a mark rather than text to be read; the full name appears at full size everywhere else. Measure is capped at 62ch for prose and 46ch for leads. --- ## Spacing A 4px-rooted scale exposed as `--s1` … `--s10` (.25 / .5 / .75 / 1 / 1.5 / 2 / 3 / 4.5 / 7 / 10 rem). Section rhythm is a single class, `.band` (`clamp(3.25rem, 7vw, 6.5rem)` block padding), with `.band--tight` as the only variant — so vertical rhythm can never be fought over by two competing selectors. Page gutter is `clamp(1.25rem, 5vw, 4rem)`; content maxes at 1180px, or 900px where the page is reading-led. --- ## Motion — the choreography Motion is gated on identity: this client is calm, so there is exactly **one** orchestrated moment, it lasts under two seconds, and then the page is still. **Announce — the ignition self-test (home page, on load).** Five dashboard tell-tales illuminate left to right, 80ms apart, hold for 380ms, then go out together. This is what every car does when you turn the key, and it is the reason people go looking for a garage in the first place. It is not an effect bolted onto the hero — it *is* the hero's first sentence. **Guide.** As the lamps go out, the headline rises into the space they leave (700ms), then the lead (830ms), the buttons (950ms), the reference card (1070ms), the meta line (1170ms). The eye is walked: lights → promise → action. Each beat is set per element with a `--d` custom property, so the sequence is readable in the markup instead of buried in a timeline. **Settle.** Nothing on the page moves again unless you scroll. Scroll reveals are one gesture only: a 14px rise with a fade, once, never repeated. On the translation rows the connecting hairline draws left to right as the row arrives — the motion *is* the structural device, drawing the line from what you said to what we do. **Micro-interactions.** Buttons have a 3px inset bottom edge and press down 2px on `:active`, like a physical switch. Links thicken their amber underline from 2px to 4px. Nothing depends on hover: every hover state has a focus equivalent, and no information is hidden behind one. **Rules honoured.** No carousels, nothing autoplaying, nothing looping. `prefers-reduced-motion: reduce` disables every transition, skips the self-test entirely (the tell-tales simply sit in their resting state), and renders all revealed content in its final position. And the whole reveal system is scoped to `.has-js` — with JavaScript off, nothing is ever hidden in the first place. --- ## The signature element **The instrument strip.** Five inline-SVG dashboard tell-tales — check engine, brake, tyre pressure, oil pressure, battery — drawn at a consistent 1.5px stroke in amber, sitting as a thin band above the headline. They perform the ignition self-test, then dim to a resting 50% amber and stay there. It is the one thing the site is remembered by, and it earns its place three ways: it is the emotional entry point (a light came on, that's why you're here), it is the visual bridge to the amber accent, and the same drawing language extends into the seven service glyphs on the Diensten page, so the whole site is illustrated by one hand. Everything around the signature is disciplined and quiet: hairlines, mono labels, generous white space, one accent colour, a 3px corner radius. --- ## Structure The skeleton was derived from what this brief most needs to announce, not from a standard page order. **Home:** ignition field (dark) → **translation rows** (what you say → what we do; this replaces the usual services grid entirely, because Rafid's customers arrive with a noise, not with the name of a part) → the fixed price, set as a **tear-off work order** with four numbered steps → the person and the languages → practical facts → six-question FAQ. The numbered steps are the only numbered sequence on the site, and they are numbered because the process genuinely is a sequence: call, inspect, quote, then work. Order carries information there; nowhere else does, so nowhere else is numbered. **Diensten** is a document, not a grid: a mono jump-rail across the top for orientation, then seven long-form entries, each opening with the customer's sentence in italic serif and closing with a dashed rule and a mono price line. Left column carries the number and glyph; right column carries the work. **Contact** inverts to the dark field, and the phone number is set at up to 52px in mono as the largest single element on the site. Each page therefore has its own identity — dark-opening, document, inverted — inside one grammar of hairlines, mono meta and serif speech. --- ## Primary action One: **call**. It is the filled amber button in the sticky header on desktop, the full-width amber button in a fixed bottom bar on mobile, and it repeats inside the content at the end of every page. WhatsApp is always beside it and always secondary (outline, never filled), because the brief names calls first. There is no contact form anywhere — a static site cannot deliver one, and a form that silently swallows a message is worse than no form. The WhatsApp glyph is drawn in the same line language as everything else rather than dropped in as the brand logo: a green logo would be the single loudest thing on the page and would break the palette it took the whole site to build. --- ## Mobile The design is composed at 375px, not merely made to fit. The header stays one compact row by stacking the wordmark ("Garage" in tracked mono over "Rafid" in wide Archivo), which frees enough width for all three nav links to stay visible — no hamburger, nothing hidden, which matters more for an 80-year-old than it costs in elegance. The hero headline still lands at 40px. The tell-tale strip stays a single unbroken row. The translation rows fold to stacked pairs with the mono label leading. The fixed call bar keeps the phone number on screen at all times. --- ## Why this feel fits this business Rafid's entire advantage is that he tells you the truth before he touches your car, in words you can follow. That is not a loud proposition and it cannot be sold loudly — the moment the site shouts, it undercuts the thing it is claiming. So the design earns attention through precision rather than volume: a palette taken from his own workshop, three typefaces each doing one honest job, one orchestrated moment that borrows a gesture every driver already knows, and a page structure that literally performs his differentiator by translating the customer's words into the garage's before naming a price. It should look like it cost real money, and feel like a person you would hand your keys to.