@@ -4,16 +4,16 @@ The single source of truth for RefQueue's public pages (landing + status). Maker
44screens (dashboard, login) stay neutral (Geist) and are out of scope. Every color, size, and
55spacing value on the public pages traces to a token here.
66
7- ** Direction — "Admit One":** a ** vintage theatre-ticket playbill** . An aged programme sheet
8- pinned to a board — letterpress type, playbill vermilion, double-ruled borders, film-grain and a
9- warm vignette — with a ** real scanned Admit One ticket stub** as the hero object. The number is
7+ ** Direction, "Admit One":** a ** vintage theatre-ticket playbill** . An aged programme sheet
8+ pinned to a board, letterpress type, playbill vermilion, double-ruled borders, film-grain and a
9+ warm vignette, with a ** real scanned Admit One ticket stub** as the hero object. The number is
1010the star: a numbered ticket you hold, then move toward the front of the house. Committed,
11- nostalgic, and tactile — deliberately * not* the warm-cream editorial or dark-neon AI defaults.
11+ nostalgic, and tactile, deliberately * not* the warm-cream editorial or dark-neon AI defaults.
1212
13- ** Scope note — theming:** the accent is a * default* (playbill red ` --red ` ). Makers override it
13+ ** Scope note, theming:** the accent is a * default* (playbill red ` --red ` ). Makers override it
1414with ` THEME_ACCENT_COLOR ` , which sets ` --accent ` /` --accent-text ` inline on ` <main> ` and wins over
15- the defaults below. The accent lives in the ** interactive + emphasis layer** — CTA fill, the
16- kicker, the ticket border, the position numeral, links, small marks — so a maker's brand color
15+ the defaults below. The accent lives in the ** interactive + emphasis layer** : CTA fill, the
16+ kicker, the ticket border, the position numeral, links, small marks, so a maker's brand color
1717flows through the whole piece and still reads on aged paper (pick a saturated mid-tone).
1818
1919---
@@ -22,21 +22,21 @@ flows through the whole piece and still reads on aged paper (pick a saturated mi
2222
2323RefQueue reads like a ** printed variety-show programme** : an aged paper sheet, a double-ruled
2424frame, a hand-set letterpress headline, and a torn ticket stub. The drama
25- is ** material** — grain, vignette, ink-on-paper contrast, and one saturated red. Type carries the
25+ is ** material** : grain, vignette, ink-on-paper contrast, and one saturated red. Type carries the
2626period: an aged display face (Rye) for the headline and serials, a condensed grotesque (Oswald)
2727for uppercase utility lettering, and a slab serif (Zilla Slab) for programme body copy.
2828
2929** Signature:** the ** numbered ticket** . On the landing it is a real scanned * REFQUEUE Admit One*
3030stub (serial No 00247) beside a huge ` No. 247 ` headline. On the status page it becomes ** your live
31- position printed as a serial** — ` No. 41 ` set huge in Rye red inside a bordered stub.
31+ position printed as a serial** : ` No. 41 ` set huge in Rye red inside a bordered stub.
3232
3333---
3434
3535## 2. Color
3636
3737Aged programme paper is the canvas; sepia-black is the ink; playbill red is the one saturated
3838voice. The board behind the sheet is a deeper tan. The accent (red by default) carries CTA, the
39- ticket border, and the numeral — never scattered as decoration.
39+ ticket border, and the numeral, never scattered as decoration.
4040
4141| Role | Token | Value | Usage |
4242| ---| ---| ---| ---|
@@ -45,10 +45,10 @@ ticket border, and the numeral — never scattered as decoration.
4545| Paper (foot) | ` --paper-2 ` | ` #e6d8ba ` | Deeper paper at the foot of the sheet gradient |
4646| Paper raised | ` --paper-raised ` | ` #f1e7cf ` | Input wells, card / ticket tops |
4747| Paper sunken | ` --paper-sunken ` | ` #e2d3b0 ` | Sunken wells (referral link) |
48- | Ink | ` --ink ` | ` #241c14 ` | Sepia-black letterpress — headlines, body, frame |
49- | Ink soft | ` --ink-soft ` | ` #5a4b38 ` | Faded ink — subheads, captions |
48+ | Ink | ` --ink ` | ` #241c14 ` | Sepia-black letterpress, headlines, body, frame |
49+ | Ink soft | ` --ink-soft ` | ` #5a4b38 ` | Faded ink, subheads, captions |
5050| Ink faint | ` --ink-faint ` | ` #8a7a5c ` | Fine print, meta |
51- | Red (accent default) | ` --red ` | ` #b5321f ` | Playbill vermilion — CTA, kicker, ticket, numeral |
51+ | Red (accent default) | ` --red ` | ` #b5321f ` | Playbill vermilion, CTA, kicker, ticket, numeral |
5252| Blue | ` --blue ` | ` #2f4d6b ` | Ink-blue, used sparingly |
5353| Line | ` --line ` | ` #c3ad84 ` | Aged hairline rules |
5454| Line strong | ` --line-strong ` | ` #b49b6d ` | Card / well borders |
@@ -60,18 +60,18 @@ ticket border, and the numeral — never scattered as decoration.
6060
6161### Rules
6262- The sheet always carries ** grain + a warm vignette** (` .rq-sheet::before/::after ` ). That texture
63- is the anti-AI signal — do not flatten it to a solid fill.
63+ is the anti-AI signal, do not flatten it to a solid fill.
6464- ` --accent ` is interactive/emphasis only (CTA, ticket border, kicker, numeral, links). Default is
6565 playbill red; a maker's ` THEME_ACCENT_COLOR ` overrides it and must stay saturated enough to read
6666 as ink on aged paper.
67- - Body text is ` --ink ` / ` --ink-soft ` on paper — both clear ≥4.5:1. Fine print (` --ink-faint ` ) is
67+ - Body text is ` --ink ` / ` --ink-soft ` on paper, both clear ≥4.5:1. Fine print (` --ink-faint ` ) is
6868 reserved for genuinely secondary lines (letterhead flourish, stub fine print).
6969
7070---
7171
7272## 3. Typography
7373
74- Five families via ` next/font ` in ` layout.tsx ` — three for the public surface, Geist Sans/Mono
74+ Five families via ` next/font ` in ` layout.tsx ` , three for the public surface, Geist Sans/Mono
7575retained for the maker dashboard.
7676
7777| Level | Family | Size (clamp) | Weight | Tracking | Usage |
@@ -91,7 +91,7 @@ retained for the maker dashboard.
9191- Mono: ` var(--font-geist-mono), ui-monospace, monospace `
9292
9393### Rules
94- - ** Rye is for statements only** (headline, serials, section heads). Its numerals are chunky —
94+ - ** Rye is for statements only** (headline, serials, section heads). Its numerals are chunky,
9595 always give multi-digit numbers ≥0.06em tracking so digits don't kiss (serial uses 0.09em).
9696- Oswald caps carry all uppercase utility lettering (letterhead, kicker, CTA, labels). Never set
9797 Rye in a running label.
@@ -116,7 +116,7 @@ Base unit **4px**. The public page is a centered **sheet** floating on the board
116116
117117### Rules
118118- Every spacing value maps to a token. No magic numbers.
119- - The frame + rules are structural, not decoration — they set the programme rhythm.
119+ - The frame + rules are structural, not decoration, they set the programme rhythm.
120120
121121---
122122
@@ -128,15 +128,15 @@ Base unit **4px**. The public page is a centered **sheet** floating on the board
128128- ** States:** static; entrance = fade + rise (` .rq-enter ` ), reduced-motion safe.
129129
130130### Letterhead (status only)
131- - ** Structure:** an Oswald-caps masthead — a single centered ` ★ The {name} Variety Co. ★ `
131+ - ** Structure:** an Oswald-caps masthead, a single centered ` ★ The {name} Variety Co. ★ `
132132 followed by a thick double rule. The landing has ** no** letterhead; it opens straight on the hero.
133133
134134### Hero headline (landing)
135- - ** Structure:** the Rye ` <h1> ` alone — default ** "No. 247"** with ` 247 ` in ` --accent ` , set large
136- (` clamp(56px, 10vw, 118px) ` ) — then a Zilla Slab lede. No kicker. ` theme.headline ` /
135+ - ** Structure:** the Rye ` <h1> ` alone, default ** "No. 247"** with ` 247 ` in ` --accent ` , set large
136+ (` clamp(56px, 10vw, 118px) ` ), then a Zilla Slab lede. No kicker. ` theme.headline ` /
137137 ` theme.subhead ` override the defaults.
138138
139- ### Ticket stub — landing
139+ ### Ticket stub, landing
140140- ** Structure:** the real scanned * REFQUEUE Admit One* cutout (` /ticket-admit-one.webp ` ,
141141 transparent WebP keyed from a generated ticket, ~ 85KB), rotated 4.5°. Decorative; descriptive
142142 ` alt ` on the image.
@@ -150,12 +150,12 @@ Base unit **4px**. The public page is a centered **sheet** floating on the board
150150- ** Accessibility:** ` aria-label ` on the input; real submit button; visible focus.
151151
152152### Acts (landing "how it works")
153- - ** Structure:** three columns — Rye red numerals ` I. / II. / III. ` , an Oswald caps title, Zilla
153+ - ** Structure:** three columns, Rye red numerals ` I. / II. / III. ` , an Oswald caps title, Zilla
154154 Slab copy (Join the line → Send your friends → Move up the line). Stacks ≤760px.
155155
156- ### Ticket stub — status (signature)
156+ ### Ticket stub, status (signature)
157157- ** Structure:** a bordered stub (` --accent ` border + inner dashed rule) holding: an Oswald overline
158- ("Your position on {name}"), "ADMIT ONE — IN LINE" with flanking rules (rules hidden on mobile),
158+ ("Your position on {name}"), "ADMIT ONE, IN LINE" with flanking rules (rules hidden on mobile),
159159 the ** live position as a Rye red serial** (` No. 41 ` ), and the referral-count line.
160160- ** States:** static now; the stub is the anchor for the wave-two position-jump animation.
161161- ** Accessibility:** the number is real text; the frame/pointer are decorative.
@@ -180,20 +180,20 @@ Base unit **4px**. The public page is a centered **sheet** floating on the board
180180| Standard | 480ms | cubic-bezier(0.16,1,0.3,1) | Sheet entrance (fade + rise) |
181181
182182### Rules
183- - ** GPU-composited only** — ` transform ` , ` opacity ` , ` filter ` , ` box-shadow ` . Never animate layout.
183+ - ** GPU-composited only** : ` transform ` , ` opacity ` , ` filter ` , ` box-shadow ` . Never animate layout.
184184- Respect ` prefers-reduced-motion ` : entrance becomes instant.
185- - Hover on the CTA brightens the ink slightly and presses on active — no glow.
185+ - Hover on the CTA brightens the ink slightly and presses on active, no glow.
186186
187187---
188188
189189## 7. Accepted debt / deferred
190190
191191- ** Position-jump animation** → wave two (its own mini-plan). The status ticket stub is its anchor.
192- - ** Rye serial isn't tabular** — acceptable for a static number; the ≥0.09em tracking keeps digits
192+ - ** Rye serial isn't tabular** : acceptable for a static number; the ≥0.09em tracking keeps digits
193193 legible. Digit alignment handled in the animation mini-plan.
194- - ** Light-only** — the public pages are always the aged-paper surface (the designed screenshot/video
194+ - ** Light-only** : the public pages are always the aged-paper surface (the designed screenshot/video
195195 surface). No dark variant; grain + vignette + red supply the drama.
196- - ** Landing ticket is a fixed demo serial (REFQUEUE · No 00247)** — a scanned image, so it does not
196+ - ** Landing ticket is a fixed demo serial (REFQUEUE · No 00247)** : a scanned image, so it does not
197197 reflect a visitor's real number (they have none yet). The * status* stub is the live, dynamic serial.
198- - ** Full Lighthouse-100 audit + react-scan tooling** — not run this pass (SSR, near-zero client JS,
198+ - ** Full Lighthouse-100 audit + react-scan tooling** : not run this pass (SSR, near-zero client JS,
199199 one ~ 92KB image, fast by architecture). Revisit if needed.
0 commit comments