ThemeNew
Nova Design System’s parts are themable using CSS Custom Properties. We ship pre-made themes for dark and light mode while trying to meet accessibility standards for color contrast.
Introduction
Themes are used to customize component styles to fit the specific aesthetic of a brand or product. We provide for now two themes, light and dark mode.
Light theme
Dark theme
Semantic colors v2
With semantic colors, the code only needs to be changed in one place to see the effect system-wide. Tokens are used across all components and help keep global patterns and styles consistent.
Brand colors
Semantic brand colors.
Light theme
| Name | Value | |
|---|---|---|
| Background surface | Aa |
orange/500 |
| Background surface | Aa |
orange/600 |
| Background active | Aa |
orange/700 |
| Foreground | Aa |
orange/500 |
| Foreground hover | Aa |
orange/600 |
| Foreground invert | Aa |
base/white |
| Border | Aa |
orange/500 |
| Border muted | Aa |
orange/300 |
| Background light surface | Aa |
orange/50 |
| Background light surface hover | Aa |
orange/100 |
| Background light surface active | Aa |
orange/200 |
| Foreground light | Aa |
orange/500 |
| Foreground light invert | Aa |
orange/500 |
| Border light | Aa |
orange/500 |
Dark theme
| Name | Value | |
|---|---|---|
| Background surface | Aa |
orange/500 |
| Background surface | Aa |
orange/600 |
| Background active | Aa |
orange/700 |
| Foreground | Aa |
orange/500 |
| Foreground hover | Aa |
orange/600 |
| Foreground invert | Aa |
base/white |
| Border | Aa |
orange/500 |
| Border muted | Aa |
orange/300 opacity/60 |
| Background light surface | Aa |
orange/50 opacity/10 |
| Background light surface hover | Aa |
orange/100 opacity/20 |
| Background light surface active | Aa |
orange/200 opacity/10 |
| Foreground light | Aa |
orange/500 |
| Foreground light invert | Aa |
base/white |
| Border light | Aa |
orange/500 opacity/20 |
Light theme
| Name | Value | |
|---|---|---|
| Background surface | Aa |
petrol/500 |
| Background surface hover | Aa |
petrol/600 |
| Background surface active | Aa |
petrol/700 |
| Foreground | Aa |
petrol/500 |
| Foreground hover | Aa |
petrol/600 |
| Foreground invert | Aa |
base/white |
| Border | Aa |
petrol/500 |
| Border muted | Aa |
petrol/300 |
Dark theme
| Name | Value | |
|---|---|---|
| Background surface | Aa |
petrol/500 |
| Background surface hover | Aa |
petrol/600 |
| Background surface active | Aa |
petrol/700 |
| Foreground | Aa |
petrol/500 |
| Foreground hover | Aa |
petrol/600 |
| Foreground invert | Aa |
base/white |
| Border | Aa |
petrol/500 |
| Border muted | Aa |
petrol/500 opacity-60 |
Neutral colors
Semantic neutral colors.
Light theme
| Name | Value | |
|---|---|---|
| Background 00 | Aa |
base/white |
| Background 01 | Aa |
gray/50 |
| Background 02 | Aa |
gray/100 |
| Background 03 | Aa |
gray/900 |
Dark theme
| Name | Value | |
|---|---|---|
| Background 00 | Aa |
gray/900 |
| Background 01 | Aa |
gray/700 |
| Background 02 | Aa |
gray/600 |
| Background 03 | Aa |
gray/50 |
Light theme
| Name | Value | |
|---|---|---|
| Background surface | Aa |
gray/50 |
| Background surface hover | Aa |
gray/100 |
| Background surface active | Aa |
gray/200 |
| Foreground | Aa |
gray/800 |
| Foreground muted | Aa |
gray/400 |
| Border | Aa |
gray/200 |
| Border hover | Aa |
gray/300 |
| Border muted | Aa |
gray/100 |
| Background surface invert | Aa |
gray/800 |
| Background surface hover invert | Aa |
gray/700 |
| Background surface active invert | Aa |
gray/600 |
| Foreground invert | Aa |
base/white |
| Foreground muted invert | Aa |
gray/200 |
| Border invert | Aa |
gray/500 |
| Border hover invert | Aa |
gray/400 |
Dark theme
| Name | Value | |
|---|---|---|
| Background surface | Aa |
gray/50 opacity/10 |
| Background surface hover | Aa |
gray/50 opacity-20 |
| Background surface active | Aa |
gray/50 opacity/10 |
| Foreground | Aa |
gray/50 |
| Foreground muted | Aa |
gray/50 opacity/60 |
| Border | Aa |
gray/50 opacity/20 |
| Border hover | Aa |
gray/50 opacity/30 |
| Border muted | Aa |
gray/50 opacity/10 |
| Background surface invert | Aa |
gray/800 opacity/10 |
| Background surface hover invert | Aa |
gray/800 opacity/20 |
| Background surface active invert | Aa |
gray/800 opacity/10 |
| Foreground invert | Aa |
gray/800 |
| Foreground muted invert | Aa |
gray/800 opacity/60 |
| Border invert | Aa |
gray/800 opacity-10 |
| Border hover invert | Aa |
gray/800 opacity-30 |
State colors
Semantic state colors.
Light theme
| Name | Value | |
|---|---|---|
| Background surface | Aa |
green/500 |
| Background surface hover | Aa |
green/600 |
| Background surface active | Aa |
green/700 |
| Foreground | Aa |
green/500 |
| Foreground hover | Aa |
green/600 |
| Foreground invert | Aa |
base/white |
| Border | Aa |
green/500 |
| Border muted | Aa |
green/300 |
Dark theme
| Name | Value | |
|---|---|---|
| Background surface | Aa |
green/500 |
| Background surface hover | Aa |
green/600 |
| Background surface active | Aa |
green/700 |
| Foreground | Aa |
green/500 |
| Foreground hover | Aa |
green/600 |
| Foreground invert | Aa |
base/white |
| Border | Aa |
green/500 |
| Border muted | Aa |
green/500 opacity-60 |
Light theme
| Name | Value | |
|---|---|---|
| Background surface | Aa |
red/500 |
| Background surface hover | Aa |
red/600 |
| Background surface active | Aa |
red/700 |
| Foreground | Aa |
red/500 |
| Foreground hover | Aa |
red/600 |
| Foreground invert | Aa |
base/white |
| Border | Aa |
red/500 |
| Border muted | Aa |
red/300 |
Dark theme
| Name | Value | |
|---|---|---|
| Background surface | Aa |
red/500 |
| Background surface hover | Aa |
red/600 |
| Background surface active | Aa |
red/700 |
| Foreground | Aa |
red/500 |
| Foreground hover | Aa |
red/600 |
| Foreground invert | Aa |
base/white |
| Border | Aa |
red/500 |
| Border muted | Aa |
red/500 opacity-60 |
Semantic colors v1
With semantic colors, the code only needs to be changed in one place to see the effect system-wide. Tokens are used across all components and help keep global patterns and styles consistent.
Brand colors
Semantic brand colors.
Light theme
| Name | Value | |
|---|---|---|
| Background surface | Aa |
orange/500 |
| Background surface hover | Aa |
orange/600 |
| Background subtle | Aa |
orange/50 |
| Background subtle hover | Aa |
orange/100 |
| Foreground | Aa |
orange/500 |
| Foreground hover | Aa |
orange/600 |
| Foreground muted | Aa |
orange/400 |
| Foreground subtle | Aa |
orange/200 |
| Foreground on surface | Aa |
base/white |
| Foreground on subtle | Aa |
orange/500 |
| Border | Aa |
orange/300 |
| Border hover | Aa |
orange/400 |
| Focus | Aa |
orange/200 |
| Shadow | Aa |
orange/900 |
Dark theme
| Name | Value | |
|---|---|---|
| Background surface | Aa |
orange/500 |
| Background surface hover | Aa |
orange/600 |
| Background subtle | Aa |
orange/700 |
| Background subtle hover | Aa |
orange/800 |
| Foreground | Aa |
orange/500 |
| Foreground hover | Aa |
orange/600 |
| Foreground muted | Aa |
orange/700 |
| Foreground subtle | Aa |
orange/800 |
| Foreground on surface | Aa |
base/white |
| Foreground on subtle | Aa |
base/white |
| Border | Aa |
orange/700 |
| Border hover | Aa |
orange/800 |
| Focus | Aa |
orange/700 |
| Shadow | Aa |
orange/900 |
Light theme
| Name | Value | |
|---|---|---|
| Background surface | Aa |
petrol/500 |
| Background surface hover | Aa |
petrol/600 |
| Background subtle | Aa |
petrol/50 |
| Background subtle hover | Aa |
petrol/100 |
| Foreground | Aa |
petrol/500 |
| Foreground hover | Aa |
petrol/600 |
| Foreground muted | Aa |
petrol/400 |
| Foreground subtle | Aa |
petrol/200 |
| Foreground on surface | Aa |
base/white |
| Foreground on subtle | Aa |
petrol/500 |
| Border | Aa |
petrol/300 |
| Border hover | Aa |
petrol/400 |
| Focus | Aa |
petrol/200 |
| Shadow | Aa |
petrol/900 |
Dark theme
| Name | Value | |
|---|---|---|
| Background surface | Aa |
petrol/500 |
| Background surface hover | Aa |
petrol/600 |
| Background subtle | Aa |
petrol/700 |
| Background subtle hover | Aa |
petrol/800 |
| Foreground | Aa |
petrol/500 |
| Foreground hover | Aa |
petrol/600 |
| Foreground muted | Aa |
petrol/700 |
| Foreground subtle | Aa |
petrol/800 |
| Foreground on surface | Aa |
base/white |
| Foreground on subtle | Aa |
base/white |
| Border | Aa |
petrol/700 |
| Border hover | Aa |
petrol/800 |
| Focus | Aa |
petrol/700 |
| Shadow | Aa |
petrol/900 |
Neutral colors
Semantic neutral colors.
Light theme
| Name | Value | |
|---|---|---|
| Background canvas | Aa |
base/white |
| Background surface | Aa |
base/white |
| Background surface hover | Aa |
gray/50 |
| Background surface overlay | Aa |
base/white |
| Background surface overlay dark | Aa |
base/white |
| Background subtle | Aa |
gray/50 |
| Background subtle hover | Aa |
gray/100 |
| Foreground | Aa |
gray/800 |
| Foreground hover | Aa |
gray/900 |
| Foreground muted | Aa |
gray/400 |
| Foreground subtle | Aa |
gray/200 |
| Foreground on subtle | Aa |
gray/800 |
| Foreground on surface overlay dark | Aa |
gray/50 |
| Foreground on subtle | Aa |
gray/800 |
| Border | Aa |
gray/100 |
| Border hover | Aa |
gray/200 |
| Focus | Aa |
gray/200 |
| Shadow | Aa |
gray/900 |
Dark theme
| Name | Value | |
|---|---|---|
| Background canvas | Aa |
gray/900 |
| Background surface | Aa |
gray/800 |
| Background surface hover | Aa |
gray/900 |
| Background surface overlay | Aa |
gray/700 |
| Background surface overlay dark | Aa |
gray/700 |
| Background subtle | Aa |
gray/800 |
| Background subtle hover | Aa |
gray/900 |
| Foreground | Aa |
gray/50 |
| Foreground hover | Aa |
gray/100 |
| Foreground muted | Aa |
gray/300 |
| Foreground subtle | Aa |
gray/400 |
| Foreground on subtle | Aa |
gray/50 |
| Foreground on surface overlay dark | Aa |
gray/50 |
| Foreground on subtle | Aa |
gray/50 |
| Border | Aa |
gray/700 |
| Border hover | Aa |
gray/800 |
| Focus | Aa |
gray/700 |
| Shadow | Aa |
gray/900 |
State colors
Semantic state colors.
Light theme
| Name | Value | |
|---|---|---|
| Background surface | Aa |
green/500 |
| Background surface hover | Aa |
green/600 |
| Background subtle | Aa |
green/50 |
| Background subtle hover | Aa |
green/100 |
| Foreground | Aa |
green/500 |
| Foreground hover | Aa |
green/600 |
| Foreground muted | Aa |
green/400 |
| Foreground subtle | Aa |
green/200 |
| Foreground on surface | Aa |
base/white |
| Foreground on subtle | Aa |
green/500 |
| Border | Aa |
green/300 |
| Border hover | Aa |
green/400 |
| Focus | Aa |
green/200 |
| Shadow | Aa |
green/900 |
Dark theme
| Name | Value | |
|---|---|---|
| Background surface | Aa |
green/500 |
| Background surface hover | Aa |
green/600 |
| Background subtle | Aa |
green/700 |
| Background subtle hover | Aa |
green/800 |
| Foreground | Aa |
green/500 |
| Foreground hover | Aa |
green/600 |
| Foreground muted | Aa |
green/700 |
| Foreground subtle | Aa |
green/800 |
| Foreground on surface | Aa |
base/white |
| Foreground on subtle | Aa |
base/white |
| Border | Aa |
green/700 |
| Border hover | Aa |
green/800 |
| Focus | Aa |
green/700 |
| Shadow | Aa |
green/900 |
Light theme
| Name | Value | |
|---|---|---|
| Background surface | Aa |
red/500 |
| Background surface hover | Aa |
red/600 |
| Background subtle | Aa |
red/50 |
| Background subtle hover | Aa |
red/100 |
| Foreground | Aa |
red/500 |
| Foreground hover | Aa |
red/600 |
| Foreground muted | Aa |
red/400 |
| Foreground subtle | Aa |
red/200 |
| Foreground on surface | Aa |
base/white |
| Foreground on subtle | Aa |
red/500 |
| Border | Aa |
red/300 |
| Border hover | Aa |
red/400 |
| Focus | Aa |
red/200 |
| Shadow | Aa |
red/900 |
Dark theme
| Name | Value | |
|---|---|---|
| Background surface | Aa |
red/500 |
| Background surface hover | Aa |
red/600 |
| Background subtle | Aa |
red/700 |
| Background subtle hover | Aa |
red/800 |
| Foreground | Aa |
red/500 |
| Foreground hover | Aa |
red/600 |
| Foreground muted | Aa |
red/700 |
| Foreground subtle | Aa |
red/800 |
| Foreground on surface | Aa |
base/white |
| Foreground on subtle | Aa |
base/white |
| Border | Aa |
red/700 |
| Border hover | Aa |
red/800 |
| Focus | Aa |
red/700 |
| Shadow | Aa |
red/900 |
Figma Tokens
Nova uses design tokens with Figma Tokens, a plugin for Figma allowing you to define and use design tokens in Figma. You can store your design tokens in JSON, sync them with a sync provider such as GitHub and define tokens even for properties that have no native support yet in Figma, such as borderRadius or spacing.