brand-hub-engine · dual-room · 21 colors

Mike & Matty, rendered from config.

Fontless engine: text below is Inter (body fallback) + Fraunces italic (accent fallback). Licensed fonts are supplied by the client repo — drop them in and the specimens upgrade with zero markup change.

Type — the three exemplars

Pick a shape. Configure. Record.

One brand, one room.

this is the part most people miss

Palette — 21 colors, exactly what this brand defined

--buttermilk#fafaf3

--buttermilk-2#f3f0e8

--buttermilk-3#ecebdf

--pepper#211f20

--pepper-2#181617

--pepper-3#0c0b0b

--emerald#1e4c48

--emerald-glow#2fa89a

--emerald-deep#0b2321

--carnelian#b74a00

--walnut#a66f00

--forest#7a7f2a

--indigo#2a2f74

--plum#691c4a

--brick#8f2f2f

--ash#797875

--clementine#ffa70b

--honey#fac53a

--stone#dbd6d2

--smoke#b1afaa

--mint#81d3c6

Semantic tokens — the dual-room invariant

Default room: dark. These flip on html[data-mode]. Toggle above to watch the page repaint from the generated [data-mode] block.

--bg var(--pepper)

--bg-2 var(--pepper-2)

--bg-3 var(--pepper-3)

--ink var(--buttermilk)

--ink-2 #d7d3c8

--ink-3 #8a8680

--line rgba(250, 250, 243, 0.08)

--line-strong rgba(250, 250, 243, 0.18)

--accent var(--emerald)

--accent-glow var(--emerald-glow)

--emphasis var(--honey)

--code-bg rgba(250, 250, 243, 0.06)