Templates

Lumen ​

Lumen is a design language for an LLM observability and cost dashboard, from a concept by Imran (https://x.com/imimran04/status/2106637533744624116). The idea: teams see cost, tokens and latency on day one, not when the invoice arrives. Warm off-white app inside a cool gray frame, rounded cards, quiet borders, one near-black primary action, and one color per model.

Colors ​

Ink
#17171a
Text
#25262b
Muted
#74767d
Page
#eceef1
App
#fbfbfa
Surface
#ffffff
Border
#e7e7e9
Purple (gpt-4o)
#7c6cf0
Yellow (claude)
#f5b800
Cyan (gemini)
#0fb0ea
Amber (up, brand)
#e08a1e
Green (down, good)
#1b9a4b
Warning
#d9770a
Danger
#d23b3b

Model series colors are stable everywhere: purple, yellow, cyan. Amber marks an increase (cost and usage going up is a warning), green marks a decrease in cost or latency.

Dark mode ​

A dark theme built from the same palette: the near-black ink becomes the app background, surfaces step up one level, and borders get darker. Model colors keep their hue (purple a touch lighter, cyan a touch brighter). Status colors use a lighter step and their soft backgrounds become 14% tints. The primary button flips: light ink with dark text. Use the Dark mode button at the bottom right of any Lumen page; the choice is saved in the browser.

Ink (strong text, primary button)
#f4f4f5
Text
#d6d7db
Muted
#9a9ca4
Page frame
#0e0e10
App
#17171a
Surface
#1f2024
Border
#2e3036
Purple (gpt-4o)
#8f80f3
Yellow (claude)
#f5b800
Cyan (gemini)
#2cbcf0
Amber (up, brand)
#f09a35
Green (down, good)
#3ccf75
Warning
#f0a03a
Danger
#ef6b6b

Rules: keep one color per model in both themes, never use pure black or pure white for surfaces, and keep the amber up and green down meaning.

Typography ​

Welcome back, Alex
Page title - Plus Jakarta Sans 600, 22 to 26 px
$2,484.00
Big number - 600, 26 to 28 px, tabular digits
Cost over time
Card title - 600, 15 px. Body 13 px, secondary text muted.

Rules ​

  1. One color per model, the same in charts, legends, rows and tooltips.
  2. Direction colors: amber up, green down. Never red for normal growth.
  3. KPI tiles have a light gray footer with the comparison period.
  4. Cards have a title row with a right-side control: tabs, a link or a menu.
  5. Lists use a bordered icon tile, a title, one line of context and a mono-style meta line.

Bootstrap 6 component set ​

The extended Bootstrap gallery uses Bootstrap 6.0.0-alpha.1 (pinned with integrity hashes) and Lumen tokens in lumen-theme.css. Umail is the reference for standalone delivery; Lumen exposes the same stack at /lumen-template/ and embeds the gallery on Components: Bootstrap set. Chart and dashboard Vue demos keep their existing Motion animations; the BS6 surface respects prefers-reduced-motion.

Pages ​

Components, Charts (animated chart patterns) and the Overview, Traces, Agents and Evals examples. More pages are added as the template grows: Prompts, Playground, Gateway, Cost and Budget, API Keys, Team, Settings.