Theme

Dark

Light

Dark

Light

Dark

Light

Radix Colors for Framer

Radix Colors for Framer

Radix Colors for Framer

All 31 themes with 12-step color scales. That's 372 color styles in light and dark mode.
With documentation. And link styles.
I threw in some text styles as well (but they are not documented).

"I'm doing this so you don't have to."

How to use

How to use

How to use

Steps 1-2: Backgrounds
Steps 1-2: Backgrounds
Steps 1-2: Backgrounds

Steps 1 and 2 are designed for app backgrounds and subtle component backgrounds. You can use them interchangeably, depending on the vibe you're going for.

Steps 3-5: Component backgrounds
Steps 3-5: Component backgrounds
Steps 3-5: Component backgrounds

Steps 3, 4, and 5 are designed for UI component backgrounds. Step 3 is for normal, step 4 is for hover and step 5 is for pressed or selected states.

Steps 6-8: Borders
Steps 6-8: Borders
Steps 6-8: Borders

Steps 6, 7, and 8 are designed for borders. Step 6 is designed for subtle borders on components which are not interactive. For example sidebars, headers, cards, alerts, and separators. Step 7 is designed for subtle borders on interactive components. Step 8 is designed for stronger borders on interactive components and focus rings.

Steps 9-10: Solid backgrounds
Steps 9-10: Solid backgrounds
Steps 9-10: Solid backgrounds

Steps 9 and 10 are designed for solid backgrounds. Step 9 has the highest chroma of all steps in the scale. In other words, it's the purest step, the step mixed with the least amount of white or black. Because 9 is the purest step, it has a wide range of applications: Website/App backgrounds, Website section backgrounds, Header backgrounds, Component backgrounds, Graphics/Logos, Overlays, Coloured shadows, Accent borders. Step 10 is designed for component hover states, where step 9 is the component's normal state background.

Steps 11-12: Text
Steps 11-12: Text
Steps 11-12: Text

Steps 11 and 12 are designed for text. Step 11 is designed for low-contrast text. Step 12 is designed for high-contrast text.

Gray Scales

Gray Scales

Gray Scales

Backgrounds


BGs

Interactive components

Interactive
components

Borders and separators

Borders
and separators

Solid colors

Solid
colors

Accessible text

Accessible
text

Gray

Gray

Gray

Mauve

Mauve

Mauve

Slate

Slate

Slate

Sage

Sage

Sage

Olive

Olive

Olive

Sand

Sand

Sand

Color Scales

Color Scales

Color Scales

Backgrounds


BGs

Interactive components

Interactive
components

Borders and separators

Borders
and separators

Solid colors

Solid
colors

Accessible text

Accessible
text

Tomato

Tomato

Tomato

Red

Red

Red

Ruby

Ruby

Ruby

Crimson

Crimson

Crimson

Pink

Pink

Pink

Plum

Plum

Plum

Purple

Purple

Purple

Violet

Violet

Violet

Iris

Iris

Iris

Indigo

Indigo

Indigo

Blue

Blue

Blue

Cyan

Cyan

Cyan

Teal

Teal

Teal

Jade

Jade

Jade

Green

Green

Green

Grass

Grass

Grass

Bronze

Bronze

Bronze

Gold

Gold

Gold

Brown

Brown

Brown

Orange

Orange

Orange

Amber

Amber

Amber

Yellow

Yellow

Yellow

Lime

Lime

Lime

Mint

Mint

Mint

Sky

Sky

Sky