design
Themes
Color schemes for scalability.
Wanda introduces a well-proven theme system which help designers and developer building a product.
A theme is a set of predefined key ↔ color combinations to be used whenever possible in order keep consistency, accessibility and dynamicity.
Available themes
Here you can check the theme keys for all the available themes from Wanda. These themes are shared as library on Figma and as css/json from the components library.
Global colors
- global-foreground
hsl(221 10% 30%)
#444954
- global-background
hsl(0 0% 100%)
#ffffff
- global-interactive-text
hsl(214 66% 44%)
#2666ba
- global-interactive-text-hover
hsl(219 93% 27%)
#043184
- global-vibrancy-foreground
hsl(0 0% 0%)
#000000
- global-vibrancy-background
hsl(220 16% 85% / 40%)
#d2d6de66
- global-vibrancy-background-soft
hsl(210 20% 98% / 40%)
#f8f9fa66
- global-vibrancy-background-hard
hsl(221 10% 56% / 40%)
#838a9a66
- global-disabled-background
hsl(225 11% 7% / 6%)
#0f10130f
- global-disabled-foreground
hsl(0 0% 0% / 20%)
#00000033
Cta colors
- cta-default
hsl(0 100% 44%)
#e00000
- cta-dark
hsl(0 100% 38%)
#c10000
- cta-foreground
hsl(0 0% 100%)
#ffffff
Dimmed colors
- dimmed-0
hsl(210 20% 98%)
#f8f9fa
- dimmed-1
hsl(220 19% 91%)
#e3e6ec
- dimmed-2
hsl(220 16% 85%)
#d2d6de
- dimmed-3
hsl(219 14% 75%)
#b6bcc8
- dimmed-4
hsl(220 12% 66%)
#9da4b2
- dimmed-5
hsl(221 9% 49%)
#717888
- dimmed-6
hsl(221 10% 39%)
#595f6d
- dimmed-7
hsl(221 10% 30%)
#444954
- dimmed-8
hsl(219 13% 22%)
#30353f
- dimmed-9
hsl(218 11% 14%)
#1f2227
Highlight colors
- highlight-gray-background
hsl(220 19% 91%)
#e3e6ec
- highlight-gray-foreground
hsl(221 10% 39%)
#595f6d
- highlight-yellow-background
hsl(60 100% 89%)
#ffffc6
- highlight-yellow-foreground
hsl(25 100% 34%)
#ad4800
- highlight-green-background
hsl(149 100% 91%)
#d1ffe7
- highlight-green-foreground
hsl(156 100% 23%)
#077546
- highlight-blue-background
hsl(187 100% 89%)
#c6f8ff
- highlight-blue-foreground
hsl(214 66% 44%)
#2666ba
- highlight-red-background
hsl(343 100% 96%)
#ffeaf0
- highlight-red-foreground
hsl(351 92% 37%)
#b50721
- highlight-cyan-background
hsl(186 100% 96%)
#eafcff
- highlight-cyan-foreground
hsl(187 64% 33%)
#1e7d8a
- highlight-purple-background
hsl(300 100% 98%)
#fff4ff
- highlight-purple-foreground
hsl(298 32% 46%)
#984f9a
- highlight-magenta-background
hsl(327 73% 97%)
#fcf1f7
- highlight-magenta-foreground
hsl(324 60% 44%)
#b32c7d
- highlight-violet-background
hsl(257 47% 97%)
#f5f3fa
- highlight-violet-foreground
hsl(263 50% 49%)
#6e3ebb
- highlight-indigo-background
hsl(240 60% 98%)
#f6f6fc
- highlight-indigo-foreground
hsl(241 60% 56%)
#4d4bd2
- highlight-mint-background
hsl(165 62% 95%)
#eafaf6
- highlight-mint-foreground
hsl(165 59% 30%)
#1f7963
- highlight-dipsy-background
hsl(81 55% 94%)
#f2f8e7
- highlight-dipsy-foreground
hsl(83 80% 24%)
#486e0c
- highlight-salmon-background
hsl(16 73% 97%)
#fcf4f1
- highlight-salmon-foreground
hsl(15 66% 45%)
#be4c27