# Kidunaverse Design System

A small, opinionated design system for the **Kidunaverse** — the actual Kinship DUNA, the first DUNA registered in West Virginia. The Kidunaverse is a **Kiduna Factory**: it builds software-based, internet-native agentic organizations. Dark-UI native. Serif-display, sans-body. Sky-blue action on deep-umber ground, sun-gold and moon-cream from the Kiduna mark, warmed by camel and chocolate, sparked by mint.

> *Exceptional People and Intelligent Agents working together as one.*

---

## Orientation

This is a **living design system** captured as a single CSS file + a folder of HTML preview cards. It is not a component library you install — it is a reference you read, copy from, and extend. If you are building a new Kidunaverse surface (a landing page, a factory dashboard, a proposal, a slide deck), start by reading this file and linking `colors_and_type.css`.

**Files at a glance**
- [`colors_and_type.css`](./colors_and_type.css) — tokens + base styles. Import this into everything.
- [`UI Kit.html`](./UI%20Kit.html) — a full worked example: nav, hero, stat strip, capability cards, delivery feed, engagement tiers.
- [`preview/`](./preview) — one HTML card per design-system concept (colors, type, spacing, components, logos). These are the review artifacts.
- [`assets/`](./assets) — the Kiduna sun/moon logos (`kiduna-logo-linear-skyblue.svg`, `kiduna-logo-stacked-gold.svg`, `kiduna-mark.svg`), the extra-wide `kidunaverse-banner.svg`, and favicon set (`favicon.svg`, `favicon-32.png`, `apple-touch-icon.png`), plus legacy Kinship lockups and the fawn symbol (`fawn-symbol-*.svg`).
- [`fonts/`](./fonts) — Goudy Heavyface + Avenir (Light / Book / Regular / Heavy / Black).
- [`SKILL.md`](./SKILL.md) — the skill prompt: *how to design in the Kidunaverse idiom*.

---

## Visual foundations

### The three-word aesthetic

**Deep. Warm. Operational.** The Kidunaverse lives on a near-black deep umber (`#1C140D`), with a single pulse of sky blue (`#03CCD9`) for anything the user should touch. The Kiduna mark contributes two colors of its own — sun gold (`#EAAA00`) and moon cream (`#FFF6D5`) — used for gold editorial moments and highlights on dark. Camel (`#C19A6B`) and chocolate (`#6F4A2E`) carry the warm earth tones across surfaces and secondary actions, and a rare touch of mint (`#8FE6C6`) supplies the "magic." Aubergine (`#2A1A2B`) is the alternate deep ground. Cream (`#FFFFE6 / #F9DDB7`) anchors print and light surfaces.

The palette is an evolution of the original Kinship system, not a rewrite: navy, orange, gold, lime, magenta, and purple are all retained as supporting colors — the foreground simply shifts from navy+orange to umber+sky. Avoid: cold greys, neon gradients for the sake of gradient, emoji as primary iconography, flat pastel color fields. The palette is warm and *earned* — it comes from umber, camel, and sky.

### Typography

Goudy Heavyface (display) + Avenir (body) + IBM Plex Sans (callouts). Goudy has a tall x-height, heavy stroke, and a distinctive italic — it carries every headline. Avenir is the quiet, humanist counterpoint that handles everything else. Callouts — pull-quotes, asides, highlighted notes — are set in IBM Plex Sans via `--font-callout` / `.kin-callout` (loaded from Google Fonts).

**The signature move: `em.kin-emph`** — one italic Goudy phrase, set in the brand sky blue, inside a display headline. *One phrase per headline, never two.* Examples in `preview/type-emphasis.html`.

### Rhythm

- 4pt spacing grid; 8/12/16/20/24 do most of the work.
- Pill-shaped nav and badges (`--radius-pill`); **buttons are squared with a slight radius** (`--radius-xs`, 4px). Cards use `--radius-lg` (14px).
- Shadows are cool and dim on dark surfaces — never bright. `--shadow-glow-accent` and `--shadow-glow-sky` are reserved for *one* hero CTA per screen.

---

## Content fundamentals

**Voice.** Warm, direct, slightly literary. Short sentences. We write *to* the reader, not around them. We use "you" freely. We talk about *agents*, *organizations*, *the factory*, *members* — plainly, never in buzzwords.

**Headline pattern.** A complete thought, then an italic Goudy phrase that reframes it. The house tagline is the north star:
- *"Exceptional People and Intelligent Agents working together as one."*
- *"Organizations, born on the internet."*
- *"The factory is open."*

**Avoid.** Buzzwords (*synergy*, *leverage*, *disrupt*), hollow CTAs (*Learn more*), stacked emoji, jargon that isn't load-bearing. If we say "agentic" or "cloud-native," it has to mean something in the sentence.

**Numbers.** Always display in Goudy. Round to three significant figures in dense UI (`99.98%`, `3,400`). Use full precision in detail views.

---

## Iconography

Kidunaverse does **not** ship an icon set. We use:
1. **Text arrows** (`→`, `↗`, `←`) as the default "continue" glyph in CTAs.
2. **Lucide** (`lucide.dev`) when a glyph is genuinely necessary — stroke 1.75, 20px default size, rendered in `currentColor`. Never colored, never filled.
3. **Placeholders** for anything else, until a designer draws a real one. A good placeholder is better than a wrong icon.

Logo usage: see `preview/logo-lockups.html`. The Kiduna sun/moon logo ships in sky-blue linear and gold stacked forms; the mark itself is multicolor (sun gold, moon sky, cream) and works on espresso, aubergine, umber, and cream grounds. The extra-wide **kidunaverse banner** (`preview/logo-banner.html`) is for wide horizontal contexts only — headers, footers, deck title strips, social banners; never below ~320px wide. Never recolor the mark; never place the gold logo on sky.

**The Kiduna mark** (`preview/symbol-mark.html`, `assets/kiduna-mark.svg`) — the sun eclipsed by the moon — is the standalone brand symbol, a quiet signature, not decoration. Use it *sparingly*: the favicon, one hero/section watermark, a loading or empty state, the back of a card. One mark per surface, never tiled or used as a bullet glyph. (The legacy Kinship fawn remains in `assets/fawn-symbol-*.svg` for Kinship-branded surfaces.)

---

## Components (preview index)

| Concept | Card |
|---|---|
| Brand palette | [`preview/colors-brand.html`](./preview/colors-brand.html) |
| Accent + feedback colors | [`preview/colors-accents.html`](./preview/colors-accents.html) |
| Semantic tokens (dark) | [`preview/colors-semantic.html`](./preview/colors-semantic.html) |
| Display type (Goudy) | [`preview/type-display.html`](./preview/type-display.html) |
| Body type (Avenir) + Callout (IBM Plex Sans) | [`preview/type-body.html`](./preview/type-body.html) |
| The signature emphasis | [`preview/type-emphasis.html`](./preview/type-emphasis.html) |
| Spacing · Radius · Elevation | [`preview/spacing.html`](./preview/spacing.html) |
| Buttons | [`preview/buttons.html`](./preview/buttons.html) |
| Inputs | [`preview/inputs.html`](./preview/inputs.html) |
| Cards | [`preview/cards.html`](./preview/cards.html) |
| Badges + chips | [`preview/badges.html`](./preview/badges.html) |
| Logo — primary | [`preview/logo-primary.html`](./preview/logo-primary.html) |
| Logo — lockups | [`preview/logo-lockups.html`](./preview/logo-lockups.html) |
| Logo — banner (extra wide) | [`preview/logo-banner.html`](./preview/logo-banner.html) |
| Favicon — Kiduna mark | [`preview/favicon.html`](./preview/favicon.html) |
| Symbol — Kiduna mark | [`preview/symbol-mark.html`](./preview/symbol-mark.html) |

---

## How to use

```html
<link rel="stylesheet" href="/path/to/colors_and_type.css">
```

Then use tokens everywhere:

```css
.hero {
  background: linear-gradient(135deg, var(--surface-elev), var(--bg));
  color: var(--fg);
  border-radius: var(--radius-xl);
  padding: var(--space-16) var(--space-12);
  box-shadow: var(--shadow-lg);
}

.hero h1 {
  font-family: var(--font-display);
  font-size: var(--fs-5xl);
}

.hero h1 em { /* the signature move */
  font-family: var(--font-display);
  font-style: italic;
  color: var(--accent);
}
```

For a full worked example, open `UI Kit.html`.
