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-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-default
hsl(0 100% 47%)
#ef0000
cta-dark
hsl(0 100% 41%)
#d10000
cta-foreground
hsl(0 0% 100%)
#ffffff
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-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