Colors
Brand palette, backgrounds, borders, text, status, and gradient tokens
| Token | Variable | Class | Dark | Light |
|---|---|---|---|---|
| Brand Primary brand colors used for CTAs, links, and accents. | ||||
| primary | --color-dg-primary | dg-primary | #13ef95 | #047857 |
| secondary | --color-dg-secondary | dg-secondary | #149afb | #0369a1 |
| Backgrounds Surface and background colors for layouts and cards. | ||||
| almost-black | --color-dg-almost-black | dg-almost-black | #050506 | #f8f9fa |
| default | --color-dg-background | dg-background | #0b0b0c | #ffffff |
| charcoal | --color-dg-charcoal | dg-charcoal | #1a1a1f | #f3f4f6 |
| solid | --color-dg-solid | dg-solid | #ffffff | #000000 |
| translucent | --color-dg-translucent | dg-translucent | rgba(0, 0, 0, 0.5) | rgba(255, 255, 255, 0.5) |
| Borders Border and divider colors for separating content. | ||||
| default | --color-dg-border | dg-border | #2c2c33 | #d1d5db |
| pebble | --color-dg-pebble | dg-pebble | #4e4e52 | #9ca3af |
| slate | --color-dg-slate | dg-slate | #949498 | #6b7280 |
| Text Text and typography colors for content hierarchy. | ||||
| default | --color-dg-text | dg-text | #fbfbff | #111827 |
| fog | --color-dg-fog | dg-fog | #edede2 | #1f2937 |
| platinum | --color-dg-platinum | dg-platinum | #e1e1e5 | #374151 |
| muted | --color-dg-muted | dg-muted | #949498 | #6b7280 |
| on-solid | --color-dg-on-solid | dg-on-solid | #000000 | #ffffff |
| Status Semantic colors for success, warning, and error states. | ||||
| success | --color-dg-success | dg-success | #12b76a | #15803d |
| warning | --color-dg-warning | dg-warning | #fec84b | #a16207 |
| danger | --color-dg-danger | dg-danger | #f04438 | #b91c1c |
Gradient
Brand gradient used for highlights and decorative elements.
| Variables | Dark | Light |
|---|---|---|
--color-dg-gradient-start #008fc1 --color-dg-gradient-end #00f099 |