Royals & Rogues is a Realm-specific design system. It uses a separate visual temperature and component set while retaining shared behavior needed to connect with the Kiduna ecosystem.
Dimension
Kiduna
Royals & Rogues
Connection
Ground
Warm deep umber
Cold green-black ink
Both are dark-UI native.
Action
Sky blue
Emerald
Both expose a named semantic --accent token.
Metal
Sun gold
Antique gold
Gold rims register identity and material structure.
Typography
Goudy display, Avenir body
EB Garamond display, Avenir body; Goudy loaded for compatibility
Avenir preserves interface continuity.
Geometry
4 px controls, 14 px cards
4 px controls, 14 px panels, 18 px playing cards
Shared base grid and control shape.
Feedback
Error, warning, complete
Error, warning, complete
Meanings remain fixed across systems.
02 · Brand identity
Marks and hierarchy
The package provides three approved brand forms. Do not redraw, retype, recolor, or crop them.
Primary
Complete logo
Sigil medallion, wordmark, and gold rule. Use for heroes, footers, covers, title slides, and packaging.
Compact
Sigil
Use for favicons, avatars, navigation brands, card backs, seals, and placements under approximately 120 px.
Type-only
Wordmark
Use when the complete lockup is too wide or the sigil already appears nearby.
03 · Color
Palette and semantics
The core eight colors are the published Realm palette. Derived ramps and heraldic accents support interface states, Courts, and timing windows.
Core palette
Void#030605
Ink#07110F
Malachite#0E634F
Emerald#159271
Antique gold#E8B24A
Bright gold#FFD981
Parchment cream#F7ECCB
Muted stone#A99E88
Derived and heraldic palette
Pine#0A3D30
Emerald hover#1CAE87
Jade#3CC79C
Gold deep#8A6420
Azure#4C7FB8
Azure bright#7FB0DF
Amethyst#7B5BB5
Amethyst bright#A98FE0
Garnet#A83A3F
Garnet bright#D9787C
Copper#B96A35
Copper bright#E29A62
Fixed feedback meanings
Error#E14B4B
Warning#F5C542
Complete#2FD98A
Required color rules: parchment cream replaces pure white; emerald carries primary action; antique gold defines metal structure; garnet marks the signature headline emphasis and danger/stakes contexts.
04 · Typography
Type roles
EB Garamond is the display, lede, card-title, rules-serif, and numeral typeface. Avenir carries interface body and eyebrow text. Goudy Heavyface remains available as a shared Kiduna font.
DisplayEB Garamond
Deal the hand.
Body and interfaceAvenir
Use Avenir for rules UI, navigation, labels, form controls, metadata, and compact instructions.
Shared compatibilityGoudy Heavyface
180 cataloged assets
Scale
12, 14, 16, 18, 20, 24, 30, 40, 54, and 72 px.
Eyebrows
11 px Avenir Heavy, uppercase, 0.18 em tracking. Ceremonial banners may use 0.26 em.
Emphasis
One upright garnet display phrase per headline. Do not use a second emphasized phrase.
05 · Materials and layout
Quiet-enamel system
The system uses opaque enamel surfaces, fine antique-gold lines, recessed wells, cold dark shadows, and one meaningful glow per composition.
01
Cloisonné structure
Gold cloisons organize content and preserve legibility.
02
Champlevé depth
Recessed dark wells place content below the metal.
03
Quiet light
Use one gold or emerald focal glow. Do not stack glows.
04
Software separation
Art does not carry type. Text, strategy, guidance, and provenance remain separate layers.
Category
Values
Usage
Spacing
4 · 8 · 12 · 16 · 20 · 24 · 32 · 40 · 48 · 64 px
4 px grid shared with Kiduna.
Radii
4 · 6 · 10 · 14 · 20 · 18 px card · pill
Buttons 4 px; panels 14 px; playing cards 18 px at 5:7.
Elevation
sm · md · lg · gold glow · emerald glow
Shadows remain cold and deep.
Motion
160 ms quick · 420 ms settle
Fades and small settles only. No bounces, spins, or ambient movement.
Transparency
14–18% soft fills
Surfaces stay opaque. Do not use glassmorphism.
06 · Components
Implemented component set
The package contains React source, TypeScript declarations, prompt references, and grouped preview cards for all 15 components.
Caps pill for statuses and kinds. Tone selects the semantic color.
Display
StatBlock
Zero-padded ordinal, display numeral, and short label.
Display
Tag
Small metadata tag. The provisional state makes incomplete editorial status visible.
Form
Checkbox
Square control. Checked state uses emerald inside a gold rim.
Form
Input
Recessed field with label, hint text, and gold focus rim.
Form
Select
Dropdown matching the Input treatment with a gold indicator.
Form
Switch
Emerald on-state, gold rim, and cream thumb.
Game
AssetTile
Catalog tile for the 180-asset library. Supports image or monogram fallback.
Game
EnamelMedallion
Class, Court, or deck monogram medallion with per-object hue and nascent state.
Game
PokerCard
5:7 playing card. Supports all ranks, suits, widths, and face-down state.
Game
TimingBadge
Semantic pill for Setup, Round, Showdown, and Counter windows.
Surface
Dialog
Enamel modal over a void scrim with eyebrow, title, body, actions, and close behavior.
Surface
Panel
Gold-rimmed enamel content surface with eyebrow, title, and body.
Surface
Tabs
Caps tab set with a gold active underline for software-separation layers.
07 · Game semantics
Classes, Courts, timing, state
The UI kit and components encode the game's Classes, Courts, timing windows, table states, and asset catalog.
Classes
Adaptive / Midrange
Merchant
Accumulate · Exchange · ExplodeTight / Control
Noble
Protect · Shape · CommandTight / Aggressive
Rogue
Steal · Manipulate · ReverseLoose / Aggressive
Warrior
Force · Break · Attack
Courts
Wealth
King
Antique goldIntellect
Queen
Bright amethystSkill
Jack
Bright azureCraftiness
Joker
Bright copper
Timing windows
01
Setup
After hole cards are dealt and before betting begins.
Resolve clockwise from the dealer.02
Round
On the player’s turn before checking, betting, or folding.
Play compatible sequences before the poker action.03
Showdown
After final betting and before hole cards are revealed.
Set face down, then resolve in betting order.04
Counter
When the stated trigger occurs, including outside the player’s turn.
Resolve the newest response first in a counter chain.
Table state
Heating Up
Volatile state that unlocks Fire Cards.
Table state
Tilted
Pressure state that limits play.
Catalog
Count
Composition
Total assets
180
106 Power artifacts, 54 poker-deck assets, 16 deck directions, 10 Items, and 6 Tokens.
Deck identities
16
Four Classes × four Courts; 40 cards per identity.
Players and duration
2–4
Ages 13+; approximately 20–45 minutes.
08 · Content
Writing and information rules
Rules copy, marketing copy, labels, metadata, and editorial status use separate conventions.
Voice
Ceremonial and exact
Rules are calm, imperative, and unambiguous. Marketing uses short declarative sentences.
Person
Second person
Instructions address the player directly. Avoid first-person-plural promotion.
Editorial
Visible provenance
Label provisional text and required human review. Do not hide unfinished status.
Actions
Explicit CTAs
Use uppercase action labels and text arrows. Avoid generic “Learn more” language.
Numbers
Display numerals
Use display type for counts, steps, and stats. Use zero-padded ordinals for sequences.
Avoid
No emoji
Do not use emoji, stacked exclamation points, fantasy purple prose, or decorative icon substitutes.
09 · Package
Files and download
The downloadable archive is the complete supplied v0.03 package. It includes the source tokens, components, guidelines, UI kit, assets, fonts, manifests, and supporting files.
Royals & Rogues Design System v0.03
Original package supplied for this reference page.
Secondary system for night, candlelight, secrecy, covert play, and Rogue-centered contexts. Uses wine-dark grounds and garnet action while retaining the shared gold, parchment, component, and game grammar.
The included UI kit hotlinks Realm game art from kiduna.design. The component system and design-system package are local; the full game-art kit is maintained separately.
