Colors

All colors are defined as CSS custom properties in two layers: primitive tokens (raw palette values) and semantic tokens (contextual mappings that change between light and dark mode).

Source files:

• packages/shared/tokens/primitives.css — raw palette
• packages/shared/tokens/semantic.css — light/dark semantic mappings
• packages/shared/styles/theme.css — Tailwind v4 @theme inline bindings

---

Brand Primary — Blue

The blue palette is Prosper’s primary brand color, anchored at --color-blue-600 (#2b00ff).

Token	Value	Preview
--color-blue-50	#ecf3ff
--color-blue-100	#d9e7ff
--color-blue-200	#bbd3ff
--color-blue-300	#8ab8ff
--color-blue-400	#4059ff
--color-blue-500	#3220ff
--color-blue-600	#2b00ff
--color-blue-700	#2100d2
--color-blue-800	#1a1ba5
--color-blue-900	#0d0d0e
--color-blue-950	#070708

---

Neutral — Gray

Token	Value	Preview
--color-gray-50	#f9fafb
--color-gray-100	#f3f4f6
--color-gray-200	#e5e7eb
--color-gray-300	#d1d5db
--color-gray-400	#9ca1a9
--color-gray-500	#6e747b
--color-gray-600	#4e535a
--color-gray-700	#3c4047
--color-gray-800	#1f2937
--color-gray-900	#13181d
--color-gray-950	#030712

---

Status Colors

Red (Destructive)

Token	Value	Preview
--color-red-50	#fef2f2
--color-red-100	#fee2e2
--color-red-500	#ef4444
--color-red-600	#dc2626
--color-red-700	#b91c1c

Green (Success)

Token	Value	Preview
--color-green-50	#f0fdf4
--color-green-100	#dcfce7
--color-green-500	#22c55e
--color-green-600	#16a34a
--color-green-700	#15803d

Yellow (Warning)

Token	Value	Preview
--color-yellow-50	#fefce8
--color-yellow-100	#fef9c3
--color-yellow-500	#eab308
--color-yellow-600	#ca8a04
--color-yellow-700	#a16207

---

Semantic Color Mappings

These tokens map primitives to contextual roles. They change between light and dark mode.

Backgrounds

Semantic Token	Light	Dark
--background	white	gray-900
--background-secondary	gray-50	gray-800
--background-tertiary	gray-100	gray-700
--background-inverse	gray-900	white

Foregrounds / Text

Semantic Token	Light	Dark
--foreground	gray-900	gray-50
--foreground-secondary	gray-700	gray-200
--foreground-tertiary	gray-500	gray-400
--foreground-muted	gray-400	gray-500

Brand

Semantic Token	Light	Dark
--primary	blue-600	blue-500
--primary-hover	blue-700	blue-400
--primary-active	blue-800	blue-300
--primary-foreground	white	gray-900

Surfaces

Semantic Token	Light	Dark
--card	white	gray-800
--card-foreground	gray-900	gray-50
--popover	white	gray-800
--muted	gray-100	gray-800
--muted-foreground	gray-600	gray-400
--accent	gray-100	gray-800
--secondary	gray-100	gray-800

Borders

Semantic Token	Light	Dark
--border	gray-200	gray-700
--border-secondary	gray-300	gray-600
--ring	blue-600	blue-500

Status

Semantic Token	Light	Dark
--success	green-600	green-500
--warning	yellow-600	yellow-500
--destructive	red-600	red-500

---

Tailwind Usage

Semantic tokens are exposed to Tailwind via @theme inline in theme.css:

@theme inline {
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  /* ... etc. */
}

Use them with standard Tailwind utilities:

<div className="bg-primary text-primary-foreground" />
<div className="bg-card text-card-foreground border-border" />
<span className="text-muted-foreground" />