Lumen Docs

Lumen Design Docs

Design system, component library, and UI patterns for the Lumen AI Knowledge Base platform.

This track is for:

  • Designers tuning visual details in the Lumen app
  • Product folk picking a pattern for a new flow
  • Engineers who want to use the shared primitives correctly

Start here

  • Design principles — the 7 rules that keep Lumen feeling consistent
  • Color — the design tokens that everything maps to
  • Components — primitives you can use directly

What Lumen looks like

Clean, minimalist, workspace-style. White background, subtle surfaces (#fafbfc, #f3f4f6), blue accent (#2a6fdb), dark text. Tight spacing. Every top bar is exactly 52px tall. Every list row has an explicit height. No arbitrary hex values.

See the live app at ai-kb.zenmail.my.id and compare against the tokens in Color.

Rules that are non-negotiable

From AGENTS.md:

  • Always use <Tabs> primitive, never hand-roll tabs
  • Always use <Select>, never native <select>
  • Admin area is full-width (no max-w-* on content wrappers)
  • Top bars are h-[52px] with flex items-center
  • Reuse existing primitives before creating new ones

Violating these makes things inconsistent across the app. When Gani spots inconsistency, the whole pattern gets rebuilt. Save yourself the rework.

Patterns