# dESA Design Language — "Pasar Modern · Stempel & Kertas"

> v1, 2026-06-12. The design system for every dESA surface. Companion to
> [PRD §UX surfaces](../PRD.md) — the perf budgets there are binding here.
> Interactive mockups in this folder implement this language; the hub is
> [`index.html`](index.html).

## 1. The idea

A market built from two materials Indonesians already trust:

- **Kertas (paper)** — the warung receipt, the ledger book, the rice-paper
  ivory of daylight surfaces. Member-facing surfaces are *light*, calm,
  document-like: your money presented like a well-kept book.
- **Stempel (stamp)** — the rubber stamp of Indonesian officialdom,
  reclaimed: **finality is a literal stamp.** Every finalized checkpoint
  slams a bordered, slightly-rotated `TERVERIFIKASI ✓` mark. Verification
  is not an icon — it is an act you watch happen.

Professional surfaces (terminal, ops, control room) flip to **malam**
(night): deep leaf-ink panels, dense tabular data, bronze accents — the
engine room under the paper market.

What someone remembers after 10 seconds: *dividends fall as bronze rain,
and the truth gets stamped.*

## 2. Tokens (embed this block verbatim)

```css
:root {
  /* ---- skin: pagi (light / paper) ---- */
  --paper:        #F7F2E7;   /* rice-paper ivory — light bg */
  --paper-raised: #FFFDF6;   /* cards on paper */
  --paper-line:   #E4DCC8;   /* hairlines on paper */
  --ink-on-paper: #1C2420;   /* primary text on light */
  --muted-on-paper:#6B6A5E;

  /* ---- skin: malam (dark / engine) ---- */
  --ink:          #0E1B18;   /* leaf-ink green-black — dark bg */
  --ink-raised:   #14241F;   /* panels on ink */
  --ink-line:     #23362F;   /* hairlines on ink */
  --paper-on-ink: #EDE6D6;   /* primary text on dark */
  --muted-on-ink: #7E8C84;

  /* ---- brand & semantics (shared) ---- */
  --bronze:       #C9943F;   /* gamelan bronze — value, dividends, brand */
  --bronze-hot:   #E3B05B;   /* bronze highlight / rain particles */
  --stamp:        #2D5DA8;   /* stamp-pad blue — proof, validation, chain */
  --up:           #1FA972;   /* market up (IDX convention: green up) */
  --down:         #E04F3F;   /* market down (saga red) */
  --warn:         #D97E1F;   /* arrears, degradation, SLO burn */
  --halt:         #8C3A2E;   /* halts, slashing */

  /* ---- type ---- */
  --font-display: 'Fraunces', Georgia, serif;            /* brand moments, big editorial numbers */
  --font-ui:      'Schibsted Grotesk', 'Segoe UI', sans-serif; /* labels, body */
  --font-data:    'Spline Sans Mono', Consolas, monospace;     /* every number, hash, code */

  /* ---- geometry ---- */
  --r-card: 10px; --r-chip: 999px; --r-stamp: 6px;
  --shadow-paper: 0 1px 2px rgba(28,36,32,.08), 0 4px 16px rgba(28,36,32,.06);
  --shadow-ink:   0 1px 2px rgba(0,0,0,.4), 0 6px 24px rgba(0,0,0,.35);

  /* ---- motion ---- */
  --t-tick: 120ms cubic-bezier(.2,.8,.3,1);   /* price/number changes */
  --t-ui:   200ms cubic-bezier(.2,.8,.3,1);   /* hovers, reveals */
  --t-stamp:420ms cubic-bezier(.17,.84,.44,1);/* the stamp slam */
}
```

Google Fonts import (each file, with system fallbacks so offline still works):

```html
<link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,700&family=Schibsted+Grotesk:wght@400;500;700&family=Spline+Sans+Mono:wght@400;500;600&display=swap" rel="stylesheet">
```

## 3. Signature elements (use them; they are the brand)

1. **The stamp** — finality/verification mark. Bordered 2px solid
   `--stamp` (or `--up` for settled), uppercase, letter-spaced, rotated
   −4°…+3°, `border-radius: var(--r-stamp)`. Arrives with the slam:
   scale 1.6→1 + opacity 0→1 over `--t-stamp`, slight overshoot, one-time
   10px-blur→0. Texts: `TERVERIFIKASI ✓` `FINAL · 2/3` `LUNAS` `DISTRIBUTED`.
2. **Dividend rain** — when a close finalizes, bronze digits/coins
   (`--bronze-hot`, font-data, small) fall/float into the balance, which
   rolls like an odometer. Subtle on member surfaces, celebratory on the
   warung cockpit. ≤ 12 particles, CSS transforms only.
3. **Odometer numbers** — money never just changes: digits roll vertically
   (`--t-tick`). All numerals `font-variant-numeric: tabular-nums`.
4. **Receipt edge** — section separators on paper surfaces use a perforated
   edge (repeating-linear-gradient dashes or SVG scallop). Receipts are the
   native document of this economy.
5. **Kawung whisper** — background texture: inline-SVG kawung/batik
   geometry at 2–4% opacity, slightly larger on hero areas. Never louder.
6. **Hash ribbons** — hashes/roots render in `--font-data` with the middle
   elided (`9f2c…ab41`), prefix-colored `--stamp`, click-to-copy.
7. **Bahasa-first voice** — primary labels Indonesian, small English
   subtitle: “**Tutup Buku** · close the books”. Numbers in Rupiah with
   Indonesian separators: `Rp 12.500`, millions as `Rp 4,2 jt` where space
   demands.

## 4. The two skins

| | pagi (paper) | malam (engine) |
|---|---|---|
| Surfaces | member app, warung cockpit, chain explorer | pro terminal, dividen control room, market-ops |
| bg / card | `--paper` / `--paper-raised` | `--ink` / `--ink-raised` |
| text | `--ink-on-paper` | `--paper-on-ink` |
| mood | daylight ledger, generous space, editorial | engine room, controlled density, luminous data |

Shared in both: bronze = value, stamp-blue = proof, green/red = market
(IDX convention: green up), warn = degradation, halt = stoppage.

## 5. Type scale

| Role | Font | Size/weight |
|---|---|---|
| Hero number (balance, index) | display (Fraunces) | 40–64px / 700, tight tracking |
| Section title | ui | 18–22px / 700 |
| Body / labels | ui | 14–15px / 400–500 |
| Data, prices, hashes, tables | data | 12–14px / 500, tabular-nums |
| Stamp text | ui | 11–13px / 700, +8% letterspacing, uppercase |
| Microcopy / EN subtitles | ui | 11–12px / 400, muted |

## 6. Motion rules

- Ticks ≤ 120ms; UI ≤ 200ms; the stamp 420ms. Nothing longer except page
  load (staggered reveals, 40ms increments, max 600ms total).
- Price changes flash the *text* color (`--up`/`--down`) and decay to
  neutral over 800ms — never flash backgrounds of large areas.
- Live surfaces conflate: batch DOM updates per animation frame; a tick
  storm must stay 60fps.
- `prefers-reduced-motion`: stamps appear without slam, rain becomes a
  fade, odometers jump-cut.

## 7. Performance budgets (PRD-binding)

Cold start < 2s on 4G mid-range Android; interaction < 100ms; tick render
≤ 1 frame; critical-path < 200KB (mockups: single self-contained HTML file,
no frameworks, no build step; only external request = Google Fonts with
graceful fallback).

## 8. Accessibility

AA contrast minimum on all text (the muted tones above pass on their
skins); focus rings visible (2px `--stamp` offset 2px); hit targets ≥ 44px
on mobile surfaces; all live regions `aria-live="polite"`; color never the
only signal (arrows ▲▼ accompany green/red).

## 9. The mockup browsers (this folder)

| File | Surface | Skin |
|---|---|---|
| `member-app.html` | retail member app (phone frame) | pagi |
| `bursa-terminal.html` | pro trading terminal | malam |
| `warung-cockpit.html` | issuer/SMB app (phone frame) | pagi |
| `dividen-live.html` | distribution-engine control room | malam |
| `chain-explorer.html` | public Tip Chain explorer | pagi |
| `market-ops.html` | operator NOC / SLO board | malam |
| `index.html` | the hub — gallery of all of the above | pagi |

Every browser simulates live data in JS (deterministic-feeling tickers,
seeded randomness fine), is fully self-contained, and demonstrates the
signature elements honestly against the real product mechanics (specs
01–05): M-of-N countersigning, T+0 DvP, tier-assigned trading modes,
real-time Dividen credit at finality, arrears as fast as payouts.