01Color SystemComplete Palette · Gold + Bronze Editions
Canonical Color System
`foundations` is now the canonical route for color presentation. Both brandbook editions are documented here with complete accent, surface, text, border and contrast systems. `globals.css` remains the runtime source of truth.
Theme Edition
Gold Theme
Starter Gold Edition
Neutral black foundation with a restrained gold accent. Default edition for the starter.
Accent
--bb-accent
Canvas
--bb-canvas
Surface
--bb-surface
Text
--bb-cream
Accent & SignalsPrimary accent, info, flare, error
Aa#DDD1BB
--bb-accent
#DDD1BB
Primary gold accent. CTA, active states, emphasis, and warm highlights.
Aaoklch(0.669 0.1837 248.81)
--bb-blue
oklch(0.669 0.1837 248.81)
Info accent. Secondary feedback and utility cues.
Aa#C4B7A2
--bb-flare
#C4B7A2
Warm support accent. Premium contrast and editorial emphasis.
Aaoklch(0.6368 0.2078 25.33)
--bb-error
oklch(0.6368 0.2078 25.33)
Destructive/error state. Validation and danger cues.
Surface StackCanvas, shells, panels, console
Aavar(--bb-dark)
--bb-canvas
var(--bb-dark)
Document canvas. Main route background.
Aa#121213
--bb-dark
#121213
Dark shell. Hero panels, editorial density, hard contrast.
Aa#151517
--bb-surface
#151517
Primary raised surface. Cards, top bars, shell modules.
Aa#1D1D20
--bb-surface-alt
#1D1D20
Secondary surface. Nested blocks and alternate rows.
Aa#18181B
--bb-surface-panel
#18181B
Panel shell. Sidebars, drawers, utility layers.
Aa#222225
--bb-surface-console
#222225
Console/terminal zone. Utility output and mono previews.
Aa#28282C
--bb-surface-hover-strong
#28282C
Heavy hover state. Controls and selected shells.
Text & Reading LayerText hierarchy and light neutrals
Aa#F4F4F4
--bb-cream
#F4F4F4
Primary reading color. Headlines and body text.
Aa#E8E8E8
--bb-cream-alt
#E8E8E8
Soft alternate off-white. UI variants and large fields.
Aa#FFFFFF
--bb-warm-white
#FFFFFF
Purest light. Mark/logo and maximum contrast details.
Aargba(244, 244, 244, 0.52)
--bb-dim
rgba(244, 244, 244, 0.52)
Muted copy. Labels, captions, secondary descriptions.
Aa#DDDDDD
--bb-muted
#DDDDDD
Neutral light support. Tertiary text and subtle separators.
Aa#AFAFAF
--bb-meta
#AFAFAF
Metadata color. Counters, supporting UI, technical labels.
Neutral ScaleGray system and bridge tones
Aa#313131
--bb-gray-charcoal
#313131
Heavy neutral. Utility fills and strong separators.
Aa#484848
--bb-gray-dim
#484848
Mid dark neutral. Placeholder surfaces and utility blocks.
Aa#6E6E6E
--bb-gray-muted
#6E6E6E
Muted support. Soft chip fills and subdued UI.
Aa#919191
--bb-gray-silver
#919191
Light neutral. Delicate fills and border-led components.
Aa#919191
--bb-muted-legacy
#919191
Legacy neutral bridge. Compatibility layers and old docs.
Border SystemNeutral separation tokens
--bb-border
rgba(255, 255, 255, 0.09)
Default border. Grid, rules, low-noise separation.
--bb-border-soft
rgba(255, 255, 255, 0.05)
Soft border. Hairline dividers and subtle separators.
--bb-border-strong
rgba(255, 255, 255, 0.15)
Strong border. Active shell and high-contrast framing.
--bb-border-hover
rgba(255, 255, 255, 0.18)
Hover border. Interactive feedback for surfaces.
--bb-border-input
rgba(255, 255, 255, 0.12)
Form border. Inputs, textareas, data entry zones.
Accent Opacity LadderTheme glow and overlay scale
--bb-accent-02
rgba(221, 209, 187, 0.02)
--bb-accent-04
rgba(221, 209, 187, 0.04)
--bb-accent-05
rgba(221, 209, 187, 0.05)
--bb-accent-06
rgba(221, 209, 187, 0.06)
--bb-accent-08
rgba(221, 209, 187, 0.08)
--bb-accent-10
rgba(221, 209, 187, 0.1)
--bb-accent-12
rgba(221, 209, 187, 0.12)
--bb-accent-15
rgba(221, 209, 187, 0.15)
--bb-accent-20
rgba(221, 209, 187, 0.2)
--bb-accent-25
rgba(221, 209, 187, 0.25)
--bb-accent-40
rgba(221, 209, 187, 0.4)
--bb-accent-50
rgba(221, 209, 187, 0.5)
--bb-accent-75
rgba(221, 209, 187, 0.75)
--bb-accent-90
rgba(221, 209, 187, 0.9)
Contrast PairsApproved high-contrast combinations
Gold / Dark
--bb-accent on --bb-dark
Cream / Canvas
--bb-cream on --bb-canvas
Dark / Gold
--bb-dark on --bb-accent
Blue / Dark
--bb-blue on --bb-dark
Theme Edition
Bronze Theme
Starter Bronze Edition
Secondary edition with a deeper bronze accent. Same shell, warmer emphasis.
Accent
--bb-accent
Canvas
--bb-canvas
Surface
--bb-surface
Text
--bb-cream
Accent & SignalsPrimary accent, info, flare, error
Aa#BFA37A
--bb-accent
#BFA37A
Primary bronze accent. Premium states, badges, and warmer emphasis.
Aaoklch(0.669 0.1837 248.81)
--bb-blue
oklch(0.669 0.1837 248.81)
Info accent. Preserved for shared system semantics.
Aa#A78B60
--bb-flare
#A78B60
Warm support accent. Deeper bronze detail for editorial contrast.
Aaoklch(0.6368 0.2078 25.33)
--bb-error
oklch(0.6368 0.2078 25.33)
Destructive/error state. Shared semantic warning language.
Surface StackCanvas, shells, panels, console
Aavar(--bb-dark)
--bb-canvas
var(--bb-dark)
Document canvas. Neutral black foundation for the edition.
Aa#121213
--bb-dark
#121213
Dark shell. Major panels and editorial contrast zones.
Aa#151517
--bb-surface
#151517
Primary elevated surface. Cards, nav, foundation blocks.
Aa#1D1D20
--bb-surface-alt
#1D1D20
Alternate surface. Nested layers and secondary grouping.
Aa#18181B
--bb-surface-panel
#18181B
Panel shell. Drawers, sidebars, supporting containers.
Aa#222225
--bb-surface-console
#222225
Dark utility console. Dense technical and mono moments.
Aa#28282C
--bb-surface-hover-strong
#28282C
Strong hover/selection shell. Elevated interactivity.
Text & Reading LayerText hierarchy and light neutrals
Aa#F4F4F4
--bb-cream
#F4F4F4
Primary text. Clean neutral reading layer.
Aa#E8E8E8
--bb-cream-alt
#E8E8E8
Alternate light neutral. Secondary fields and tonal variation.
Aa#FFFFFF
--bb-warm-white
#FFFFFF
Maximum contrast white. Marks and highest-priority detail.
Aargba(244, 244, 244, 0.52)
--bb-dim
rgba(244, 244, 244, 0.52)
Muted copy. Supporting metadata and low-emphasis body.
Aa#DDDDDD
--bb-muted
#DDDDDD
Soft neutral. Utility text and quiet secondary layers.
Aa#AFAFAF
--bb-meta
#AFAFAF
Metadata color. Counters, labels, informational chrome.
Neutral ScaleGray system and bridge tones
Aa#313131
--bb-gray-charcoal
#313131
Dense neutral. Heavy framing and utility surfaces.
Aa#484848
--bb-gray-dim
#484848
Mid neutral. Secondary chips, placeholders, subtle blocks.
Aa#6E6E6E
--bb-gray-muted
#6E6E6E
Muted support. Soft UI moments and low-priority contrast.
Aa#919191
--bb-gray-silver
#919191
Light neutral. Fine fills and structural detailing.
Aa#919191
--bb-muted-legacy
#919191
Legacy bridge neutral. Compatibility with shared patterns.
Border SystemNeutral separation tokens
--bb-border
rgba(255, 255, 255, 0.09)
Default border. Neutral separation with no gold tint.
--bb-border-soft
rgba(255, 255, 255, 0.05)
Soft border. Quiet framing and low-noise structure.
--bb-border-strong
rgba(255, 255, 255, 0.15)
High-contrast border. Strong shell framing and active states.
--bb-border-hover
rgba(255, 255, 255, 0.18)
Interactive border. Hover cues without color contamination.
--bb-border-input
rgba(255, 255, 255, 0.12)
Input border. Neutral form language for the edition.
Accent Opacity LadderTheme glow and overlay scale
--bb-accent-02
rgba(191, 163, 122, 0.02)
--bb-accent-04
rgba(191, 163, 122, 0.04)
--bb-accent-05
rgba(191, 163, 122, 0.05)
--bb-accent-06
rgba(191, 163, 122, 0.06)
--bb-accent-08
rgba(191, 163, 122, 0.08)
--bb-accent-10
rgba(191, 163, 122, 0.1)
--bb-accent-12
rgba(191, 163, 122, 0.12)
--bb-accent-15
rgba(191, 163, 122, 0.15)
--bb-accent-20
rgba(191, 163, 122, 0.2)
--bb-accent-25
rgba(191, 163, 122, 0.25)
--bb-accent-40
rgba(191, 163, 122, 0.4)
--bb-accent-50
rgba(191, 163, 122, 0.5)
--bb-accent-75
rgba(191, 163, 122, 0.75)
--bb-accent-90
rgba(191, 163, 122, 0.9)
Contrast PairsApproved high-contrast combinations
Bronze / Dark
--bb-accent on --bb-dark
Cream / Canvas
--bb-cream on --bb-canvas
Ink / Bronze
--bb-ink on --bb-accent
Silver / Surface
--bb-gray-silver on --bb-surface
02Semantic Aliasesshadcn/ui token mapping
shadcn TokenMaps ToUsage
--background--bb-canvasPage background
--foreground--bb-creamDefault text
--primary--bb-accentPrimary actions
--primary-foreground--bb-darkText on primary
--secondary--bb-surface-altSecondary bg
--muted--bb-surface-panelMuted backgrounds
--muted-foreground--bb-dimMuted text
--accent--bb-accent-10Accent backgrounds
--accent-foreground--bb-accentAccent text
--destructive--bb-errorError/destructive
--border--bb-borderDefault borders
--input--bb-border-inputInput borders
--ring--bb-accent-40Focus ring
--card--bb-surfaceCard bg
--card-foreground--bb-creamCard text
--popover--bb-surfacePopover bg
--popover-foreground--bb-creamPopover text