CIF Yoruba — Atomic Design System

Navigation Atoms

Movement through space is social navigation — "to know where one is is to know whose one is near." Navigation follows graded spatial morality: proximity to center correlates with seniority and legitimacy.

Navigation Item

The Talking Drum (Dùndún)

Principles: P13 (Layered Communication), P12 (Performative Knowledge)

Navigation is drum speech — the dùndún reproduces tonal contours to announce presence, name lineages, and guide movement. Each navigation item is a drum beat that carries identity and direction simultaneously. The drum's hourglass shape mirrors the concentric town: narrow at the center (the palace), widening toward the periphery.

<svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
  <defs><style>
    .nav-drum { fill: none; stroke: #5C4A3A; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
    .nav-skin { fill: none; stroke: #A39E98; stroke-width: 1.5; stroke-linecap: round; }
    .nav-cord { fill: none; stroke: #3D3530; stroke-width: 1.2; stroke-linecap: round; }
  </style></defs>
  <ellipse class="nav-drum" cx="24" cy="14" rx="10" ry="4"/>
  <path class="nav-drum" d="M 14 14 C 14 24, 16 32, 24 36 C 32 32, 34 24, 34 14"/>
  <ellipse class="nav-drum" cx="24" cy="36" rx="10" ry="4"/>
  <line class="nav-cord" x1="14" y1="14" x2="14" y2="36"/>
  <line class="nav-cord" x1="34" y1="14" x2="34" y2="36"/>
  <line class="nav-skin" x1="20" y1="36" x2="28" y2="36"/>
  <line class="nav-skin" x1="22" y1="14" x2="26" y2="14"/>
  <circle class="nav-cord" cx="24" cy="6" r="2"/>
</svg>

Navigation Container

The Concentric Town (Ilú)

Principles: P14 (Graded Spatial Morality), P3 (Nested Belonging)

The town is a moral diagram: palace at center, quarters ranked around, gates marking defended community. The navigation container replicates this concentric structure — the center is the most sacred navigation space, the periphery the most accessible. Each ring represents a deeper level of belonging and access.

<svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
  <defs><style>
    .town-core { fill: none; stroke: #A39E98; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
    .town-ring { fill: none; stroke: #A39E98; stroke-width: 1.5; stroke-linecap: round; }
    .town-gate { fill: none; stroke: #3D3530; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  </style></defs>
  <circle class="town-core" cx="24" cy="24" r="6"/>
  <circle class="town-ring" cx="24" cy="24" r="12"/>
  <circle class="town-ring" cx="24" cy="24" r="18"/>
  <path class="town-gate" d="M 24 6 L 24 12"/>
  <path class="town-gate" d="M 42 24 L 36 24"/>
  <path class="town-gate" d="M 24 42 L 24 36"/>
  <path class="town-gate" d="M 6 24 L 12 24"/>
  <circle class="town-core" cx="24" cy="24" r="2"/>
</svg>

Breadcrumb / Lineage Path

The Lineage Chain (Ìdílẹ̀)

Principles: P4 (Corporate Kinship), P21 (Segmented Kinship Priority)

A breadcrumb is not a path but a lineage chain — each link is a generation, each node an ancestor. The chain connects backward through time: the current position is the youngest link, the origin is the founding ancestor. The vertical orientation of each link echoes the lineage's vertical transmission through generations.

<svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
  <defs><style>
    .chain-link { fill: none; stroke: #5C4A3A; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
    .chain-connect { fill: none; stroke: #3D3530; stroke-width: 1.5; stroke-linecap: round; }
    .chain-node { fill: #A39E98; }
  </style></defs>
  <ellipse class="chain-link" cx="12" cy="24" rx="5" ry="8"/>
  <ellipse class="chain-link" cx="24" cy="24" rx="5" ry="8"/>
  <ellipse class="chain-link" cx="36" cy="24" rx="5" ry="8"/>
  <line class="chain-connect" x1="17" y1="24" x2="19" y2="24"/>
  <line class="chain-connect" x1="29" y1="24" x2="31" y2="24"/>
  <circle class="chain-node" cx="12" cy="24" r="2"/>
  <circle class="chain-node" cx="24" cy="24" r="2"/>
  <circle class="chain-node" cx="36" cy="24" r="2"/>
</svg>

Menu Trigger

The Gelede Mask

Principles: P10 (Community Editorial), P16 (Functional Aesthetics)

The Gelede mask reveals what is hidden — it opens the community's editorial function. A menu trigger is a mask that, when activated, reveals the layered social order beneath the surface. The mask's face is the interface; the performance it enables is the menu's content. The downward extension (the mask's beard) points to the revealed content.

<svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
  <defs><style>
    .mask-face { fill: none; stroke: #5C4A3A; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
    .mask-eye { fill: none; stroke: #3D3530; stroke-width: 1.5; stroke-linecap: round; }
    .mask-detail { fill: none; stroke: #A39E98; stroke-width: 1; stroke-linecap: round; }
  </style></defs>
  <ellipse class="mask-face" cx="24" cy="20" rx="12" ry="10"/>
  <ellipse class="mask-eye" cx="18" cy="18" rx="3" ry="2"/>
  <ellipse class="mask-eye" cx="30" cy="18" rx="3" ry="2"/>
  <path class="mask-face" d="M 20 26 C 22 28, 26 28, 28 26"/>
  <path class="mask-detail" d="M 12 20 C 10 24, 12 28, 16 30"/>
  <path class="mask-detail" d="M 36 20 C 38 24, 36 28, 32 30"/>
  <line class="mask-face" x1="24" y1="30" x2="24" y2="40"/>
  <ellipse class="mask-detail" cx="24" cy="42" rx="4" ry="2"/>
</svg>

Back Action

The Prostration (Ìdòbálè)

Principles: P13 (Layered Communication), P18 (Character-First Morality)

To go back is to prostrate — to lower oneself before what came before. The back action is not merely navigational but ethical: it acknowledges the seniority of the previous screen, the authority of what precedes. The prostrate figure bows toward the ground (the past), with the head (ori) lowered in respect.

<svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
  <defs><style>
    .prostrate-body { fill: none; stroke: #5C4A3A; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
    .prostrate-ground { fill: none; stroke: #3D3530; stroke-width: 2; stroke-linecap: round; }
    .prostrate-respect { fill: none; stroke: #A39E98; stroke-width: 1.2; stroke-linecap: round; }
  </style></defs>
  <path class="prostrate-body" d="M 36 12 C 32 12, 28 14, 26 18 C 24 22, 22 26, 20 30"/>
  <path class="prostrate-body" d="M 26 18 C 24 16, 22 16, 20 18"/>
  <path class="prostrate-body" d="M 20 30 C 18 32, 16 34, 14 34"/>
  <line class="prostrate-ground" x1="8" y1="38" x2="40" y2="38"/>
  <path class="prostrate-respect" d="M 12 34 C 10 36, 10 38, 12 40"/>
  <path class="prostrate-respect" d="M 16 32 C 14 34, 14 36, 16 38"/>
  <path class="prostrate-respect" d="M 20 30 C 18 32, 18 34, 20 36"/>
  <circle class="prostrate-body" cx="36" cy="12" r="2"/>
</svg>

Identity Atoms

Identity is not declared but engineered through repeated, layered nominations. Names, praise poetry, dress, and greeting all function as identity-programming technologies that continuously reinforce who a person is.

Avatar

The Ori (Inner Head / Personal Destiny)

Principles: P1 (Relational Self), P2 (Programmatic Identity)

The avatar is not a face but an ori — the inner head that is the person's capital, acquired pre-birth from Àjàlá the celestial potter. The concentric circles represent the layers of self: body (ara), life-force (ẹmi), and destiny (ori). The crown marks above signify the ori as personal orisha. No face is shown because the true self is inward, not outward.

<svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
  <defs><style>
    .ori-head { fill: none; stroke: #6B6560; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
    .ori-inner { fill: none; stroke: #2D2D2D; stroke-width: 2; stroke-linecap: round; }
    .ori-destiny { fill: #C9A84C; }
    .ori-crown { fill: none; stroke: #1A1A1A; stroke-width: 1.5; stroke-linecap: round; }
  </style></defs>
  <circle class="ori-head" cx="24" cy="24" r="16"/>
  <circle class="ori-inner" cx="24" cy="24" r="10"/>
  <circle class="ori-destiny" cx="24" cy="24" r="4"/>
  <path class="ori-crown" d="M 12 12 C 16 8, 20 6, 24 6 C 28 6, 32 8, 36 12"/>
  <path class="ori-crown" d="M 16 10 C 18 8, 20 8, 22 10"/>
  <path class="ori-crown" d="M 26 10 C 28 8, 30 8, 32 10"/>
  <circle class="ori-destiny" cx="24" cy="6" r="1.5"/>
</svg>

Identity Marker

The Naming Ceremony (Ìtọjú Orúkọ)

Principles: P2 (Programmatic Identity), P1 (Relational Self)

Identity is layered like names: orúkọ àmútọ̀runwá (brought from heaven), orúkọ àbíṣọ (bestowed at ceremony), oríkì (praise-name). The four concentric circles represent these name-layers, each closer to the spiritual core. The palm-leaf shapes at top represent the hands that bestow the name — identity is given, not self-declared.

<svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
  <defs><style>
    .name-layer { fill: none; stroke: #5C4A3A; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
    .name-core { fill: none; stroke: #A39E98; stroke-width: 2.5; stroke-linecap: round; }
    .name-spirit { fill: #C9A84C; }
    .name-palm { fill: none; stroke: #3D3530; stroke-width: 1.5; stroke-linecap: round; }
  </style></defs>
  <circle class="name-layer" cx="24" cy="24" r="18"/>
  <circle class="name-layer" cx="24" cy="24" r="14"/>
  <circle class="name-core" cx="24" cy="24" r="10"/>
  <circle class="name-spirit" cx="24" cy="24" r="5"/>
  <path class="name-palm" d="M 18 14 C 16 12, 14 12, 12 14 C 10 16, 10 18, 12 20"/>
  <path class="name-palm" d="M 30 14 C 32 12, 34 12, 36 14 C 38 16, 38 18, 36 20"/>
  <circle class="name-spirit" cx="24" cy="24" r="2"/>
</svg>

Verification

The Ifa Divination Chain (Opele)

Principles: P11 (Proceduralized Uncertainty), P7 (Constitutional Restraint)

Verification is not a checkmark but a divination — the opele chain is cast to read destiny. The seeds (palm kernels) are the verification tokens, each carrying a binary state (face up/face down) that constitutes the oracle's reading. The chain's curve represents the babaláwo's hand casting the seeds — verification is a ritual act, not a mechanical check.

<svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
  <defs><style>
    .opele-chain { fill: none; stroke: #5C4A3A; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
    .opele-seed { fill: #A39E98; }
    .opele-divine { fill: none; stroke: #3D3530; stroke-width: 1.5; stroke-linecap: round; }
  </style></defs>
  <path class="opele-chain" d="M 8 24 C 12 20, 16 20, 20 24 C 24 28, 28 28, 32 24 C 36 20, 40 20, 44 24"/>
  <circle class="opele-seed" cx="8" cy="24" r="3"/>
  <circle class="opele-seed" cx="20" cy="24" r="3"/>
  <circle class="opele-seed" cx="32" cy="24" r="3"/>
  <circle class="opele-seed" cx="44" cy="24" r="3"/>
  <path class="opele-divine" d="M 14 18 C 16 16, 18 16, 20 18"/>
  <path class="opele-divine" d="M 26 18 C 28 16, 30 16, 32 18"/>
  <path class="opele-divine" d="M 38 18 C 40 16, 42 16, 44 18"/>
</svg>

Reputation Marker

The Beaded Crown (Adé)

Principles: P16 (Functional Aesthetics), P7 (Constitutional Restraint)

Reputation is the crown — the supreme Yoruba object. The veil hides the king's face (transforming person into office); the birds signify the oba's link with "our mothers" whose àṣẹ underwrites his power. The beads are individually earned; the crown is inherited but must be continuously validated through performance. Reputation is not a number but a regalia.

<svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
  <defs><style>
    .crown-dome { fill: none; stroke: #D4B86A; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
    .crown-veil { fill: none; stroke: #C9A84C; stroke-width: 1.5; stroke-linecap: round; }
    .crown-bead { fill: #E8D5A0; }
    .crown-bird { fill: none; stroke: #A39E98; stroke-width: 1.2; stroke-linecap: round; }
  </style></defs>
  <path class="crown-dome" d="M 12 28 C 12 16, 18 8, 24 8 C 30 8, 36 16, 36 28"/>
  <line class="crown-veil" x1="12" y1="28" x2="12" y2="40"/>
  <line class="crown-veil" x1="36" y1="28" x2="36" y2="40"/>
  <path class="crown-veil" d="M 12 40 C 16 42, 20 42, 24 40 C 28 42, 32 42, 36 40"/>
  <circle class="crown-bead" cx="24" cy="8" r="2"/>
  <circle class="crown-bead" cx="18" cy="14" r="1.5"/>
  <circle class="crown-bead" cx="30" cy="14" r="1.5"/>
  <path class="crown-bird" d="M 20 20 C 18 18, 18 16, 20 16 C 22 16, 22 18, 20 20"/>
  <path class="crown-bird" d="M 28 20 C 30 18, 30 16, 28 16 C 26 16, 26 18, 28 20"/>
</svg>

Presence Indicator

The Sacred Flame (Iná Òrìṣà)

Principles: P9 (Transactional Spirituality), P1 (Relational Self)

Presence is not a green dot but a sacred flame — the eternal fire that connects the household to the ancestors. The flame has three layers (outer, middle, core) representing the three worlds: ayé (earth), ọ̀run (otherworld), and the meeting point. The smoke rises to the ancestral realm. A person is present when their flame burns; absence is the flame extinguished.

<svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
  <defs><style>
    .flame-outer { fill: none; stroke: #C4B49A; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
    .flame-mid { fill: none; stroke: #B83232; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
    .flame-core { fill: #C9A84C; }
    .flame-base { fill: none; stroke: #8B1A1A; stroke-width: 2; stroke-linecap: round; }
    .flame-smoke { fill: none; stroke: #A39E98; stroke-width: 1; stroke-linecap: round; }
  </style></defs>
  <path class="flame-outer" d="M 24 38 C 16 38, 12 30, 14 22 C 16 14, 20 10, 24 6 C 28 10, 32 14, 34 22 C 36 30, 32 38, 24 38"/>
  <path class="flame-mid" d="M 24 34 C 18 34, 16 28, 17 22 C 18 16, 21 14, 24 12 C 27 14, 30 16, 31 22 C 32 28, 30 34, 24 34"/>
  <circle class="flame-core" cx="24" cy="24" r="4"/>
  <path class="flame-base" d="M 14 38 C 14 40, 18 42, 24 42 C 30 42, 34 40, 34 38"/>
  <path class="flame-smoke" d="M 22 6 C 20 4, 20 2, 22 0" opacity="0.5"/>
  <path class="flame-smoke" d="M 26 6 C 28 4, 28 2, 26 0" opacity="0.5"/>
</svg>

Interaction Atoms

Every interaction is a social act with moral weight. Buttons are not mere triggers but offerings; inputs are sacred surfaces where questions are laid for interpretation.

Primary Button

The Sacrifice (Ẹbọ)

Principles: P9 (Transactional Spirituality), P19 (Performed Trust)

A primary button is a sacrifice — the regular payment that keeps the cosmic accounts balanced. The bowl contains the offering; the blood/dot is the life-force exchanged; the smoke rises as the prayer. Clicking is not merely activating but offering — the user gives something of themselves (attention, commitment) to receive blessing (the action's result). Sacrifice is complementary to effort, not a substitute.

<svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
  <defs><style>
    .sacrifice-bowl { fill: none; stroke: #8B1A1A; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
    .sacrifice-offering { fill: none; stroke: #B83232; stroke-width: 2; stroke-linecap: round; }
    .sacrifice-blood { fill: #8B1A1A; }
    .sacrifice-smoke { fill: none; stroke: #A39E98; stroke-width: 1; stroke-linecap: round; }
  </style></defs>
  <ellipse class="sacrifice-bowl" cx="24" cy="32" rx="14" ry="6"/>
  <path class="sacrifice-bowl" d="M 10 32 C 10 24, 14 18, 24 18 C 34 18, 38 24, 38 32"/>
  <ellipse class="sacrifice-offering" cx="24" cy="24" rx="6" ry="3"/>
  <circle class="sacrifice-blood" cx="24" cy="24" r="3"/>
  <path class="sacrifice-smoke" d="M 22 20 C 20 16, 22 12, 24 10"/>
  <path class="sacrifice-smoke" d="M 26 20 C 28 16, 26 12, 24 10"/>
  <path class="sacrifice-offering" d="M 18 28 Q 24 26, 30 28"/>
</svg>

Secondary Button

The Greeting (Ìkíni)

Principles: P13 (Layered Communication), P2 (Programmatic Identity)

A secondary action is a greeting — the obligatory social opening that names the other by title and praise. The raised hand (right) acknowledges; the bowed hand (left) defers. The respect lines show the status gap being bridged. Greeting is not optional; it is the foundation of all subsequent interaction. To skip the greeting is to violate social order.

<svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
  <defs><style>
    .greet-hand { fill: none; stroke: #5C4A3A; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
    .greet-bow { fill: none; stroke: #3D3530; stroke-width: 2; stroke-linecap: round; }
    .greet-respect { fill: none; stroke: #A39E98; stroke-width: 1.2; stroke-linecap: round; }
  </style></defs>
  <path class="greet-hand" d="M 12 28 C 10 24, 12 20, 16 20 C 18 20, 20 22, 20 24"/>
  <path class="greet-hand" d="M 16 20 L 14 16"/>
  <path class="greet-hand" d="M 18 22 L 18 18"/>
  <path class="greet-hand" d="M 20 24 L 22 20"/>
  <path class="greet-bow" d="M 24 24 C 26 22, 28 22, 30 24 C 32 26, 32 28, 30 30"/>
  <path class="greet-bow" d="M 30 24 L 32 20"/>
  <path class="greet-bow" d="M 32 26 L 34 22"/>
  <path class="greet-respect" d="M 8 20 Q 12 18, 16 20"/>
  <path class="greet-respect" d="M 8 24 Q 12 22, 16 24"/>
  <path class="greet-respect" d="M 8 28 Q 12 26, 16 28"/>
</svg>

Icon Button

The Cowrie Shell (Òwò)

Principles: P6 (Associational Economy), P19 (Performed Trust)

The cowrie shell is currency, divination token, and ornament — a small object of immense social weight. An icon button is a cowrie: small, portable, carrying value beyond its size. The slit is the "mouth" that speaks in divination; the spine is the axis of exchange. Clicking a cowrie is not trivial — it is spending social capital.

<svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
  <defs><style>
    .cowrie-shell { fill: none; stroke: #5C4A3A; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
    .cowrie-slit { fill: none; stroke: #3D3530; stroke-width: 1.5; stroke-linecap: round; }
    .cowrie-spine { fill: none; stroke: #A39E98; stroke-width: 1; stroke-linecap: round; }
  </style></defs>
  <ellipse class="cowrie-shell" cx="24" cy="24" rx="14" ry="8"/>
  <path class="cowrie-shell" d="M 10 24 C 10 16, 16 10, 24 10 C 32 10, 38 16, 38 24"/>
  <ellipse class="cowrie-slit" cx="24" cy="24" rx="8" ry="3"/>
  <line class="cowrie-spine" x1="24" y1="16" x2="24" y2="32"/>
  <path class="cowrie-spine" d="M 18 20 C 20 18, 22 18, 24 20"/>
  <path class="cowrie-spine" d="M 18 28 C 20 30, 22 30, 24 28"/>
  <path class="cowrie-spine" d="M 30 20 C 28 18, 26 18, 24 20"/>
  <path class="cowrie-spine" d="M 30 28 C 28 30, 26 30, 24 28"/>
</svg>

Link

The Proverb (Òwe)

Principles: P13 (Layered Communication), P12 (Performative Knowledge)

A proverb is "the horse of speech" — when speech is lost, the proverb is sent to retrieve it. A link is a proverb: it carries meaning indirectly, requiring the initiated to decode its full significance. The horse figure carries the speech; the trailing lines show the proverb's journey from speaker to hearer. Links are not direct connections but mediated journeys through shared knowledge.

<svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
  <defs><style>
    .proverb-horse { fill: none; stroke: #5C4A3A; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
    .proverb-speech { fill: none; stroke: #3D3530; stroke-width: 2; stroke-linecap: round; }
    .proverb-trail { fill: none; stroke: #A39E98; stroke-width: 1; stroke-linecap: round; }
  </style></defs>
  <path class="proverb-horse" d="M 8 28 C 8 24, 10 20, 14 20 C 16 20, 18 22, 18 24"/>
  <path class="proverb-horse" d="M 14 20 L 12 16"/>
  <path class="proverb-horse" d="M 16 22 L 16 18"/>
  <path class="proverb-horse" d="M 18 24 L 20 20"/>
  <path class="proverb-speech" d="M 22 24 C 24 22, 26 22, 28 24 C 30 26, 30 28, 28 30"/>
  <path class="proverb-speech" d="M 28 24 L 30 20"/>
  <path class="proverb-speech" d="M 30 26 L 32 22"/>
  <path class="proverb-trail" d="M 8 32 Q 16 28, 24 32 Q 32 36, 40 32"/>
  <path class="proverb-trail" d="M 12 36 Q 20 32, 28 36 Q 36 40, 44 36"/>
</svg>

Input

The Divination Tray (Ọ̀pọ́n Ifá)

Principles: P11 (Proceduralized Uncertainty), P12 (Performative Knowledge)

An input is a divination tray — the sacred surface where questions are laid and patterns are read. The scattered seeds are the user's query; the marks are the babaláwo's interpretation. The central staff (àrà) connects earth to heaven. Typing is casting; the input's response is the divination reading. Every question requires a ritual surface.

<svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
  <defs><style>
    .div-tray { fill: none; stroke: #5C4A3A; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
    .div-seed { fill: #A39E98; }
    .div-mark { fill: none; stroke: #3D3530; stroke-width: 1.5; stroke-linecap: round; }
    .div-pattern { fill: none; stroke: #A39E98; stroke-width: 1; stroke-linecap: round; }
  </style></defs>
  <ellipse class="div-tray" cx="24" cy="26" rx="18" ry="12"/>
  <ellipse class="div-tray" cx="24" cy="26" rx="14" ry="9"/>
  <circle class="div-seed" cx="18" cy="24" r="2"/>
  <circle class="div-seed" cx="24" cy="28" r="2.5"/>
  <circle class="div-seed" cx="30" cy="24" r="1.8"/>
  <circle class="div-seed" cx="22" cy="22" r="1.5"/>
  <circle class="div-seed" cx="28" cy="28" r="1.5"/>
  <path class="div-mark" d="M 16 26 Q 20 24, 24 26"/>
  <path class="div-mark" d="M 24 26 Q 28 28, 32 26"/>
  <line class="div-tray" x1="24" y1="14" x2="24" y2="8"/>
  <circle class="div-tray" cx="24" cy="6" r="2"/>
  <path class="div-pattern" d="M 10 18 C 14 16, 18 18, 20 22"/>
  <path class="div-pattern" d="M 38 18 C 34 16, 30 18, 28 22"/>
</svg>

Information Atoms

Information is not neutral data but socially situated knowledge. Cards are compounds; dividers are thresholds; badges are titles earned through character and wealth.

Card

The Compound (Agbọ́lé)

Principles: P4 (Corporate Kinship), P14 (Graded Spatial Morality)

A card is a compound — the physical instantiation of the lineage. The outer wall is the compound boundary; the central courtyard is the communal space (kitchen, parlour, schoolroom, courtroom, chapel); the four rooms are the private spaces of lineage members. The door is the threshold between public and private. The compound is never divided; it is the lineage's perpetual address.

<svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
  <defs><style>
    .compound-wall { fill: none; stroke: #3D3530; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
    .compound-court { fill: none; stroke: #5C4A3A; stroke-width: 2; stroke-linecap: round; }
    .compound-room { fill: none; stroke: #A39E98; stroke-width: 1.5; stroke-linecap: round; }
    .compound-door { fill: none; stroke: #A39E98; stroke-width: 1; stroke-linecap: round; }
  </style></defs>
  <rect class="compound-wall" x="6" y="6" width="36" height="36" rx="2"/>
  <rect class="compound-court" x="14" y="14" width="20" height="20" rx="1"/>
  <rect class="compound-room" x="8" y="8" width="10" height="10" rx="1"/>
  <rect class="compound-room" x="30" y="8" width="10" height="10" rx="1"/>
  <rect class="compound-room" x="8" y="30" width="10" height="10" rx="1"/>
  <rect class="compound-room" x="30" y="30" width="10" height="10" rx="1"/>
  <path class="compound-door" d="M 22 34 L 22 38 L 26 38 L 26 34"/>
  <circle class="compound-court" cx="24" cy="24" r="2"/>
</svg>

Divider

The Compound Threshold (Ènubodè)

Principles: P14 (Graded Spatial Morality), P3 (Nested Belonging)

The boundary between bedroom (private) and courtyard (communal) is not a wall but a graduated threshold. A divider mediates access with increasing density toward the center (the gate), then decreasing — privacy as gradient, not barrier. The central gate structure is the threshold itself; the flanking marks are the decorative thresholds that signal the transition.

<svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
  <defs><style>
    .div-threshold { fill: none; stroke: #3D3530; stroke-width: 2.5; stroke-linecap: round; }
    .div-grad { fill: none; stroke: #A39E98; stroke-width: 1.5; stroke-linecap: round; }
    .div-mark { fill: none; stroke: #6B6560; stroke-width: 1; stroke-linecap: round; }
  </style></defs>
  <line class="div-threshold" x1="4" y1="24" x2="44" y2="24"/>
  <line class="div-grad" x1="8" y1="20" x2="8" y2="28"/>
  <line class="div-grad" x1="14" y1="18" x2="14" y2="30"/>
  <line class="div-grad" x1="20" y1="16" x2="20" y2="32"/>
  <path class="div-threshold" d="M 22 16 L 26 16 L 26 32 L 22 32"/>
  <line class="div-threshold" x1="24" y1="16" x2="24" y2="32"/>
  <line class="div-grad" x1="28" y1="16" x2="28" y2="32"/>
  <line class="div-grad" x1="34" y1="18" x2="34" y2="30"/>
  <line class="div-grad" x1="40" y1="20" x2="40" y2="28"/>
  <path class="div-mark" d="M 6 14 Q 12 10, 18 14 Q 24 18, 30 14 Q 36 10, 42 14"/>
  <path class="div-mark" d="M 6 34 Q 12 38, 18 34 Q 24 30, 30 34 Q 36 38, 42 34"/>
</svg>

Badge

The Title (Àgbà)

Principles: P16 (Functional Aesthetics), P7 (Constitutional Restraint)

Titles are earned, not self-declared — purchased with wealth but validated through character. A badge is a title ring: the circular form represents the closed community of title-holders; the staff within is the authority object; the bead at top is the crown of achievement. The title is not decoration but the visible conversion of economic success into public honor.

<svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
  <defs><style>
    .title-ring { fill: none; stroke: #B83232; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
    .title-staff { fill: none; stroke: #8B1A1A; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
    .title-detail { fill: none; stroke: #C9A84C; stroke-width: 1.2; stroke-linecap: round; }
    .title-bead { fill: #C9A84C; }
  </style></defs>
  <circle class="title-ring" cx="24" cy="24" r="18"/>
  <line class="title-staff" x1="24" y1="36" x2="24" y2="12"/>
  <path class="title-staff" d="M 24 12 C 24 9, 20 7, 17 9"/>
  <path class="title-staff" d="M 24 12 C 24 9, 28 7, 31 9"/>
  <path class="title-detail" d="M 8 24 Q 12 20, 16 24 Q 20 28, 24 24"/>
  <path class="title-detail" d="M 24 24 Q 28 20, 32 24 Q 36 28, 40 24"/>
  <path class="title-detail" d="M 24 42 L 22 44 L 24 46 L 26 44 Z"/>
  <circle class="title-bead" cx="24" cy="8" r="2"/>
</svg>

Tag

The Aso Ebi (Family Cloth)

Principles: P4 (Corporate Kinship), P3 (Nested Belonging)

Aso ebi is the uniform cloth worn by the whole family at celebrations — solidarity has a dress code. A tag is a fragment of this cloth: the weave pattern identifies the lineage; the stripes are the generational layers; the knots are the binding points of kinship. Wearing the tag is wearing the family — it is not a label but a membership garment.

<svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
  <defs><style>
    .cloth-body { fill: none; stroke: #5C4A3A; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
    .cloth-stripe { fill: none; stroke: #A39E98; stroke-width: 1.5; stroke-linecap: round; }
    .cloth-weave { fill: none; stroke: #3D3530; stroke-width: 1; stroke-linecap: round; }
    .cloth-knot { fill: #C9A84C; }
  </style></defs>
  <rect class="cloth-body" x="8" y="8" width="32" height="32" rx="2"/>
  <line class="cloth-stripe" x1="8" y1="16" x2="40" y2="16"/>
  <line class="cloth-stripe" x1="8" y1="24" x2="40" y2="24"/>
  <line class="cloth-stripe" x1="8" y1="32" x2="40" y2="32"/>
  <line class="cloth-weave" x1="16" y1="8" x2="16" y2="40"/>
  <line class="cloth-weave" x1="24" y1="8" x2="24" y2="40"/>
  <line class="cloth-weave" x1="32" y1="8" x2="32" y2="40"/>
  <circle class="cloth-knot" cx="16" cy="16" r="1.5"/>
  <circle class="cloth-knot" cx="24" cy="24" r="1.5"/>
  <circle class="cloth-knot" cx="32" cy="32" r="1.5"/>
</svg>

Chip

The Palm Wine Calabash (Àgọ Ògì)

Principles: P6 (Associational Economy), P17 (Relational Materiality)

The palm wine calabash is rounded, containing, social — a vessel of shared substance. A chip is a small calabash: it contains a portion of social substance ready to be shared. The wine level indicates fullness; the neck is the pouring point. The calabash is not merely a container but a social object — drinking from the same calabash creates kinship.

<svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
  <defs><style>
    .calabash-body { fill: none; stroke: #5C4A3A; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
    .calabash-neck { fill: none; stroke: #6B6560; stroke-width: 2; stroke-linecap: round; }
    .calabash-detail { fill: none; stroke: #C4B49A; stroke-width: 1.2; stroke-linecap: round; }
    .calabash-wine { fill: none; stroke: #A39E98; stroke-width: 1.5; stroke-linecap: round; }
  </style></defs>
  <ellipse class="calabash-body" cx="24" cy="28" rx="14" ry="12"/>
  <path class="calabash-neck" d="M 18 18 C 18 14, 20 10, 24 10 C 28 10, 30 14, 30 18"/>
  <ellipse class="calabash-neck" cx="24" cy="10" rx="6" ry="2"/>
  <path class="calabash-wine" d="M 12 28 Q 18 26, 24 28 Q 30 30, 36 28"/>
  <path class="calabash-wine" d="M 14 32 Q 18 30, 24 32 Q 30 34, 34 32"/>
  <circle class="calabash-detail" cx="24" cy="24" r="1.5"/>
</svg>

Social Atoms

Social interaction is governed by graduated accountability, performed trust, and community editorial. Reactions are offerings; mentions are greetings; shares are alliance-building.

Reaction Mechanism

The Offering Bowl (Àgọ Ẹbọ)

Principles: P9 (Transactional Spirituality), P19 (Performed Trust)

A reaction is not a feeling but an offering — the small sacrifice made in response to another's presence. The bowl contains the gift; the smoke rises as acknowledgment; the extended hand shows the offering being made. Reactions are graded by substance: a nod, a gift, a sacrifice. Each level of reaction carries different social weight and obligation.

<svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
  <defs><style>
    .react-bowl { fill: none; stroke: #5C4A3A; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
    .react-offering { fill: none; stroke: #A39E98; stroke-width: 2; stroke-linecap: round; }
    .react-gift { fill: #C9A84C; }
    .react-smoke { fill: none; stroke: #A39E98; stroke-width: 1; stroke-linecap: round; }
  </style></defs>
  <path class="react-bowl" d="M 16 20 C 14 24, 14 32, 18 36 C 20 38, 28 38, 30 36 C 34 32, 34 24, 32 20"/>
  <ellipse class="react-bowl" cx="24" cy="20" rx="8" ry="3"/>
  <ellipse class="react-offering" cx="24" cy="26" rx="6" ry="2"/>
  <circle class="react-gift" cx="24" cy="24" r="3"/>
  <path class="react-smoke" d="M 32 28 C 36 26, 38 24, 40 22"/>
  <path class="react-smoke" d="M 38 20 L 42 22 L 40 26"/>
  <path class="react-offering" d="M 16 30 Q 24 28, 32 30"/>
</svg>

Comment Marker

The Gelede Satire (Èfè)

Principles: P10 (Community Editorial), P8 (Graduated Accountability)

A comment is Gelede satire — the licensed naming of offences in song and mime before an audience that knows exactly who is meant. The mask is the speaker; the song lines are the comment's content; the audience dots are the community witnessing the editorial. Public laughter does the work that courts cannot. Comments are not opinions but social corrections.

<svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
  <defs><style>
    .satire-mask { fill: none; stroke: #5C4A3A; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
    .satire-mouth { fill: none; stroke: #3D3530; stroke-width: 2; stroke-linecap: round; }
    .satire-song { fill: none; stroke: #A39E98; stroke-width: 1.2; stroke-linecap: round; }
    .satire-audience { fill: none; stroke: #A39E98; stroke-width: 1; stroke-linecap: round; }
  </style></defs>
  <ellipse class="satire-mask" cx="24" cy="20" rx="10" ry="8"/>
  <ellipse class="satire-mask" cx="20" cy="18" rx="2" ry="1.5"/>
  <ellipse class="satire-mask" cx="28" cy="18" rx="2" ry="1.5"/>
  <path class="satire-mouth" d="M 20 24 C 22 26, 26 26, 28 24"/>
  <path class="satire-song" d="M 30 22 Q 36 18, 42 22"/>
  <path class="satire-song" d="M 32 26 Q 38 22, 44 26"/>
  <path class="satire-song" d="M 30 30 Q 36 26, 42 30"/>
  <circle class="satire-audience" cx="8" cy="20" r="1.5"/>
  <circle class="satire-audience" cx="6" cy="24" r="1.5"/>
  <circle class="satire-audience" cx="8" cy="28" r="1.5"/>
</svg>

Mention

The Greeting Name (Orúkọ Ìkíni)

Principles: P13 (Layered Communication), P2 (Programmatic Identity)

To mention is to greet — to name the other by title and praise, acknowledging destiny, lineage, and deeds in one breath. The prostrate figure is the mentioner; the named figure is the one greeted; the respect lines are the praise-names being spoken. "To greet well is to greet specifically, with the addressee's praise-names." A mention without praise is not a greeting.

<svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
  <defs><style>
    .mention-prostrate { fill: none; stroke: #5C4A3A; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
    .mention-name { fill: none; stroke: #3D3530; stroke-width: 2; stroke-linecap: round; }
    .mention-respect { fill: none; stroke: #A39E98; stroke-width: 1.2; stroke-linecap: round; }
  </style></defs>
  <path class="mention-prostrate" d="M 12 28 C 10 24, 12 20, 16 20 C 18 20, 20 22, 20 24"/>
  <path class="mention-prostrate" d="M 16 20 L 14 16"/>
  <path class="mention-prostrate" d="M 18 22 L 18 18"/>
  <path class="mention-prostrate" d="M 20 24 L 22 20"/>
  <path class="mention-name" d="M 24 24 C 26 22, 28 22, 30 24 C 32 26, 32 28, 30 30"/>
  <path class="mention-name" d="M 30 24 L 32 20"/>
  <path class="mention-name" d="M 32 26 L 34 22"/>
  <path class="mention-respect" d="M 8 20 Q 12 18, 16 20"/>
  <path class="mention-respect" d="M 8 24 Q 12 22, 16 24"/>
  <path class="mention-respect" d="M 8 28 Q 12 26, 16 28"/>
  <circle class="mention-name" cx="36" cy="24" r="2"/>
</svg>

Hashtag

The Adire Pattern (Àdìrẹ)

Principles: P16 (Functional Aesthetics), P13 (Layered Communication)

Adire textiles carry named patterns that encode proverbs, events, and boasts — "clothes depict personality and social status." A hashtag is an adire pattern: the grid is the resist-dye framework; the stitches are the proverb's content; the dots are the binding points of meaning. Each pattern is a compressed narrative that the initiated can read. Hashtags are not labels but wearable proverbs.

<svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
  <defs><style>
    .adire-grid { fill: none; stroke: #5C4A3A; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
    .adire-stitch { fill: none; stroke: #3D3530; stroke-width: 1.5; stroke-linecap: round; }
    .adire-dot { fill: #A39E98; }
    .adire-wax { fill: none; stroke: #C9A84C; stroke-width: 1; stroke-linecap: round; }
  </style></defs>
  <line class="adire-grid" x1="16" y1="8" x2="16" y2="40"/>
  <line class="adire-grid" x1="32" y1="8" x2="32" y2="40"/>
  <line class="adire-grid" x1="8" y1="16" x2="40" y2="16"/>
  <line class="adire-grid" x1="8" y1="32" x2="40" y2="32"/>
  <path class="adire-stitch" d="M 12 12 L 14 14 L 12 16 L 14 18"/>
  <path class="adire-stitch" d="M 28 12 L 30 14 L 28 16 L 30 18"/>
  <path class="adire-stitch" d="M 12 28 L 14 30 L 12 32 L 14 34"/>
  <path class="adire-stitch" d="M 28 28 L 30 30 L 28 32 L 30 34"/>
  <circle class="adire-dot" cx="24" cy="24" r="2"/>
  <circle class="adire-dot" cx="16" cy="16" r="1.5"/>
  <circle class="adire-dot" cx="32" cy="16" r="1.5"/>
  <circle class="adire-dot" cx="16" cy="32" r="1.5"/>
  <circle class="adire-dot" cx="32" cy="32" r="1.5"/>
  <path class="adire-wax" d="M 20 8 C 22 8, 22 10, 20 10 C 18 10, 18 12, 20 12"/>
  <path class="adire-wax" d="M 20 40 C 22 40, 22 38, 20 38 C 18 38, 18 36, 20 36"/>
</svg>

Share Mechanism

The Marriage Alliance (Ìdána)

Principles: P5 (Alliance as Governance), P19 (Performed Trust)

Sharing is marriage — a bond between two families, not two individuals. The two hands (lineages) meet in the center; the gift exchanged is the shared content; the bond lines show the mutual obligation created. The groom's party prostrates before the bride's family; the union converts two lineages into àná (in-laws). Sharing is not distribution but alliance-building.

<svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
  <defs><style>
    .share-left { fill: none; stroke: #5C4A3A; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
    .share-right { fill: none; stroke: #3D3530; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
    .share-bond { fill: none; stroke: #A39E98; stroke-width: 2; stroke-linecap: round; }
    .share-gift { fill: #C9A84C; }
  </style></defs>
  <path class="share-left" d="M 8 24 C 8 20, 12 16, 16 18 C 18 19, 20 22, 20 24"/>
  <path class="share-left" d="M 16 18 L 14 14"/>
  <path class="share-left" d="M 18 20 L 18 16"/>
  <path class="share-left" d="M 20 22 L 22 18"/>
  <path class="share-right" d="M 40 24 C 40 20, 36 16, 32 18 C 30 19, 28 22, 28 24"/>
  <path class="share-right" d="M 32 18 L 34 14"/>
  <path class="share-right" d="M 30 20 L 30 16"/>
  <path class="share-right" d="M 28 22 L 26 18"/>
  <circle class="share-gift" cx="24" cy="24" r="4"/>
  <path class="share-bond" d="M 20 24 Q 24 20, 28 24"/>
  <path class="share-bond" d="M 20 24 Q 24 28, 28 24"/>
</svg>

Feedback Atoms

Feedback follows graduated accountability: private proverb first, then family council, then market talk, then Gelede satire, then cult sanctions. Each level gives the offender a cheaper exit than the next.

Success

The Ife Head (Ori Ife)

Principles: P16 (Functional Aesthetics), P2 (Programmatic Identity)

Success is the Ife head — the posthumous memorial effigy where "death turns an individual into a beautiful sculpture." The head is rendered at one-quarter body height (against the natural eighth) because ori is the person's capital. The glow lines are the ancestral aura; the crown beads are the earned honors. Success is not completion but transformation into enduring beauty.

<svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
  <defs><style>
    .ife-head { fill: none; stroke: #6B8F5E; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
    .ife-face { fill: none; stroke: #4A6741; stroke-width: 1.5; stroke-linecap: round; }
    .ife-glow { fill: none; stroke: #C9A84C; stroke-width: 1; stroke-linecap: round; }
    .ife-crown { fill: #C9A84C; }
  </style></defs>
  <ellipse class="ife-head" cx="24" cy="22" rx="12" ry="14"/>
  <ellipse class="ife-face" cx="20" cy="20" rx="2" ry="1.5"/>
  <ellipse class="ife-face" cx="28" cy="20" rx="2" ry="1.5"/>
  <path class="ife-face" d="M 20 28 C 22 30, 26 30, 28 28"/>
  <path class="ife-head" d="M 12 16 C 14 10, 20 8, 24 8 C 28 8, 34 10, 36 16"/>
  <circle class="ife-crown" cx="24" cy="8" r="2"/>
  <circle class="ife-crown" cx="18" cy="10" r="1.5"/>
  <circle class="ife-crown" cx="30" cy="10" r="1.5"/>
  <path class="ife-glow" d="M 8 12 C 6 16, 6 20, 8 24"/>
  <path class="ife-glow" d="M 40 12 C 42 16, 42 20, 40 24"/>
  <path class="ife-glow" d="M 12 36 C 16 40, 20 42, 24 42 C 28 42, 32 40, 36 36"/>
</svg>

Warning

The Gelede Warning (Ìtìjú)

Principles: P10 (Community Editorial), P8 (Graduated Accountability)

A warning is shame (ìtìjú) — the internalized anticipation of the community's verdict. The Gelede mask names offenders in song; the warning is the mask before the song is sung. The tear lines are the shame dripping; the downward extension is the community's gaze. "The dread of becoming a proverb's subject or a satire's target" is the warning's power. Heed the proverb, and the song is never sung.

<svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
  <defs><style>
    .warn-mask { fill: none; stroke: #C9A84C; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
    .warn-eye { fill: none; stroke: #3D3530; stroke-width: 2; stroke-linecap: round; }
    .warn-shame { fill: none; stroke: #C9A84C; stroke-width: 1.5; stroke-linecap: round; }
    .warn-tear { fill: none; stroke: #A39E98; stroke-width: 1; stroke-linecap: round; }
  </style></defs>
  <ellipse class="warn-mask" cx="24" cy="20" rx="12" ry="10"/>
  <ellipse class="warn-eye" cx="18" cy="18" rx="3" ry="2"/>
  <ellipse class="warn-eye" cx="30" cy="18" rx="3" ry="2"/>
  <path class="warn-mask" d="M 20 26 C 22 24, 26 24, 28 26"/>
  <path class="warn-shame" d="M 12 20 C 10 24, 12 28, 16 30"/>
  <path class="warn-shame" d="M 36 20 C 38 24, 36 28, 32 30"/>
  <path class="warn-tear" d="M 16 22 C 14 26, 14 30, 16 34"/>
  <path class="warn-tear" d="M 32 22 C 34 26, 34 30, 32 34"/>
  <line class="warn-mask" x1="24" y1="30" x2="24" y2="40"/>
  <ellipse class="warn-shame" cx="24" cy="42" rx="4" ry="2"/>
</svg>

Error

The Parrot's Eggs (Ẹyin Odìdẹ)

Principles: P7 (Constitutional Restraint), P8 (Graduated Accountability)

The ultimate error is the parrot's eggs sent to the king — "the gods reject you, the people reject you, the earth rejects you" — upon which the king was bound to take poison. The cracked eggs are the broken covenant; the blood dots are the consequence; the rejection arcs are the community's withdrawal of consent. An error is not a bug but a constitutional crisis — the system's final sanction before irreversible action.

<svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
  <defs><style>
    .error-egg { fill: none; stroke: #8B1A1A; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
    .error-crack { fill: none; stroke: #3D3530; stroke-width: 2; stroke-linecap: round; }
    .error-reject { fill: none; stroke: #B83232; stroke-width: 1.5; stroke-linecap: round; }
    .error-blood { fill: #8B1A1A; }
  </style></defs>
  <ellipse class="error-egg" cx="16" cy="24" rx="6" ry="8"/>
  <ellipse class="error-egg" cx="32" cy="24" rx="6" ry="8"/>
  <path class="error-crack" d="M 14 20 L 16 24 L 14 28"/>
  <path class="error-crack" d="M 18 20 L 16 24 L 18 28"/>
  <path class="error-crack" d="M 30 20 L 32 24 L 30 28"/>
  <path class="error-crack" d="M 34 20 L 32 24 L 34 28"/>
  <path class="error-reject" d="M 8 12 C 12 8, 16 8, 20 12"/>
  <path class="error-reject" d="M 28 12 C 32 8, 36 8, 40 12"/>
  <path class="error-reject" d="M 8 36 C 12 40, 16 40, 20 36"/>
  <path class="error-reject" d="M 28 36 C 32 40, 36 40, 40 36"/>
  <circle class="error-blood" cx="16" cy="24" r="2"/>
  <circle class="error-blood" cx="32" cy="24" r="2"/>
</svg>

Confirmation

The Ifa Ratification (Ìmúlẹ̀)

Principles: P11 (Proceduralized Uncertainty), P19 (Performed Trust)

Confirmation is the oath (ìmúlẹ̀) — binding speech to consequence, sworn by the earth, by iron (Ogun's substance), or on the palace sword-platform. The two hands meet in the sacred bowl; the iron dot is the supernatural enforcer; the earth line is the witness. Perjury is a supernatural hazard — Sango's lightning and Ogun's iron are the traditional enforcers. Confirmation is not agreement but sacred commitment.

<svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
  <defs><style>
    .confirm-oath { fill: none; stroke: #5C4A3A; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
    .confirm-hand { fill: none; stroke: #3D3530; stroke-width: 2; stroke-linecap: round; }
    .confirm-earth { fill: none; stroke: #A39E98; stroke-width: 1.5; stroke-linecap: round; }
    .confirm-iron { fill: #C9A84C; }
  </style></defs>
  <ellipse class="confirm-oath" cx="24" cy="30" rx="14" ry="8"/>
  <path class="confirm-oath" d="M 10 30 C 10 22, 14 16, 24 16 C 34 16, 38 22, 38 30"/>
  <path class="confirm-hand" d="M 16 24 C 14 22, 14 18, 16 16 C 18 14, 22 14, 24 16"/>
  <path class="confirm-hand" d="M 32 24 C 34 22, 34 18, 32 16 C 30 14, 26 14, 24 16"/>
  <path class="confirm-hand" d="M 16 24 L 14 20"/>
  <path class="confirm-hand" d="M 32 24 L 34 20"/>
  <line class="confirm-earth" x1="8" y1="38" x2="40" y2="38"/>
  <circle class="confirm-iron" cx="24" cy="24" r="3"/>
  <path class="confirm-earth" d="M 12 34 C 16 36, 20 36, 24 34 C 28 36, 32 36, 36 34"/>
</svg>

Attention Request

The Drum Call (Ìpílẹ̀ Gángan)

Principles: P13 (Layered Communication), P12 (Performative Knowledge)

An attention request is a drum call — the dùndún announcing a visitor, a meeting, or an emergency. The sound waves emanate from the drum's mouth; the pulse dots encode the rhythm's urgency. The drum speaks in tones that carry identity: "a drummer 'says' only what the initiated audience can already half-hear." Attention is not demanded but invited through recognized rhythmic signatures.

<svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
  <defs><style>
    .attn-drum { fill: none; stroke: #8B1A1A; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
    .attn-sound { fill: none; stroke: #B83232; stroke-width: 1.5; stroke-linecap: round; }
    .attn-pulse { fill: none; stroke: #3D3530; stroke-width: 1; stroke-linecap: round; }
    .attn-core { fill: #C9A84C; }
  </style></defs>
  <ellipse class="attn-drum" cx="24" cy="30" rx="10" ry="6"/>
  <path class="attn-drum" d="M 14 30 C 14 22, 18 16, 24 16 C 30 16, 34 22, 34 30"/>
  <ellipse class="attn-drum" cx="24" cy="16" rx="10" ry="4"/>
  <path class="attn-sound" d="M 36 20 C 40 20, 42 24, 42 28"/>
  <path class="attn-sound" d="M 38 24 C 42 24, 44 26, 44 28"/>
  <path class="attn-sound" d="M 36 32 C 40 32, 42 28, 42 24"/>
  <circle class="attn-pulse" cx="46" cy="22" r="1"/>
  <circle class="attn-pulse" cx="46" cy="26" r="1.5"/>
  <circle class="attn-pulse" cx="46" cy="30" r="1"/>
  <circle class="attn-core" cx="24" cy="24" r="2"/>
</svg>

Media Atoms

Media containers are not passive frames but sacred vessels. Images are memorial effigies; videos are masquerade performances; audio is drum speech.

Image Container

The Memorial Effigy (Ìtàn)

Principles: P16 (Functional Aesthetics), P17 (Relational Materiality)

An image container is a memorial effigy — "it is death that turns an individual into a beautiful sculpture." The Ife heads are posthumous, rendered at one-quarter body height because ori is the person's capital. The frame is the shrine; the head within is the preserved ancestor; the aura lines are the spiritual glow. Images are not snapshots but eternal preservations of the ori.

<svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
  <defs><style>
    .image-frame { fill: none; stroke: #3D3530; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
    .image-head { fill: none; stroke: #A39E98; stroke-width: 2; stroke-linecap: round; }
    .image-detail { fill: none; stroke: #5C4A3A; stroke-width: 1.5; stroke-linecap: round; }
    .image-aura { fill: none; stroke: #C9A84C; stroke-width: 1; stroke-linecap: round; }
  </style></defs>
  <rect class="image-frame" x="6" y="6" width="36" height="36" rx="2"/>
  <ellipse class="image-head" cx="24" cy="20" rx="8" ry="10"/>
  <ellipse class="image-detail" cx="20" cy="18" rx="2" ry="1.5"/>
  <ellipse class="image-detail" cx="28" cy="18" rx="2" ry="1.5"/>
  <path class="image-detail" d="M 20 26 C 22 28, 26 28, 28 26"/>
  <path class="image-head" d="M 16 14 C 18 10, 22 8, 24 8 C 26 8, 30 10, 32 14"/>
  <circle class="image-detail" cx="24" cy="8" r="1.5"/>
  <path class="image-aura" d="M 8 8 C 6 12, 6 16, 8 20"/>
  <path class="image-aura" d="M 40 8 C 42 12, 42 16, 40 20"/>
  <path class="image-aura" d="M 8 40 C 12 44, 16 44, 20 40"/>
  <path class="image-aura" d="M 40 40 C 36 44, 32 44, 28 40"/>
</svg>

Video Container

The Masquerade Performance (Egúngún)

Principles: P12 (Performative Knowledge), P10 (Community Editorial)

A video is a masquerade — the Egúngún returns to bless the dutiful and expose the delinquent. The layered cloth is the costume that conceals the performer; the frame is the community boundary; the play triangle is the ancestral spirit moving through the cloth. Masquerades publicly chastise persons who have violated lineage norms — video is community editorial in motion.

<svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
  <defs><style>
    .masq-frame { fill: none; stroke: #3D3530; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
    .masq-cloth { fill: none; stroke: #5C4A3A; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
    .masq-layer { fill: none; stroke: #A39E98; stroke-width: 1.5; stroke-linecap: round; }
    .masq-play { fill: #C9A84C; }
  </style></defs>
  <rect class="masq-frame" x="6" y="6" width="36" height="36" rx="2"/>
  <path class="masq-cloth" d="M 12 12 C 10 18, 10 24, 12 30 C 14 36, 20 38, 24 38 C 28 38, 34 36, 36 30 C 38 24, 38 18, 36 12"/>
  <path class="masq-layer" d="M 14 14 C 12 18, 12 24, 14 28 C 16 32, 20 34, 24 34 C 28 34, 32 32, 34 28 C 36 24, 36 18, 34 14"/>
  <path class="masq-layer" d="M 16 16 C 14 20, 14 24, 16 28 C 18 30, 21 32, 24 32 C 27 32, 30 30, 32 28 C 34 24, 34 20, 32 16"/>
  <ellipse class="masq-cloth" cx="24" cy="20" rx="4" ry="3"/>
  <path class="masq-play" d="M 22 18 L 28 22 L 22 26 Z"/>
</svg>

Audio Container

The Talking Drum Speech (Òrọ̀ Gángan)

Principles: P13 (Layered Communication), P12 (Performative Knowledge)

Audio is drum speech — the dùndún reproducing the tones and contours of Yoruba speech. "Drum speech is not code but register: it trades on shared knowledge of oríkì and proverb, so that a drummer 'says' only what the initiated audience can already half-hear." The sound waves are the tonal melody; the tone lines are the speech contours; the drum is the voice made visible.

<svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
  <defs><style>
    .audio-drum { fill: none; stroke: #5C4A3A; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
    .audio-sound { fill: none; stroke: #A39E98; stroke-width: 1.5; stroke-linecap: round; }
    .audio-tone { fill: none; stroke: #3D3530; stroke-width: 1; stroke-linecap: round; }
    .audio-core { fill: #C9A84C; }
  </style></defs>
  <ellipse class="audio-drum" cx="24" cy="16" rx="8" ry="3"/>
  <path class="audio-drum" d="M 16 16 C 16 24, 18 30, 24 34 C 30 30, 32 24, 32 16"/>
  <ellipse class="audio-drum" cx="24" cy="34" rx="8" ry="3"/>
  <path class="audio-sound" d="M 34 14 C 38 14, 40 16, 40 20"/>
  <path class="audio-sound" d="M 36 18 C 40 18, 42 20, 42 24"/>
  <path class="audio-sound" d="M 34 22 C 38 22, 40 24, 40 28"/>
  <path class="audio-tone" d="M 38 12 C 42 12, 44 14, 44 18"/>
  <path class="audio-tone" d="M 38 26 C 42 26, 44 24, 44 20"/>
  <circle class="audio-core" cx="24" cy="24" r="2"/>
</svg>

Attachment Marker

The Gift Bundle (Ìpònrán)

Principles: P17 (Relational Materiality), P19 (Performed Trust)

An attachment is a gift bundle — objects wrapped and bound for exchange. The ropes hold the bundle together; the knot is the relationship point where giver and receiver meet; the gift dot is the substance within. "Gifts create obligations that the receiver's oríkì-singers will remember." Attachments are not files but social obligations wrapped in material form.

<svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
  <defs><style>
    .attach-wrap { fill: none; stroke: #5C4A3A; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
    .attach-rope { fill: none; stroke: #3D3530; stroke-width: 2; stroke-linecap: round; }
    .attach-knot { fill: none; stroke: #A39E98; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
    .attach-gift { fill: #C9A84C; }
  </style></defs>
  <rect class="attach-wrap" x="12" y="12" width="24" height="24" rx="2"/>
  <path class="attach-rope" d="M 8 16 C 12 14, 16 14, 20 16 C 24 18, 28 18, 32 16"/>
  <path class="attach-rope" d="M 8 32 C 12 34, 16 34, 20 32 C 24 30, 28 30, 32 32"/>
  <path class="attach-rope" d="M 16 10 C 14 14, 14 18, 16 22 C 18 26, 18 30, 16 34"/>
  <path class="attach-rope" d="M 32 10 C 34 14, 34 18, 32 22 C 30 26, 30 30, 32 34"/>
  <path class="attach-knot" d="M 20 22 C 22 20, 24 20, 26 22 C 28 24, 26 26, 24 26 C 22 26, 20 24, 20 22"/>
  <circle class="attach-gift" cx="24" cy="24" r="2"/>
</svg>

Utility Atoms

Utility atoms manage time, progress, and state through culturally grounded metaphors. Time is appointed, not abstract; progress is a ladder of ceremonies; loading is a drum summoning the community.

Timestamp

The Four-Day Week (Ọ̀ṣẹ̀)

Principles: P15 (Appointed Time), P11 (Proceduralized Uncertainty)

Time is not abstract but appointed — the four-day week (Ọjọ́ Ogun, Ọjọ́ Jakuta, Ọjọ́ Ọṣẹ̀, Ọjọ́ Awo) structures all activity. Each day has character and appropriate activities. The active day is filled; others await their turn in the eternal rotation. The crescent is the moon phase showing where in the cycle. Historical time is personalized: events are remembered as the deeds of ancestors, not as "the eighteenth century."

<svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
  <defs><style>
    .time-cycle { fill: none; stroke: #A39E98; stroke-width: 1.5; stroke-linecap: round; }
    .time-day { fill: none; stroke: #5C4A3A; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
    .time-active { fill: #A39E98; }
    .time-divine { fill: none; stroke: #C9A84C; stroke-width: 1.5; stroke-linecap: round; }
  </style></defs>
  <circle class="time-cycle" cx="24" cy="24" r="18"/>
  <path class="time-day" d="M 24 8 L 24 12"/>
  <circle class="time-active" cx="24" cy="6" r="2"/>
  <path class="time-day" d="M 40 24 L 36 24"/>
  <circle class="time-cycle" cx="42" cy="24" r="1.5"/>
  <path class="time-day" d="M 24 40 L 24 36"/>
  <circle class="time-cycle" cx="24" cy="42" r="1.5"/>
  <path class="time-day" d="M 8 24 L 12 24"/>
  <circle class="time-cycle" cx="6" cy="24" r="1.5"/>
  <path class="time-divine" d="M 24 14 C 28 14, 30 18, 30 24 C 30 30, 28 34, 24 34 C 26 30, 26 26, 26 24 C 26 22, 26 18, 24 14"/>
  <circle class="time-active" cx="24" cy="24" r="3"/>
</svg>

Progress Indicator

The Age-Grade Ladder (Rẹ̀gbẹ̀rẹ̀gbẹ̀)

Principles: P3 (Nested Belonging), P6 (Associational Economy)

Progress is not a bar but a ladder of ceremonies. Each rung is a threshold (outing ceremony) marking transition between life stages. Completed grades are marked; the current position shows the threshold being crossed. The age-grade organizes civic participation from youth to eldership — progress is social maturation, not task completion. The ladder's verticality represents the generational ascent.

<svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
  <defs><style>
    .prog-ladder { fill: none; stroke: #3D3530; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
    .prog-rung { fill: none; stroke: #5C4A3A; stroke-width: 2; stroke-linecap: round; }
    .prog-mark { fill: #A39E98; }
    .prog-detail { fill: none; stroke: #C9A84C; stroke-width: 1; stroke-linecap: round; }
  </style></defs>
  <line class="prog-ladder" x1="16" y1="8" x2="16" y2="44"/>
  <line class="prog-ladder" x1="32" y1="8" x2="32" y2="44"/>
  <line class="prog-rung" x1="16" y1="12" x2="32" y2="12"/>
  <line class="prog-rung" x1="16" y1="20" x2="32" y2="20"/>
  <line class="prog-rung" x1="16" y1="28" x2="32" y2="28"/>
  <line class="prog-rung" x1="16" y1="36" x2="32" y2="36"/>
  <circle class="prog-mark" cx="24" cy="12" r="2.5"/>
  <circle class="prog-mark" cx="24" cy="20" r="2.5"/>
  <circle class="prog-mark" cx="24" cy="28" r="2.5"/>
  <path class="prog-detail" d="M 20 34 L 24 38 L 28 34"/>
  <circle class="prog-detail" cx="24" cy="36" r="1.5"/>
</svg>

Loading Indicator

The Drum Summons (Ìpílẹ̀ Ìlú)

Principles: P13 (Layered Communication), P12 (Performative Knowledge)

Loading is the drum summoning the community to wait and gather. The slit drum (ekwe) announces emergencies and calls assemblies through rhythmic signatures. The sound waves emanate from the drum's slit; the pulse dots encode the rhythm pattern. The beater on the left is the caller; the drum is the community's voice. Loading is not mere waiting but being called to assembly.

<svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
  <defs><style>
    .load-drum { fill: none; stroke: #3D3530; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
    .load-sound { fill: none; stroke: #5C4A3A; stroke-width: 1.5; stroke-linecap: round; }
    .load-pulse { fill: none; stroke: #A39E98; stroke-width: 1; stroke-linecap: round; }
    .load-core { fill: #C9A84C; }
  </style></defs>
  <path class="load-drum" d="M 16 12 C 12 16, 12 20, 16 24 C 20 28, 20 32, 16 36"/>
  <path class="load-drum" d="M 32 12 C 36 16, 36 20, 32 24 C 28 28, 28 32, 32 36"/>
  <line class="load-drum" x1="20" y1="24" x2="28" y2="24"/>
  <path class="load-sound" d="M 36 16 C 40 16, 42 20, 42 24"/>
  <path class="load-sound" d="M 36 24 C 40 24, 42 24, 44 24"/>
  <path class="load-sound" d="M 36 32 C 40 32, 42 28, 42 24"/>
  <circle class="load-pulse" cx="46" cy="20" r="1"/>
  <circle class="load-pulse" cx="46" cy="24" r="1.5"/>
  <circle class="load-pulse" cx="46" cy="28" r="1"/>
  <line class="load-drum" x1="8" y1="24" x2="14" y2="24"/>
  <circle class="load-core" cx="8" cy="24" r="2"/>
</svg>

Empty State

The Unmarked Stranger (Àlejò)

Principles: P20 (Marked Inclusion), P3 (Nested Belonging)

An empty state is the unmarked stranger — someone whose oríkì is unknown, whose lineage is unclaimed, whose face carries no identifying marks. The figure is faceless because it has no social identity; the surrounding marks are the community's boundary that excludes. "To be without known oríkì is, socially, to be without ancestry — near to being nobody." The empty state invites the user to become somebody through participation.

<svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
  <defs><style>
    .empty-mark { fill: none; stroke: #A39E98; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
    .empty-figure { fill: none; stroke: #6B6560; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
    .empty-stranger { fill: none; stroke: #A39E98; stroke-width: 1.2; stroke-linecap: round; }
  </style></defs>
  <circle class="empty-figure" cx="24" cy="16" r="6"/>
  <path class="empty-figure" d="M 16 28 C 16 24, 18 22, 24 22 C 30 22, 32 24, 32 28"/>
  <path class="empty-figure" d="M 16 28 L 14 40"/>
  <path class="empty-figure" d="M 32 28 L 34 40"/>
  <path class="empty-mark" d="M 18 14 C 20 12, 22 12, 24 14"/>
  <path class="empty-mark" d="M 24 14 C 26 12, 28 12, 30 14"/>
  <path class="empty-stranger" d="M 8 12 C 10 10, 12 10, 14 12"/>
  <path class="empty-stranger" d="M 34 12 C 36 10, 38 10, 40 12"/>
  <path class="empty-stranger" d="M 8 36 C 10 38, 12 38, 14 36"/>
  <path class="empty-stranger" d="M 34 36 C 36 38, 38 38, 40 36"/>
  <circle class="empty-stranger" cx="8" cy="24" r="1.5"/>
  <circle class="empty-stranger" cx="40" cy="24" r="1.5"/>
</svg>

Notification Indicator

The Drum Pulse (Ìpílẹ̀ Kánákò)

Principles: P13 (Layered Communication), P12 (Performative Knowledge)

A notification is a single drum pulse — an urgent beat that demands attention. The expanding rings are the sound traveling through the community; the wave lines are the rhythmic signature that identifies the caller; the pulse dots are the encoded message. The drum speaks to those who know how to listen: "a drummer 'says' only what the initiated audience can already half-hear." Notifications are not numbers but sonic urgencies.

<svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
  <defs><style>
    .notif-core { fill: #8B1A1A; }
    .notif-ring { fill: none; stroke: #B83232; stroke-width: 2; stroke-linecap: round; }
    .notif-wave { fill: none; stroke: #C9A84C; stroke-width: 1.5; stroke-linecap: round; }
    .notif-pulse { fill: none; stroke: #3D3530; stroke-width: 1; stroke-linecap: round; }
  </style></defs>
  <circle class="notif-core" cx="24" cy="24" r="6"/>
  <circle class="notif-ring" cx="24" cy="24" r="12"/>
  <circle class="notif-ring" cx="24" cy="24" r="18" opacity="0.6"/>
  <path class="notif-wave" d="M 32 16 Q 36 12, 40 16"/>
  <path class="notif-wave" d="M 32 32 Q 36 36, 40 32"/>
  <path class="notif-wave" d="M 16 32 Q 12 36, 8 32"/>
  <path class="notif-wave" d="M 16 16 Q 12 12, 8 16"/>
  <circle class="notif-pulse" cx="42" cy="12" r="1"/>
  <circle class="notif-pulse" cx="42" cy="36" r="1"/>
  <circle class="notif-pulse" cx="6" cy="36" r="1"/>
  <circle class="notif-pulse" cx="6" cy="12" r="1"/>
</svg>

Save Mechanism

The Ancestral Shrine (Ìbòrí)

Principles: P17 (Relational Materiality), P9 (Transactional Spirituality)

To save is to enshrine — to place what matters on the stepped platform (àpótí) where the ancestors can receive it. The shrine is not storage but relationship maintenance: the offering bowl feeds the bond; the sacred object inside is the saved content; the roof shelters it from profane gaze. "Objects are addresses for relationships" — saving is addressing content to the ancestral realm for safekeeping.

<svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
  <defs><style>
    .shrine-base { fill: none; stroke: #3D3530; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
    .shrine-platform { fill: none; stroke: #5C4A3A; stroke-width: 2; stroke-linecap: round; }
    .shrine-offering { fill: none; stroke: #A39E98; stroke-width: 1.5; stroke-linecap: round; }
    .shrine-sacred { fill: #C9A84C; }
  </style></defs>
  <path class="shrine-platform" d="M 8 40 L 12 36 L 36 36 L 40 40"/>
  <path class="shrine-platform" d="M 12 36 L 14 32 L 34 32 L 36 36"/>
  <path class="shrine-base" d="M 16 32 L 16 20 C 16 16, 20 12, 24 12 C 28 12, 32 16, 32 20 L 32 32"/>
  <path class="shrine-base" d="M 12 20 L 24 8 L 36 20"/>
  <ellipse class="shrine-offering" cx="24" cy="30" rx="4" ry="2"/>
  <circle class="shrine-sacred" cx="24" cy="22" r="3"/>
  <line class="shrine-offering" x1="18" y1="28" x2="18" y2="24"/>
  <line class="shrine-offering" x1="30" y1="28" x2="30" y2="24"/>
</svg>

Privacy Indicator

The Graded Compound (Ìhín / Òde)

Principles: P14 (Graded Spatial Morality), P3 (Nested Belonging)

Privacy is progressive disclosure through nested spaces: compound wall (outer/òde), courtyard (middle), inner quarters (inner/ìhín). The gate is the controlled access point; each layer requires deliberate crossing. The compound grades privacy: bedroom (private) → courtyard (communal) → street (public). The three nested rectangles represent these zones; the gate marks the threshold between each.

<svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
  <defs><style>
    .priv-outer { fill: none; stroke: #A39E98; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
    .priv-mid { fill: none; stroke: #6B6560; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
    .priv-inner { fill: none; stroke: #1A1A1A; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
    .priv-gate { fill: none; stroke: #8B4513; stroke-width: 2; stroke-linecap: round; }
  </style></defs>
  <rect class="priv-outer" x="4" y="4" width="40" height="40" rx="2"/>
  <rect class="priv-mid" x="10" y="10" width="28" height="28" rx="2"/>
  <rect class="priv-inner" x="16" y="16" width="16" height="16" rx="2"/>
  <path class="priv-gate" d="M 20 16 L 20 12 L 28 12 L 28 16"/>
  <line class="priv-gate" x1="24" y1="12" x2="24" y2="8"/>
  <circle class="priv-gate" cx="24" cy="6" r="1.5"/>
</svg>

Community Marker

The Market Ring (Ọjà)

Principles: P6 (Associational Economy), P3 (Nested Belonging)

The market is the primary public space — the principal market (Ọjà Ọba) beside the palace is where trade, gossip, and politics converge. The Iyaloja ("Mother of the Market") represented market women in the Alaafin's council. The community marker is the market ring: stalls arranged in concentric circles around the queen's position; goods displayed for social legibility; the ring itself is the boundary of public discourse.

<svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
  <defs><style>
    .market-ring { fill: none; stroke: #5C4A3A; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
    .market-stall { fill: none; stroke: #3D3530; stroke-width: 2; stroke-linecap: round; }
    .market-goods { fill: none; stroke: #A39E98; stroke-width: 1.5; stroke-linecap: round; }
    .market-queen { fill: #C9A84C; }
  </style></defs>
  <ellipse class="market-ring" cx="24" cy="24" rx="18" ry="14"/>
  <ellipse class="market-ring" cx="24" cy="24" rx="12" ry="9"/>
  <path class="market-stall" d="M 12 12 L 12 20 L 20 20 L 20 12"/>
  <path class="market-stall" d="M 28 12 L 28 20 L 36 20 L 36 12"/>
  <path class="market-stall" d="M 12 28 L 12 36 L 20 36 L 20 28"/>
  <path class="market-stall" d="M 28 28 L 28 36 L 36 36 L 36 28"/>
  <circle class="market-goods" cx="16" cy="16" r="1.5"/>
  <circle class="market-goods" cx="32" cy="16" r="1.5"/>
  <circle class="market-goods" cx="16" cy="32" r="1.5"/>
  <circle class="market-goods" cx="32" cy="32" r="1.5"/>
  <circle class="market-queen" cx="24" cy="24" r="3"/>
</svg>