Orazaka UI — Foundations

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

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.

Named themes

Chosen by the person, orthogonal to dark and light: each one sets every role, so it reads the same in either mode. Live, with the kit's components.

• Electric BlueAnswered locally3 contracts cited · 0 bytes left the networkSendDetails

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

  20 of 20 pairs at AA · lowest 3.05:1

• Deep VioletAnswered locally3 contracts cited · 0 bytes left the networkSendDetails

  .theme-custom — A violet night theme.

  20 of 20 pairs at AA · lowest 3.37:1

• Neon MatrixAnswered locally3 contracts cited · 0 bytes left the networkSendDetails

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

  20 of 20 pairs at AA · lowest 3.37:1

• Warm ParchmentAnswered locally3 contracts cited · 0 bytes left the networkSendDetails

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

  20 of 20 pairs at AA · lowest 3.36:1

• Obsidian RazorAnswered locally3 contracts cited · 0 bytes left the networkSendDetails

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

  20 of 20 pairs at AA · lowest 3.34:1

Product tokens

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

Type scale

Typography

Icons and marks

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

Product rules

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

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