How colors are actually used in langfuse-com-variables.css, organized by role. Each token lists the variable name, hex, and the situation it shows up in.
Background layers. Warm grey-beige system anchored on #edede8 (page) and #f6f6f3 (card). Dark surfaces reserved for code blocks; yellow for CTAs.
| Token | Hex | Used for |
|---|---|---|
| --surface-1 | #edede8 | Page background (warm off-white) |
| --surface-bg | #f6f6f3 | Primary card / panel surface |
| --surface-2 | #e5e5e1 | Sunken regions, hover backgrounds |
| --surface-beige-accent | #f1ede1 | Warm beige callouts & highlighted blocks |
| --surface-cta-primary | #fbff81 | Signature yellow CTA surface (hero, badges) |
| --surface-code | #333333 | Code block background |
| --surface-code-grey | #3d3d3d | Secondary code surface tone |
| --surface-code-button | #51504f | Code block action buttons |
| --surface-button-grey | #403d391a | Translucent button tint |
Three-tier ink hierarchy plus a disabled tone and a single chromatic link color (#4f39f6) — the only non-monochrome text token.
Body text uses --text-primary on --surface-bg.
--text-secondary — supporting copy, descriptions, captions.
--text-tertiary — metadata, timestamps, fine print.
Inline link colored with --text-links for outbound and contextual references.
--text-disabled — placeholder text, inactive controls.
| Token | Hex | Used for |
|---|---|---|
| --text-primary | #222220 | Headings, body copy, primary labels |
| --text-secondary | #3d3d38 | Supporting copy, paragraph descriptions |
| --text-tertiary | #6b6b66 | Captions, metadata, hints |
| --text-disabled | #a7a7a0 | Disabled controls, placeholder text |
| --text-links | #4f39f6 | Inline links, navigation accent |
| --text-code-secondary | #fffcf280 | Secondary code-block text (translucent) |
Static dividers and outlines. The default --line-structure draws nearly every border on the site; dashed dividers and the dark CTA border are reserved exceptions.
| Token | Hex | Used for |
|---|---|---|
| --line-structure | #cfcfc9 | Default borders, card outlines, dividers |
| --line-cta | #404039 | Dark CTA / primary button outline |
| --line-divider-dash | #bebeb6 | Dashed section dividers |
| --line-code-border | #333333 | Code block outline (matches surface) |
Semantic feedback colors. Designed for callout blocks, alerts, and inline status badges. Each desaturated to match Langfuse's overall low-chroma palette.
| Token | Hex | Used for |
|---|---|---|
| --callout-success | #538a2e | Success states, confirmation messages |
| --callout-error | #cc3314 | Errors, destructive actions, validation failures |
| --callout-warning | #e09d00 | Warnings, quota notices, deprecation |
| --callout-info | #b3abef | Informational notices, neutral updates |
| --callout-idea | #119da4 | Tips, recommendations |
Syntax highlighting + diff colors. Earthy palette matching the dark code surfaces — orange (strings), pink (keywords), blue (functions), plus green/pink diff markers.
| Token | Hex | Used for |
|---|---|---|
| --text-code-orange | #c17e2e | String literals, identifiers |
| --text-code-pink | #d05376 | Keywords |
| --text-code-blue | #438aa5 | Functions, operators |
| --color-fd-diff-add-symbol | #0ac864 | Diff "+" line marker |
| --color-fd-diff-add | #0eb4641a | Diff added line background |
| --color-fd-diff-remove-symbol | #e60a64 | Diff "−" line marker |
| --color-fd-diff-remove | #c80a641f | Diff removed line background |
| --button-icon-color | #6b6b66 | Icons in code-block action buttons |
Underlying shadcn/ui token layer. Stored as HSL components and paired with foregrounds. These are the lowest-level primitives — Langfuse's semantic tokens override most of them.
| Token | Value | Used for |
|---|---|---|
| --primary | hsl(222 47% 11%) | Default button, primary action |
| --primary-foreground | hsl(210 40% 98%) | Text on --primary |
| --secondary / --accent / --muted | hsl(214 32% 91%) | Secondary surfaces (all collapse to same hex) |
| --destructive | hsl(0 84% 60%) | Delete buttons, destructive confirmations |
| --background | hsl(0 0% 99%) | Root page background (shadcn override) |
| --foreground | hsl(222 84% 5%) | Root text color (shadcn override) |
| --card / --popover | hsl(0 0% 100%) | Card & popover surfaces |
| --border / --input / --ring | hsl(214 32% 91%) | All borders, input outlines, focus rings |
| --muted-foreground | #7a7a74 | Subdued text on muted surfaces |
Gain deep visibility into your traces.
Iterate prompts with full version history.
Score outputs with model-graded evals.
Langfuse is an open source LLM engineering platform that helps teams collaboratively debug, analyze, and iterate on their LLM applications.
Traces, evals, prompt management, and metrics to debug and improve your LLM application.
Yes — every feature is independently usable. Start with tracing and adopt the rest later.
Self-host, Langfuse Cloud (US / EU / Japan), or run locally for development.