No Preview

Sorry, but you either have no stories or none are selected somehow.

If the problem persists, check the browser console, or the terminal you've run Storybook from.


  

Colors

Overview

Planum - The colors are designed to be clear and accessible.
The colors are also used in the UI to make the interface more accessible.

Semantic colors

Base
Primary

#8979e8 Primary color

Secondary

#ff8ae8 Secondary color

Tertiary

#ffde68 Tertiary color

Utility
Success

#51d258 success color

Info

#29b6f6 info color

Warning

#fbc92a warning color

Danger

#ef5350 danger color

Neutral
White

#ffffff white color

Surface

#f9f5f2 surface color

black

#000000 black color

Palette colors

Primary
primary 25

#f9f9fe

primary 50

#f3f2fd

primary 100

#e7e4fa

primary 200

#b8aef1

primary 300

#a99dee

primary 400

#998beb

primary 500

#8979e8

primary 600

#624ce0

primary 700

#5341be

primary 800

#4939a8

primary 900

#403192

Secondary
secondary 25

#fffcff

secondary 50

#fff9fe

secondary 100

#fff2fc

secondary 200

#ffe5fa

secondary 300

#ffd8f8

secondary 400

#ff8ae8

Tertiary
tertiary 25

#fffefc

tertiary 50

#fffdf8

tertiary 100

#fffbf1

tertiary 200

#fff7e3

tertiary 300

#fff3d4

tertiary 400

#ffde68

Success
success 25

#fafefa

success 50

#f4fcf4

success 100

#e8f9e8

success 200

#c7efc6

success 300

#a2e5a1

success 400

#77db79

success 500

#51d258

success 600

#20c934

success 700

#0db92a

success 800

#00a61b

success 900

#007500

Info
info 25

#f8fdff

info 50

#f0faff

info 100

#e1f5fe

info 200

#b3e5fc

info 300

#81d4fa

info 400

#4fc3f7

info 500

#29b6f6

info 600

#03a9f4

info 700

#039be5

info 800

#0288d1

info 900

#01579b

Warning
warning 25

#fffef8

warning 50

#fffcf0

warning 100

#fef8e1

warning 200

#fdecb3

warning 300

#fddf82

warning 400

#fcd450

warning 500

#fbc92a

warning 600

#fbc00d

warning 700

#fbb205

warning 800

#fba003

warning 900

#fa7000

Danger
danger 25

#fffafb

danger 50

#fff5f7

danger 100

#ffebee

danger 200

#ffcdd2

danger 300

#ef9a9a

danger 400

#e57373

danger 500

#ef5350

danger 600

#f44336

danger 700

#e53935

danger 800

#d32f2f

danger 900

#b71c1c

Surface
surface 25

#fdfdfd

surface 50

#fbfbfb

surface 100

#f6f6f6

surface 200

#eaeaea

surface 300

#dcdcdc

surface 400

#c7c7c7

surface 500

#a2a2a2

surface 600

#808080

surface 700

#424242

surface 800

#212121

surface 900

#000000

Text colors

text Dark

#060606

text Medium

#212121

text Success

#51d258

text Danger

#ef5350

text Brand

#624ce0

text Light

#808080

text Disabled

#a2a2a2

text Info

#4fc3f7