# SKILL: Design in the Kiduna idiom

Use this skill whenever you're creating a Kiduna 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 Kiduna 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 Kiduna 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 Kiduna

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. **Sky carries the current.** `var(--accent)` (#03CCD9) is the default for primary actions, navigation, and Ki's presence — a convention, not a reservation. Keep the focal hierarchy clear so the eye knows what leads.
3. **Goudy display + upright gold emphasis.** Every meaningful headline uses `var(--font-display)`. The signature move is one emphasis phrase per headline set in **upright sun-gold** via `em.kin-emph` — never italic, never sky blue.
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 + mint magic.** Camel (`--accent-warm` / #C19A6B) and chocolate (#6F4A2E) warm surfaces, secondary buttons, and imagery; mint (`--kin-mint` / #8FE6C6) brings intelligence, emergence, and magic wherever it's wanted.

## Colors — a foundation, not a limitation

Hierarchy describes **prominence, not permission**. There are no reserved uses: any designer may use any color for any purpose. The only fixed meanings are the feedback colors.

- **Primary brand:** espresso `--kin-espresso` (ground), sky blue `--kin-skyblue`, sun gold `--kid-sun-gold`.
- **Secondary:** mint `--kin-mint`, camel `--kin-camel`, chocolate `--kin-chocolate`, aubergine `--kin-aubergine`, moon cream `--kid-moon-cream`, cream white `--kin-cream-white`.
- **Extended:** the violet / green / orange / blue ramps (`--kid-*`), each dim → bright.
- **Feedback (the only fixed meanings):** `--danger` error red, `--kin-warning` warning gold, `--success` complete green.
- Semantic aliases (`--accent` = sky, `--accent-warm` = camel) are sensible defaults, not rules.

**Extending the palette:** derive, don't invent — spin a hue with `oklch(from var(--kid-violet) l c <hue>)`, build ramp steps with `color-mix()` toward espresso or cream white, soft fills at ~14% alpha. Anchor lightness/chroma to an existing ramp step so new colors sit beside the originals. Recipes: `preview/colors-extending.html`.

## 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.
- Italic or sky-blue `kin-emph`. The signature emphasis is upright sun-gold — one phrase per headline.
- 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` — upright, sun-gold? Never italic, never sky.
- Are all numbers in Goudy?
- Is the focal hierarchy clear — does the eye know which action leads?
- 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?

## AI-generated media

Full prompt recipes live in `preview/ai-media.html`. The short form:

- **Principle:** AI renders atmosphere; the design system renders information. Numbers, labels, diagrams, and type are always live HTML/SVG — never generated pixels.
- **House style block** (append verbatim to every image/video prompt): *warm cloisonné-enamel illustration on a deep espresso ground (#1C140D); flat color fields with thin dark-umber gaps, gold-rimmed shapes; celestial motifs (suns, eclipsing moons, stars, orbit arcs); palette cream white #FFFFE6, sun-gold #EAAA00, camel #C19A6B, chocolate #6F4A2E, sky #03CCD9 for luminous pulses; matte, jewel-like, golden-hour warmth; never gloss, photorealism, neon, purple-pink gradients, or any text/lettering.*
- **Infographics:** data drawn with system tokens; AI supplies only a quiet, dark decorative backing (cream type must pass 7:1 on it).
- **Illustrations:** compose for type — one third of the frame fades to plain espresso for the headline; edges resolve into flat #1C140D.
- **Video:** 4–8s seamless ambient loops, camera locked, <20% of frame moving, silent; no AI voiceover without approval.
- **Memes:** the one exception — native template at native fidelity, no style block, no logo, no brand colors; brand lives in the wit.
- **Always:** grade whites to cream, blacks to #120C07; give each frame a clear lead accent; never photorealistic humans, fake screenshots, or model-rendered logos/text.

## Materials & finishes

Full swatches, hex anchors, and prompt phrases live in `preview/materials.html`. The short form:

- **Hierarchy:** gold is the voice (#F6D992/#EAAA00/#9C6B08); brass (#B98E3E) and copper (#C0713E) are working/accent metals; silver (#B9BDB9) is rationed to lunar motifs only — never rims or type. One warm metal leads per composition.
- **Glass:** cream-tinted translucency (rgba(255,255,230,.06–.28)) with a gold rim; sky glass (#03CCD9 at 8–34%) for luminous panes; scrims are umber-smoked (#1C140D at 45–85%), never neutral black; domed cabochons for status dots.
- **Woods:** walnut is the house wood, ebony the ground, oak the light, cherry the ceremonial accent. CSS grain = 3-tone `repeating-linear-gradient` at 92–96°; always oiled/waxed, never lacquer.
- **Hardware:** brass hinges where things open, copper dome rivets at joints (pairs/fours), interlocked brass rings for connections, one gold clasp at closures. Functional ornament only — hardware appears where the UI actually pivots, joins, or closes.
- **Finishes:** matte enamel default; burnished (single 135° highlight), tea-brown patina (no verdigris), light hammering for large fields. Never chrome, mirror polish, iridescence, or wet gloss.
- **Prompting:** append the MATERIAL SUFFIX block (in the card) after the house STYLE block whenever a prompt renders physical objects.

## 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 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.
