Lumen Docs

Color

Lumen uses a narrow, deliberate palette. All colors are defined as CSS custom properties in apps/web/app/globals.css and mirrored in apps/docs/app/globals.css.

Surface tokens

| Token | Value | Usage | |---|---|---| | --background | #ffffff | Page background | | --surface | #fafbfc | Sidebar, empty-state fills, subtle panel backgrounds | | --surface-2 | #f3f4f6 | Hover background on list items, code blocks, secondary panels |

Text tokens

| Token | Value | Usage | |---|---|---| | --text-primary | #0b0d12 | Headings, important body text | | --text-secondary | #374151 | Paragraph body text | | --text-muted | #6b7280 | Captions, placeholders, secondary labels |

Line tokens

| Token | Value | Usage | |---|---|---| | --line | #e5e7eb | Default borders, dividers | | --line-strong | #d1d5db | Hover state borders, inactive toggles |

Accent & status

| Token | Value | Usage | |---|---|---| | --accent | #2a6fdb | Primary actions, active nav, focus rings, links | | --accent-dim | rgba(42, 111, 219, 0.1) | Active nav fill, focus ring glow | | --error | #dc2626 | Destructive actions, validation errors | | --success | #16a34a | Success toasts, "deployed" badges |

Project colors

Projects have an individual color chosen from a fixed 7-swatch palette:

#2a6fdb  blue       (default)
#6b46c1  purple
#d97757  orange
#1f8a5b  green
#e0a020  yellow
#e04060  pink
#0b0d12  slate

Used as folder icon tint, breadcrumb dot, project card corner accent. Projects never use arbitrary hex values — the palette is hard-coded in features/projects/project-settings.tsx.

Rules

  • No arbitrary hex. If a color isn't in the tokens above or the project palette, it's wrong. Extend the token set with a PR rather than inlining.
  • Text on accent is always white (#ffffff) for WCAG contrast. Primary buttons use text-white not text-text-primary when bg-accent.
  • Dark mode not supported yet. Tokens assume light theme. A future dark mode will redefine the custom props inside .dark or @media (prefers-color-scheme: dark).

Example usage

<div className="bg-surface text-text-secondary border border-line">
  <span className="text-accent">Focus on this</span>
</div>

<button className="bg-accent text-white hover:opacity-90">
  Primary action
</button>

<p className="text-text-muted text-xs">
  Optional helper text
</p>

Never write className="text-[#2a6fdb]" — always use the token (text-accent).