Neutral Palettes

Professional grayscale systems for consistent UI elements.

The Importance of Neutrals

Neutral palettes are the unsung heroes of professional theme design. They provide the foundation for all non-data elements - 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 offers five carefully calibrated neutral palettes based on Tailwind's grayscale systems. Each palette has subtle undertones that affect the overall feel of your theme. Slate has cool blue undertones for a modern tech feel, while Stone offers warm undertones for a more organic appearance. These nuances might seem minor but significantly impact the perceived professionalism of your reports.

Available Neutral Palettes

Each neutral palette contains 10 shades from near-white to near-black, providing precise control over contrast and emphasis. The progression is perceptually uniform, meaning each step feels equally different from its neighbors, creating natural visual rhythm in your designs.

slate

Cool undertones - ideal for tech and corporate themes

gray

True neutral - works with any brand color

zinc

Slightly cool - modern and crisp appearance

neutral

Balanced - the safest choice for most themes

stone

Warm undertones - softer and more approachable

Application in Themes

Neutral colors map systematically to UI elements. The lightest shades (50-100) work as backgrounds and subtle fills. Mid-tones (200-400) handle borders, dividers, and disabled states. Darker shades (500-700) provide secondary text and icons. The darkest shades (800-950) are reserved for primary text and high-emphasis elements.

In dark mode, this mapping inverts intelligently. What was a light background becomes dark, but the relative relationships between elements remain consistent. Power UI handles this transformation automatically, ensuring your themes work beautifully in both light and dark environments without manual adjustment.

Next: Token System

Learn how semantic tokens create intelligent, adaptive themes.

Continue to Token System →