---
name: nadi-design
description: Use this skill to generate well-branded interfaces and assets for Nadi (a PT-first AI coaching copilot for Indonesia's fitness industry), either for production or throwaway prototypes and mocks. Contains the brand-aligned design guidelines, colors, type, logo assets and UI kit components.
user-invocable: true
---

Read `readme.md` within this skill first, then explore the other files. `guidelines/` holds specimen cards for every foundation, `components/` holds the inventory with `.prompt.md` usage notes, and `ui_kits/pt-app/` shows correct composition.

If you are creating visual artifacts (slides, mocks, throwaway prototypes), copy assets out and build static HTML. If you are working on production code, copy the tokens and read the rules here to design as an expert in this brand.

If the user invokes this skill with no other guidance, ask them what they want to build, ask a few questions, and act as an expert designer who outputs HTML artifacts *or* production code depending on the need.

## Key rules that must never be violated

**Brand**
- The logo is locked. Use `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.
- One Pulse accent per screen region, and the logo counts as that region's accent.

**Color**
- `--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.
- Check dots on a Pulse fill carry an **Ink** ✓ (`--accent-contrast`).
- Clay only for pain and risk. Amber only for "Perlu Perhatian". **Ember `#FF6A4D` is marketing-only** and never enters product UI. Warning surfaces read --warn-bg / --warn-border / --warn-text; never raw amber.
- No shadows. Hairline borders, 1.5px only for the active or next element.
- Dark mode only for in-session PT surfaces, plus the one Ink hero card on the client home.

**Type**
- Measured values (weights, reps, timers, counts) are always JetBrains Mono w700 with their unit.
- Quicksand for headings and names, never below 15px, and below 17px use Inter w600 instead.
- Inter for all other UI.

**Content**
- Bahasa Indonesia by default, formal but warm. No em-dashes in Indonesian prose; the em-dash is a data glyph only.
- Locked status labels: Sesuai Rencana · Perlu Perhatian · Berisiko Terlambat · Selesai · Belum Selesai. Qualitative only, never a score or a probability.
- Every recommendation carries a why-chip. Unvalidated guidance is tagged `menunggu validasi ahli`.
- The PT is the final decision-maker. The product never diagnoses.
- No emoji. Unicode glyphs for inline affordances, Lucide 1.5px for named concepts, and flag any icon you add.