Beranda redesign v3 — "Kertas, diperbesar"

Date: 2026-07-15 · Scope: apps/public-web /beranda presentation only.
No API, auth, boundary, or deploy-script changes. Replaces the v2 (navy+gold) look.

Brief

Efran's direction: v2 (dark navy+gold) missed; v1's "Kertas" language was right —
bright paper, ink, warm hairlines, deep maroon accent, mono kickers, editorial Geist
display. v3 must take that v1 DNA and execute it at the level of the reference site
(https://fj-tech-constructi-69.aura.build/): way more modern, clean, polished, with
GSAP motion. Audience masyarakat umum, Bahasa Indonesia, public-service register
(not a product pitch). Design guidance sourced from the MengTo/Skills toolkit
(ui-ux-pro-max) + the frontend-design process skill.

What we take from each source

From v1 (the foundation — retrieved from d34b262^):
- Kertas palette: white paper, --ink #15171A, warm hairlines #E6E4DD,
deep maroon accent oklch(0.42 0.11 25) on a single accented word.
- Geist display at clamp(48px, 6.5vw, 96px), line-height 0.95, -0.04em;
Geist Mono uppercase kickers (01 ─ ANDA BERTANYA).
- Hairline-divided sections; stat strip with vertical hairline columns.
- H1 with maroon <em> accent word; honest sub-copy; example questions that
seed /tanya?seed=.

From the fj-tech reference (the execution bar):
- Full-bleed composition (v1 boxed everything in a 1180px container with visible
padding — v3 lets hairlines run edge-to-edge, content on a wider grid).
- Massive 3-line stacked display headline, middle line in muted ink (their
"Building / Tomorrow's / Heritage." trick).
- Stat band anchored to the hero's bottom edge, hairline-columned.
- Small uppercase mono meta labels everywhere (CATEGORY / TIMELINE register).
- Editorial index rows with hairlines for list content; one dark full-bleed
contrast section in an otherwise light page; generous vertical rhythm.
- An interactive proof moment mid-page (theirs: drag-to-compare; ours: the
cited-answer demo).

From MengTo/Skills ui-ux-pro-max (searched 2026-07-15):
- Landing pattern: Minimal Single Column — "paper-like background, single CTA
focus, large typography, lots of whitespace" (exact match for kertas).
- Typography: Minimal Swiss — "single font family with weight variations.
Ultimate simplicity" → keep the loaded Geist + Geist Mono; no new fonts.
- Style: Accessible & Ethical (gov/public checklist): 4.5:1 contrast, visible
focus, keyboard nav, reduced-motion, 44px targets, no emoji icons.
- Avoid-list: AI purple/pink gradients, ornate effects, cream+serif template.

Kept v2 behaviors that were feedback-driven, not aesthetic:
- No marketing counters/ask-counts; facts only. No staff door (isolation tests).
- Kementerian Hukum (Kemenkum) naming; verified official links in the footer.
- Composer that seeds /tanya?seed=…; useLandingGsap reduced-motion infra
(SSR static markup is the completed state).

Tokens (`.lv3-page`, landing-scoped; never app `--bg/--ink`)

Token	Value	Use
`--lv3-paper`	`#FCFBF9`	page ground (barely-warm white)
`--lv3-surface`	`#F5F4EF`	washes, cards, hover fills
`--lv3-ink`	`#16181C`	display type, dark section bg
`--lv3-ink-soft`	`#3E4046`	body text
`--lv3-ink-mute`	`#6E7178`	meta text (AA on paper)
`--lv3-line`	`#E7E5DD`	hairlines
`--lv3-line-strong`	`#CBC8BE`	interactive borders
`--lv3-accent`	`#7E2F26`	maroon — accent word, links, active states
`--lv3-accent-soft`	`#F4E9E6`	maroon wash
`--lv3-stamp`	`#A93E31`	the red "cap dinas" stamp on the demo card
dark section	`#16181C` bg, `rgba(255,255,255,.13)` lines, `#F4F3EF`/`#A7A9AE` text

Rationale: this is v1's palette promoted to tokens. The red stamp replaces v2's
gold stamp — Indonesian official document stamps (cap dinas) are red ink, so the
signature moment gets more authentic, not less. Gold is dropped entirely.

Type

Display: Geist (loaded) — weights 500/600, -0.04em, H1
clamp(52px, 7.6vw, 118px) at line-height 0.94 (bigger than v1; reference scale).
Body: Geist 400/500 at 16–17.5px, 1.55–1.65.
Utility: Geist Mono — 11–12px uppercase, +0.08em, for kickers, step
numbers, citation chips, stat labels, legal line.

Structure (anchors preserved: `#cakupan-layanan`, `#pertanyaan-populer`, `#cara-kerja`)

Nav — paper + blur once scrolled, hairline bottom. Brand ahu.ai +
mono "ASISTEN RESMI" tag, hash links, ink button "Mulai bertanya".
Hero (paper, full-bleed) — bordered mono kicker chip (DITJEN AHU ·
KEMENTERIAN HUKUM RI); stacked H1: "Tanyakan apa pun" / muted "tentang
layanan" / "AHU." with maroon accent; sub (46ch, honest AI disclaimer);
composer seeding /tanya (ink border, ink submit button) + 4 topic chips.
Faint vertical hairline grid columns behind (registry/formulir motif, ≤3% ink).
Fact strip (hero bottom edge, hairline-columned like the reference stat
band): Gratis tanpa akun · 24 jam Bahasa Indonesia · 2.418 peraturan di
arsip resmi · Setiap jawaban berkutipan pasal. Facts, not counters.
Cara kerja + demo (signature) — two columns: left, the three steps as
vertical mono-numbered entries (true sequence); right, the document demo
card: letterhead, question types, answer streams, mono citation chip pops,
red SUMBER RESMI stamp lands. The GSAP loop highlights the matching step
while it happens (bertanya → ditelusuri → dijawab). Reduced motion / no-JS:
completed exchange + all steps rendered.
Cakupan layanan — six editorial index rows (not cards): mono index,
display-size title, one-line description, arrow; hover = surface wash +
maroon title; click seeds /tanya. Reads as a service register — which AHU
literally is.
Pertanyaan populer — existing 6-question fixture as quiet paper cards
(mono tag, 18px question, arrow), 3×2 → 1-col mobile.
Perlu Anda ketahui — the one dark section (ink, full-bleed): 4 honesty
notes in a hairline grid. Same content as v2 (it was feedback-driven).
Closing CTA — display-size "Punya pertanyaan? / Tanyakan sekarang.",
ink button, mono GRATIS · TANPA AKUN · BAHASA INDONESIA.
Footer — paper, hairline top, same verified link columns + legal line.

Motion (GSAP 3.15 + ScrollTrigger + TextPlugin; all behind `useLandingMotion`)

Load: nav fades; kicker → H1 lines rise from overflow masks (stagger 90ms) →
sub/composer/chips rise (60ms stagger) → strip hairlines scaleX-draw + cells rise.
Scroll: section heads reveal (y+fade, once); scope rows + popular cards +
trust notes stagger; row hairlines draw on first reveal.
Demo loop: type question (TextPlugin) → thinking dots → stream answer →
citation chip back.out pop → stamp drops (scale 1.6→1, slight rotate) →
hold → wipe; loops 3 fixture pairs; syncs is-active class onto step items.
Micro: arrow slide + surface wash on rows/cards (180–240ms), button press.
No pinning, no scrub, no parallax, no marquee: clean > busy.

Accessibility & quality floor

Focus rings (maroon on paper, paper on ink), 44px touch targets, semantic
buttons/links, aria-hidden decoration, static-complete SSR, reduced-motion =
zero GSAP, AA contrast on every pair, responsive 375→1440+.

Out of scope

/tanya, shared packages, API routes, nav targets, footer link data (content
unchanged), deploy scripts.