# Recon — spun.global/id

Captured 2026-07-30 via Playwright (real browser, computed styles). Evidence for `plan.md` §5.
Full-page capture: `RECON/screenshots/original-1440.png` (1425×7082 CSS px, scrollHeight 7605).

## Framework signals

| Signal | Value |
|---|---|
| Next.js | yes (`/_next/` chunks present) |
| Tailwind | yes |
| Lenis (smooth scroll) | **no** |
| GSAP | **no** |
| Three.js / WebGL | **no** |
| React on `window` | no (production build) |

→ Native scroll. Do not add a smooth-scroll library.

## Palette — computed values, area-weighted

Ranked by painted area (top entries):

| Rank | Computed | Hex | Role |
|---|---|---|---|
| 1 | `rgb(250, 250, 250)` | `#fafafa` | canvas (body, header, main) |
| 2 | `rgb(0, 0, 0)` | `#000000` | primary text |
| 3 | `rgb(255, 255, 255)` | `#ffffff` | card / input / chip surface |
| 4 | `rgb(137, 118, 108)` | `#89766c` | muted text (warm grey, not neutral) |
| 5 | `rgb(255, 117, 36)` | `#ff7524` | **accent** — prices, step numbers, `Daftar` |
| 6 | `rgb(255, 246, 237)` | `#fff6ed` | warm surface — footer, promo bands |
| 7 | `rgb(23, 20, 18)` | `#171412` | control-label ink |
| 8 | `rgb(219, 66, 104)` | `#db4268` | accent secondary — savings/discount badges |
| 9 | `rgb(239, 236, 235)` | `#efeceb` | inactive chip fill |
| 10 | `rgb(219, 213, 209)` | `#dbd5d1` | control border |
| 11 | `rgb(188, 176, 169)` | `#bcb0a9` | tertiary / meta text |
| 12 | `rgb(229, 231, 235)` | `#e5e7eb` | hairline divider (Tailwind default) |

No `:root` custom properties are exposed (Tailwind compiles to utilities), so these computed values **are** the source of truth.

## Typography

Single family: `"Instrument Sans", "Instrument Sans Fallback"` — everywhere, including footer and controls. On Google Fonts under OFL, so self-hosting the real face is straightforward.

| Element | Size | Weight |
|---|---|---|
| `h2` hero display ("Butuh visa ke mana?") | 48px | 700 |
| `h2` section ("Add-ons", "Promo", "Testimoni") | 30px | 600 |
| `h1` hero eyebrow ("Platform Visa Andalan") | 24px | 500 |
| `h3` card / group title | 14px | 600 |
| `h3` list item | 14px | 500 |
| `h3` promo band | 18px | 600 |
| body / links / inputs | 16px | 400 |
| buttons, chips, filters | 14px | 600 |

`letter-spacing: normal` throughout — no tracking adjustments.

## Geometry

| Component | Radius | Padding |
|---|---|---|
| Search field segments | `9999px` | `20px 24px 4px` |
| Chips / filters | `9999px` | `8px 16px` |
| Secondary pill buttons | `9999px` | `10–12px 16px` |
| Icon buttons | `9999px` | `12px` |
| Header `Masuk` / `Daftar` | `8px` | `12px 16px` |
| Promo CTA | `8px` | `8px 40px` |
| Inputs | `9999px`, transparent border | — |

Borders: 1px `#dbd5d1`. Shadows present but very low-alpha — border-led containment, elevation only on genuinely floating layers.

## Section order (home)

1. Header (logo · Semua Visa · Untuk Bisnis · Blog · search · `IDR - ID` · Masuk · Daftar)
2. Hero — warm peach radial gradient + sunburst arc, eyebrow + display heading, pill search bar (Dari / Ke / Tujuan + Cari)
3. Category chip scroller — Trending Visas · 100% Online · Schengen · Asia · Amerika · Timur Tengah · Bali · Visa Express · Visa Kerja · Tanpa Rekening
4. Filter chip row — Filter · Keberangkatan · Populer
5. Visa card grid, 3 cols — title, `Selesai dalam N hari`, `Dari IDR …` in accent, strikethrough compare, discount badge in `#db4268`, destination flag/photo right
6. `Selengkapnya` link
7. Approval Insight band — rose tint, copy left, product screenshot right, `Pelajari lebih lanjut`
8. Add-ons — 3 illustrated white cards + `Tampilkan lebih banyak`
9. Cara kerja SPUN — tab pills, product screenshot left, `Step 1/2/3` numbered in accent right
10. Promo — 3 pale-rose cards with orange tag
11. "Telah mendukung 400+ tipe visa" — country pill cloud with flags + stat strip (99% approval rate · 10.000+ aplikasi disetujui · Kebijakan pengembalian dana)
12. Dipercaya / Testimoni — Google rating card (4,8 · 266) + masonry review cards, 3 cols
13. Footer — `#fff6ed`, 4 columns, socials, PT Solutopia Untuk Nusantara legal block

## Routes observed

`/id/trending-visas` · `/id/evisa-online` · `/id/schengen` · `/id/asia-trip` · `/id/americas` · `/id/middle-east` · `/id/bali` · `/id/express-visa` · `/id/visa/[id]` · `/approval-insight` · `/login` · `dashboard.spun.global` · `business.spun.global` · `blog.spun.global` · policy pages (`kebijakan-privasi`, `kebijakan-pengembalian-dana`, `ketentuan-layanan`)

## Not yet run

- `asset-harvest.mjs` — real Instrument Sans font files + destination imagery
- `route-crawl.mjs` — the `/id/visa/[id]` detail template (maps to `prosedur-detail.html`)
- `interaction-probe.mjs` — chip scrollers, search dropdown states, card hover
- `network-capture.mjs` — visa listing payload shape

These are scheduled in `plan.md` §9 step 1 before the build starts.