Orochia UI — Fondations

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

Chaque rôle tel qu'une app le résout : la plateforme, puis la marque, puis le kit. Les rôles que le produit fixe sont signalés.

Contrastes

Les paires que tout thème Krizaka respecte (WCAG 2.2) : le texte sur chaque surface, le texte sur l'accent, l'accent en texte, l'anneau de focus.

Tokens produit

Ce que les rôles ne savent pas dire, préfixé du nom du produit — jamais générique.

Typographie

Icônes et marques

• 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.

Règles produit

Ce que chaque écran du produit respecte — chaque règle citée depuis le contrat qui l'énonce.

• 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…