Kiduna

Build from Within/Design Systems

Kiduna Design System · v0.6

Kiduna Design System

The ecosystem-wide reference for Kiduna brand identity, interface foundations, components, symbols, spatial interaction, Allies, media, and implementation.

Download v0.6 Royals & Rogues system
Kiduna logo
Version0.6
Interface modeDark native
Primary groundDeep umber
Primary actionSky blue
Display typeGoudy Heavyface
Spacing grid4 px

01 · Brand identity

Identity and usage

The system distinguishes the ecosystem, the Field, and its participants. Brand marks identify Kiduna; they do not replace interface icons, Realm emblems, Talismans, or Allies.

Kiduna linear sky-blue logo
Kiduna sun-and-moon mark
Kiduna diamond badge
Structure

Ecosystem

The whole living system.

Structure

Field

How the ecosystem is perceived and navigated.

Participants

Sources and Allies

The people and Source-specific intelligences through whom the ecosystem organizes and acts.

Mark rule

One per surface

Use the standalone mark as a signature, favicon, watermark, loading state, or card back. Do not tile or recolor it.

Required brand rule: Kiduna does not use pure white. Use cream white #FFFFE6. Moon cream #FFF6D5 is a separate symbolic highlight color.

02 · Color

Palette and semantics

Espresso, sky blue, and sun gold are the primary brand colors. Secondary and extended colors support identity and differentiation. Only feedback colors have fixed meanings.

Core palette

Espresso#1C140D
Sky blue#03CCD9
Sun gold#EAAA00
Moon cream#FFF6D5
Cream white#FFFFE6
Camel#C19A6B
Chocolate#6F4A2E
Aubergine#2A1A2B
Mint#8FE6C6

Extended palette

Violet deep#3F2270
Violet#6536BB
Violet bright#9D7BE8
Lilac#D6C7F2
Forest#1F4D38
Green#2F8C63
Jade#57C08F
Sage#BCD3A6
Ember#A94E1C
Orange#D97B2E
Apricot#F0A85C
Peach#F8D6AA
Midnight#14203E
Indigo#33478F
Blue#2FB4E0
Powder#ABDCE8

Fixed feedback meanings

Error#FF3A3A
Warning#FFCA05
Complete#00EB75
Hierarchy

Prominence, not permission

Any palette color may be used for any purpose. The primary, secondary, and extended categories describe expected prominence.

Extension

Derive new colors

Create new hues from existing colors with OKLCH hue changes or color-mix ramps. Preserve the warm, dark-native relationship to the base palette.

03 · Typography

Type roles

Goudy Heavyface carries display text. Avenir carries body and interface text. IBM Plex Sans is reserved for callouts and highlighted notes.

DisplayGoudy Heavyface
A shared system
Body and UIAvenir
Use Avenir for paragraphs, labels, navigation, controls, and compact interface information.
CalloutIBM Plex Sans
Use IBM Plex Sans for pull quotes, asides, and highlighted explanatory notes.

Scale

12, 14, 16, 18, 20, 24, 30, 40, 54, and 72 px.

Display emphasis

One upright Goudy phrase in sun gold per headline. Never italic and never sky blue.

Numbers

Set prominent numbers in Goudy Heavyface. Use three significant figures in dense interfaces.

04 · Layout and material

Spacing, radii, elevation, motion

The system uses a 4 px spacing grid, restrained corner radii, dark elevation, and motion tied to actual state changes or transfers.

CategoryTokensRule
Spacing4 · 8 · 12 · 16 · 20 · 24 · 32 · 40 · 48 · 64 px8, 12, 16, 20, and 24 px handle most layouts.
Radii4 · 6 · 10 · 14 · 20 px · pillButtons use 4 px. Cards use 14 px. Pills are limited to navigation, badges, and chips.
Elevationsm · md · lg · accent glow · warm glowShadows remain dim. Glows identify selected focal moments.
Studio movementbreathe 7s · drift 16s · gather 900ms · path pulse 4sMovement must describe relevance, transfer, gathering, or change and must settle.
Reduced motionprefers-reduced-motionProvide a stable equivalent for every animated state.
Surfaces

Warm dark layers

Page ground #1C140D, deep edge #120C07, surface #271B11, elevated surface #33251A.

Effects

Light and magic

Brand, aurora, meadow, sunrise, and dusk gradients; sky, gold, violet, and mint auras; sun and sky bursts; vignette.

Material

Celestial enamel

Dark lacquer, warm metal rims, enamel fields, orbit geometry, restrained glow, and clearly registered identity objects.

05 · Components

Controls and interface elements

The package is a reference system rather than an installable component library. It supplies tokens, base styles, preview cards, and a worked UI kit.

Actions

Buttons

Squared 4 px controls. Sky is the default consequence-bearing action. Labels stay explicit.

Forms

Inputs

Warm raised surfaces, visible labels, high-contrast focus state, semantic error and completion feedback.

Containers

Cards

14 px radius, warm surface hierarchy, thin borders, and quiet elevation.

Metadata

Badges and chips

Pill form is allowed for compact status, category, and filter information.

Responsive

Kiduna Live

Separate references cover glyphs, images, connectors, mobile composition, and tablet composition.

Worked example

UI Kit

Navigation, hero, stat strip, capability cards, delivery feed, engagement tiers, and interaction states.

Functional icon set

agent
alliance
arrow right
build
check
chevron down
close
compute
copy
discover
empower
enact
govern
inform
kinship
ledger
link
magic
mail
member
moon
plus
search
share
sun
treasury
tune
Functional icons use a 24 px grid, 1.75 px stroke, round caps and joins, no fill, and currentColor. The normal rendered size is 20 px. Use 16 px in dense controls, 24 px for emphasis, and 32 px only when needed.

06 · Symbols

Emblems, crests, Talismans, connectors

Each family has a separate semantic function. Functional icons support actions; Realm emblems identify Realm types; organization crests identify persistent organizations; Talismans carry meaning; connectors describe relationships.

Realm emblems

organization Realm emblem
organization
alliance Realm emblem
alliance
program Realm emblem
program
project Realm emblem
project
relationship Realm emblem
relationship
community Realm emblem
community
conceptual Realm emblem
conceptual

Every Realm emblem retains a circular silhouette, double warm-metal rim, cardinal anchor studs, dark lacquer core, orbit track, constellation nodes, and moon-cream highlight. Preserve each type's defining geometry and semantic hue.

Organization crest examples

archive organization crest
archive
beacon organization crest
beacon
bridge organization crest
bridge
grove organization crest
grove
loom organization crest
loom
summit organization crest
summit

Talismans

compass Talisman
compass
Orientation
moon Talisman
moon
Reflection
sprout Talisman
sprout
Cultivation
tide Talisman
tide
Flow
summit Talisman
summit
Purpose
vessel Talisman
vessel
Stewardship

Connector semantics

Orbit

Belonging

Tether

Direct relationship

Braid

Reciprocity

Confluence

Gathering

Anchor

Commitment

Crossing

Exchange

Threshold

Entry

07 · Allies

Celestial Enamel Ally system

An Ally is the Source-approved visual identity of a person inside Kiduna. Recognition is fixed across states. State changes may alter expression, gaze, cheek sigil, and background geometry, but not identity.

open Ally state examples
open

Available and present. Default state.

engaged Ally state examples
engaged

Actively collaborating or responding.

focused Ally state examples
focused

Deliberately working, reviewing, or making.

dreaming Ally state examples
dreaming

Imagining, reflecting, or exploring possibility.

Identity contract

Face, skin tone, apparent age, hair, distinguishing features, adornments, clothing silhouette, crop, line weight, and rim treatment remain stable.

Source control

The Source approves the canonical master and may revise, freeze, hide, or retire it. Explicit state choice overrides product-selected state.

Accessibility

Never communicate state through the portrait alone. Pair it with status text, a tooltip, or an accessible name.

Production exports

2048 px master. Standard exports: 512, 256, 128, 64, 40, and 32 px. Lossless PNG or high-quality WebP in sRGB.

Rendering

Use pre-generated state assets. Keep crop and dimensions fixed. Crossfade in 150–250 ms when motion is allowed.

Privacy

Keep Source reference photos outside public presentation data. Do not use legal names or private identifiers in public filenames.

08 · Studio and Field

Spatial interface grammar

The Studio references define the Field ground, Realm anatomy, registered enamel objects, panels, focus, Ki surfaces, connector behavior, and responsive Kiduna Live views.

Taxonomy

Field objects

Realm, Source, Actor, Media, Resource, and Action have distinct semantic colors and object treatment.

Ground

Studio lacquer

Canonical ground #0A0604, deep ground #060304, raised surface #271B11.

Panels

In-scene surfaces

Panels, focus states, and Ki interfaces must remain legible as part of the spatial system.

Connections

Relevance states

Resting, relevant, active, and historical opacity states distinguish relationship importance without displaying a noisy complete graph.

Enamel

Registered objects

Rims, studs, orbit nodes, and local highlights distinguish named, persistent, and actionable objects.

Responsive

Mobile and tablet

Separate reference cards specify how glyphs, identity, navigation, media, and connectors adapt to constrained screens.

09 · Package

Files and references

The downloadable archive is the authoritative complete package. It includes all source styles, assets, preview cards, fonts, Ally documentation, templates, worked examples, manifests, and supporting files supplied in v0.6.

Kiduna Design System v0.6

Original package supplied for this reference page.

ZIP64 MBComplete source package
Download package
Core files

System source

  • colors_and_type.css — tokens and base styles
  • UI Kit.html — worked interface example
  • design-canvas.jsx and Canvas.dc.html
  • _ds_manifest.json and bundled reference data
  • SKILL.md — design guidance included in the package
Supporting files

Assets and implementation

  • Brand, mark, favicon, icon, emblem, crest, Talisman, Ally, and Open Graph assets
  • Goudy Heavyface, Avenir, and Mancunian font files
  • Ally system, generation, implementation, and manifest files
  • Business-card and presentation-deck templates
  • Preview cards, upload references, scratch review images, and support files

Reference index