fundamentals
Colors
Minimal and effective color for your entire Ul
Colors in Radian design system is built on minimal yet effective colors that is flexible enough to build an entire product on. The color system provides variables for all of the most common use cases while building an interface.
Colors are organized based on usage like text, border, background, & primary colors to ensure using color is easier for most people.
Preview Colors
NMNancy_dev
Nancy Mureum
#2126
+977 9861038740
October 2025
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
SS
Saru Shrestha
saru@radian.com
PROGENERAL
View Profile
Keyboard shortcuts
Change logs
Slack Community
Support
API
Settings
Log out
Report an issue
What area are you having problems with?
Invite team members
Send instructions to join your workspace
Cookie Settings
Manage your cookie settings here.
Strictly Necessary
These cookies are necessary for website functionality.
Functional Cookies
These cookies enable personalized features on the site.
Color Variables
Background
| Token | Hex Value | Usage |
|---|---|---|
| bg-bg | #FFFFFF | Base Background |
| bg-fill1 | #F9F9FA | Use to give soft gray color for backgrounds |
| bg-fill2 | #F4F4F6 | Use [ bg-fill2 ] if gray background section needs more visibility |
| bg-fill3 | #E9E9EC | Slightly darker than [ bg-fill2 ] |
| bg-fill4 | #DEDEE3 | Slightly darker than [ bg-fill3 ] |
Text
| Token | Hex Value | Usage |
|---|---|---|
| text-fg | #1C1D21 | Use for Headers and Title Text |
| text-fg-secondary | #545463 | Use for Descriptions or paragraph |
| text-fg-tertiary | #868698 | Similar to text secondary, but slighly dimmer |
| text-fg-disabled | #C8C8D0 | Used when ui elements are disabled |
| text-fg-inverse | #FFFFFF | Used on darker colored background |
Border
| Token | Hex Value | Usage |
|---|---|---|
| border-border | #DEDEE3 | Solid, accessible border used to define & separate UI elements |
| border-soft | #E9E9EC | Use for decorative line and border elements |
| border-alpha | #0A0A0B1F | Transparent border that adjusts based on background color |
| border-soft-alpha | #0A0A0B14 | Decorative transparent border |
Primary
| Token | Hex Value | Usage |
|---|---|---|
| key | #623DF5 | Brand Color |
| accent | #ECE8FC | Pastel version of brand color used for backgrounds |
| focus | #E5DFFB | Used to highlight pastel background elements |
| hover | #7655F6 | Used when hovers interactions are present |
| text | #492EB8 | Text color for all primary texts |
Utility
| Token | Hex Value | Usage |
|---|---|---|
| white-inverse | #FFFFFF | White color, will turn to black for dark mode |
| black-inverse | #090A0B | Black color, will turn white in dark moide |
BG elevation
| Token | Hex Value | Usage |
|---|---|---|
| bg-elevation-negative | #F4F4F6 | Used to show negative elevation (Pushed down) |
| bg-elevation-level1 | #FFFFFF | Used to show elevation of component in dark mode |
| bg-elevation-level2 | #FFFFFF | Used to show higher elevation for dark mode |
BG Alpha
| Token | Hex Value | Usage |
|---|---|---|
| bg-fill1-alpha | #0A0A0B05 | Transparent version of fill-1 color, used for elevated components |
| bg-fill2-alpha | #0A0A0B0A | Transparent version of fill-2 color |
| bg-fill3-alpha | #0A0A0B14 | Transparent version of fill-3 color |
| bg-fill4-alpha | #0A0A0B1F | Transparent version of fill-4 color |
Success
| Token | Hex Value | Usage |
|---|---|---|
| key | #1DA54A | Used to highlight success or positive feedback |
| accent | #E3FCEC | Pastel color for background |
| focus | #D1FADF | Used to highlight pastel background elements |
| hover | #2EB85C | Used when hovers interactions are present |
| text | #218341 | Text color for all success texts |
Error
| Token | Hex Value | Usage |
|---|---|---|
| key | #F53D3D | Used to highlight negative or critical feedback |
| accent | #FEE7E7 | Pastel color for background |
| focus | #FDD8D8 | Used to highlight pastel background elements |
| hover | #FF5252 | Used when hovers interactions are present |
| text | #D92626 | Text color for all error texts |
Warning
| Token | Hex Value | Usage |
|---|---|---|
| key | #FFAA00 | Used to highlight notice or alert feedback |
| accent | #FFF1D6 | Pastel color for background |
| focus | #FFEBC2 | Used to highlight pastel background elements |
| hover | #FFBB33 | Used when hovers interactions are present |
| text | #936710 | Text color for all warning texts |
Info
| Token | Hex Value | Usage |
|---|---|---|
| key | #067FF9 | Used to highlight informational or general feedback |
| accent | #E3F0FC | Pastel color for background |
| focus | #D1E5FA | Used to highlight pastel background elements |
| hover | #255C93 | Used when hovers interactions are present |
| text | #255C93 | Text color for all info texts |
Customizing your colors
- Explore Color Primitives: Radian already offers 15+ base color ranges to choose from.
- Map Your Tokens(Design): Create a smaller, more manageable set of design tokens that map to specific use cases.
- Map Your Colors(Development): Map the colors from your Figma file to Global CSS file. Convert to OKLCH color format for best performance on all devices.
css/global.css