Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

UI Tabs


UI Tab
titleOverview





Highest Contrast

WCAG AA

WEB AIM



UI Tab
titleUsage

Usage of the Astronaut Theme Colors

(tbd)

#idRole#hex
$whiteDefault page background#ffffff


$astronaut-10Default boardlet background#F2F2F2




UI Tab
titleCode

Astronaut Theme Colors library


https://wasp2-dev.myapp.de:444/live-style-guide/theming


not MVP

not MVP

Astronaut Colors


Brand
Colors






scss variables#hex

scss variables#hex
Astronaut 100
$astronaut-100#0f0e0dBrand 100

$brand-100

#dbbb0d

Status
colourRed
titlenot MVP
Status
colourRed
title
Astronaut 90
$astronaut-90#272625Brand 90
Status

$brand-90

#e6c204

colourRed
titlenot MVP
Status
colourRed
titlenot MVP
Astronaut 80
$astronaut-80#3F3E3DBrand 80
Status
colourRed
titlenot MVP
Status
colourRed
titlenot MVP

$brand-80

#f0c906

Astronaut 70
$astronaut-70#575655Brand 70
$brand-70#fcd515
Astronaut 60
$astronaut-60#6F6E6DBrand 60
$brand-60#fadd4b
Astronaut 50
$astronaut-50#878686Brand 50
$brand-50#fae164
Astronaut 40
$astronaut-40#B7B6B6Brand 40
Status

$brand-40

#fbe67e

colourRed
titlenot MVP
Status
colourRed
titlenot MVP
Astronaut 30
$astronaut-30#CFCECEBrand 30
Status
colourRed
titlenot MVP
Status
colourRed
titlenot MVP

$brand-30

#fceb98

Astronaut 20
$astronaut-20#E7E6E6Brand 20
Status

$brand-20

#fcf0b1

colourRed
titlenot MVP
Status
colourRed
titlenot MVP
Astronaut 10
$astronaut-10#F2F2F2Brand 10

$brand-10

#fdf5cb

Status
colourRed
titlenot MVP
Status
colourRed
title


Alerts Colors














Danger
scss variables#hexWarning
scss variables#hexSuccess
scss variables#hexNote
scss variables#hex
Danger 100
$danger-100#f06464Warning 100
$warning-100#fdb225Success 100
$success-100#9FDB57Note 100
$note-100#87DFF0
Danger 80

Status
colourRed
titlenot MVP

Status
colourRed
titlenot MVP

Warning 80

Status
colourRed
titlenot MVP

Status
colourRed
titlenot MVP

Success 80

Status
colourRed
titlenot MVP

Status
colourRed
titlenot MVP

Note 80

Status
colourRed
titlenot MVP

Status
colourRed
titlenot MVP

Danger 60
$danger-60#f17575Warning 60
$warning-60#fdba3dSuccess 60
$success-60#a9df69Note 60
$note-60#94e2f1
Danger 40

Status
colourRed
titlenot MVP

Status
colourRed
titlenot MVP

Warning 40

Status
colourRed
titlenot MVP

Status
colourRed
titlenot MVP

Success 40

Status
colourRed
titlenot MVP

Status
colourRed
titlenot MVP

Note 40

Status
colourRed
titlenot MVP

Status
colourRed
titlenot MVP

Danger 20

Status
colourRed
titlenot MVP

Status
colourRed
titlenot MVP

Warning 20

Status
colourRed
titlenot MVP

Status
colourRed
titlenot MVP

Success 20

Status
colourRed
titlenot MVP

Status
colourRed
titlenot MVP

Note 20

Status
colourRed
titlenot MVP

Status
colourRed
titlenot MVP



UI Tab
titleAdditional colors

Chart color library

https://assets.adobe.com/public/5400bb32-581e-4d00-7157-d9f3e19de0b0


Colors


asdf
scss variables#hex


xxx#,jvghh



#eeb200



#ff6b61



#3d6d4f



#17e1e3



#3c225f



#96D0FF



#A46798



#B18AE0



#87DCFA



#00FDFF



#5C22FF



#C39D63



#2C159D



#89937A



#FF9320



#F64A00



#2A4ED1



#E10000



#004E25



#384D9D



#F6F3EB



#1F3B34



yyy



yyy



yyy



yyy



yyy



yyy



yyy



yyy



yyy



yyy



yyy



yyy



yyy



yyy







...