Color System
The Color System in Roi is built for flexibility and consistency, using clearly defined variables for light and dark modes. It includes base, gray, and primary palettes designed to work seamlessly across components, layouts, and themes — so your design stays cohesive and easy to maintain.
Overview
Roi uses a structured color system based on global variables to ensure design consistency across pages and components. Colors are grouped into functional categories — such as primary, neutral, and semantic — and include light and dark mode variants.
This setup makes it easy to apply brand styles, update themes, and keep your UI accessible and visually coherent throughout the project.
Primary Color
The primary color defines the main accent used throughout your site — from buttons and links to highlights and key UI elements.
50
100
200
300
400
500
600
700
800
900
950
Muted Color
The muted color is used for secondary accents and subtle UI elements. It's ideal for backgrounds, borders, and less prominent text — helping maintain visual balance while letting primary elements stand out.
50
100
200
300
400
500
600
700
800
900
950
Color Styles
In the assets styles panel, the color folder contains 3 main folders required by the theme to function properly.
Inside the Reference folder, you'll find the base colors such as primary and gray color shades. The Globals folder contains global styles, such as body background color, default borders and shadow settings. The Theme folder provides Light / Dark cross colors that are applied to components or used to style stacks, like card variables for instance.
Customizing Colors
The first thing you will want to do is to replace each primary color shade (11 at total, inside Color/Reference/Primary). This will already change a lot of things, as all elements and components directly referencing those colors will have the changes applied automatically.
You can do the same thing with the Gray color palette, if you need to change it, but this will also need to be manually applied in the Theme folder, where each component and element is tied to specific variables and their variants.
Customizing the Theme color variables should be done very carefully and always validated visually, to make sure nothing goes wrong when pushing your changes.
Secondary Styles
Some styles are automatically generated by Framer when you start using the CMS functionnality. Those include Blockquotes, Images, Code Blocks, Links, and any other element coming from user generated content. Those styles have been changed from the defaults provided by Framer and use the colors from the Reference palette.
Creating a New Palette
You can create a new primary or gray color palette using your favorite tool or one of the existing tools out there, like tints.dev or uicolors.app for instance.
Summary
Roi features a structured color system built on global variables to maintain design consistency throughout pages and components. Colors are organized into functional groups like primary, neutral, and semantic, with support for both light and dark mode variants.