# Garage Rafid — self-check against the floor

## How this was verified — read this first

This run was constrained to file tools: **no shell, no browser, no web access.** So nothing below was confirmed by looking at a rendered page. Verification was static and of three kinds:

1. **Arithmetic** — contrast ratios computed from the hex values via the WCAG relative-luminance formula; layout widths computed from the actual `clamp()` and grid values at 375px, 620px, 900px and 1180px.
2. **Code reading** — every class used in the HTML checked against the stylesheet, every SVG path traced coordinate by coordinate, the JSON-LD strings compared character by character against the visible copy.
3. **Reasoning about behaviour** — the JS degradation path, the reduced-motion path, the no-JS path.

**What this cannot catch:** how the type actually sets once the webfonts load, optical spacing, whether the ignition sequence *feels* right at its chosen timings, and any browser-specific rendering. **A visual pass in a real browser at 375px and 1440px is still required before this ships.** That is the honest state of it.

Four real defects were found during this checking and fixed rather than shipped; they are named below.

---

## The twelve floor items

### 1. Orientation — **PASS**
Sticky header on all three pages carrying all three links at every width — **no hamburger, nothing behind a menu**. Active page marked twice over: `aria-current="page"` plus a 3px amber underline. Footer carries a wayfinding column on every page. Diensten adds a mono jump-rail of seven anchors so a long page is still navigable from the top. Each page opens differently (dark ignition / light document / dark contact), so you always know which one you are on.

Attention has one home: exactly **one amber-filled element per screenful** — everything else is hairline, mono or outline. On the home hero the tell-tales hold the eye for the first ~800ms and then hand off to the headline; that is a deliberate sequence rather than competition, and after it settles the amber button is the only saturated thing on screen.

### 2. 80-year-old test — **PASS**
Measured, not assumed. Body 17px, prose 18px, every label at the 14px mono floor (the one 12px item is the wordmark's "GARAGE" line, a mark rather than reading text). Nav links compute to ~53px tall, buttons `min-height: 54px`, call-bar buttons 50px — all past the 44px target.

Contrast, computed: ink on paper **16:1**, soft ink on paper **6.5:1**, light on the dark field **11.5:1**, soft light on dark **6.9:1**, ink on amber **7.3:1**, amber on dark **5.3:1**, amber-as-text on paper **5.0:1**.

**This is where the palette was corrected:** white on amber measures only **2.7:1**, so amber buttons carry ink text, not white. That was caught by doing the arithmetic rather than trusting the eye.

Nothing is hover-only; every hover state has a focus equivalent. FAQ answers are always open — no accordions. Focus is visible everywhere (3px ring, ink on light surfaces, amber on dark, both above 3:1 against what they sit on). Skip link present, and `<main tabindex="-1">` so it actually moves focus.

### 3. Informative — **PASS**
Seven services with concrete work listed under each; the four-step process; the owner's story; the languages spoken; address, service area and all three contact channels repeated on every page; a six-question FAQ. Nothing is filler and nothing is thin — the Diensten page alone runs to real depth per service.

### 4. Harmony — **PASS**
One named intention — *"Eerst uitleggen, dan pas sleutelen"* — at the top of `DESIGN-SYSTEM.md`, with every colour, face and structural device traced back to it there. The translation gesture (what you say → what we do) recurs as the site's grammar: in the home rows, in each service entry's opening line, and in the split between serif speech and mono work-order.

### 5. Motion — **PASS**
Choreographed, not scattered: **announce** (five tell-tales run a car's ignition self-test, 80ms apart, then go out together), **guide** (the headline rises into the space they leave, then lead, buttons, card, meta on staged `--d` delays), **settle** (nothing moves again until you scroll; scroll reveals are one 14px rise, once, never repeated).

No carousels, nothing autoplays, nothing loops. `prefers-reduced-motion: reduce` kills every transition and skips the self-test entirely. The whole reveal system is scoped to `.has-js`, so with JavaScript off nothing is ever hidden in the first place.

*Not verified visually — the timings are reasoned, not watched.*

### 6. Distinctive — **PASS**
Deliberately **not** the stock small-business anatomy: there is no eyebrow above the H1, no trust-badge strip, no services grid, and no CTA band. Services appear as **symptom-to-service translation rows**, because Rafid's customers arrive with a noise, not with the name of a part. The price process is a **tear-off work order** with a perforated edge. The signature is an instrument strip performing an ignition self-test — a gesture that only makes sense for a garage.

Not an AI-default look: the field is a cool green-grey off-white (not cream), the accent a saturated signal amber (not terracotta), the display face a *widened grotesque* (not a high-contrast serif), and the dominant structural colour a deep petrol blue the default palette has no equivalent for. The first thing anyone sees is a dark blue field.

The one thing here I would want a second opinion on is whether the serif body reads as adjacent to the cream/serif default despite the differences. My judgement is that the dark opening and the petrol/amber pairing settle it, but it is the closest call on the page and I would rather name it than let it pass silently.

### 7. Imagery — **PASS**
Zero stock imagery, zero external image files, zero raster assets. Every mark is inline SVG drawn at a consistent 1.4–1.5px stroke: five dashboard tell-tales, seven service glyphs, four UI icons. Richness otherwise comes from type, colour, hairlines, the perforated panel edge, and two very low-alpha atmospheric layers on the dark fields (an amber lamp glow and a workshop-wall panel grid).

Rule 8's photos-exist case does not apply — the brief states no photos exist — so **no `PHOTO-BRIEF.md` was written**, per the output contract. A recommendation to shoot some anyway is logged in `ASSUMPTIONS.md`.

### 8. Honesty — **PASS**
No invented opening hours, prices, quotes, municipality lists, certifications or review counts. Placeholders are visible and styled as placeholders: `[openingsuren volgen]` in four places, `Ondernemingsnummer: [volgt]` in every footer.

JSON-LD is clean of guesses — **no `openingHours`, no `priceRange`, no `aggregateRating`** — and every string in it was compared character by character against copy that is visible on that same page. `description` on each page is a verbatim sentence from that page's own body text.

**No quotation is attributed to Rafid anywhere.** The italic sentences are customer phrasings framed by the section head as typical of what people say; they are not testimonials and carry no names. Reasoning logged in `ASSUMPTIONS.md`.

Every inference that amounts to a claim about how the business operates is listed in `ASSUMPTIONS.md` under "owner must confirm" — including the most load-bearing one, *"komt er iets bij, dan bellen we u eerst."*

### 9. Language — **PASS, with a stated limit**
Belgian Dutch throughout, `lang="nl-BE"`, formal *u*, with Flemish forms chosen deliberately over Netherlands-Dutch ones: *herstellen* not *repareren*, *keuring*/*herkeuring* not *APK*, *op voorhand* not *van tevoren*, plus *nazicht*, *uitbalanceren*, *plaatwerk*, *ondernemingsnummer*. Register is a garage owner's, not a marketing department's.

**The limit:** I am not a native Belgian-Dutch speaker, and register is exactly what a non-native ear misses. A proofread is recommended in `ASSUMPTIONS.md`. Arabic and English appear with correct `lang` and `dir` attributes.

### 10. Findability — **PASS, with one deliberate omission**
Semantic landmarks (`header`/`nav`/`main`/`section`/`article`/`footer`/`address`), one `h1` per page, no skipped heading levels, `aria-labelledby` on every section. Unique title and meta description per page. `AutoRepair` JSON-LD (a precise `LocalBusiness` subtype) on all three pages with consistent NAP, `areaServed`, `knowsLanguage` and `founder`; `hasOfferCatalog` on Diensten with the seven service names matching the `h2`s exactly; `FAQPage` on the home page matching all six visible Q&As exactly. The brief's own example search — *"waar kan ik mijn auto laten herstellen in Antwerpen"* — is the first FAQ question verbatim.

**Omitted on purpose:** `canonical`, `og:url` and `og:image`, because no domain exists in the brief and inventing one would put a fabricated URL in the markup. An HTML comment in each `<head>` marks what to add at launch.

*The JSON-LD was hand-checked for syntax and string-matching but not run through a validator — no web access.* Worth a pass through the Rich Results Test before launch.

### 11. Primary action — **PASS**
One primary action, **call**, reachable from every screenful: an amber button in the sticky header at ≥860px, a fixed bottom call bar carrying the full number below 860px, plus an in-content amber button closing every page and a 52px `tel:` link on Contact. WhatsApp sits beside it everywhere as an outline button — present, clearly secondary, never competing. **No contact form anywhere**, since a static site cannot deliver one.

### 12. Mobile — **PASS**
Composed at 375px rather than merely fitted. The header stays one row by stacking the wordmark, which frees enough width for all three nav links to remain visible (measured: ~305px used of 337px available). The hero headline still lands at 40px, the tell-tale strip stays a single unbroken row, translation rows fold to stacked pairs with the mono label leading, and the call bar keeps the phone number permanently on screen.

*Measured arithmetically, not rendered.*

---

## Defects found while checking, and fixed

Naming these because catching them is the point of the exercise:

1. **The mobile call bar overflowed at 375px.** Measured at ~366px of content in a 351px space — the primary button's label would have wrapped and broken the bar's height. Fixed by tightening the call bar's own type and padding and adding `white-space: nowrap`; re-measured to ~326px with headroom.
2. **The hero's info card squeezed its value column to ~72px** at the 900px breakpoint, which would have shredded the address across four lines. Fixed by keeping the card's rows label-over-value at every width, with the reasoning left as a comment in the CSS so nobody "improves" it back.
3. **Source Serif 4 was requested without its italic axis**, so every italic customer sentence — a signature element of the design — would have rendered as faux-slanted roman. Fixed on all three pages by requesting the `ital` axis.
4. **The airco snowflake's branch chevrons did not land on their tips** (traced coordinate by coordinate against the computed tip positions). Replaced with a cleaner construction: three crossing axes, a centre hexagon, and chevrons only where they compute correctly.

Two smaller corrections: several mono labels sat at 13px, below the 14px floor the design system claims, and were raised to match; the optical alignment of the service-list dashes and the process-list numerals was nudged after computing their line boxes.

## The one thing I would fix next

Nothing on the checklist is knowingly soft-passed. The highest-value next step is not a design change at all: **get real opening hours from Rafid.** The brief's first goal is findability, and hours are the single strongest local-search signal the site currently cannot carry — they cost the client nothing and are logged as placeholders in four places waiting for them.