Colors

A gorgeous, accessible color system for user interfaces.These are all the color scales used across the Poolar application. Each scale follows the Radix Colors 12-step pattern, progressing from subtle backgrounds (steps 1-2) through interactive states (3-5), borders (6-8), solid fills (9-10), to high-contrast text (11-12).Poolar (the brand accent) and Slate are custom scales defined specifically for this application. The remaining scales (Amber, Red, Green, Sky) use their default values from Radix UI. Hover over any swatch to inspect its CSS variable and resolved hex value.

Slate

Custom

Slate

Slate Dark

Amber

Amber Dark

Poolar

Custom

Poolar

Poolar Dark

Red

Red Dark

Green

Green Dark

Sky

Sky Dark