BRB Design System

Boilerplate tokens, colors, and component samples — sourced from Figma Brand Guidelines.

Logos

Primary Marks

BRB Little B logo
Little B Minimal lettermark / favicon
svg png png @4x
BRB B Stamp logo
B Stamp Primary mark — circular badge
svg png png @4x
BRB B Stamp with tagline
B Stamp + Tagline Primary mark with tagline lockup
svg png png @4x
BRB small badge logo
Badge Small Compact badge for tight spaces
svg png png @4x
BRB full badge logo
Badge Full Full circular badge with text
svg png png @4x

On Muted Background

BRB Little B on muted
Little B On muted surface
BRB B Stamp on muted
B Stamp On muted surface
BRB Badge Full on muted
Badge Full On muted surface

Color Palette

Orange (Primary)

orange-100#ffdddb
orange-200#ffa59d
orange-300#ff634a
orange-400#d43800
orange-500#962500

Pink (Accent)

pink-100#ffd3dd
pink-300#ff4a8b
pink-400#d40067
pink-600#5a0027

Green (Secondary)

green-100#4affbd
green-200#00d598
green-500#00593e

Blue (Tertiary)

blue-100#d1dcff
blue-200#97b3ff
blue-300#4a8cff
blue-400#0068d4
blue-500#004694

Purple

purple-300#9293e2
purple-400#696ad4
purple-500#3f42be
purple-600#24267d

Yellow

yellow-100#ffeedd
yellow-base#ffbe4a
yellow-700#261800

Grey

grey-100#e6e4e4
grey-300#9f9493
grey-700#131010

Typography

Font Families

Display
Hanken Grotesk — ABCDEFGHIJKLM abcdefghijklm 0123456789
Mono
JetBrains Mono — ABCDEFGHIJKLM abcdefghijklm 0123456789

Type Scale

Display — 48px
.type-display Hanken Grotesk ExtraBold 48 / 1.1 -0.02em
Heading 1 — 36px
.type-h1 Hanken Grotesk ExtraBold 36 / 1.1 -0.02em
Heading 2 — 24px
.type-h2 Hanken Grotesk ExtraBold 24 / 1.083 -0.014em
Heading 3 — 20px
.type-h3 Hanken Grotesk Bold 20 / 1.083 -0.014em
Heading 4 — 16px
.type-h4 Hanken Grotesk SemiBold 16 / 1.083 -0.014em
Body — 14px · Nunc faucibus urna ac vestibulum suscipit. Curabitur vel id erat dapibus volutpat non at elit. Vestibulum vulputate euismod magna sit amet mattis.
.type-body Hanken Grotesk Regular 14 / 1.286 -0.014em
Body Medium — 14px · Duis tempus metus a elit convallis pretium. Curabitur euismod et lorem et ornare.
.type-body-medium Hanken Grotesk Medium 14 / 1.286 -0.014em
Small — 12px · Suspendisse pellentesque porttitor felis scelerisque feugiat.
.type-sm Hanken Grotesk Regular 12 / 1.286 -0.014em
Mono Detail — 10px · Model XR-2400 Mk II · Serial No. 004829-77A-2026
.type-mono JetBrains Mono Regular 10 / 1.6 uppercase
Mono Small — 12px · Battery - 4,200 mAh · Input - 100–240V ~ 50/60Hz
.type-mono-sm JetBrains Mono Regular 12 / 1.6
Mono Base — 14px · Output - 19.5V 3.33A · Storage - 1TB (usable 931GB)
.type-mono-base JetBrains Mono Regular 14 / 1.286

Usage Example (from Figma)

Lorem ipsum dolor sit,
consectetur adipiscing elit.

Nunc faucibus urna ac vestibulum suscipit. Curabitur vel id erat dapibus volutpat non at elit. Vestibulum vulputate euismod magna sit amet mattis. Duis tempus metus a elit convallis pretium. Curabitur euismod et lorem et ornare. Nunc commodo risus metus, in ornare metus semper vitae.

Model XR-2400 Mk II
Weight - 2.75 kg (6.06 lb)
Dimensions - 14.2" × 9.8" × 0.63"
Battery - 4,200 mAh
Input - 100–240V ~ 50/60Hz
Output - 19.5V 3.33A
Operating Temp - −10°C to 45°C
Storage - 1TB (usable 931GB)
Warranty - 2 years (24 months)
Serial No. - 004829-77A-2026

Type Token Reference

TokenValueUsage
--text-display3rem (48px)Hero headlines, splash screens
--text-h12.25rem (36px)Page titles
--text-h21.5rem (24px)Section headings
--text-h31.25rem (20px)Sub-section headings
--text-h41rem (16px)Card titles, labels
--text-body0.875rem (14px)Body copy, paragraphs
--text-sm0.75rem (12px)Captions, footnotes
--text-xs0.625rem (10px)Mono detail, fine print
--font-displayHanken GroteskHeadings, body, UI text
--font-monoJetBrains MonoData, specs, code, detail text
--weight-extrabold800Headings (Display–H2)
--weight-bold700H3, emphasis
--weight-semibold600H4, buttons, labels
--weight-medium500Body emphasis
--weight-regular400Body, mono, small text

Buttons

Filled

Outline

Ghost

Sizes

Pill

Disabled

Semantic Token Reference

TokenValuePreviewUsage
--color-primaryorange-300
CTAs, primary actions
--color-primary-lightorange-100
Hover tints, highlights
--color-primary-darkorange-500
Active states
--color-accentpink-300
Accents, badges, links
--color-secondarygreen-200
Success, confirmations
--color-tertiaryblue-300
Info, secondary actions
--color-textgrey-700
Body copy
--color-text-mutedgrey-300
Captions, hints
--color-surface-mutedgrey-100
Card backgrounds