@vibe-labs/design-colors

Color tokens for the Vibe Design System — scales, status colors, neutrals, and optional palettes.

Usage

/* Core: neutral scale + status colors */
@import "@vibe-labs/design-colors";

/* Add individual color scales as needed */
@import "@vibe-labs/design-colors/scales/main/blue";
@import "@vibe-labs/design-colors/scales/main/red";

/* Alternative neutral scales */
@import "@vibe-labs/design-colors/scales/neutral/slate";

/* Optional palettes */
@import "@vibe-labs/design-colors/palettes/flatui";

Contents

Core (included in default import)

Neutral Scale (scales/neutral/scales-neutral.css)

Extended precision neutral scale in @layer vibe.tokens, with fine-grained dark-range stops:

--color-neutral-0 (white) → --color-neutral-1000 (black)

Standard stops: 0, 25, 50, 75, 100, 200, 300, 400, 450, 500, 550, 600, 650, 700, 750, 800, 825, 850, 875, 900, 950, 1000

Status Colors (scales/scales-status.css)

Each status color provides a 50–600 range:

Scale	Token pattern	Example 500
Success	--color-success-{50–600}	#1fae5d
Warning	--color-warning-{50–600}	#e68b33
Danger	--color-danger-{50–600}	#d64546
Info	--color-info-{50–600}	#00b3cc

Main Color Scales (opt-in)

Each provides a 50–900 range as --color-{name}-{stop}:

Import path	Token prefix
scales/main/blue	--color-blue-*
scales/main/brown	--color-brown-*
scales/main/cyan	--color-cyan-*
scales/main/green	--color-green-*
scales/main/indigo	--color-indigo-*
scales/main/orange	--color-orange-*
scales/main/pink	--color-pink-*
scales/main/purple	--color-purple-*
scales/main/red	--color-red-*
scales/main/teal	--color-teal-*
scales/main/yellow	--color-yellow-*

Alternative Neutral Scales (opt-in)

Import path	Description
scales/neutral/slate	Cool neutral (blue bias), 50–900 + 750/850
scales/neutral/zinc	Slightly warm neutral, 50–900
scales/neutral/stone	Soft earthy neutral, 50–900
scales/neutral/sand	Warm sand tones, 50–400
scales/neutral/charcoal	Deep darks only, 700–900

Palettes (opt-in)

Import path	Description
palettes/flatui	Flat UI color palette (original + American + British sets)

Dist Structure

File/Path	Description
index.css	Barrel — neutral scale + status colors
scales/neutral/	Neutral and alternative neutral scales
scales/scales-status.css	Status color tokens
scales/main/	Individual main color scales
palettes/	Optional color palettes

Build

npm run build