Principles

How Okami looks, moves, and speaks. One set of rules for every surface — the chat page, the dashboard, the marketing site — so the product feels like one calm, exclusive place.

Light, calm, one green action

  • Okami is light: white and porcelain surfaces, ink text, calm leaf green and soft lilac. Dark backgrounds and harsh shadows are out — shadows are feather-soft or absent.
  • Colour means something. Leaf marks the one action — the primary button — and a confirmed booking; lilac is the quiet second voice. Everything else is ink at an opacity.
  • Glass is a material, not a decoration. Liquid glass (true refraction) is reserved for chrome — a composer, a floating panel. Repeated elements use the cheaper CSS frost.

Motion is scarce

  • One orchestrated moment per page — a load sequence, a hero handing over to a header. Everything else only moves in answer to the person's action.
  • Every animation stills under prefers-reduced-motion. No exceptions.
  • Marketing pages may stage product stories: they play only while in view, ambient colour drifts slowly, and under reduced motion each holds its finished picture. The product itself keeps motion scarce.

Type and voice

  • One family: Google Sans — Flex, variable from 1 to 1000, for every word, and Code for code. Display moments are the same family at large sizes, weight 500, tight tracking — never a second typeface.
  • Sentence case everywhere. No all-caps labels, no arrows appended to links. Meta lines join facts with a spaced middle dot ("Haircut · Jozef").
  • In conversation, the agent speaks as bare text on the atmosphere; only the client's words sit in a glass bubble.

Product shots are the product, simplified

  • A staged screen reads as Okami itself, simplified to what the viewer needs: real parts, the studio cast, one thing happening.
  • Words only where the story is: three to seven real strings per shot, quiet placeholder bars for the rest. More detail reads as generated, not real.
  • One focal object per shot, one lead tile per grid. Crop only filler: the action, the result and every real word stay whole.
  • No AI clichés: no sparkles or wands as decoration, no purple as the AI colour, no invented logos. Show what Okami does instead.
  • Every motion has a cause, and the still frame tells the story on its own, for reduced motion and screenshots.

Two component layers

  • components/generated holds pristine vendored code (shadcn/ui and friends) — never hand-edited, so upstream updates stay clean diffs.
  • components/shared is Okami's own layer — the pieces in this catalog. Features import shared first.
  • Every element Okami uses lives in components/shared and has a page here — playground, variants, sizes, states and API. Nothing ships undocumented; a new element lands here first.