Design system
v0.2.2
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.
Aturan dari SKILL.md yang tidak boleh dilanggar, dikutip apa adanya.
brand/*.svg or the Logo component in one of its six official forms. Never redraw it, never stretch it, never recolor it, never add a second green, never append .fit. Clear space is 14 units on every side.--accent (Deep Pulse #087858) writes text, icons, links, and fills the primary button (--button-fill) with a white label (--button-label). --accent-fill (Pulse #10C98F) fills progress bars, check dots, and the mark only; it reaches 2.2:1 on white, so it is never a button fill and never small text on a light ground.--accent-contrast).#FF6A4D is marketing-only and never enters product UI. Warning surfaces read --warn-bg / --warn-border / --warn-text; never raw amber.menunggu validasi ahli.
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.
nadi lowercase as logotype, Nadi as proper noun, NADI never.
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.
Skala dasar menamai warnanya. Komponen hanya membaca token semantik di bawah.
#08684A#087858#10C98F#3FDCAB#BEE9D7#E7F7F1800 hover / pressed accent · 700 Deep Pulse — accent for TEXT, icons, and the primary button fill on light (v2.1: value from pilot prototype v3) · 500 Pulse — accent for progress, check dots, the mark; never a button fill, never small text on light · 300 dark-mode accent · 100 tint border · 50 tint fill
#0D2137#3E4E5A#54646F#8296A1#D3DEDC#DCE6E4#E3E9E8#EDF3F2#F4F8F7#FFFFFF900 Nadi Ink — primary text, dark panels, lower field of the mark · 600 strong secondary text · 500 Slate — secondary text, captions · 400 muted text, placeholders · 200 chip + control borders · 150 progress track · 100 Line — hairline borders · sunken recessed fills · mist Mist — app background · cloud Cloud — card and panel surfaces
#071522#0E2537#0A1D2C#1B384E#27485F#718794#9BAFBB#E7F0EE#7E3624#A8442E#E8C4BA#F9EFEC#2B1D18#57352B#E8A493#8A5C1E#B0782C#E6D6B3#F6EEDF700 darkened from the brand swatch so small text clears 4.5:1 · 500 graphic use only · 100 warn tint border
#FF6A4DNilai terang dan gelap berdampingan. Klik baris untuk menyalin var(--token).
| token | pemakaian | terang | gelap | salin |
|---|---|---|---|---|
| Permukaan | ||||
--bg | Mist — app background | #F4F8F7 | #071522 | |
--surface | Cloud — card and panel surfaces | #FFFFFF | #0E2537 | |
--surface-sunken | recessed fills | #EDF3F2 | #0A1D2C | |
--border | Line — hairline borders | #E3E9E8 | #1B384E | |
--track | progress track | #DCE6E4 | #1B384E | |
| Teks | ||||
--text | Nadi Ink — primary text, dark panels, lower field of the mark | #0D2137 | #E7F0EE | |
--text-soft | strong secondary text | #3E4E5A | #9BAFBB | |
--text-sub | Slate — secondary text, captions | #54646F | #9BAFBB | |
--text-muted | muted text, placeholders | #8296A1 | #718794 | |
| Aksen | ||||
--accent | accent for text, icons, links, active borders | #087858 | #3FDCAB | |
--button-fill | primary button fill — Deep Pulse (v2.1) | #087858 | #3FDCAB | |
--button-label | label ON --button-fill — white, 5.5:1 | #FFFFFF | #071522 | |
--accent-fill | accent for filled areas: progress, check dots (not buttons) | #10C98F | #3FDCAB | |
--accent-strong | hover, one step darker | #08684A | #10C98F | |
--accent-contrast | label ON --accent-fill (check dots) — Ink, never white | #0D2137 | #071522 | |
--accent-tint | tint fill | #E7F7F1 | #0F2E29 | |
--accent-tint-border | tint border | #BEE9D7 | #1E4A3E | |
--chip-border | chip + control borders | #D3DEDC | #27485F | |
| Alert dan status | ||||
--alert | pain / risk / alert only | #A8442E | #E8A493 | |
--alert-text | pain / risk / alert only | #7E3624 | #E8A493 | |
--alert-bg | pain / risk / alert only | #F9EFEC | #2B1D18 | |
--alert-border | pain / risk / alert only | #E8C4BA | #57352B | |
--status-ok | Deep Pulse — accent for TEXT, icons, and the primary button fill on light (v2.1: value from pilot prototype v3) | #087858 | #3FDCAB | |
--status-warn | darkened from the brand swatch so small text clears 4.5:1 | #8A5C1E | #D9A05C | |
--status-risk | pain / risk / alert only | #A8442E | #E8A493 | |
--warn-text | text on --warn-bg, same as --status-warn | #8A5C1E | #D9A05C | |
--warn-bg | Perlu Perhatian card and tag fill | #F6EEDF | #2E2414 | |
--warn-border | always pairs with --warn-bg | #E6D6B3 | #5A4523 | |
70% neutral · 22% Ink · 8% Pulse. Angka dari komentar tokens/layout.css; Ember di bawah 3% dan hanya di marketing.
--font-display Headings, names, client greetings, marketing. Weight 600/700. NEVER below 15px, and prefer --font-body w600 for headings under 17px: Quicksand's rounded forms lose authority at small sizes on data-dense screens.--font-body Body, labels, buttons, inputs, and section headings below 17px. Weight 400/600.--font-data Every measured value: weights, reps, timers, counts, dates, kickers. Weight 700. Always carries its unit. Never used for human speech or client-facing sentences.--text-hero · 24px · Quicksand 700--text-title · 22px · Quicksand 600--text-h2 · 17px · Quicksand 600--text-h3 · 15px · Inter 600--text-body · 14px · Inter 400--text-small · 12.5px · Inter 400--text-label · 12px · Inter 600--text-micro · 11px · JetBrains Mono 700Quicksand tidak pernah di bawah 15px; judul bagian di bawah 17px memakai Inter w600. Nilai terukur selalu JetBrains Mono w700 dengan satuannya.
Layar pad 16px, kartu pad 12 sampai 14px, jarak antar-saudara 6 sampai 10px.
--r-screen 18pxphone screen container--r-card 11pxcards, list rows--r-btn 10pxbuttons, fields--r-pill 999pxstatus pills, chipsBayangan: tidak ada. Hierarki datang dari tint dan garis, bukan elevasi.
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.
Indikator centang 18px: --accent-fill dengan ✓ Ink saat selesai, garis hairline saat belum.
Contoh hidup dari components/*/*.card.html, dirender oleh React di dalam bingkai. Kartu selalu terang dan diskalakan agar muat; hanya LiveLogger yang gelap. Tema bingkai mengikuti kartunya, bukan halaman ini.
Button variants · why-chips · reason chips
Set rows · measurement tiles · client tasks
The locked logo in its six official forms
Qualitative pills · clay risk flags · Pulse progress
Cards, tint cards, and labelled fields
Live logger (dark) · Today klien · Ringkasan asesmen · buka terpisah ▸
LiveLogger.jsx — PT mid-session logger, dark ([data-nadi-theme="dark"] wrapper). Interactive: tap "catat ▸" or the button to log set 3.ClientToday.jsx — client companion Today screen, light, with the one Ink hero card allowed on this surface. Interactive: toggle tasks.AssessmentSummary.jsx — PT assessment summary, light.Two questions are still owned by the founders and are deliberately not settled in this system: