Colors

Eight L1 color palettes — neutral, violet (brand), blue (info), green (success), yellow (warning), red (danger), orange, cyan — each with 11 steps from 50 (lightest) to 950 (darkest). Primitives are immutable; theming happens by remapping L2 semantic tokens to different L1 palettes. Picking a brand color in the theme editor generates a new brand.* palette. Orange and cyan extend the palette into a full 8-hue rotation for the L2 categorical groups (data, code) used by charts and code blocks.

Colors Demo

All color primitives (L1). Semantic colors (L2) and component colors (L3) reference these.

Neutral

Warm grayscale. Base for backgrounds, text, borders.

50
--lb-neutral-50
100
--lb-neutral-100
200
--lb-neutral-200
300
--lb-neutral-300
400
--lb-neutral-400
500
--lb-neutral-500
600
--lb-neutral-600
700
--lb-neutral-700
800
--lb-neutral-800
900
--lb-neutral-900
950
--lb-neutral-950

Violet

Brand accent. Used for action/primary and focus indicators.

50
--lb-violet-50
100
--lb-violet-100
200
--lb-violet-200
300
--lb-violet-300
400
--lb-violet-400
500
--lb-violet-500
600
--lb-violet-600
700
--lb-violet-700
800
--lb-violet-800
900
--lb-violet-900
950
--lb-violet-950

Blue

Info status. Banners, toasts, informational messaging.

50
--lb-blue-50
100
--lb-blue-100
200
--lb-blue-200
300
--lb-blue-300
400
--lb-blue-400
500
--lb-blue-500
600
--lb-blue-600
700
--lb-blue-700
800
--lb-blue-800
900
--lb-blue-900
950
--lb-blue-950

Green

Success status. Positive confirmations.

50
--lb-green-50
100
--lb-green-100
200
--lb-green-200
300
--lb-green-300
400
--lb-green-400
500
--lb-green-500
600
--lb-green-600
700
--lb-green-700
800
--lb-green-800
900
--lb-green-900
950
--lb-green-950

Yellow

Warning status. Cautionary messaging.

50
--lb-yellow-50
100
--lb-yellow-100
200
--lb-yellow-200
300
--lb-yellow-300
400
--lb-yellow-400
500
--lb-yellow-500
600
--lb-yellow-600
700
--lb-yellow-700
800
--lb-yellow-800
900
--lb-yellow-900
950
--lb-yellow-950

Red

Danger status. Errors and destructive actions.

50
--lb-red-50
100
--lb-red-100
200
--lb-red-200
300
--lb-red-300
400
--lb-red-400
500
--lb-red-500
600
--lb-red-600
700
--lb-red-700
800
--lb-red-800
900
--lb-red-900
950
--lb-red-950

Orange

Categorical hue (45° on the colour wheel). Used by the L2 data palette as data.7 and by the code palette as code.7. Sits between red and yellow on the chart series rotation.

50
--lb-orange-50
100
--lb-orange-100
200
--lb-orange-200
300
--lb-orange-300
400
--lb-orange-400
500
--lb-orange-500
600
--lb-orange-600
700
--lb-orange-700
800
--lb-orange-800
900
--lb-orange-900
950
--lb-orange-950

Cyan

Categorical hue (205°). Used by the L2 data palette as data.8 and by the code palette as code.8. Sits between green and blue on the chart series rotation.

50
--lb-cyan-50
100
--lb-cyan-100
200
--lb-cyan-200
300
--lb-cyan-300
400
--lb-cyan-400
500
--lb-cyan-500
600
--lb-cyan-600
700
--lb-cyan-700
800
--lb-cyan-800
900
--lb-cyan-900
950
--lb-cyan-950