# Nadi Design System

**Version 2.0 · brand-aligned.** Supersedes v1.0 (the sage / Source Serif build). Every visual value in this system now comes from **Nadi Brand Guideline v2.0 (8 September 2026)**; the architecture, component set and content rules are carried over from v1.0 unchanged in structure.

**Nadi** is the product. Domain `nadi.fit`; the brand is `nadi`, never `NADI`.

A PT-first coaching app: guided client assessment → exercise selection → live session logging → complaint handling → session summaries → outside-session assignments → a client companion app (PWA). The PT is always the final decision-maker; the product never diagnoses. Market: Indonesia, all gym segments, phone-only for PTs.

## The one-line system
Quicksand for warmth and brand voice, Inter for working UI, JetBrains Mono for anything measured; cool Mist neutrals over Nadi Ink with a single Pulse accent; dark mode only where the PT is mid-session.

## Language
**Bahasa Indonesia is the default**, formal but warm, following the Brand Guideline's "Bahasa Indonesia lebih dulu" rule. English strings are the secondary layer for regional and investor material. Two consequences for anyone writing copy here:

- Status labels are locked: **Sesuai Rencana · Perlu Perhatian · Berisiko Terlambat · Selesai · Belum Selesai**. Do not invent synonyms; these appear in hundreds of places.
- **No em-dashes in Indonesian prose.** Use commas, full stops, or connectors like *sehingga* and *yang*. The em-dash survives only as a data glyph inside components (an empty measured slot, a delta), never inside a sentence.

## CONTENT FUNDAMENTALS
- Sentence case everywhere: headings, buttons, chips. Status labels are the exception and stay title case.
- Plain, direct, honest. Qualitative status with an honest timeline delta as the explanation, never a probability, never a score.
- Cause always shown, always paired with one next action, shared-responsibility framing: *"Masih sesuai rencana untuk target 12 minggu. Pertahankan jalan kaki minggu ini dan progresnya tetap aman."*
- Client-facing copy is second person and warm (*"Halo, Sari"*, *"Ada yang terasa sakit? Beri tahu coach-mu"*). PT-facing copy is terse and operational (*"Set 2 · 16 kg × 8"*, *"Pantau lutut, ada keluhan minggu 2"*).
- Every recommendation shows the data behind it via why-chips: `why: flag lutut`.
- Unvalidated guidance is tagged `menunggu validasi ahli`.
- No emoji. No exclamation marks on PT surfaces; at most one on client surfaces.
- Measured values always carry units and are set in the data font. Thousands separators follow Indonesian convention: 6.000, not 6,000.

## VISUAL FOUNDATIONS
- **Color**: Mist background (`#F4F8F7`) with Cloud cards; Nadi Ink (`#0D2137`) for text and dark panels. One Pulse accent, split across two tokens because Pulse is vivid: `--accent` (Deep Pulse `#087858`) for accented text, links, icons and the primary button fill; `--accent-fill` (`#10C98F`) for progress bars, check dots and the mark. Pulse reaches only 2.2:1 on white and must never set small text on a light ground or fill a button. Clay is reserved for pain, risk and alerts; amber only for "Perlu Perhatian". **Ember (`#FF6A4D`) is a marketing color only** and never appears in product UI. Max one accent per screen region; the logo counts as that region's accent.
- **Buttons**: the primary button is a Deep Pulse fill (`--button-fill`) with a **white** label (`--button-label`), 5.5:1. Pulse `#10C98F` is never a button fill. Check dots on Pulse keep the Ink ✓ (`--accent-contrast`).
- **Type roles** (the load-bearing rule): if a value comes from a measurement, a log, or a timer → JetBrains Mono w700 with its unit. If a human said it or it addresses the client → Quicksand (headings, names, w600/700, never below 15px) or Inter (body, labels, buttons). Section headings **below 17px use Inter w600**, not Quicksand: the rounded display face loses authority at small sizes on data-dense screens. Kickers are mono, letter-spaced, uppercase, 10–11px.
- **Logo**: locked, six official forms, shipped in `brand/` and wrapped by the `Logo` component. Clear space 14 units on every side; minimum 110px wide (horizontal), 70px wide (stacked), 16px (mark). Never redraw, restretch, recolor, add a second green, or append `.fit`.
- **Dark mode**: reserved for the PT's in-session surfaces (live logger, rest timer), plus the single Ink hero card allowed on the client home. Everything else reflective — assessment, summaries, the rest of the client app — stays light. Semantic tokens flip under `[data-nadi-theme="dark"]`.
- **Backgrounds**: inside product content, flat token colors only. No images, gradients, patterns or textures behind data. Brand imagery is allowed on marketing surfaces, onboarding, empty states, and the session summary a client shares.
- **Borders & elevation**: 1px hairline borders; 1.5px only for the active/next element. **No shadows anywhere** — hierarchy comes from tint + border, not elevation.
- **Radii**: 18px screen container · 11px cards/rows · 10px buttons/fields · 999px pills & chips. The mark's own 0.2237 ratio belongs to the logo alone.
- **Spacing**: 4/8/12/16/24 scale; screens pad 16px; cards pad 12–14px; sibling gaps 6–10px.
- **Tints**: `--accent-tint` (`#E7F7F1`) for positive/status cards; `--alert-bg` (`#F9EFEC`) for risk flags; `--warn-bg` (`#F6EEDF`) with `--warn-border` for "Perlu Perhatian" cards and tags, text in `--warn-text`. Tint fills always pair with their matching tint border.
- **Color ratio** on a full surface: roughly 70% neutral, 22% Ink, 8% Pulse. Ember stays under 3% and only on marketing.
- **Animation**: minimal — 150ms ease-out fades and color transitions only. No bounces, slides, or parallax; a mid-session tool must feel instant.
- **Hover**: darken accent one step (`--accent-strong`), underline links. Press: background shifts to tint; no scale transforms.
- **Transparency & blur**: none.
- **Imagery in product**: striped placeholder blocks with a mono explainer (e.g. `video demo latihan`).
- **Cards**: Cloud (dark: navy-800) fill, hairline border, 11px radius, no shadow.

## ICONOGRAPHY
Two tiers, split by job:

- **Inline affordances** stay unicode glyphs: ✓ (done), ▸ (forward action), ▾ (expand), ✕ (close/dismiss), · (separator).
- **Named concepts** (nutrition, sleep, recovery, cardio) use **Lucide at 1.5px stroke with round caps**, which matches the mark's rounded geometry — Ink on marketing, Deep Pulse in-app. Flag any icon added to the set.

Check indicators are 18px circles: `--accent-fill` with an Ink ✓ when done, hairline outline when pending. No emoji. No hand-drawn SVG art.

## Fonts
`tokens/fonts.css` loads Quicksand, Inter and JetBrains Mono from Google Fonts. All three are free to self-host; for production, self-host with `font-display: swap` and a latin subset. The wordmark is an outline conversion of Quicksand Bold and does not depend on the webfont loading.

## Index
- `styles.css` — global CSS entry (imports everything under `tokens/`).
- `tokens/` — `fonts.css`, `colors.css` (base + semantic, light + dark), `typography.css`, `layout.css`.
- `brand/` — the nine shipped logo files: SVG lockups, mark, mono mark, wordmarks, app icon and favicon, plus PNG fallbacks.
- `guidelines/` — foundation specimen cards (logo, name, icons, imagery boundary, colors, ratio, type, radii, spacing, borders).
- `components/brand/` — Logo. `components/actions/` — Button, Chip. `components/status/` — StatusPill, RiskFlag, ProgressBar. `components/data/` — SetRow, StatTile, TaskItem. `components/surfaces/` — Card, Input.
- `ui_kits/pt-app/` — LiveLogger (dark), ClientToday, AssessmentSummary + interactive `index.html`.
- `SKILL.md` — agent-facing usage guide.
- `CHANGELOG.md` — what changed from v1.0 and why.

## Open decisions
Two questions are still owned by the founders and are deliberately not settled in this system:

1. **Client app weight.** Marketing treats the client as the primary audience; this system still ships the client app as a light companion. Either the app grows or the landing-page promise narrows.
2. **How far dark mode may spread** beyond the live logger and rest timer.