# Royals & Rogues Design System

The complete quiet-enamel software system for **Royals & Rogues**, a game of **The Fellowship of Play** — No-Limit Hold'em collided with Powers, Courts, dangerous Items, and table states, rebuilt as software in quiet medieval enamel.

Tagline pattern: *"Deal the hand. Change the world around it."*

This system is a sibling of the **Kiduna AI design system** — same universe, same material intelligence, deliberately complementary: both are dark-UI native, both set Goudy Heavyface over Avenir, both build objects from cloisonné enamel with fine gold metal lines. Where Kiduna is **warm** (deep umber ground, sky-blue current, sun gold), Royals & Rogues is **cold-lit** (green-black ink ground, emerald action, antique gold). Put side by side they read as day-realm and candle-lit game-hall of one world.

## Sources

- **Royals & Rogues site** — https://www.kiduna.design/royals-and-rogues ("Study 02 · quiet enamel software edition"). The published palette (void `#030605`, ink `#07110f`, malachite `#0e634f`, emerald `#159271`, gold `#e8b24a`, bright `#ffd981`, cream `#f7eccb`, muted `#a99e88`), type pairing, the quiet-enamel principles, and all game structure come verbatim from this page.
- **Kiduna AI design system** — Claude project `2de4dee0-9628-4871-a4e3-fc4ddc902d31` (kiduna.design). Fonts (Goudy Heavyface BT, Avenir family) are copied from it; enamel-object grammar, semantic token naming, spacing grid, and feedback-color meanings are shared with it.
- Game art lives on the live site under `https://www.kiduna.design/royals-and-rogues/v2/art/` (system/key-art.png, power/class-*.png, power/court-*.png, tokens/*.png, items/items-master.png, system/power-back.png). **Not copied into this project** — no binary download path from here; UI-kit screens hotlink them. Ask the user for the Kit v2.0.0 asset drop to localize.

## The game (for writers and designers)

- 2–4 players · 13+ · 20–45 minutes. No-Limit Texas Hold'em with antes instead of blinds; three hole cards; the objective is to win all coins on the table.
- **Four Classes** (how you play): Merchant (Adaptive/Midrange), Noble (Tight/Control), Rogue (Tight/Aggressive), Warrior (Loose/Aggressive).
- **Four Courts** (what guides you): King/Wealth, Queen/Intellect, Jack/Skill, Joker/Craftiness. Class × Court = sixteen 40-card deck identities.
- **Four timing windows**: Setup, Round, Showdown, Counter — "Plot. Strike. Answer. Reveal."
- **Table states**: Heating Up (volatile — unlocks Fire Cards), Tilted (pressure — limits play).
- Catalog: 180 assets — 106 Power artifacts, 54 poker deck assets, 16 deck directions, 10 Items, 6 Tokens.

## Content fundamentals

**Voice.** Ceremonial but exact. Rules language is calm, imperative, and unambiguous ("Reveal and resolve clockwise from the dealer."); marketing language is short declaratives with a twist of menace or delight ("Useful. Dangerous. Tactile."). Second person for instruction, no first-person plural chest-beating.

**Headline pattern.** A complete thought, broken at the drama point, with ONE upright garnet Goudy phrase (`em.rr-emph`): *"Poker becomes **possibility**."* · *"Build the **whole game**."* Never two emphases per headline.

**Eyebrows everywhere.** Every section opens with a letterspaced caps eyebrow (`.rr-eyebrow`), often ceremonial: THE FELLOWSHIP OF PLAY PRESENTS · CHOOSE HOW YOU PLAY · SET THE TABLE. Wide tracking (`--tracking-caps-wide`) for banner moments.

**Numbers are Goudy.** Counts, steps, stats always display in Goudy Heavyface (`.rr-numeral`): **180** cataloged assets, steps *01–05*. Two-digit zero-padded ordinals (01, 02) label sequences.

**Provenance is visible.** Unreviewed copy is labeled, never hidden: "PROVISIONAL CARD TEXT — awaiting final editorial confirmation", "Human deck-list review required". Honesty about editorial state is part of the brand.

**Software separation.** Art never carries type. Card text, strategy, beginner guidance, and source arrive as separate on-demand layers.

**Avoid.** Emoji (never), exclamation-mark pileups outside card names (card names may keep them: "Deal of a Lifetime!"), fantasy purple prose, hollow CTAs. CTAs are caps + arrow: ENTER THE GAME ↓ · REVIEW ALL 180 ASSETS · OPEN →.

## Visual foundations

**Four words: Quiet. Cold-lit. Gilded. Exact.**

- **Color.** Green-black ink ground (`--bg: #07110f`) over void; malachite/emerald carry structure and action; antique gold is the metal that draws every line; parchment cream is the only light text — **never pure white**. Muted stone-taupe for secondary text. Feedback colors keep Kiduna's fixed meanings (error/warning/complete), retuned to sit on ink. Four heraldic accents (azure, amethyst, garnet, copper) are **intentional additions** — derived medieval tinctures for Courts and timing windows; documented in `tokens/colors.css`.
- **Type.** Display voice is **EB Garamond** (`--font-display`, Google Fonts) — headlines, ledes (`.rr-lede`), card titles, numerals; Georgia fallback. The wordmark is the provided SVG. Avenir carries eyebrows + interface body. Goudy Heavyface stays loaded as `--font-goudy` (legacy). Signature emphasis is upright garnet (--rr-garnet).
- **Backgrounds.** Flat ink, or the table-felt radial (`.rr-table-ground`). No decorative gradients, no photography washes. Art is hotlinked enamel scenes with no type on them.
- **Materials.** Everything is enamel: `.rr-enamel-surface` (panels — opaque ink, double gold rim), `.rr-enamel` (circular medallions, hue via `--hue`), `.rr-champleve` (recessed wells — content below the metal), `.rr-rule` (gold cloison hairline). The gold rim means REAL, same as Kiduna.
- **Light.** ONE meaningful glow per composition (`.rr-glow`, gold or emerald). Gilded gradient text (`.rr-text-gilded`) for rare ceremonial headlines. Shadows deep and cold, never bright.
- **Spacing & radii.** 4pt grid (8/12/16/24 do most work). Buttons squared (`--radius-xs` 4px, shared with Kiduna); cards `--radius-lg` 14px; playing cards `--radius-card` 18px at 5:7 ratio; pills for chips/eyebrow badges.
- **Motion.** Quiet: fades and small settles (`--motion-quick` 160ms, `--motion-settle` 420ms spring-out). No bounces, spins, or ambient field motion. Hover = slight brighten + hairline turns gold; press = translate down 1px.
- **Transparency & blur.** Essentially none — enamel is opaque. Soft fills are 14–18% alpha color washes; no glassmorphism.

## Iconography

- **No icon font and no SVG icon set was provided.** The site's iconography is: **unicode glyphs** (arrows `→ ↓ ↑`, card suits `♣ ♦ ♥ ♠`, star `✦`), **Goudy monograms** (M, N, R, W · MK, RQ… on enamel medallions), and **hotlinked enamel art** for every real artifact. Follow that: suits and arrows as text glyphs in the type color of their context, monograms in Goudy on `.rr-enamel` medallions.
- If a functional UI icon is unavoidable, borrow Kiduna's convention (Lucide-style, 24px grid, stroke 1.75, round caps, `currentColor`) — flag it as a Kiduna loan.
- **Mark hierarchy** (all provided; never redraw, recolor, retype, or crop any of them):
  1. **Complete logo** — `assets/logo-complete.png` (transparent; `assets/logo-complete-dark.png` has a baked near-black ground): the sigil medallion + "Royals / & Rogues" lockup with the gold rule. The PRIMARY mark — heroes, footers, covers, title slides, packaging.
  2. **Sigil alone** — `assets/sigil.png`: the gold-rimmed enamel table-marker medallion (up/down arrows, garnet gem). Favicons, avatars, nav brands, card backs, seals, any spot under ~120px wide.
  3. **Wordmark alone** — `assets/wordmark.svg`: cream "Royals" over gold "& Rogues". When the lockup is too wide or the sigil already appears nearby. Type-only fallback: `.rr-wordmark` (EB Garamond).
  Source SVGs for the lockup live in the user's logo package (v1.0, built by build-logo.mjs).
- Never substitute emoji or hand-drawn SVG for the enamel art. If the art isn't available, use a labeled `.rr-champleve` placeholder well.

## Intentional additions

Documented deviations from source (the site defines palette + type + principles, no component code):
- Heraldic accent tinctures (azure/amethyst/garnet/copper) + Court and timing-window color mappings — the site renders courts/windows in art only; UI needed hues.
- Semantic token layer (`--bg`, `--surface`, `--accent`…) mirrors Kiduna's naming so one consumer codebase can theme across both systems.
- The React component set below — authored from the site's rendered UI, not from a component source.

## Index

- `styles.css` — entry point; imports everything under `tokens/`.
- `tokens/` — `colors.css`, `typography.css`, `spacing.css`, `materials.css`.
- `fonts/` — Goudy Heavyface BT + Avenir (Light/Book/Regular/Heavy/Black), copied from the Kiduna system.
- `guidelines/` — specimen cards (colors, type, materials, spacing, brand) shown in the Design System tab.
- `components/` — React primitives: `actions/` (Button), `forms/` (Input, Select, Checkbox, Switch), `surfaces/` (Panel, Tabs, Dialog), `display/` (Badge, Tag, StatBlock), `game/` (PokerCard, TimingBadge, EnamelMedallion, AssetTile).
- `ui_kits/site/` — recreation of the kiduna.design/royals-and-rogues landing page.
- `SKILL.md` — how to design in the Royals & Rogues idiom.
