Kleur

Ons kleurschema is het visuele symbool van ons merk

We gebruiken een kleurschema dat past bij ons merk en onze klanten.

Primary Color

NAME: MAGENTA 100
CMYK: 20 100 0 0
HEX: #cd00ff

NAME: DARK GREY
CMYK: 0 0 0 20
HEX: #2d2c2b

NAME: WARM GREY 100
CMYK: 0 0 0 0
HEX: #F9F4F2

Secondary Brand Colors

NAME: SUNFLOWER YELLOW
CMYK: 0 20 100 0
HEX: #ffcd00

NAME: DODGER BLUE
CMYK: 100 100 0 0
HEX: #2196f3

NAME: RESPLENDENT GROWTH
CMYK: 100 0 100 0
HEX: #388e3c

NAME: FLUSH ORANGE
CMYK: 0 66 96 0
HEX: #ff7300

NAME: BLOOD BURST
CMYK: 0 100 100 0
HEX: #ff4b4b

NAME: SURFACE
CMYK: 0 0 0 0
HEX: #f5f5f5

Accent Colors

Gebruik deze kleuren voor accentuerende elementen in de interface, achtergrond of illustaraties. Vermeid het te veel gebruiken van deze kleuren om meer nadruk te leggen op onze merk kleuren.

NAME: YELLOW 100
CMYK: 0 5 25 0
HEX: #f7d344

NAME: YELLOW 200
CMYK: 0 25 100 20
HEX: #ffcd00

NAME: YELLOW 400
CMYK: 0 30 100 40
HEX: #be9800

NAME: BLUE 100
CMYK: 25 10 0 0
HEX: #5cacf7

NAME: BLUE 200
CMYK: 100 50 0 20
HEX: #2196f3

NAME: BLUE 400
CMYK: 100 80 0 37
HEX: #166eb4

NAME: GREEN 100
CMYK: 20 0 20 0
HEX: #81c784

NAME: GREEN 300
CMYK: 100 0 100 50
HEX: #388e3c

NAME: GREEN 400
CMYK: 100 0 100 65
HEX: #2e7d32

NAME: ORANGE 100
CMYK: 0 15 30 0
HEX: #ffa440

NAME: ORANGE 300
CMYK: 0 55 100 20
HEX: #ff7300

NAME: ORANGE 400
CMYK: 0 60 100 40
HEX: #b34d00

NAME: RED 100
CMYK: 0 20 20 0
HEX: #ff7770

NAME: RED 300
CMYK: 0 80 80 20
HEX: #ff4b4b

NAME: RED 400
CMYK: 0 80 80 40
HEX: #be3535

NAME: PINK 100
CMYK: 0 0 0 0
HEX: #ff80ab

NAME: PINK 300
CMYK: 0 0 0 24
HEX: #ff76b8

NAME: PINK 400
CMYK: 0 0 0 38
HEX: #ff52a5

NAME: INDIGO 100
CMYK: 0 0 0 0
HEX: #5431A5

NAME: INDIGO 300
CMYK: 0 0 0 24
HEX: #3B197F

NAME: INDIGO 400
CMYK: 0 0 0 38
HEX: #281466

NAME: PURPLE 100
CMYK: 0 0 0 0
HEX: #727CE5

NAME: PURPLE 300
CMYK: 0 0 0 24
HEX: #6666CC

NAME: PURPLE 400
CMYK: 0 0 0 38
HEX: #524AA5

Neutral Colors

Gebruik deze kleuren om diepte toe te voegen aan de achtergronden van de interface. Gebruik deze kleuren niet voor illustraties.

NAME: WARM GREY 100
CMYK: 0 0 0 0
HEX: #F9F4F2

LIGHT MODE BACKGROUND/DARK MODE TEXT

NAME: WARM GREY 200
CMYK: 0 0 0 0
HEX: #E2DED9

LIGHT MODE SURFACE CARD

NAME: WARM GREY 300
CMYK: 0 0 0 12
HEX: #C6C1B9

NAME: WARM GREY 400
CMYK: 0 0 0 87
HEX: #A8A5A0

NAME: WARM GREY 500
CMYK: 0 0 0 62
HEX: #63605D

NAME: WARM GREY 600
CMYK: 0 0 0 38
HEX: #44423F

DARK MODE SURFACE CARD

NAME: WARM GREY 700
CMYK: 0 0 0 2
HEX: #2D2C2B

DARK MODE BACKGROUND/LIGHT MODE TEXT

NAME: WARM GREY 800
CMYK: 0 0 0 100
HEX: #141313

Color Palette

Light Mode

Het light mode kleurenpalet voor gebruik op lichte achtergronden.

NAME: THEORIO BRAND COLOR
HEX: #cd00ff

NAME: WARM GREY 100/BG
HEX: #f9f4f2

NAME: WARM GREY 700/TEXT
HEX: #2d2c2b

NAME: YELLOW 200/BUTTON
HEX: #ffcd00

NAME: BLUE 200
HEX: #2196f3

NAME: GREEN 200
HEX: #388e3c

NAME: WARM GREY 200/SURFACE CARD
HEX: #e2ded9

NAME: RED 200
HEX: #ff4b4b

Dark Mode

Het dark mode kleurenpalet voor gebruik op donkere achtergronden.

NAME: THEORIO BRAND COLOR
HEX: #cd00ff

NAME: WARM GREY 700/BG
HEX: #2d2c2b

NAME: WARM GREY 100/TEXT
HEX: #f9f4f2

NAME: YELLOW 200/BUTTON
HEX: #ffcd00

NAME: BLUE 200
HEX: #2196f3

NAME: GREEN 200
HEX: #388e3c

NAME: WARM GREY 600/SURFACE CARD
HEX: #44423f

NAME: RED 200
HEX: #ff4b4b