# SKILL: Design in the Kiduna idiom

Use this skill whenever you're creating a Kidunaverse surface — landing pages, Field surfaces, dashboards, proposals, decks, emails, prototypes. It loads the design system's visual vocabulary so your output looks native to the Kidunaverse, not generic. Kiduna is a living ecosystem where people and their allies organize around shared purpose — forming relationships, building institutions and movements, and governing what they create together through the Field. Tagline: "Where people and their allies organize what comes next."

## Start every Kidunaverse design with

1. **Link the stylesheet.** Every HTML file must `<link rel="stylesheet" href="colors_and_type.css">` (path adjusted). Never redefine brand colors or fonts inline — always use the CSS variables.
2. **Read `README.md`** for the content voice + the signature emphasis pattern before writing copy.
3. **Open `UI Kit.html`** as a structural reference for what a finished Kidunaverse page looks like. Mimic its rhythm (hero → stat strip → capability cards → delivery feed → engagement tiers) unless the brief says otherwise.

## The five moves that make it look Kidunaverse

1. **Deep-umber field.** `var(--bg-deep)` (#120C07) or `var(--bg)` (#1C140D) is the page; aubergine (#2A1A2B) is the alternate ground. Cards sit on `var(--surface)` (#271B11). Never default to black; never default to grey. Never pure white: wherever white would appear, use cream white `--kin-cream-white` (#FFFFE6); moon cream (#FFF6D5) stays the golden brand highlight.
2. **One pulse of sky.** `var(--accent)` (#03CCD9) is reserved for the single thing the user should touch. If you have two primary buttons on screen, you have an error.
3. **Goudy display + italic sky emphasis.** Every meaningful headline uses `var(--font-display)`. The *one* italic-sky phrase per headline is the house rhetorical move — see `em.kin-emph` in `colors_and_type.css`.
4. **Numbers in Goudy.** Every stat, price, count, progress number is Goudy (not Avenir). It's the primary visual signal that data is *alive*.
5. **Warm earth + a spark of mint.** Camel (`--accent-warm` / #C19A6B) and chocolate (#6F4A2E) warm surfaces, secondary buttons, and imagery; mint (`--kin-mint` / #8FE6C6) is the rare magical highlight — one moment per screen, never UI chrome.

## Colors — pick from these, don't invent

- Surfaces: `--bg-deep`, `--bg`, `--surface`, `--surface-elev`
- Text: `--fg`, `--fg-muted`, `--fg-soft`, `--fg-dim`
- Action: `--accent` (sky), `--accent-hover`, `--accent-warm` (camel)
- Accent: `--kin-mint`, `--kin-camel`, `--kin-magenta`, `--kin-gold`, `--kin-lime` (sparingly; one per screen)
- Life (extended): `--kid-violet-bright` (alliances, intelligent actors), `--kid-jade` (communities, growth), `--kid-apricot` (projects, invitations) — purposeful, never ornamental
- Feedback: `--success`, `--danger`, `--kin-warning`

Warm earth tones (`--kin-camel`, `--kin-chocolate`, `--kin-darkumber`, `--kin-aubergine`, `--kin-accent-chestnut`) carry surfaces, secondary buttons, and imagery backgrounds. Orange and navy are *retained* but now legacy/energy accents — not the brand color.

## Type rules

- H1: `var(--fs-5xl)` (54) to `var(--fs-6xl)` (72), Goudy, line-height ~1.
- H2: 30–40px Goudy.
- Eyebrow: 10–11px Avenir 700, caps, `letter-spacing: 0.16em`, in `--fg-soft` or `--kin-skyblue`.
- Body: 16px Avenir 400, `var(--fg-muted)`.
- Callouts (pull-quotes, asides, highlighted notes): IBM Plex Sans via `var(--font-callout)` / `.kin-callout` — never Avenir, never Goudy.
- Small: 12–14px, `var(--fg-soft)`.
- Mono: used for kickers and small numeric metadata (timestamps, token IDs).

## Components — use the patterns from `preview/`

- **Buttons:** squared with a slight radius (`--radius-xs`, 4px). Primary = sky. Secondary = transparent + border. Warm = camel, for a secondary warm action.
- **Cards:** `--surface`, `--radius-lg`, `--shadow-md`. Capability cards have a colored cover (radial gradient in a single brand hue — camel, sky, or mint) + metadata.
- **Stat strips:** horizontal 4-cell grid on `surface-elev`, numbers in Goudy at 44px, delta in `--kin-complete` green.
- **Badges:** pill, 11px caps, colored background with matching colored text at alpha ~0.14 bg / 1.0 text.

## Things to avoid

- Generic SaaS gradients (purple-to-pink, teal-to-cyan).
- Emoji as UI iconography.
- Orange or blue-violet primary buttons. Sky only.
- Two italic emphases in one headline. One.
- Drawing custom SVG illustrations inline — use placeholders or ask for real artwork.
- Inter, Roboto, or system fonts. Avenir is required for body; Goudy is required for display.

## Before you finish

- Does at least one headline have `em.kin-emph` italic sky? If not, add one (but only one per screen).
- Are all numbers in Goudy?
- Is there exactly one primary (sky) CTA in the viewport?
- Does the page use `var(--bg)` as background, not a hand-picked hex?
- If a logo appears, is it a Kiduna lockup on a dark or cream ground — never the multicolor mark on sky (the moon disappears), never recolored?

## Icons
Lucide-style line icons, stored in `assets/icons/*.svg` (27 glyphs) and drawn inline when needed. Rules:
- 24px grid, `viewBox="0 0 24 24"`, stroke-width 1.75, round caps + joins, `fill="none"` — icons are NEVER filled.
- `stroke="currentColor"` always; icons inherit text color. Default `var(--fg-muted)`; active/interactive `var(--kin-skyblue)`; decorative warmth `var(--kin-camel)`; mint reserved for "magic" moments.
- Sizes: 16 / 20 / 24 / 32 px. Never scale below 16.
- Need a glyph not in the set? Use any Lucide icon at stroke 1.75 — it will match.
- Vocabulary names are semantic: `agent` (bot), `kinship` (users), `enact` (zap), `empower` (shield), `inform` (globe), `govern` (check-square), `treasury` (coins), `alliance` (network), `magic` (sparkles), `discover` (compass), `build` (wrench), `ledger` (file), plus sun + moon from the mark.
