Orochia UI — Foundations

Obsidian Velvet Noir. Dark-first obsidian surfaces, a velvet violet accent and a sensual magenta second accent, with Outfit for display. The light theme, Luminous Ivory, is first-class. A theme is a set of token values: theme.css overrides the --kz-* roles of @krizaka/tokens, so every @krizaka/ui primitive wears Orochia without a class of its own.

Palette

Every role as an app resolves it: the platform, then the brand, then the kit. The roles the product sets are marked.

Contrasts

The pairs every Krizaka theme is held to (WCAG 2.2): text on every surface, text on the accent, the accent as text, the focus ring.

Product tokens

What the roles cannot say, prefixed with the product's name — never generic.

Typography

Icons and marks

• OrochiaLogo (@krizaka/ui) — The brand mark — the serpent and the flame, animated; never a placeholder icon. It stops under reduced motion.
• @krizaka/icons (@krizaka/icons) — Every interface icon (<Name>Icon, the Krizaka signature); lucide-react is being retired screen by screen.
• SocialIcon (@krizaka/orochia-design-system) — The networks a creator links from their profile.

Product rules

What every screen of the product respects — each rule quoted from the contract that states it.

• Never "live"Orochia has no live streaming: no screen, badge or message says "live". An auction is open, a challenge takes pledges — StatusBadge replaced LiveBadge for that reason.orochia-design-system AGENTS.md §3
• 18+, checked by the serverThe date of birth is checked 18+ by the server at registration; adult ratings are veiled for visitors whose age the server has not checked; only verified creators upload.Orochia AGENTS.md §3 (absolute invariants)
• The address is the stateEvery place a person can be is a URL they can copy, share and reload: tabs, settings sections, filters, detail views. Tabs are links — never useState alone.Orochia AGENTS.md §6
• Quick actions where the thing is shownEdit a photo on the photo, a cover on the cover, a title on the title. Settings pages are for preferences.Orochia AGENTS.md §6
• Words come from the appComponents take their words as props; every string lives in the app's messages. Destructive actions confirm with a second tap (ConfirmButton), never window.confirm.orochia-design-system AGENTS.md §3
• Roles only, both themesNo raw palette colour, no light: / dark:, no [var(--…)]: surfaces, text and accents use the roles, which change with the theme. Every hover and focus reads in both themes.Orochia AGENTS.md §6

React Native

The mobile app (Expo) takes the theme, not the components: nativeTheme is the @krizaka/tokens native roles with the Orochia overrides — the same values as theme.css (a test keeps them equal).

import { nativeTheme, gradientStops } from "@krizaka/orochia-design-system/tokens";

const t = nativeTheme[colorScheme === "light" ? "light" : "dark"];
// t.surface0, t.textPrimary, t.accent, t.accent2…