Mixes

A studio's own colours. It picks a mix: two colours and up to two that bloom. The mix colours its mark, its booking page's ball, its loader, its letter tile and the UI's accents (done, live, the team, today, and glass); its buttons and text stay Okami's black and white. A studio starts on Ink until it picks.

Pick one

Pick a mix and judge it on everything it touches. The sidebar's switch is the same choice, so every other page wears it too.

Belaze

The booking page, in its mix

Logo, flat
Logo, glass
Loading
Thinking
okamiThe app header's logo

Every mix

Each mix's two colours (a, b), its blooms, and the shades derived from them: deep is a step down in OKLab (lightness −0.04, chroma ×1.3), unless a mix sets its own; glass is the deep shade cast as GlassIcons casts it. Accents are the UI's studio colours (done, live, the team, today): the mix's two, or its own pair where its mark is too dark to fill with (Ink's sage and stone blue). Defined in lib/brand/mixes.ts.

Mixa · bBloomsDeepGlassAccents
Ink
#010101#5b5b61#d5d5db#f4f4f6#000000#505057#000000#30303a#d4ebcf#d4e5f5
Meadow
#c8f0b8#e4e1fb#bcdafb#f6e795#b2e79d#c9c3f5#73c84b#a498e5#c8f0b8#e4e1fb
Lagoon
#bdeedf#cee3fa#e0dcfb#f3eab0#a4e4d1#bbd7f4#53c5a9#86b2df#bdeedf#cee3fa
Ocean
#c0e4fc#dbe2fb#c6efe3#f6e9a8#a9d8f7#ccd5f5#66b4e5#a0addf#c0e4fc#dbe2fb
Orchid
#e2dcfc#f7d7ea#cfe2fb#fbdcc8#d5cdf6#f0c7df#b0a2e2#d798be#e2dcfc#f7d7ea
Blush
#f9d7e1#f7e6a6#fcd5bc#e8e3fb#f2c7d4#efd883#da98ae#d2af00#f9d7e1#f7e6a6
Sunset
#fcdac5#f9d6e5#f6e795#e4e1fb#f6caaf#f2c6d9#e09d72#da97b5#fcdac5#f9d6e5
Citrus
#f6e795#c8f0b8#fcd9c0#c9f1e3#eeda69#b3e69e#cbb300#76c74e#f6e795#c8f0b8
Dune
#efe0c8#f0d6ca#f8dcc6#dfe8cf#e6d2b3#e8c7b8#c9a978#ce9c85#efe0c8#f0d6ca

Rules

  • A mix colours a studio's identity: its mark, its ball, its loader, its letter tile and the UI's accents. Buttons and text never follow it: the action is always black.
  • Wrap a studio's pages in MixScope; the mark, the ball and the letter tile read its variables from where they sit, and follow when it changes. Outside any scope the page wears Meadow, set on html.
  • Ink is black and a subtler black on the mark, so even the neutral mix reads as two colours; its ball is pale grey.