Tile A family: quiet-premium refs: ref-007, ref-011 (+ ref-001 hero technique) archetype: split-hero palette: forest/bone/light ALL COPY IS PLACEHOLDER — words belong to the Copywriter

North Logan, Utah

Display headline, two lines, one italic word.

Placeholder lead. Three lines of body face at reading size, set to the measure the built page will use. Every word on this tile is a stand-in — the Copywriter owns the language.

4.8
from 62 Google reviews
Diesel
Listed by the Bear River Health Department as a Cache County diesel inspection station

What the shop does

Section heading placeholder with one italic accent.

I

In-house engine machine work

Placeholder description line. The dossier makes this the lead service; the Copywriter writes what it says.

II

Engine rebuilding & exchange

Placeholder description line.

III

Diagnostics

Placeholder description line.

IV

Brakes · clutches · electrical · exhaust

Placeholder description line.

Cache County

Placeholder statement of the diesel inspection listing — a factual, government-sourced line. Not a certification claim, and never dressed as one.


Tile spec — documentation, not part of the design

Type specimen · Newsreader (OFL 1.1) + Mulish (OFL 1.1)

--text-hero · Newsreader 400 + italic 400 · clamp(2.9rem, 11vw, 5.6rem)

Machine work

--text-h2 · Newsreader 400 · clamp(1.85rem, 5.4vw, 2.9rem)

Section heading at h2 size

--text-lead · Mulish 400 · clamp(1.0625rem, 2.3vw, 1.3125rem)

Lead paragraph size. The quick brown fox jumps over the lazy dog; 0123456789.

--text-body · Mulish 400 · clamp(1rem, 1.4vw, 1.0625rem) / 1.62

Body copy size at the reading measure. The quick brown fox jumps over the lazy dog, then jumps back again to prove the line length is comfortable at 375px and at the container maximum. 0123456789 — (435) 753-2521.

--text-small / --text-eyebrow · Mulish 600 / 700

Small text size.

Eyebrow · tracking 0.16em

Palette · computed contrast ratios (WCAG 2.1 · AA = 4.5:1 body, 3:1 large)

--color-ink on --color-bg

#1e2b23 on #f4f1e9
13.06:1 — AA + AAA

--color-ink-muted on --color-bg

#4e5d52 on #f4f1e9
6.18:1 — AA + AAA

--color-accent on --color-bg

#1e4b36 on #f4f1e9
8.80:1 — AA + AAA

--color-brass on --color-bg

#7e6019 on #f4f1e9
5.21:1 — AA

--color-ink on --color-surface

#1e2b23 on #e3e7dc
11.74:1 — AA + AAA

--color-ink-muted on --color-surface

#4e5d52 on #e3e7dc
5.56:1 — AA

--color-brass on --color-surface

#7e6019 on #e3e7dc
4.68:1 — AA

--color-accent-ink on --color-accent

#f4f1e9 on #1e4b36
8.80:1 — AA + AAA

--color-bg on --color-band

#f4f1e9 on #14342a
11.97:1 — AA + AAA

--color-brass-light on --color-band

#c79a3e on #14342a
5.22:1 — AA

Motion

One hero moment, exactly one. The subject bobs on a 9s ease-in-out; three satellites run 13s / 17s / 21s and two motes run 26s / 34s — independent, non-synchronised, no shared keyframe origin (ref-001). Nothing below the hero moves except house reveals.

Signature move (proposed): the thin brass ring behind the subject is a dashed rotation-free contour that the headline's italic accent word is coloured from — one line motif tying hero to type (ref-007's thin gold line motifs).

Reduced motion: prefers-reduced-motion: reduce stops every loop and collapses the duration tokens. The atmosphere gradients, the subject scale, the ring motifs and the full palette all survive — the resting frame is the composed frame, because every loop oscillates around its rest position rather than travelling from an offset.

Tweaks bar: serve the repo root and open this file with ?tweaks.