Color

Okami is neutral: black and white do the work. Every colour is the studio's own, from its mix — its mark, its ball, its accents and its glass — except two status colours that read the same everywhere.

Neutrals

The UI itself. Ink is the text and the one action; softer text, lines and washes are ink at an opacity, so they sit right on any light surface. No greys.

Ink

ink · #010101

--color-ink

Text, and the one action

  • Text and icons; softer text is ink at an opacity
  • The primary button and the Fab
  • Chosen states: switch, radio, calendar day
  • The logo in black

Porcelain

porcelain · #f7f7f9

--color-porcelain

The quiet surface

  • The sidebar
  • The atmosphere's base
  • A card's action band, a table's totals
  • A feature card without a tint
text-inkBook a slotHeadings, body, labels.
text-ink/60Book a slotSecondary text: subheads, nav links, meta. 5.7:1 on white.
text-ink/40Book a slotPlaceholders and disabled text only — 2.8:1, never for anything a reader needs.
outline-ink/10Focus ring.
ring-ink/10Hairline on white glass (secondary button).
border-ink/7Dividers and card edges.
bg-ink/5Hover and held wash (ghost button).

Studio colours

The studio's own, from its mix: the accents that mean done, live, the team and today, and the colours glass is cast in. They read the mix where they're used (bg-studio, ring-studio-deep, bg-studio/40), so a studio's MixScope recolours them. Shown in the sidebar's studio colours; Ink's are its own calm sage and stone blue. Never an action: the action is always black.

Studio

studio · #c8f0b8

--color-studio

Done, live, the team

  • The Badge for done, active, live
  • The team's own replies in the Inbox (at 40%)
  • The week strip's chosen day
  • Always with ink on top

Studio deep

studio-deep · #b2e79d

--color-studio-deep

The studio's colour as a mark on white

  • Today's ring in the week strip
  • An upcoming booking's bar
  • The live dot (LiveIndicator)

Studio glass

studio-glass · #73c84b

--color-studio-glass

The studio's colour cast in glass

  • Glass objects (GlassIcons, GlassTile, FeatureCard)
  • At 10%, the wash of a card holding one
  • The live channel's dot

Studio 2

studio-2 · #e4e1fb

--color-studio-2

The studio's second colour

  • Glass and washes, by turns with the first

Studio 2 deep

studio-2-deep · #c9c3f5

--color-studio-2-deep

The second colour as a mark on white

  • The selected ring: the chosen person, the chosen mix
  • The second glass's tint

Studio 2 glass

studio-2-glass · #a498e5

--color-studio-2-glass

The second colour cast in glass

  • Glass objects by turns
  • At 10%, the wash of a card holding one

Status

Fixed in every studio, so a warning always reads as one. Never an action.

Butter

butter · #f6e795

--color-butter

Needs you

  • The Invited and Needs you badges
  • Always with ink on top

Signal

signal · #ff3b30

--color-signal

Unread

  • CountDot, under a white count
  • The dot on an unread conversation
  • Never an action; destructive has its own red

Landing

The landing hero's own two, named for their jobs. Never for the app.

Sunlight

sunlight · #fed7aa

--color-sunlight

Sunlight falling in

  • The hero's warm bloom, top right, soft-light at 70%

Footage

footage · #f5f5f4

--color-footage

Stone behind the footage

  • Behind the hero's footage while it loads
  • The catalog's stand-in for it

Brands

Another brand's mark keeps its own colours: Google's four, for its G on the button to a studio's Google reviews, and the grey of the Google Maps logo crediting address suggestions. Never for anything of ours.

Google red

google-red · #ea4335

--color-google-red

Google's mark, as Google colours it

  • The G on Review on Google (GoogleMark)

Google blue

google-blue · #4285f4

--color-google-blue

Google's mark, as Google colours it

  • The G on Review on Google (GoogleMark)

Google yellow

google-yellow · #fbbc05

--color-google-yellow

Google's mark, as Google colours it

  • The G on Review on Google (GoogleMark)

Google green

google-green · #34a853

--color-google-green

Google's mark, as Google colours it

  • The G on Review on Google (GoogleMark)

Google Maps grey

google-grey · #5e5e5e

--color-google-grey

Google's mark, as Google colours it

  • The Google Maps logo crediting places (GoogleMapsLogo)

WhatsApp green

whatsapp · #25d366

--color-whatsapp

WhatsApp's mark, as WhatsApp colours it

  • WhatsApp's logo where a message came in (ChannelLogo)

Instagram yellow

instagram-yellow · #ffd600

--color-instagram-yellow

Instagram's mark, as Instagram colours it

  • Instagram's logo where a message came in (ChannelLogo)

Instagram orange

instagram-orange · #ff7a00

--color-instagram-orange

Instagram's mark, as Instagram colours it

  • Instagram's logo where a message came in (ChannelLogo)

Instagram pink

instagram-pink · #ff0069

--color-instagram-pink

Instagram's mark, as Instagram colours it

  • Instagram's logo where a message came in (ChannelLogo)

Instagram purple

instagram-purple · #d300c5

--color-instagram-purple

Instagram's mark, as Instagram colours it

  • Instagram's logo where a message came in (ChannelLogo)

Studio mixes

A studio picks a mix: two colours and up to two blooms (Ink by default, Meadow for the brand's leaf and lilac). It colours its mark, ball, loader, letter tile and the studio colours above, never its buttons or text. Every mix, and the shades derived from it, are on the Mixes page.

Theme tokens

shadcn's theme contract in :root, every token drawn from the palette — so the vendored primitives already look like Okami. Use a token when you mean a role (bg-primary, text-muted-foreground, border-border), a brand colour when you mean the colour itself. Light only: there is no dark theme.

TokenMaps toWhat it controlsUsed by
  • background
  • foreground
  • white
  • ink
The default page background and text colour.The page shell, sections and default text.
  • card
  • card-foreground
  • white
  • ink
Raised surfaces and what's on them.Card, dashboard and settings panels.
  • popover
  • popover-foreground
  • white
  • ink
Floating surfaces and what's on them.Popover, DropdownMenu, Select and other overlays.
  • primary
  • primary-foreground
  • ink
  • white
High-emphasis actions and selected states: Okami's one action.Primary buttons, checked switches and checkboxes, the selected calendar day, default badges.
  • secondary
  • secondary-foreground
  • ink
  • white
The next action down: filled, confident, not the CTA.Secondary buttons and badges.
  • muted
  • muted-foreground
  • ink 4%
  • ink 60%
Subtle surfaces and lower-emphasis text.Descriptions, placeholders, helper text, skeletons and empty states.
  • accent
  • accent-foreground
  • ink 5%
  • ink
Hover, focus and held surfaces.Ghost buttons, menu highlights, hovered rows and selected items.
  • destructive
  • red
Destructive actions and errors — the palette's only red.Destructive buttons, invalid fields and destructive menu items.
  • border
  • ink 8%
Default borders and separators.Cards, menus, tables, separators and dividers.
  • input
  • ink 12%
Form control borders.Input, Textarea, Select and outline controls.
  • ring
  • ink 10%
Focus rings — one ring everywhere, 2px of light grey, clear of the edge.Every focusable control, through the global :focus-visible.
  • chart-1
  • chart-2
  • chart-3
  • chart-4
  • chart-5
  • studio deep
  • studio 2 deep
  • ink
  • ink 55%
  • ink 25%
The chart palette: the two brand hues first, then the ink ramp.Charts and dashboard blocks.
  • sidebar
  • sidebar-foreground
  • porcelain
  • ink
The sidebar surface and its text.The Sidebar container and its content.
  • sidebar-primary
  • sidebar-primary-foreground
  • ink
  • white
High-emphasis actions in the sidebar.Active items, icon tiles, badges and sidebar CTAs.
  • sidebar-accent
  • sidebar-accent-foreground
  • ink 5%
  • ink
Hover and selected states in the sidebar.Menu hover, open items and interactive rows.
  • sidebar-border
  • ink 8%
Sidebar borders and separators.Sidebar headers, groups and dividers.
  • sidebar-ring
  • ink 10%
Focus rings inside the sidebar.Focused controls in the sidebar.
  • radius
  • 0.625rem
The base corner radius; radius-sm … radius-4xl derive from it.Cards, inputs, popovers — and the squircle-* corners.

Contrast

Measured WCAG ratios for the pairs in use. Text needs 4.5:1 (AA); large text, focus rings and field edges 3:1. Input borders are hairlines below that, so every field also carries a visible label.

20.9

Ink on white

AA text

16.5

Ink on studio (Meadow)

AA text

14.7

Ink on studio deep (Meadow)

AA text

16.4

Ink on studio 2 (Meadow)

AA text

16.7

Ink on butter

AA text

20.9

White on ink

AA text

3.5

White on signal

UI edges

5.7

Ink 60% on white

AA text

2.8

Ink 40% on white

Below 3:1

4.8

Destructive on white

AA text

4.7

Ring on white

AA text

1.3

Input on white

Below 3:1

Atmosphere

The chat page and this catalog float on AuraScene: a porcelain base with two heavily blurred washes drifting over it, in the studio's mix (its second colour above, its first below; Meadow's lilac and leaf where no studio sets one, Ink's pale greys on Okami's own login), so it has no colours of its own. Its .aura-muted (58%, 5.3:1) and .aura-faint (38%, 2.7:1 — below AA) text classes predate the ink scale.

Rules

  • Black means “do this”: the primary action is black with white words, one per view. Leaf never asks to be pressed; it marks done, live, today and the team, always with ink on top.
  • An accent means one thing everywhere. Lilac and the other brand hues never mark an action or a state; they belong to the logo, the ball and the atmosphere.
  • Softer text is text-ink/60. Below that only for text a reader doesn't need — placeholders, disabled labels.
  • Colours come from the theme (bg-ink, text-ink/60), never a hex in a component. This page is tested against globals.css, so a new token lands here or the build fails.
  • Every theme token is drawn from the palette and documented above — a new token lands in the table, or the build fails. Focus is one ring everywhere: --ring, 2px, clear of the edge.