Brand Kit / Foundation

Foundation

The neutral rail underneath every surface — the brand color tokens, the type stack, and the semantic --brand-* surface variables that the chameleon palettes ride on top of. Values are read from @buzzvil/brand-kit at build time. For the full token reference shared by both kits, see the Tokens page.

Brand colors

primary#18181B
base-100#FFFFFF
base-200#F3F4F6
base-300#E5E7EB
base-content#18181B
content-400#A1A1AA
stroke-100#E4E4E7
neutral-black#000000
success#22C55E
error#EF4444
warning#FACC15
info#3B82F6

Type stack

PretendardKorean + Latin UI / body

브랜드 시스템 — Buzzvil Design

InterLatin display / numerals

The quick brown fox 0123456789

Anonymous ProMonospace / code & data

const dau = 1_284_000; // +4.2%

Pretendard and Inter load via the brand-kit font import URLs; Anonymous Pro is loaded by the docs app globally. Samples fall back to system fonts if a family is unavailable.

Semantic surfaces

--brand-* tokenresolves to
--brand-doc-bg
--bzv-color-theme-base-100
--brand-doc-fg
--bzv-color-theme-base-content
--brand-doc-muted
--bzv-color-theme-base-content-400
--brand-doc-border
--bzv-color-theme-stroke-100
--brand-dashboard-bg
--bzv-color-theme-base-200
--brand-dashboard-surface
--bzv-color-theme-base-100
--brand-dashboard-fg
--bzv-color-theme-base-content
--brand-deck-bg
--bzv-color-theme-neutral-black
--brand-deck-fg
--bzv-color-theme-neutral-white
--brand-accent
--bzv-color-theme-primary

Doc and dashboard surfaces are light for clarity; deck is dark for impact. --brand-accent resolves to the monochrome rail — color comes from the chameleon palettes per surface, not from a fixed accent.