You can customize your Subframe project to match the look & feel of your product's brand. Your theme applies to all of the design system components and styles in Subframe.
Update project theme
You can completely re-theme your entire project using our preselected theme colors and styles in just a few clicks.
To update your project theme:
Open Subframe and click on the Components tab in the top nav.
Click Theme in the left sidebar.
Click the Edit theme button to show our theme picker.
Choose the theming options you want. Any changes you make are applied automatically.
Update individual tokens
You can reuse styles like colors, font styles, border radiuses in Subframe using tokens. Updating the token once will change the style in all of your components and pages.
To update a token:
Open Subframe and click on the Components tab in the top nav.
Click Theme in the left sidebar.
Click on the token you want to edit to open the editor.
Modify the theme however you'd like. Any changes you make are applied automatically.
Create custom color tokens
Subframe includes a small set of semantic color tokens by default for working with text, borders, and backgrounds. You can define your own color tokens that reference existing colors (i.e. Neutral 50) or use a custom hex code.
To create a custom color token:
Open Subframe and click on the Components tab in the navbar.
Click Theme in the left sidebar.
Click the [ + ] button next to existing tokens.
Rename your token
Set its value using a hex code or click on the
library icon to reference an existing token.
Use your color token anywhere – for backgrounds, icon colors, or text colors.
When you delete a custom token, all references where it is used will be updated to the hex code color.