Colors
Color tokens for the Sourceful Design System.
Brand colors
Our core brand palette with full shade ranges.
Green
Primary brand color, used for actions and links
50
#f0fdf4
100
#dcfce7
200
#bbf7d0
300
#86efac
400
#4ade80
500
#22c55e
600
#16a34a
700
#15803d
800
#166534
900
#14532d
Gray
Neutral tones for text, backgrounds, and borders
50
#f9fafb
100
#f3f4f6
200
#e5e7eb
300
#d1d5db
400
#9ca3af
500
#6b7280
600
#4b5563
700
#374151
800
#1f2937
900
#111827
950
#0a0a0a
Yellow
Energy accent color, used for highlights and warnings
50
#fffce8
100
#fff8c2
200
#fff089
300
#ffe545
400
#FFD500
500
#e6c000
600
#cc9f00
700
#a37700
Semantic colors
Purpose-based colors that adapt between light and dark modes.
| Token | Usage | Light | Dark |
|---|---|---|---|
| --background | Page background | #ffffff | #0a0a0a |
| --foreground | Primary text | #111827 | #ffffff |
| --primary | Primary actions, links | #16a34a | #00FF84 |
| --secondary | Secondary elements | #f3f4f6 | #1f2937 |
| --muted | Muted backgrounds | #f3f4f6 | #1f2937 |
| --accent | Hover states | #e8f5e9 | #1a3d1a |
| --destructive | Error states | #FF0D0D | #FF0D0D |
Usage
{/* Semantic colors (theme-aware) */}
<div className="bg-background text-foreground" />
<div className="bg-primary text-primary-foreground" />
{/* Brand colors (fixed) */}
<div className="bg-sourceful-green-500" />
<div className="text-sourceful-yellow-400" />
{/* With opacity */}
<div className="bg-primary/50" />
<div className="border-sourceful-green-500/20" />