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
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.
| Mix | a · b | Blooms | Deep | Glass | Accents |
|---|---|---|---|---|---|
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 onhtml. - Ink is black and a subtler black on the mark, so even the neutral mix reads as two colours; its ball is pale grey.