Color

Birdpaper UI’s color system is built from functional colors and neutral colors. Functional colors communicate status and meaning; neutrals support text, backgrounds, borders, and other foundational UI surfaces. Light and dark modes each have their own variable set, so themes can switch cleanly.

Functional colors

Brand, success, warning, and danger semantic families — 10 steps each — for status and feedback.

Primary--bp-primary-6#165DFF

Main · 6

Neutral colors

Base steps for text, backgrounds, borders, and dividers — used most often.

Step usage guide

Levels by purpose for consistent, predictable semantics.

Light base

Steps 1 – 2

Backgrounds, tag fills

Border

Steps 3 – 4

Borders, dividers

Assist

Steps 5

Hover states, secondary elements

Main

Steps 6

Primary icons, text, and buttons

Interactive

Steps 7 – 8

Hover / active states

Deep

Steps 9 – 10

Dark text, dark backgrounds

Using variables

Prefer semantic variables; use RGB channel variables when you need opacity.

token.css

/* Basic usage */
color: var(--bp-primary-6);

/* With opacity */
background: rgba(var(--bp-primary-6-rgb), 0.1);

dark.css

/* Light mode */
--bp-primary-6: #165dff;

/* Dark mode (step direction reversed) */
--bp-primary-dark-6: #3c7eff;

Dark mode variables use a -dark- infix; the component library adapts via CSS variables, so apps usually need no manual switch.

Color ​