Langfuse — design system & UI screens

AI · 1 screen · 13 sections · https://langfuse.com/

Light docs-style landing with a left resource sidebar; a highlighter-yellow headline, a model cost-and-latency tracking dashboard, and a customer logo wall (Twilio, Khan Academy, Cisco, Intuit).

Open in Mozaika →

This is a static, crawlable rendering for search & AI engines. The interactive version — filters, live decode console, copy & export — is at https://mozaika.design/website/langfuse.

Decoded design system

Langfuse's decoded design system: background #EDEDE8, text #020817, accent #1863DC, link #020817, primary #1863DC; type scale h1 68px / h2 32px / body 18px; 4px spacing base; 2px base radius. The single interactive/action color is #1863DC — used only on interactive or must-notice elements (buttons, links, key highlights), never on large fills.

Color roles

Role	Value
bg	`#EDEDE8`
surface	`#DEDFDB`
border	`#C9CAC8`
text	`#020817`
text_muted	`#5B5F66`
primary	`#1863DC`
accent	`#1863DC`
link	`#020817`
secondary	`#4E4B66`
button_bg	`#1863DC`
button_text	`#FFFFFF`

Using these colors

Action color #1863DC — the single interactive color; only on things you click or must notice, never large fills.
primary, accent, button_bg are all #1863DC — one role, not several (the action color).
accent #1863DC — THE accent / action color — interactive & must-notice only (buttons, links, focus, one key highlight); never large fills or backgrounds. Scarcity is what makes it read as designed.
link #020817 — inline text links and link-styled controls.
secondary #4E4B66 — optional secondary accent — LOW decode confidence; use rarely (a status color or a single decorative moment) or omit it entirely. Prefer one accent unless the reference clearly shows two.

Typography

Heading: Inter
Body: Inter
h1: 68px
h2: 32px
body: 18px

Spacing

base unit: 4px
scale: 2px, 4px, 6px, 8px, 12px, 16px, 24px, 32px

Radii

base: 2px
button: 2px

Full design system, per-section tokens & DESIGN.md / Tailwind / CSS exports →