Design tokens
Design tokens are the atomic values that make the brand reproducible across web, mobile, deck, and print. Use them in code, Figma variables, or design specs.
Copy-paste root
Paste this block into the root of any web project. It establishes the full colour and spacing vocabulary.
:root {
--bblc-void: #0A0A0B;
--bblc-ink: #141414;
--bblc-carbon: #17191D;
--bblc-graphite:#4A4D52;
--bblc-steel: #9CA0A8;
--bblc-mist: #ECEDEF;
--bblc-paper: #FFFFFF;
--bblc-grid: #00D084;
--bblc-grid-dk:#00A868;
--bblc-coral: #FF4B26;
--bblc-radius: 6px;
--bblc-radius-sm: 4px;
--bblc-shadow: 0 12px 32px rgba(0,208,132,0.08);
--bblc-shadow-dk: 0 12px 32px rgba(0,0,0,0.32);
}
Space scale
The spacing scale is based on an 8px grid. Every margin, padding, and gap should resolve to a multiple of 4 or 8.
| Token | Value | Use |
|---|---|---|
space-01 | 4px | Tight internal padding, icon gaps. |
space-02 | 8px | Button padding-y, inline spacing. |
space-03 | 16px | Card padding, nav gap. |
space-04 | 24px | Section padding, component margins. |
space-05 | 32px | Hero padding, list gaps. |
space-06 | 48px | Section breaks, major dividers. |
space-07 | 64px | Page bottom, large callouts. |
Type tokens
| Token | Font | Size | Weight | Line |
|---|---|---|---|---|
display | Technor Light | 42px | 300 | 1.12 |
heading-1 | Inter Medium | 28px | 500 | 1.25 |
heading-2 | Inter Medium | 24px | 500 | 1.35 |
heading-3 | Inter Medium | 17px | 500 | 1.4 |
body | Inter Regular | 15px | 400 | 1.55 |
caption | Inter Regular | 12px | 400 | 1.4 |
mono | JetBrains Mono | 13px | 400 | 1.5 |
Component rules
These are the minimum specs for any BBLC-branded component in a web or product interface.
Primary
Background: Ink. Text: Paper. Padding: 11px 20px. Radius: 4px. Hover: Grid-dk background.
Outline
Background: transparent. Border: 1px Mist. Text: Ink. Hover: Mist fill.
Surface
Background: Paper. Border: 1px Mist. Radius: 6px. Padding: 26px. Hover: Grid border + subtle shadow.
Field
Border: 1px Steel. Radius: 4px. Padding: 12px 16px. Focus: Grid border.
Label
Mono font, uppercase, 10-11px, letter-spacing 0.12em. Use Grid-dk colour.
Data table
Borders: Mist. Header: Mono 11px uppercase. Rows alternate Paper / Mist-bleed.
Design handoff
When transferring to Figma, create variables for each token above. Name them using the same token names so developers can inspect and copy directly. Publish the variable set as "BBLC Brand Tokens" so all division files can consume it.
Recommended libraries: Inter, JetBrains Mono, and a Technor display font for hero treatments.