01Surfaces & BordersElevation · Borders · Radius · Glass
#050505
--bb-dark
Page base. Canvas background.
#0F0F11
--bb-surface
Elevated cards, panels, headers.
#1C1E19
--bb-surface-alt
Secondary elevation. Nested panels.
oklch(0.13 0 0)
--bb-surface-deep
Deep recessed areas. Code blocks.
rgba(15,15,17,0.92)
--bb-surface-overlay
Transparent overlay on modals.
oklch(0.15 0.005 280)
--bb-surface-panel
Sidebar panels, nav drawers.
oklch(0.11 0.005 280)
--bb-surface-console
Terminal/console backgrounds.
oklch(0.22 0.06 283)
--bb-surface-hover-strong
Strong hover state. Interactive surfaces.
BordersBorder semantic tokens
--bb-border
rgba(156,156,156,0.15)Default subtle border. Dividers, grids.
--bb-border-soft
= --bb-borderAlias for default. Semantic clarity.
--bb-border-strong
#3D3D3DHigh-contrast border. Active sections.
--bb-border-hover
rgba(156,156,156,0.24)Interactive hover state borders.
--bb-border-input
rgba(156,156,156,0.2)Form input borders.
Border RadiusComponent rounding scale
--radius
0.5rem (8px)
--radius-sm
4px
--radius-md
8px
--radius-lg
12px
--radius-xl
16px
--radius-2xl
24px
--radius-full
9999px
Glass & BlurBackdrop-filter tokens
--glass-blur
blur(10px)
Standard glass effect. Nav, modals.
--glass-blur-soft
blur(5px)
Subtle glass. Tooltips, popovers.