Orazaka UI — Fondations

Orazaka Orange. Calm obsidian surfaces — the platform's, the krizaka.com values — and the orange of the Orazaka mark as the accent, from the Orazaka brand of @krizaka/tokens. Five named themes sit beside it, orthogonal to dark and light. A theme is a set of token values: theme.css overrides the --kz-* roles, so every @krizaka/ui primitive wears Orazaka 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.

Thèmes nommés

Choisis par la personne, indépendants du mode sombre ou clair : chacun fixe tous les rôles, il se lit pareil dans les deux modes. En direct, avec les composants du kit.

• Electric BlueRépondu en local3 contrats cités · 0 octet n'a quitté le réseauEnvoyerDétails

  .theme-electric — The 2.x identity, kept for the users who chose it.

  20 paires sur 20 conformes AA · minimum 3.05:1

• Deep VioletRépondu en local3 contrats cités · 0 octet n'a quitté le réseauEnvoyerDétails

  .theme-custom — A violet night theme.

  20 paires sur 20 conformes AA · minimum 3.37:1

• Neon MatrixRépondu en local3 contrats cités · 0 octet n'a quitté le réseauEnvoyerDétails

  .theme-cyberpunk — Neon green text on violet black, magenta accent.

  20 paires sur 20 conformes AA · minimum 3.37:1

• Warm ParchmentRépondu en local3 contrats cités · 0 octet n'a quitté le réseauEnvoyerDétails

  .theme-solarized — A light theme on parchment surfaces.

  20 paires sur 20 conformes AA · minimum 3.36:1

• Obsidian RazorRépondu en local3 contrats cités · 0 octet n'a quitté le réseauEnvoyerDétails

  .theme-krizaka — Pitch-black surfaces, zero radius, a cold-steel accent.

  20 paires sur 20 conformes AA · minimum 3.34:1

Tokens produit

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

Échelle typographique

Typographie

Icônes et marques

• OrazakaLogo (@krizaka/ui) — The brand mark, in the brand's orange — never a placeholder icon.
• Icon (@krizaka/orazaka-design-system) — The icon registry: every icon of an Orazaka screen, one typed name per concept; no app imports an icon library.
• SentinelMini (@krizaka/orazaka-design-system) — The Sentinel, the guardian of the pipeline, at 24 px.

Règles produit

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

• Sovereign by designLocal-first: AI inference runs on the organisation's machines, never in an unsolicited cloud; no network dependency is introduced without being asked. The showcases say it: answered locally, nothing left the network.Orazaka AGENTS.md §0 and §13
• The browser never reaches the engineA web page never calls the router or the model runtime directly: all browser traffic goes through the app's server routes (the BFF).Orazaka AGENTS.md §8
• A persona, not an adminExamples, showcases and recordings speak as a named person with a real need (Eric, finance lead), in a fictional but believable workspace — never an admin account or an internal label.orazaka-ui-kit AGENTS.md
• Input locks while the engine worksText entry surfaces lock while sending or generating: textareas, menus, attachments and submit buttons are disabled (ERR-126).ui_standards §5
• Every state, every sizeEvery interactive element has hover, active, focus and disabled states; mobile-first layouts with touch targets of at least 44 px; an aria-label on every icon-only button.ui_standards §1 and §3
• No hard-coded words or coloursNo JSX text: every string comes from the translation dictionary (room for +30 % in French). Colours are roles: no inline hex, no palette class.ui_standards §1 and §3

React Native

The mobile app has its own React Native components and takes the same tokens from @krizaka/orazaka-shared — the Orazaka orange of @krizaka/tokens/native.

import { themes, tokens } from "@krizaka/orazaka-shared";

const t = themes[colorScheme === "light" ? "light" : "dark"];
// t.accent, t.surface1, t.textPrimary…