Colors
The colours below should cover all your colour needs. If they don’t, please don’t add your own custom colours, contact us so we can add it to the theme!
Interactive Color principles
Immediate action: Used cautiously to that requires caution
High emphasis: Used very sparingly as primary action color
Mid High emphasis: Components with selected state
Mid emphasis: Secondary action, there when needed
Low emphasis: Hover state that is interactable
No emphasis: Used as default surface/background color
Interactive components visual hirearchy
In any given page, the components are designed so that it follows the following visual importance range. For each component/component category, colors are defined in the components as component level tokens.
Non interactive color principles
Text
Dividers
Backgrounds
Decisions
Available as both variables and utility classes (prefered way to use)
| Token Name | CSS Variable | Utility Class | Light | Dark |
|---|---|---|---|---|
accent-bg | --f-colors-accent-background | bg-fun-accent | ||
action-bg | --f-colors-action-background | bg-fun-action | ||
default-bd | --f-colors-default-border | border-fun-default | ||
default-fg | --f-colors-default-foreground | text-fun-default | ||
disabled-bd | --f-colors-disabled-border | border-fun-disabled | ||
disabled-bg | --f-colors-disabled-background | bg-fun-disabled | ||
disabled-fg | --f-colors-disabled-foreground | text-fun-disabled | ||
error-bd | --f-colors-error-border | border-fun-error | ||
error-fg | --f-colors-error-foreground | text-fun-error | ||
focus-bd | --f-colors-focus-border | border-fun-focus | ||
hover-bg | --f-colors-hover-background | bg-fun-hover | ||
inverse-bg | --f-colors-inverse-background | bg-fun-inverse | ||
inverse-fg | --f-colors-inverse-foreground | text-fun-inverse | ||
muted-bd | --f-colors-muted-border | border-fun-muted | ||
muted-fg | --f-colors-muted-foreground | text-fun-muted | ||
selected-bg | --f-colors-selected-background | bg-fun-selected | ||
success-fg | --f-colors-success-foreground | text-fun-success | ||
surface-bg | --f-colors-surface-background | bg-fun-surface | ||
warning-fg | --f-colors-warning-foreground | text-fun-warning |
Primitives
Preferably, dont use these. If you have to, remember to define colors for both light and dark mode.
| Token Name | CSS Variable | Value | Description |
|---|---|---|---|
blue/100 | --f-colors-blue-100 | #e0f2fe | |
blue/200 | --f-colors-blue-200 | #bae6fd | |
blue/300 | --f-colors-blue-300 | #7cd3fd | |
blue/400 | --f-colors-blue-400 | #37bff9 | |
blue/50 | --f-colors-blue-50 | #f0f9ff | |
blue/500 | --f-colors-blue-500 | #1cb1f3 | |
blue/600 | --f-colors-blue-600 | #0185c8 | |
blue/700 | --f-colors-blue-700 | #026aa2 | |
blue/800 | --f-colors-blue-800 | #065986 | |
blue/900 | --f-colors-blue-900 | #0b4a6f | |
brand/100 | --f-colors-brand-100 | #ecf2f0 | |
brand/200 | --f-colors-brand-200 | #d1d9d6 | |
brand/300 | --f-colors-brand-300 | #bac5c2 | |
brand/400 | --f-colors-brand-400 | #a2b1ad | |
brand/50 | --f-colors-brand-50 | #f2f5f5 | |
brand/500 | --f-colors-brand-500 | #8a9e99 | |
brand/600 | --f-colors-brand-600 | #738b85 | |
brand/700 | --f-colors-brand-700 | #5c7870 | |
brand/800 | --f-colors-brand-800 | #44645c | |
brand/900 | --f-colors-brand-900 | #013f33 | |
green/100 | --f-colors-green-100 | #d2eed9 | |
green/200 | --f-colors-green-200 | #a6deb4 | |
green/300 | --f-colors-green-300 | #79cd8e | |
green/400 | --f-colors-green-400 | #4dbd69 | |
green/50 | --f-colors-green-50 | #e9f7ec | |
green/500 | --f-colors-green-500 | #20ac43 | |
green/600 | --f-colors-green-600 | #1a8a36 | |
green/700 | --f-colors-green-700 | #136728 | |
green/800 | --f-colors-green-800 | #0d451b | |
green/900 | --f-colors-green-900 | #06220d | |
grey/100 | --f-colors-grey-100 | #f0f0f0 | |
grey/200 | --f-colors-grey-200 | #e9e9e9 | |
grey/300 | --f-colors-grey-300 | #dbdbdb | |
grey/400 | --f-colors-grey-400 | #cccccc | |
grey/50 | --f-colors-grey-50 | #f8f8f8 | |
grey/500 | --f-colors-grey-500 | #b6b6b6 | |
grey/600 | --f-colors-grey-600 | #7f7f7f | |
grey/700 | --f-colors-grey-700 | #5b5b5b | |
grey/75 | --f-colors-grey-75 | #f6f6f6 | |
grey/800 | --f-colors-grey-800 | #373737 | |
grey/850 | --f-colors-grey-850 | #252525 | |
grey/900 | --f-colors-grey-900 | #121212 | |
pink/100 | --f-colors-pink-100 | #fff4fb | |
pink/200 | --f-colors-pink-200 | #ffeaf8 | |
pink/300 | --f-colors-pink-300 | #ffd4f2 | |
pink/400 | --f-colors-pink-400 | #ffa8e4 | |
pink/50 | --f-colors-pink-50 | #fff8fc | |
pink/500 | --f-colors-pink-500 | #ff94e4 | |
pink/600 | --f-colors-pink-600 | #cd79b8 | |
pink/700 | --f-colors-pink-700 | #a45c92 | |
pink/800 | --f-colors-pink-800 | #824e75 | |
pink/900 | --f-colors-pink-900 | #513c49 | |
red/100 | --f-colors-red-100 | #ffd7dc | |
red/200 | --f-colors-red-200 | #ffafb9 | |
red/300 | --f-colors-red-300 | #ff8797 | |
red/400 | --f-colors-red-400 | #ff5f74 | |
red/50 | --f-colors-red-50 | #ffebee | |
red/500 | --f-colors-red-500 | #ff3751 | |
red/600 | --f-colors-red-600 | #cc2c41 | |
red/700 | --f-colors-red-700 | #992131 | |
red/800 | --f-colors-red-800 | #661620 | |
red/900 | --f-colors-red-900 | #330b10 | |
white | --f-colors-white | #ffffff | |
yellow/100 | --f-colors-yellow-100 | #fbf4cc | |
yellow/200 | --f-colors-yellow-200 | #f7e999 | |
yellow/300 | --f-colors-yellow-300 | #f2df66 | |
yellow/400 | --f-colors-yellow-400 | #eed433 | |
yellow/50 | --f-colors-yellow-50 | #fdfae6 | |
yellow/500 | --f-colors-yellow-500 | #eac900 | |
yellow/600 | --f-colors-yellow-600 | #bba100 | |
yellow/700 | --f-colors-yellow-700 | #8c7900 | |
yellow/800 | --f-colors-yellow-800 | #5e5000 | |
yellow/900 | --f-colors-yellow-900 | #2f2800 |
