Appearance
Design Tokens (Variables)
Digital Delve UI uses CSS custom properties defined at the beginning of the css library. Always try and use these variables before creating new values.
Brand & Intent Colors
Each intent color has a full scale: base, foreground (-fg), hint, hover, and active.
| Variable | Value | Description |
|---|---|---|
--primary | #0247fe | Primary brand color |
--accent | #f66429 | Accent brand color (orange) |
--success | #059669 | Positive / success states |
--warning | #e1b12c | Cautionary / warning states |
--danger | #e84118 | Destructive / error states |
--info | #0097e6 | Informational states |
--neutral | #6b7280 | Secondary / generic actions |
Color Scale
Each color also exposes derived tokens for foreground text, tinted backgrounds, and interactive states:
| Suffix | Example | Purpose |
|---|---|---|
| (base) | --primary | Fill color for backgrounds, borders, icons |
-fg | --primary-fg | Foreground text color on that fill (#fff) |
-hint | --primary-hint | Lightly tinted background (alerts, badges) |
-hover | --primary-hover | Lightened fill on hover |
-active | --primary-active | Darkened fill on active/press |
css
background: var(--success);
color: var(--success-fg);
/* Tinted background for an alert */
background: var(--danger-hint);
color: var(--danger);Theme Variables
These tokens automatically switch between light and dark values. Use them for all UI surfaces, text, and borders.
| Variable | Light | Dark | Description |
|---|---|---|---|
--bg | #f5f6fa | #010101 | Page background |
--surface | #fff | #1c1c1a | Card and panel backgrounds |
--surface-alt | #f1f3f5 | #242424 | Alternate surface (hover rows, nested panels) |
--border | #e5e7eb | #2a2a33 | Borders and dividers |
--text | #1a1a2e | #f1f1f5 | Primary body text |
--text-muted | #666 | #9a9aa8 | Secondary / supporting text |
--text-hint | #9a9aa8 | #666 | Placeholder and hint text |
Dark Mode
Dark mode is applied automatically via prefers-color-scheme: dark. It can also be forced by adding data-theme="dark" (or locked to light with data-theme="light") on the root element.
html
<html data-theme="dark">…</html>Typography
| Variable | Value | Description |
|---|---|---|
--font | system-ui, -apple-system, "Segoe UI", sans-serif | Body and UI text |
--font-header | -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif | Headings |
See Base Styles for the heading size scale and body defaults.