Tile B family: warm-craft refs: ref-008, ref-010 (+ ref-002 hero technique) archetype: band-rhythm palette: walnut-amber/oat/light ALL COPY IS PLACEHOLDER — words belong to the Copywriter

4.8 from 62 Google reviews

Oversized display line with a lit word.

Placeholder lead paragraph. Two or three lines under the object, in the body face at lead size. The Copywriter owns every word.

or call (435) 753-2521 · 347 W 2500 N, North Logan

What the shop does

Section heading placeholder, two lines.

In-house engine machine work Lead service
Engine rebuilding & exchange
Diagnostics
Diesel inspection — Cache County BRHD-listed
Brakes · clutches · electrical · exhaust

What customers say

Heading placeholder with a warm accent word.

4.8 from 62 Google reviews

[verbatim review — Copywriter, from the dossier's named-and-dated quotes only]
[reviewer name as displayed] · [platform, date]
[verbatim review — no testimonial exists that isn't a real, attributed review]
[reviewer name as displayed] · [platform, date]

spot illustration — placeholder line art


Tile spec — documentation, not part of the design

Type specimen · Fraunces (OFL 1.1) + Karla (OFL 1.1)

--text-hero · Fraunces 600, SOFT 40 / WONK 1 · clamp(3rem, 13vw, 6.5rem)

Machine work

--text-h2 · Fraunces 600 · clamp(1.9rem, 5.6vw, 3.1rem)

Section heading at h2 size

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

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

--text-body · Karla 400 · clamp(1rem, 1.4vw, 1.0625rem) / 1.6

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 · Karla 400 / 700

Small text size.

Eyebrow · tracking 0.14em

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

--color-ink on --color-bg

#2a1c10 on #f6efe2
14.44:1 — AA + AAA

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

#5c4633 on #f6efe2
7.72:1 — AA + AAA

--color-accent on --color-bg

#8e5410 on #f6efe2
5.36:1 — AA

--color-ink on --color-surface

#2a1c10 on #efe3d0
13.03:1 — AA + AAA

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

#5c4633 on #efe3d0
6.96:1 — AA + AAA

--color-accent on --color-surface

#8e5410 on #efe3d0
4.84:1 — AA

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

#f6efe2 on #8e5410
5.36:1 — AA

--color-bg on --color-band

#f6efe2 on #3a2415
12.72:1 — AA + AAA

--color-band-ink-muted on --color-band

#cbb79a on #3a2415
7.47:1 — AA + AAA

--color-amber on --color-band

#d08a22 on #3a2415
5.09:1 — AA

--color-amber on --color-bg

#d08a22 on #f6efe2
2.50:1 — FAILS — non-text use only
rule/edge/illustration strokes; never text on oat

Motion

One hero moment, exactly one. Subject bobs on 7.5s; three satellites run 12s / 16s / 19s; the spark travels on 24s; two haze plates drift on 29s and 41s — six independent, non-synchronised loops, no shared origin (ref-002's layered slow-loop plates).

Signature move (proposed): the plates are the shop-light itself — the warm field behind the object breathes, so the object appears lit rather than pasted. Nothing below the hero moves except house reveals.

Reduced motion: prefers-reduced-motion: reduce stops every loop and collapses the duration tokens. The radial atmosphere, the plate gradients (they keep their blur and position), the object scale and the full palette all survive — every loop oscillates around its rest position, so the still frame is the composed frame.

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