Brandbook · Live PreviewDARK_MODE
BH
Brandhop Design Systemv1.0Design tokens that respond to every decision you make.
277 variables, 200 layouts, light and dark mode. End-to-end from web editor to Figma.
Color · semantic
primary
foreground
muted
card
border
background
Typography · scale
DisplayOrchestrate your scale.
HeadingOrchestrate your scale.
SubheadingOrchestrate your scale.
BodyOrchestrate your scale.
CaptionOrchestrate your scale.
Component · buttons · 3 variants
Primary
Outline
Ghost
Component · cards · 3 variants
Default
System architecture
Tokens scale together across every variant.
Muted
Visual consistency
Tokens scale together across every variant.
Brand
On-brand emphasis
Tokens scale together across every variant.
Component · inputs · 3 variants
Component · badges · 3 variants
Solid
NewLiveOK
Subtle
BetaDraftSoon
Outline
FreeProOff
Status · destructive · alerts
ErrorSuccessWarningInfo
info
Heads up — new release available.
success
Your changes have been saved.
warning
Plan limit will be reached soon.
destructive
This action cannot be undone.
Data · chart palette · 5 series
chart-1
chart-2
chart-3
chart-4
chart-5
Layout · sidebars · token-driven
Uses --sidebar / --sidebar-primary / --sidebar-accent
Sidebar · left
BH
AppDashboard
Inbox12
Members
Analytics
Settings
Overview
Last 7 days
MRR
$24.8k
+12%
Users
1,284
+4.2%
NPS
72
+8
Activity
Sidebar · right
Overview
Last 7 days
MRR
$24.8k
+12%
Users
1,284
+4.2%
NPS
72
+8
Activity
BH
AppDashboard
Inbox12
Members
Analytics
Settings