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.
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.