Color
Our color palette is developed to be warm, tactile and convey energy. Pink is our main brand color, supported by brown and off-white for a thoughtful expression.
Brand colors
Primary palette
Pink, brown and off-white makes for the foundation of our core palette. These are supported by neutrals such as black and white.
Pink
#FF84B6Off White
#F0F0EBBrown
#342620White
#FFFFFFBlack
#000000Secondary palette
Our secondary palette serves the purpose of adding variety to our core palette. The soft pink, warm yellow and soft yellow all builds on the warmer expression, and can be used for secondary touchpoints, when inside of the Qasa eco-system, for e.g on the website and in organic SoMe.
Soft Pink
#FFE8F0Warm Yellow
#FFD66CSoft Yellow
#FFF8CCExtended palette
Our extended palette expands beyond the brand primary and secondary colors, offering additional flexibility for digital products and other functional use cases where more nuance is needed.
UI Pink
A variant of our core pink applied in digital user interfaces only. It ensures better contrast with brown text, mainly for interactive elements like buttons. Includes a lighter and darker shade for hover and active states.
Avoid using this color unless strictly necessary to meet accessibility color contrast requirements.
UI Pink
#FF99C2UI Pink Light
#FFA3C8UI Pink Dark
#FF84B6Interaction States
These colors are derived from our core colors and are specifically used to indicate interaction states like hover and focus. They should not be used for other purposes.
Brown Dark
#2B1D15Brown Light
#3F2D23Off White Dark
#e0e0d6Off White Light
#f6f6f3Grayscale
Our gray palette is used to create depth and hierarchy in our designs. It is used for text, backgrounds, and other elements that require a neutral color.
Gray 10
#F9F9F6Gray 20
#F0F0EBGray 30
#E5E5DFGray 40
#D6D6CDGray 50
#A3A396Gray 60
#76766aGray 70
#545448Gray 80
#424236Gray 90
#26261DFunctional colors
Our functional colors are used to convey meaning and provide feedback to the user. For example to indicate success, error, or warning. They are used sparingly to ensure that they are not confused with our brand colors.
Red 10
#FEF3F1Red 20
#FAD8D4Red 30
#F8B2A8Red 40
#F47E6ERed 50
#EF452ERed 60
#DE1B00Red 70
#C21700Red 80
#A81400Red 90
#8A1100Green 10
#F5FBF7Green 20
#D1EFDAGreen 30
#A1DEB2Green 40
#66CA82Green 50
#30B757Green 60
#00A62FGreen 70
#009029Green 80
#007D23Green 90
#00661DBlue 10
#F0F7FFBlue 20
#DBEBFFBlue 30
#BDD7FFBlue 40
#80AEFFBlue 50
#578FFFBlue 60
#3370FFBlue 70
#0045F6Blue 80
#0039CCBlue 90
#00288EYellow 10
#FEF7E5Yellow 20
#FBE6B2Yellow 30
#F9D682Yellow 40
#F7C652Yellow 50
#F5B92BYellow 60
#F3AB00Yellow 70
#E29F00Yellow 80
#C58B00Yellow 90
#9B6D00Tokens
Our color tokens include all of our colors for consumption in code and design tools. They are available as CSS variables, Tailwind classes, and Figma tokens.
Color tokens are divided into two tiers.
- Core tokens: The literal colors values that make up our palette. They don't provide any context or meaning.
- Semantic tokens: These tokens reference core tokens and provide context and meaning. They are used to ensure consistency and scalability.
Core tokens
Core tokens store literal color values in a usage-agnostic way.
| Color | CSS Variable | Value |
|---|---|---|
white | --color-white | |
black | --color-black | |
pink | --color-pink | |
uiPink | --color-uiPink | |
uiPink-light | --color-uiPink-light | |
uiPink-dark | --color-uiPink-dark | |
offWhite | --color-offWhite | |
offWhite-dark | --color-offWhite-dark | |
offWhite-light | --color-offWhite-light | |
brown | --color-brown | |
brown-dark | --color-brown-dark | |
brown-light | --color-brown-light | |
softPink | --color-softPink | |
warmYellow | --color-warmYellow | |
softYellow | --color-softYellow | |
gray-10 | --color-gray-10 | |
gray-20 | --color-gray-20 | |
gray-30 | --color-gray-30 | |
gray-40 | --color-gray-40 | |
gray-50 | --color-gray-50 | |
gray-60 | --color-gray-60 | |
gray-70 | --color-gray-70 | |
gray-80 | --color-gray-80 | |
gray-90 | --color-gray-90 | |
red-10 | --color-red-10 | |
red-20 | --color-red-20 | |
red-30 | --color-red-30 | |
red-40 | --color-red-40 | |
red-50 | --color-red-50 | |
red-60 | --color-red-60 | |
red-70 | --color-red-70 | |
red-80 | --color-red-80 | |
red-90 | --color-red-90 | |
green-10 | --color-green-10 | |
green-20 | --color-green-20 | |
green-30 | --color-green-30 | |
green-40 | --color-green-40 | |
green-50 | --color-green-50 | |
green-60 | --color-green-60 | |
green-70 | --color-green-70 | |
green-80 | --color-green-80 | |
green-90 | --color-green-90 | |
blue-10 | --color-blue-10 | |
blue-20 | --color-blue-20 | |
blue-30 | --color-blue-30 | |
blue-40 | --color-blue-40 | |
blue-50 | --color-blue-50 | |
blue-60 | --color-blue-60 | |
blue-70 | --color-blue-70 | |
blue-80 | --color-blue-80 | |
blue-90 | --color-blue-90 | |
yellow-10 | --color-yellow-10 | |
yellow-20 | --color-yellow-20 | |
yellow-30 | --color-yellow-30 | |
yellow-40 | --color-yellow-40 | |
yellow-50 | --color-yellow-50 | |
yellow-60 | --color-yellow-60 | |
yellow-70 | --color-yellow-70 | |
yellow-80 | --color-yellow-80 | |
yellow-90 | --color-yellow-90 |
Semantic tokens
Semantic tokens, also known as alias tokens, act as an abstraction layer. Rather than storing a fixed color, they reference another token, reflecting its intended use in the UI.
Text colors
Used for text elements. Available in code via text-{color} classes.
| Color | CSS Value |
|---|---|
default | var(--color-brown) |
strong | var(--color-black) |
subtle | var(--color-gray-60) |
disabled | var(--color-gray-50) |
positive | var(--color-green-70) |
warning | var(--color-yellow-90) |
negative | var(--color-red-60) |
onBrandPrimary | var(--color-brown) |
onBrandSecondary | var(--color-offWhite) |
onBrandTertiary | var(--color-brown) |
Background colors
Used for background elements. Available in code via bg-{color} classes.
| Color | CSS Value |
|---|---|
default | var(--color-white) |
inset | var(--color-gray-10) |
brandPrimary | var(--color-uiPink) |
brandPrimary-hover | var(--color-uiPink-light) |
brandPrimary-active | var(--color-uiPink-dark) |
brandSecondary | var(--color-brown) |
brandSecondary-hover | var(--color-brown-light) |
brandSecondary-active | var(--color-brown-dark) |
brandTertiary | var(--color-offWhite) |
brandTertiary-hover | var(--color-offWhite-light) |
brandTertiary-active | var(--color-offWhite-dark) |
positive | var(--color-green-60) |
warning | var(--color-yellow-60) |
negative | var(--color-red-60) |
Border colors
Used for borders, outlines, and dividers. Available in code via border-{color} classes.
| Color | CSS Value |
|---|---|
default | var(--color-gray-30) |
default-hover | var(--color-gray-40) |
default-active | var(--color-brown) |
strong | var(--color-gray-40) |
subtle | var(--color-gray-20) |
positive | var(--color-green-60) |
warning | var(--color-yellow-60) |
negative | var(--color-red-60) |
Icon colors
Used for icons, illustrations, and decorative elements. Available in code via stroke-{color} or fill-{color} classes.
| Color | CSS Value |
|---|---|
default | var(--color-brown) |
strong | var(--color-black) |
subtle | var(--color-gray-60) |
disabled | var(--color-gray-50) |
positive | var(--color-green-70) |
warning | var(--color-yellow-70) |
negative | var(--color-red-60) |
onBrandPrimary | var(--color-brown) |
onBrandSecondary | var(--color-offWhite) |
onBrandTertiary | var(--color-brown) |