Styling

Visual reference of Luma's semantic design tokens. These tokens power all components and can be customized via CSS variables. See the Customizing page for implementation details.

Tailwind-First Philosophy

Luma leverages Tailwind's utility system with semantic design tokens. This provides unmatched flexibility and a familiar developer experience—if you know Tailwind, you know Luma.

Key Benefits:

  • ✓Customize with CSS variables: Change one token, update all components
  • ✓Standard Tailwind utilities:bg-primary, text-foreground, rounded-md just work
  • ✓No learning curve: Familiar Tailwind patterns
  • ✓Runtime theming: Override tokens without rebuilding

Why Semantic Tokens?

Luma uses semantic tokens instead of hundreds of component-specific tokens. This dramatically simplifies customization while maintaining full design flexibility.

✓ Simple customization

Change 1 token, update all components that use it

✓ Predictable behavior

bg-primary means the same everywhere

✓ Zero bloat

Standard Tailwind utilities, no custom classes

✓ Designer-friendly

Semantic names like "primary", "success", "muted"

Design Tokens

Visual reference of all design tokens. For implementation details and CSS variable names, see the Customizing page.

Primary Color Scale

12-step color scale for nuanced color usage. Step 5 is the base brand color used in buttons and primary actions.

1
2
3
4
5
6
7
8
9
10
11
12

Gray Scale

Theme-independent neutral colors for structural elements like borders, dividers, and backgrounds.

1
2
3
4
5
6
7
8
9
10
11
12

Surface Colors

Background and foreground colors for app surfaces and elevated elements like popovers.

1
2
3
4

Semantic State Colors

Colors for destructive, warning, and success states with paired foreground colors for text.

1
2
3
4
5
6

Border Radius

6 radius values for consistent rounded corners across all components.

Radius 1 - Minimal (2px) 

.element {
  border-radius: var(--radius-1);
}

Radius 2 - Small (4px) - badges, pills 

.badge {
  border-radius: var(--radius-2);
}

Radius 3 - Medium-small (6px) - tooltips 

.tooltip {
  border-radius: var(--radius-3);
}

Radius 4 - Medium (8px) - buttons, inputs 

.button {
  border-radius: var(--radius-4);
}

Radius 5 - Large (12px) - cards 

.card {
  border-radius: var(--radius-5);
}

Radius 6 - Extra large (16px) - modals 

.modal {
  border-radius: var(--radius-6);
}

Shadows

6 elevation levels for creating depth hierarchy in your interface.

Shadow 1 - Subtle inset - input fields 

.input {
  box-shadow: var(--shadow-1);
}

Shadow 2 - Minimal elevation - default cards 

.card {
  box-shadow: var(--shadow-2);
}

Shadow 3 - Low elevation - elevated cards 

.card:hover {
  box-shadow: var(--shadow-3);
}

Shadow 4 - Medium elevation - toasts, dropdowns 

.toast {
  box-shadow: var(--shadow-4);
}

Shadow 5 - High elevation - popovers 

.popover {
  box-shadow: var(--shadow-5);
}

Shadow 6 - Maximum elevation - modals 

.modal {
  box-shadow: var(--shadow-6);
}

Typography

Base font family with fallback stack for consistent typography.

The quick brown fox jumps over the lazy dog

Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif