Neutral Palettes
Semantic grayscale systems for consistent UI elements.
The Importance of Neutrals
Neutral palettes provide the foundation for all non-data elements in your reports - backgrounds, borders, text, shadows, and dividers. A well-crafted neutral palette ensures your data colors stand out while maintaining readability and visual hierarchy throughout your reports.
Power UI uses Radix UI Colors for its neutral palette system. Each palette has 12 semantic steps with carefully calibrated values for both light and dark modes. The subtle undertones in each palette affect the overall feel of your theme - Slate has cool blue undertones for a modern tech feel, while Sand offers warm undertones for a softer appearance.
The 12-Step Scale
Unlike traditional grayscale systems with arbitrary shade numbers, Radix uses a semantic 12-step scale where each step has a specific purpose:
| Steps | Purpose |
|---|---|
| 1-2 | App backgrounds, subtle surfaces |
| 3-5 | Interactive component backgrounds (hover, active states) |
| 6-8 | Borders, separators, subtle UI elements |
| 9-10 | Solid backgrounds, high-contrast elements |
| 11-12 | Text colors (secondary and primary) |
This semantic approach means you don't need to memorize color values. Step 1 is always the lightest background, step 12 is always the darkest text. The system automatically provides appropriate contrast ratios for accessibility.
Available Palettes
Power UI includes seven neutral palettes from Radix UI Colors. Each is shown below in its light mode values, with all 12 steps from lightest (1) to darkest (12):
gray
Pure neutral - works with any brand color
mauve
Purple undertone - elegant and refined
slate
Blue undertone - modern tech aesthetic
sage
Green undertone - natural and calm
olive
Yellow-green undertone - earthy warmth
sand
Warm undertone - soft and approachable
gold
Golden undertone - luxurious and warm
Light and Dark Mode
Each Radix palette includes separate values for light and dark modes, designed to maintain consistent contrast relationships. When you switch modes, step 1 remains the "background" color and step 12 remains the "text" color - but the actual values adjust appropriately for each mode.
Power UI handles this automatically through the token system. When you use semantic tokens like @bg-primary or @text-secondary, they resolve to the correct neutral step for your current mode. This means themes you create work beautifully in both light and dark environments without manual adjustment of individual colors.
Choosing a Neutral Palette
The right neutral palette depends on your brand and content. Gray is the safest choice, working well with any brand color. Slate pairs naturally with blue-based brands and tech aesthetics. Sand and Gold create warmer, more approachable feels. Sage and Olive work well with environmental or health-focused content. Mauve adds a touch of sophistication with its purple undertone.
When in doubt, start with Gray or Slate - they're the most versatile options. You can always experiment with other palettes later. The live preview makes it easy to see how different neutrals affect your overall theme.