Support
All support for the Relume is provided through Slack. To get assistance, please join our Slack community and send a preview link of your Webflow project along with a description of your problem to one of our experts. We will review your issue and guide you through a solution.

For account-related issues, please contact [email protected].
We're performing some maintenance. If you're experiencing any issues please reach out via Slack
Go to Slack
Your payment method has expired. Update your billing details to regain access to premium features.
Manage Billing
Now open!
Vote on new
Relume components
Vote on what components you'd like to see added to our roadmap next month.

Unlock 1k+ Premium components

Site Builder full access
Relume Figma Kit
Unlock all Webflow Library
Try it free for 7 days
Our plans cost less than 1%* of your next project and can save you half the time to deliver it.
Get started
1. Clone the Style Guide
Clone the Relume Library Style Guide on Webflow before starting a project.
2. Copy component
3. Paste in to project
Learn more

Neutrals

Neutrals are the foundation of the color system. Almost everything in UI design — text, form fields, backgrounds, dividers — use Neutral colors.
Color Sample
Gray
color-samples/rl-styleguide_color-sample-gray
color-samples/rl-styleguide_color-sample-gray
Color Sample
Gray Blue
color-samples/rl-styleguide_color-sample-grayblue
color-samples/rl-styleguide_color-sample-grayblue
Color Sample
Gray Cool
color-samples/rl-styleguide_color-sample-graycool
color-samples/rl-styleguide_color-sample-graycool
Color Sample
Gray Modern
color-samples/rl-styleguide_color-sample-graymodern
color-samples/rl-styleguide_color-sample-graymodern
Color Sample
Gray Neutral
color-samples/rl-styleguide_color-sample-grayneutral
color-samples/rl-styleguide_color-sample-grayneutral
Color Sample
Gray Iron
color-samples/rl-styleguide_color-sample-grayiron
color-samples/rl-styleguide_color-sample-grayiron
Color Sample
Gray True
color-samples/rl-styleguide_color-sample-graytrue
color-samples/rl-styleguide_color-sample-graytrue
Color Sample
Gray Warm
color-samples/rl-styleguide_color-sample-graywarm
color-samples/rl-styleguide_color-sample-graywarm

Primary, Secondary & Accent Colors

Primary colors are the main colors that make up the majority of the colors used in the design system. Secondary and Accent colors are used sparingly in components such as pills, alerts and labels.
Color Sample
Moss
color-samples/rl-styleguide_color-sample-moss
color-samples/rl-styleguide_color-sample-moss
Color Sample
Green Light
color-samples/rl-styleguide_color-sample-greenlight
color-samples/rl-styleguide_color-sample-greenlight
Color Sample
Green
color-samples/rl-styleguide_color-sample-green
color-samples/rl-styleguide_color-sample-green
Color Sample
Green True
color-samples/rl-styleguide_color-sample-greentrue
color-samples/rl-styleguide_color-sample-greentrue
Color Sample
Teal
color-samples/rl-styleguide_color-sample-teal
color-samples/rl-styleguide_color-sample-teal
Color Sample
Cyan
color-samples/rl-styleguide_color-sample-cyan
color-samples/rl-styleguide_color-sample-cyan
Color Sample
Blue Light
color-samples/rl-styleguide_color-sample-bluelight
color-samples/rl-styleguide_color-sample-bluelight
Color Sample
Blue
color-samples/rl-styleguide_color-sample-blue
color-samples/rl-styleguide_color-sample-blue
Color Sample
Blue Dark
color-samples/rl-styleguide_color-sample-bluebluedark
color-samples/rl-styleguide_color-sample-bluebluedark
Color Sample
Indigo
color-samples/rl-styleguide_color-sample-indigo
color-samples/rl-styleguide_color-sample-indigo
Color Sample
Purple
color-samples/rl-styleguide_color-sample-purple
color-samples/rl-styleguide_color-sample-purple
Color Sample
Violet
color-samples/rl-styleguide_color-sample-violet
color-samples/rl-styleguide_color-sample-violet
Color Sample
Purple True
color-samples/rl-styleguide_color-sample-purpletrue
color-samples/rl-styleguide_color-sample-purpletrue
Color Sample
Fuchsia
color-samples/rl-styleguide_color-sample-fuchsia
color-samples/rl-styleguide_color-sample-fuchsia
Color Sample
Pink
color-samples/rl-styleguide_color-sample-pink
color-samples/rl-styleguide_color-sample-pink
Color Sample
Rosé
color-samples/rl-styleguide_color-sample-rose
color-samples/rl-styleguide_color-sample-rose
Color Sample
Red
color-samples/rl-styleguide_color-sample-red
color-samples/rl-styleguide_color-sample-red
Color Sample
Orange Dark
color-samples/rl-styleguide_color-sample-orangedark
color-samples/rl-styleguide_color-sample-orangedark
Color Sample
Orange
color-samples/rl-styleguide_color-sample-orange
color-samples/rl-styleguide_color-sample-orange
Color Sample
Yellow Dark
color-samples/rl-styleguide_color-sample-yellowdark
color-samples/rl-styleguide_color-sample-yellowdark
Color Sample
Yellow
color-samples/rl-styleguide_color-sample-yellow
color-samples/rl-styleguide_color-sample-yellow

Semantic Colors

Semantic colors are used to communicate standard value states (such as error, success, or warning).
Color Sample
Green Light
color-samples/rl-styleguide_color-sample-greenlight
color-samples/rl-styleguide_color-sample-greenlight
Color Sample
Green
color-samples/rl-styleguide_color-sample-green
color-samples/rl-styleguide_color-sample-green
Color Sample
Green True
color-samples/rl-styleguide_color-sample-greentrue
color-samples/rl-styleguide_color-sample-greentrue
Color Sample
Red
color-samples/rl-styleguide_color-sample-red
color-samples/rl-styleguide_color-sample-red
Color Sample
Yellow Dark
color-samples/rl-styleguide_color-sample-yellowdark
color-samples/rl-styleguide_color-sample-yellowdark
Color Sample
Yellow
color-samples/rl-styleguide_color-sample-yellow
color-samples/rl-styleguide_color-sample-yellow

Neutrals

Neutrals are the foundation of the color system. Almost everything in UI design — text, form fields, backgrounds, dividers — use Neutral colors.
Background Color
Gray
background-colors/rl-styleguide_background-color-gray
background-colors/rl-styleguide_background-color-gray
Background Color
Gray Blue
background-colors/rl-styleguide_background-color-grayblue
background-colors/rl-styleguide_background-color-grayblue
Background Color
Gray Cool
background-colors/rl-styleguide_background-color-graycool
background-colors/rl-styleguide_background-color-graycool
Background Color
Gray Modern
background-colors/rl-styleguide_background-color-graymodern
background-colors/rl-styleguide_background-color-graymodern
Background Color
Gray Neutral
background-colors/rl-styleguide_background-color-grayneutral
background-colors/rl-styleguide_background-color-grayneutral
Background Color
Gray Iron
background-colors/rl-styleguide_background-color-grayiron
background-colors/rl-styleguide_background-color-grayiron
Background Color
Gray True
background-colors/rl-styleguide_background-color-graytrue
background-colors/rl-styleguide_background-color-graytrue
Background Color
Gray Warm
background-colors/rl-styleguide_background-color-graywarm
background-colors/rl-styleguide_background-color-graywarm

Primary, Secondary & Accent Colors

Primary colors are the main colors that make up the majority of the colors used in the design system. Secondary and Accent colors are used sparingly in components such as pills, alerts and labels.
Background Color
Moss
background-colors/rl-styleguide_background-color-moss
background-colors/rl-styleguide_background-color-moss
Background Color
Green Light
background-colors/rl-styleguide_background-color-greenlight
background-colors/rl-styleguide_background-color-greenlight
Background Color
Green
background-colors/rl-styleguide_background-color-green
background-colors/rl-styleguide_background-color-green
Background Color
Green True
background-colors/rl-styleguide_background-color-greentrue
background-colors/rl-styleguide_background-color-greentrue
Background Color
Teal
background-colors/rl-styleguide_background-color-teal
background-colors/rl-styleguide_background-color-teal
Background Color
Cyan
background-colors/rl-styleguide_background-color-cyan
background-colors/rl-styleguide_background-color-cyan
Background Color
Blue Light
background-colors/rl-styleguide_background-color-bluelight
background-colors/rl-styleguide_background-color-bluelight
Background Color
Blue
background-colors/rl-styleguide_background-color-blue
background-colors/rl-styleguide_background-color-blue
Background Color
Blue Dark
background-colors/rl-styleguide_background-color-bluedark
background-colors/rl-styleguide_background-color-bluedark
Background Color
Indigo
background-colors/rl-styleguide_background-color-indigo
background-colors/rl-styleguide_background-color-indigo
Background Color
Purple
background-colors/rl-styleguide_background-color-purple
background-colors/rl-styleguide_background-color-purple
Background Color
Violet
background-colors/rl-styleguide_background-color-violet
background-colors/rl-styleguide_background-color-violet
Background Color
Purple True
background-colors/rl-styleguide_background-color-purpletrue
background-colors/rl-styleguide_background-color-purpletrue
Background Color
Fuchsia
background-colors/rl-styleguide_background-color-fuchsia
background-colors/rl-styleguide_background-color-fuchsia
Background Color
Pink
background-colors/rl-styleguide_background-color-pink
background-colors/rl-styleguide_background-color-pink
Background Color
Rosé
background-colors/rl-styleguide_background-color-rose
background-colors/rl-styleguide_background-color-rose
Background Color
Red
background-colors/rl-styleguide_background-color-red
background-colors/rl-styleguide_background-color-red
Background Color
Orange Dark
background-colors/rl-styleguide_background-color-orangedark
background-colors/rl-styleguide_background-color-orangedark
Background Color
Orange
background-colors/rl-styleguide_background-color-orange
background-colors/rl-styleguide_background-color-orange
Background Color
Yellow Dark
background-colors/rl-styleguide_background-color-yellowdark
background-colors/rl-styleguide_background-color-yellowdark
Background Color
Yellow
background-colors/rl-styleguide_background-color-yellow
background-colors/rl-styleguide_background-color-yellow

Semantic Colors

Semantic colors are used to communicate standard value states (such as error, success, or warning).
Background Color
Green Light
Semantic
background-colors/rl-styleguide_background-color-greenlight
Background Color
Green
Semantic
background-colors/rl-styleguide_background-color-green
Background Color
Green True
Semantic
background-colors/rl-styleguide_background-color-greentrue
Background Color
Red
Semantic
background-colors/rl-styleguide_background-color-red
Background Color
Yellow Dark
Semantic
background-colors/rl-styleguide_background-color-yellowdark
Background Color
Yellow
Semantic
background-colors/rl-styleguide_background-color-yellow

Neutrals

Neutrals are the foundation of the color system. Almost everything in UI design — text, form fields, backgrounds, dividers — use Neutral colors.
Text Color
Gray
text-colors/rl-styleguide_text-color-gray
text-colors/rl-styleguide_text-color-gray
Text Color
Gray Blue
text-colors/rl-styleguide_text-color-grayblue
text-colors/rl-styleguide_text-color-grayblue
Text Color
Gray Cool
text-colors/rl-styleguide_text-color-graycool
text-colors/rl-styleguide_text-color-graycool
Text Color
Gray Modern
text-colors/rl-styleguide_text-color-graymodern
text-colors/rl-styleguide_text-color-graymodern
Text Color
Gray Neutral
text-colors/rl-styleguide_text-color-grayneutral
text-colors/rl-styleguide_text-color-grayneutral
Text Color
Gray Iron
text-colors/rl-styleguide_text-color-grayiron
text-colors/rl-styleguide_text-color-grayiron
Text Color
Gray True
text-colors/rl-styleguide_text-color-graytrue
text-colors/rl-styleguide_text-color-graytrue
Text Color
Gray Warm
text-colors/rl-styleguide_text-color-graywarm
text-colors/rl-styleguide_text-color-graywarm

Primary, Secondary & Accent Colors

Primary colors are the main colors that make up the majority of the colors used in the design system. Secondary and Accent colors are used sparingly in components such as pills, alerts and labels.
Text Color
Moss
text-colors/rl-styleguide_text-color-moss
text-colors/rl-styleguide_text-color-moss
Text Color
Green Light
text-colors/rl-styleguide_text-color-greenlight
text-colors/rl-styleguide_text-color-greenlight
Text Color
Green
text-colors/rl-styleguide_text-color-green
text-colors/rl-styleguide_text-color-green
Text Color
Green True
text-colors/rl-styleguide_text-color-greentrue
text-colors/rl-styleguide_text-color-greentrue
Text Color
Teal
text-colors/rl-styleguide_text-color-teal
text-colors/rl-styleguide_text-color-teal
Text Color
Cyan
text-colors/rl-styleguide_text-color-cyan
text-colors/rl-styleguide_text-color-cyan
Text Color
Blue Light
text-colors/rl-styleguide_text-color-bluelight
text-colors/rl-styleguide_text-color-bluelight
Text Color
Blue
text-colors/rl-styleguide_text-color-blue
text-colors/rl-styleguide_text-color-blue
Text Color
Blue Dark
text-colors/rl-styleguide_text-color-bluedark
text-colors/rl-styleguide_text-color-bluedark
Text Color
Indigo
text-colors/rl-styleguide_text-color-indigo
text-colors/rl-styleguide_text-color-indigo
Text Color
Purple
text-colors/rl-styleguide_text-color-purple
text-colors/rl-styleguide_text-color-purple
Text Color
Violet
text-colors/rl-styleguide_text-color-violet
text-colors/rl-styleguide_text-color-violet
Text Color
Purple True
text-colors/rl-styleguide_text-color-purpletrue
text-colors/rl-styleguide_text-color-purpletrue
Text Color
Fuchsia
text-colors/rl-styleguide_text-color-fuchsia
text-colors/rl-styleguide_text-color-fuchsia
Text Color
Pink
text-colors/rl-styleguide_text-color-pink
text-colors/rl-styleguide_text-color-pink
Text Color
Rosé
text-colors/rl-styleguide_text-color-rose
text-colors/rl-styleguide_text-color-rose
Text Color
Red
text-colors/rl-styleguide_text-color-red
text-colors/rl-styleguide_text-color-red
Text Color
Orange Dark
text-colors/rl-styleguide_text-color-orangedark
text-colors/rl-styleguide_text-color-orangedark
Text Color
Orange
text-colors/rl-styleguide_text-color-orange
text-colors/rl-styleguide_text-color-orange
Text Color
Yellow Dark
text-colors/rl-styleguide_text-color-yellowdark
text-colors/rl-styleguide_text-color-yellowdark
Text Color
Yellow
text-colors/rl-styleguide_text-color-yellow
text-colors/rl-styleguide_text-color-yellow

Semantic Colors

Semantic colors are used to communicate standard value states (such as error, success, or warning).
Text Color
Green Light
text-colors/rl-styleguide_text-color-greenlight
text-colors/rl-styleguide_text-color-greenlight
Text Color
Green
text-colors/rl-styleguide_text-color-green
text-colors/rl-styleguide_text-color-green
Text Color
Green True
text-colors/rl-styleguide_text-color-greentrue
text-colors/rl-styleguide_text-color-greentrue
Text Color
Red
text-colors/rl-styleguide_text-color-red
text-colors/rl-styleguide_text-color-red
Text Color
Yellow Dark
text-colors/rl-styleguide_text-color-yellowdark
text-colors/rl-styleguide_text-color-yellowdark
Text Color
Yellow
text-colors/rl-styleguide_text-color-yellow
text-colors/rl-styleguide_text-color-yellow