Theme
Customize the look and feel of your application with the Redpanda UI theme system.
Made by malinskibeniaminThe Redpanda UI theme provides a complete design system with CSS variables for easy customization. Built with a cohesive warm color palette using OKLCH color space, you can modify colors, spacing, and other design tokens to match your brand.
Colors
All color tokens in the system — text, background, outline, dividers, opacity overlays, and the base color scales that back them. Click any class name or swatch to copy it.
Text
Text color tokens for content, semantic states (success, warning, error, informative), actions, and inverse text for use on dark surfaces.
Semantic Pairs
Every base color with a matching *-foreground token — rendered as text on its companion background so the intended contrast is visible at a glance. Covers bg-primary / text-primary-foreground, bg-brand / text-brand-foreground, bg-destructive / text-destructive-foreground, and the full set of semantic and selection pairs.
Background
Background and surface tokens with interactive states (default, hover, pressed, disabled) plus static backgrounds for pages, cards, and overlays.
Outline
Outline tokens with 4 states (enabled, hover, pressed, disabled) across primary, semantic, and brand variants.
Dividers
Divider tokens for separating content areas, each with a hover variant for interactive contexts.
Sidebar
Tokens used by the sidebar component — the main surface, primary action, and accent, each paired with its foreground color.
Opacity
Tailwind's inline opacity syntax (bg-primary/20, text-foreground/80,
border-border/40) works on any color utility and is often the most
flexible way to apply transparency. Reach for the named tokens below when
you want a fixed, shared step — e.g. modal scrims or consistent overlay
surfaces across the app.
Transparent overlays and alpha values for subtle backgrounds across dark, light, primary, secondary, brand, informative, and destructive families.
Chart
Chart series colors (chart-1 through chart-5) for data visualization.
Color Scales
Base color values for building semantic tokens and custom components.
Typography
The type scale ships in the theme as single text-* utilities — each bundles font size, line-height, weight and tracking, so one class is a complete style you can apply to any element. See the Typography page for the full scale.
Composite styles never overload Tailwind's raw size scale (text-xs … text-5xl), so an existing text-sm is untouched. For a size with no weight or tracking, use that scale — extended down one step with text-2xs (10px) for dense tables and meta rows. For aligned columns of figures, compose tabular-nums onto any text style.
Borders & Elevation
Radius, width, and shadow utilities for consistent edge treatment and depth hierarchy.
Border
Radius and width utilities — from none through full — to keep edge treatment consistent across components.
Elevation
Shadow utilities for expressing depth and visual hierarchy, from subtle card shadows to floating modals.