DotMark

Playground

import { DotMark } from "@/components/shared/dot-mark/dot-mark";

<DotMark
  material="glass"
  palette="color"
  className="size-56 text-ink"
/>

Poses

The logo: four upright squircle lobes melted into a clover, a star cut from its middle, held still. Loading, four dots circulate in lilac and green, melting together and apart. Thinking, they bloom into a turning 3D orb whose dots trade places through its core. Changing the pose morphs one into the next.

import { DotMark } from "@/components/shared/dot-mark/dot-mark";

<DotMark className="size-24 text-ink" />
<DotMark pose="think" label="Thinking" className="size-24" />
<DotMark pose="loading" label="Loading" className="size-24" />

Inside

What's cut from the logo's middle: a star by default, as above, or eyes — Okami's face, a character that watches. Its eyes follow your pointer anywhere on the page and wander when you're away; it blinks, sometimes twice, and now and then winks; its body breathes and leans toward what it looks at. Here in black glass, as Okami wears it.

import { DotMark } from "@/components/shared/dot-mark/dot-mark";

<DotMark inside="eyes" material="glass" palette="black" className="size-40" />

Material & palette

palette="color" makes each lobe leaf or lilac; material="glass" makes any pose glass — smoked for ink, a clean piece of leaf or lilac per lobe for colour, meeting in a narrow luminous pearl. The nav wears glass in colour. Switch them in the playground: they ease over rather than flip.

import { DotMark } from "@/components/shared/dot-mark/dot-mark";

<DotMark palette="black" className="size-24 text-ink" />
<DotMark palette="color" className="size-24" />
<DotMark material="glass" palette="black" className="size-24 text-ink" />
<DotMark material="glass" palette="color" className="size-24" />

Small sizes: OkamiMark

Keep a DotMark at size-8 or larger. The one exception is Okami's avatar in a ChatCard header, where the glass colour mark sits in a 16px slot, framed 3px wider all round so the clover itself measures 16px. Below that elsewhere — a byline, a favicon, print — use OkamiMark: the logo traced into a static SVG in the text colour. Its viewBox hugs the clover, so size it by the mark itself.

import { OkamiMark } from "@/components/shared/dot-mark/okami-mark";

<OkamiMark className="size-3 text-ink" />
<OkamiMark inside="eyes" className="size-3 text-ink" />

In an icon slot: OkamiIcon

Where a line icon says Okami did something — a booking it made, its part of the weekly recap, a thought it finished — use OkamiIcon: the same static logo as an icon of the set, filled and inset in Hugeicons' 24 box so it sits level with them. It's an icon like any other, so it goes wherever one does. Never a sparkle or a wand for the AI: Okami has a mark of its own (see Foundations → Iconography).

import { OkamiIcon } from "@/components/shared/dot-mark/okami-mark";

<Badge variant="muted" leadingIcon={OkamiIcon}>Booked by Okami</Badge>
<CardSection icon={OkamiIcon} label="Okami">…</CardSection>

API reference

OkamiMark

Guidelines

• Size with Tailwind (size-*); keep it square and at least size-8 — but for the ChatCard avatar (16px clover in a 22px frame). A mark that stays the logo and sits in a layout — the nav's beside its name — takes frame="tight", so its box is the logo and spacing is measured from the logo itself. One that also morphs — the nav's, alive on hover — takes frame="spill": the same box, its canvas reaching a fifth past it (size-7/5), so the orb and the dots have room without the logo shrinking. Its colours are the studio's mix: flat takes --mix-a and --mix-b, mixed as they are where the lobes meet — a plain gradient, no pale band; glass tints from --mix-a-deep and --mix-b-deep.
• The logo holds still — nothing turns, nothing morphs. Black by default (text-ink); palette="color" makes each lobe leaf or lilac, and material="glass" makes any pose glass — smoked for ink, a clean piece of leaf or lilac per lobe for colour, meeting in a narrow luminous pearl. Small marks deepen their glass so they hold their own. Material and palette changes ease over rather than flip.
• inside chooses what's cut from the logo's middle: a star (the default) or eyes — upright and a little apart, a face that watches: it follows the pointer, wanders when nobody's there, blinks and winks, and breathes and leans toward what it looks at (face.ts, stepped each frame and unit-tested). A tight frame moves the body less, having no room around it. Changing it never swaps in place: the old cut closes, then the new one opens, over a morph (swapMiddle in morph.ts) — the face opens its eyes. Traced into static SVGs (OkamiMark, public/brand/okami-mark*.svg) by scripts/trace-logo.ts for tiny sizes and print.
• A pose only places dots (poses.ts, plain data, unit-tested — glass all round the logo's middle; the orb's dots never touching). Goo melts close dots together (dots.ts). Loading and thinking are alive, in the brand colours.
• Decorative by default. Pass label when the pose itself is the message (thinking or loading with no other text).
• Under prefers-reduced-motion loading and thinking hold still, the face rests at home with its eyes open, and poses switch instantly. Off screen the face rests too. Without WebGL an SVG stands in — for the logo, its traced outline in ink or leaf and lilac.
• The nav's mark — the black glass logo, framed tight or spilling — stands in as itself in glass until WebGL draws: a still of the live mark (public/brand/okami-mark-still.webp, okami-mark.png at 128px), never a flat black clover. Re-derive it when the mark changes.
• Each mark is its own WebGL context and browsers cap them (~16), so keep a handful per page.