Scalable Responsive Color Table

Explore background / foreground pairs, preview real UI components, and export ready-to-use CSS tokens.

Start with a story

On mobile, begin with how you want your interface to feel. We'll suggest colors and show the preview below.

Step 2 · Choose a base color

Pick a story above to see suggested background colors.

Step 3 · Tune the foreground

After you choose a base, scroll sideways and tap a foreground chip to try it.

Use the story steps above or click on a color cell to preview its UI components.