Foundations | Colors - Typography - Spacing

Colors

The Bilberry color system defines how we use color for brand, surfaces, and text. Tokens keep colors consistent across components and make theme changes easier.

Overview

Bilberry uses a token-based color system. Base colors like primary, secondary, and purple-500 are defined in :root and reused across buttons, cards, backgrounds, borders, and text. Updating a token updates the entire interface.

Core tokens

  • --color-primary – main brand color (actions, headings).
  • --color-secondary – supporting accent color.
  • --color-purple-500 – highlight/accent for UI details.
  • --color-bg – page background.
  • --color-surface – card and panel surfaces.
  • --color-border-subtle – subtle borders and dividers.
  • --color-text – main body text.
  • --color-text-muted – labels, helper text, secondary info.

Best practices

Do

  • Use tokens instead of hard-coded hex values.
  • Use --color-primary for key actions and emphasis.
  • Use --color-bg and --color-surface to create clear layers.
  • Use --color-text-muted for labels and helper text.

Don’t

  • Don’t introduce random colors outside the token set.
  • Don’t use bright accents for large background areas.
  • Don’t rely only on color to show state; pair it with icons/text.

Color palette

These swatches show the main UI colors, each mapped to a design token.

Primary
--color-primary
#00008B
Accent
--color-accent
#7B8000
Purple 500
--color-purple-500
#581C87
Page background
--color-bg
#FFFFFF
Surface
--color-surface
#FFFFFF
Text
--color-text
#111827
Muted text
--color-text-muted
#4B5563
Subtle border
--color-border-subtle
#E5E7EB

Typography

Bilberry uses a single sans-serif typeface across the product. Font sizes and weights are defined as tokens so headings, body text, and labels stay consistent between Figma and code.

Heading 1 · Page titles
Analytics dashboard
font-size: var(--font-size-h1)
Heading 2 · Section titles
Recent databases
font-size: var(--font-size-h2)
Heading 3 · Card titles
Analytics database
font-size: var(--font-size-h3)
Body · Paragraph text
Tracks product analytics events and dashboard queries. Updated nightly.
font-size: var(--font-size-body)
Small · Labels & meta
Environment: Production · Status: Online
font-size: 14px

Spacing

Spacing tokens keep padding and gaps consistent across components. Each token represents a step on a simple 4 px scale, used for layout padding, grid gaps, and distances between elements.

Space 1
--space-1 · 4px
Space 2
--space-2 · 8px
Space 3
--space-3 · 12px
Space 4
--space-4 · 16px
Space 5
--space-5 · 20px
Space 6
--space-6 · 24px
Space 8
--space-8 · 32px
↑