# SKILL: Design in the Kidunaverse idiom

Use this skill whenever you're creating a Kidunaverse surface — landing pages, factory dashboards, proposals, decks, emails, prototypes. It loads the design system's visual vocabulary so your output looks native to the Kidunaverse, not generic. The Kidunaverse is the actual Kinship DUNA (the first DUNA registered in West Virginia) — a Kiduna Factory building software-based, internet-native agentic organizations.

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