‌
‌

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% 47%)

    #ef0000

  • cta-dark

    hsl(0 100% 41%)

    #d10000

  • 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

Created by Wonderflow Design Team for Wonderflow.

© Wonderflow 2023