Colors
There are 5 color scales in the system — Gray, Blue, Red, Green, and Amber. All colors are defined in OKLCH for perceptual uniformity. Click any swatch to copy its value.
Scales
An overview of every scale in the system. Each row is a continuous ramp from lightest to darkest.
Gray Scale
A 12-step neutral ramp built in OKLCH. Each step has a specific functional role in the UI — from app backgrounds to primary text.
Backgrounds
The two base layers of your UI. Background 1 is the default app canvas, Background 2 is a subtle secondary layer used sparingly for visual differentiation.
Component Backgrounds
Steps 3–5 provide the three interactive states for component backgrounds. If your component sits on Background 1, use Color 3 as default, Color 4 as hover, and Color 5 as active/pressed.
Borders
Steps 6–8 cover border weights from subtle dividers to prominent interactive outlines. Use Color 6 for subtle separators, Color 7 for UI borders, and Color 8 for hover/focus borders.
Solid Backgrounds
Steps 9–10 are high-contrast solid fills. Use these for badges, indicators, and strong visual anchors. Color 10 is the hover state for Color 9 fills.
Text & Icons
Steps 11–12 are reserved for text and iconography. Color 11 is for secondary, lower-emphasis text. Color 12 is the highest contrast value for headings and primary body text.
Accent Scales
Each accent provides a 9-step ramp. Steps 1–3 are backgrounds, 4–5 for borders and icons, 6–7 for solid fills, 8 for focus rings, and 9 for text on solid.
Blue
hue 260Red
hue 25Green
hue 155Amber
hue 85Semantic Tokens
Named tokens that map intent to color values. These tokens automatically adapt between light and dark modes.
Backgrounds
Foregrounds
Borders
Accent
Status
Color Pairs
Approved foreground/background combinations that meet WCAG AA contrast.
--pg-foreground
on --pg-background
--pg-foreground-secondary
on --pg-surface
--pg-accent-foreground
on --pg-accent
--pg-accent-foreground
on --pg-destructive
--pg-accent-foreground
on --pg-success
--pg-foreground
on --pg-warning
Usage Guidelines
Quick rules for applying colors consistently.
Component backgrounds
If your component sits on Background 1, use Color 3 as its default background, Color 4 on hover, and Color 5 on active/pressed. For smaller elements like badges, start from Colors 4–5.
Borders
Use Color 6 for subtle dividers and separators. Color 7 for default component borders. Color 8 for hover and focus states. Don't use gray text colors for borders.
Accent colors
Reserve pg-accent for primary actions and links. Use pg-destructive only for destructive actions. Use status colors (success, warning) for contextual feedback only.
Text hierarchy
Use foreground for headings and primary body text. foreground-secondary for supporting descriptions. foreground-muted for placeholders and hints. Never use more than 3 text levels in one view.