Cores
As cores são usadas para expressar estilo e comunicar significado.
Escalas de cores
Neutrals
Neutral
Tons de cinza que variam de acordo com o tema (light/dark)
Neutral 700
kosmos-ref-color-neutral700
Light #00000 (21:1)
Dark #FFFFFF (19.16:1)
Neutral 600
kosmos-ref-color-neutral600
Light #2A2A2A (14.35:1)
Dark #E8E8E8 (15.64:1)
Neutral 500
kosmos-ref-color-neutral500
Light #757575 (4.6:1)
Dark #9C9C9C(6.91:1)
Neutral 400
kosmos-ref-color-neutral400
Light #9E9E9E (2.67:1)
Dark #737373 (4.04:1)
Neutral 300
kosmos-ref-color-neutral300
Light #BDBDBD (1.87:1)
Dark #505050 (2.87:1)
Neutral 300 Alfa
kosmos-ref-color-neutral300alfa
Light #000000 26% (1.87:1)
Dark #FFFFFF 27% (2.37:1)
Neutral 200
kosmos-ref-color-neutral200
Light #E0E0E0 (1.32:1)
Dark #303030 (1.45:1)
Neutral 200 Alpha
kosmos-ref-color-neutral200alfa
Light #000000 12% (1.32:1)
Dark #FFFFFF 13.7% (1.45:1)
Neutral 100
kosmos-ref-color-neutral100
Light #F2F2F2
Dark #202020
Neutral 100 Alpha
kosmos-ref-color-neutral100alfa
Light #000000 5%
Dark #FFFFFF 7%
Neutral 50
kosmos-ref-color-neutral50
Light #FFFFFF (1:1)
Dark #000000 (1.09:1)
Neutral Grad
kosmos-ref-grad-neutral
1 #00000
2 #424242
Black Solid
Tons de preto que não variam de acordo com o tema (light/dark)
Black Solid 700
kosmos-ref-color-blackSolid700
#000000 100%
Black Solid 600
kosmos-ref-color-blackSolid600
#000000 88%
Black Solid 500
kosmos-ref-color-blackSolid500
#000000 72%
Black Solid 400
kosmos-ref-color-blackSolid400
#000000 55%
Black Solid 300
kosmos-ref-color-blackSolid300
#000000 40%
Black Solid 200
kosmos-ref-color-blackSolid200
#000000 20%
Black Solid 100
kosmos-ref-color-blackSolid100
#000000 12%
Black Solid Grad
kosmos-ref-grad-blackSolid
1 #000000 80%
2 #000000 64%
White Solid
Tons de branco que não variam de acordo com o tema (light/dark)
White Solid 700
kosmos-ref-color-whiteSolid700
#FFFFFF 100%
White Solid 600
kosmos-ref-color-whiteSolid600
#FFFFFF 88%
White Solid 500
kosmos-ref-color-whiteSolid500
#FFFFFF 72%
White Solid 400
kosmos-ref-color-whiteSolid400
#FFFFFF 55%
White Solid 300
kosmos-ref-color-whiteSolid300
#FFFFFF 40%
White Solid 200
kosmos-ref-color-whiteSolid200
#FFFFFF 28%
White Solid 100
kosmos-ref-color-whiteSolid100
#FFFFFF 16%
White Solid Grad
kosmos-ref-grad-whiteSolid
#FFFFFF 92%
#FFFFFF 72%
System
Cores aplicadas em elementos sitêmicos
Background
kosmos-ref-color-systemBackground
Light #FFFFFF
Dark #0F0F0F
Elevation
kosmos-ref-color-systemElevation
Light #FFFFFF
Dark #1F1F1F
Overlay
kosmos-ref-color-systemOverlay
Light #000000 72%
Dark #000000 72%
Tooltip
kosmos-ref-color-systemTooltip
Light #2121221
Dark #313131
Branding
Letras Primary
Letras Primary 700
kosmos-ref-color-letrasPrimary700
Light #8D9908
Dark #9AA60A
Letras Primary 600 contrast
kosmos-ref-color-letrasPrimary600contrast
Light #9AA60A
Dark #B2C000
Letras Primary 600
kosmos-ref-color-letrasPrimary600
Light #B2C000
Dark #B2C000
Letras Primary 500
kosmos-ref-color-letrasPrimary500
Light #C0CF0A
Dark #9AA60A
Letras Primary 400
kosmos-ref-color-letrasPrimary400
Light #D3DE59
Dark #4A4F0A
Letras Primary 300
kosmos-ref-color-letrasPrimary300
Light #B2C000 41%
Dark #B2C000 39%
Letras Primary 200
kosmos-ref-color-letrasPrimary200
Light #B2C000 34%
Dark #B2C000 20%
Letras Primary 100
kosmos-ref-color-letrasPrimary100
Light #B2C000 15%
Dark #B2C000 11%
Letras Primary Grad
kosmos-ref-grad-letrasPrimary
1: #D8ED00
2: #B2C000
Letras Secondary
Letras Seconday 700
kosmos-ref-color-letrasSecondary700
Light #CC5200
Dark #D15604
Letras Secondary 600 contrast
kosmos-ref-color-letrasSecondary600contrast
Light #ED4800
Dark #E75D00
Letras Secondary 600
kosmos-ref-color-letrasSecondary600
Light #F56200
Dark #F56200
Letras Secondary 400
kosmos-ref-color-letrasSecondary400
Light #FF7E28
Dark #9E4509
Letras Secondary 300
kosmos-ref-color-letrasSecondary300
Light #FCB17F
Dark #78370B
Letras Secondary 200
kosmos-ref-color-letrasSecondary200
Light #FED1B3
Dark #F56200 27%
Letras Secondary 100
kosmos-ref-color-letrasSecondary100
Light #FFECE0
Dark #F56200 14%
Letras Secondary Grad
kosmos-ref-grad-letrasSecondary
1 #DF3600
2 #FB8800
Letras Tertiary
Letras Tertiary 700
kosmos-ref-color-letrasTertiary700
Light #6624B2
Dark #6F1FBF
Letras Tertiary 600 contrast
kosmos-ref-color-letrasTertiary600contrast
Light #8422E5
Dark #A366FF
Letras Tertiary 600
kosmos-ref-color-letrasTertiary600
Light #8422E5
Dark #8422E5
Letras Tertiary 400
kosmos-ref-color-letrasTertiary400
Light #A157FF
Dark #5C1D9B
Letras Tertiary 300
kosmos-ref-color-letrasTertiary300
Light #D0B3FF
Dark #491A75
Letras Tertiary 200
kosmos-ref-color-letrasTertiary200
Light #EADEFF
Dark #A366FF 28%
Letras Tertiary 100
kosmos-ref-color-letrasTertiary100
Light #F7F2FF
Dark #A366FF 15%
Letras Tertiary Grad
kosmos-ref-grad-letrasTertiary
1 #6E24E0
2 #D75CFF
Acessory
Red
Red 700
kosmos-ref-color-red700
Light #CC1818
Dark #CC211F
Red 600 contrast
kosmos-ref-color-red600contrast
Light #E81A16
Dark #EF5350
Red 600
kosmos-ref-color-red600
Light #E81A16
Dark #E81A16
Red 500
kosmos-ref-color-red500
Light #EF5350
Dark #CC211F
Red 400
kosmos-ref-color-red400
Light #FF8080
Dark #A11F1D
Red 300
kosmos-ref-color-red300
Light #FFADAD
Dark #741917
Red 200
kosmos-ref-color-red200
Light #FFD1D5
Dark #EF5350 28.5%
Red 100
kosmos-ref-color-red100
Light #FFEBEE
Dark #EF5350 15%
Red Grad
kosmos-ref-grad-red
1 #CE0D09
2 #FA5C39
Orange
Orange 700
kosmos-ref-color-orange700
Light #D43504
Dark #D43A0B
Orange 600 contrast
kosmos-ref-color-orange600contrast
Light #EF3700
Dark #F2592C
Orange 600
kosmos-ref-color-orange600
Light #EF3700
Dark #EF3700
Orange 500
kosmos-ref-color-orange500
Light #F6653A
Dark #D43A0B
Orange 400
kosmos-ref-color-orange400
Light #FA8865
Dark #AD310A
Orange 300
kosmos-ref-color-orange300
Light #FBAD95
Dark #77250C
Orange 200
kosmos-ref-color-orange200
Light #FFCCBC
Dark #F2592C 28%
Orange 100
kosmos-ref-color-orange100
Light #FBE9E7
Dark #F2592C 15%
Orange Grad
kosmos-ref-grad-orange
1 #E60E00
2 #FF7F22
Yellow
Yellow 700
kosmos-ref-color-yellow700
Light #EBA000
Dark #D99802
Yellow 600 contrast
kosmos-ref-color-yellow600contrast
Light #FAAF00
Dark #F0B12B
Yellow 600
kosmos-ref-color-yellow600
Light #FAAF00
Dark #FAAF00
YellowYellow 500
kosmos-ref-color-yellow500
Light #FFC328
Dark #D99802
Orange 400
kosmos-ref-color-yellow400
Light #FFD249
Dark #AD7B07
Yellow 300
kosmos-ref-color-yellow300
Light #FFDB6D
Dark #573D04
Yellow 200
kosmos-ref-color-yellow200
Light #FFECB3
Dark #F0B12B 19%
Yellow 100
kosmos-ref-color-yellow100
Light #FFF8E1
Dark #F0B12B 10%
Yellow Grad
kosmos-ref-grad-yellow
1 #EF6D16
2 #FFDF14
Green
Green 700
kosmos-ref-color-green700
Light #40860E
Dark #4E8F13
Green 600 contrast
kosmos-ref-color-green600contrast
Light #58A512
Dark #7EBF41
Green 600
kosmos-ref-color-green600
Light #58A512
Dark #58A512
Green 500
kosmos-ref-color-green500
Light #7DC23D
Dark #4E8F13
Green 400
kosmos-ref-color-green400
Light #99D067
Dark #3F7310
Green 300
kosmos-ref-color-green300
Light #ADDB82
Dark #294A0A
Green 200
kosmos-ref-color-green200
Light #D2E9BC
Dark #7EBF41 21%
Green 100
kosmos-ref-color-green100
Light #EAF7DF
Dark #7EBF41 11%
Green Grad
kosmos-ref-grad-green
1 #50A306
2 #B6D400
Emerald
Emerald 700
kosmos-ref-color-emerald700
Light #237827
Dark #27872B
Emerald 600 contrast
kosmos-ref-color-emerald600contrast
Light #2A992F
Dark #5EBD63
Emerald 600
kosmos-ref-color-emerald600
Light #2A992F
Dark #2A992F
Emerald 500
kosmos-ref-color-emerald500
Light #49B84E
Dark #27872B
Emerald 400
kosmos-ref-color-emerald400
Light #74CB78
Dark #206E24
Emerald 300
kosmos-ref-color-emerald300
Light #93D696
Dark #184D1A
Emerald 200
kosmos-ref-color-emerald200
Light #C8E6C9
Dark #5EBD63 22%
Emerald 100
kosmos-ref-color-emerald100
Light #E8F5E9
Dark #5EBD63 11%
Emerald Grad
kosmos-ref-grad-emerald
1 #238327
2 #6EC946
Teal
Teal 700
kosmos-ref-color-teal700
Light #006357
Dark #127369
Teal 600 contrast
kosmos-ref-color-teal600contrast
Light #008577
Dark #29AB9E
Teal 600
kosmos-ref-color-teal600
Light #008577
Dark #008577
Teal 500
kosmos-ref-color-teal500
Light #26A69A
Dark #127369
Teal 400
kosmos-ref-color-teal400
Light #50BCB2
Dark #125951
Teal 300
kosmos-ref-color-teal300
Light #80CBC4
Dark #0C3B36
Teal 200
kosmos-ref-color-teal200
Light #B2DFDB
Dark #29AB9E 24,5%
Teal 100
kosmos-ref-color-teal100
Light #E2F3F2
Dark #29AB9E 13%
Teal Grad
kosmos-ref-grad-teal
1 #008274
2 #16B296
Cyan
Cyan 700
kosmos-ref-color-cyan700
Light #007E8A
Dark #088999
Cyan 600 contrast
kosmos-ref-color-cyan600contrast
Light #009FB2
Dark #45C6D6
Cyan 600
kosmos-ref-color-cyan600
Light #009FB2
Dark #009FB2
Cyan 500
kosmos-ref-color-cyan500
Light #24BED1
Dark #088999
Cyan 400
kosmos-ref-color-cyan400
Light #44D0E2
Dark #066E7A
Cyan 300
kosmos-ref-color-cyan300
Light #6EDBE9
Dark #115159
Cyan 200
kosmos-ref-color-cyan200
Light #B2EBF2
Dark #45C6D6 20%
Cyan 100
kosmos-ref-color-cyan100
Light #E0F7FA
Dark #45C6D6 10,5%
Cyan Grad
kosmos-ref-grad-cyan
1 #0096A7
2 #10EBE0
Blue
Blue 700
kosmos-ref-color-blue700
Light #065BBC
Dark #0966B8
Blue 600 contrast
kosmos-ref-color-blue600contrast
Light #0075DB
Dark #5CA5E5
Blue 600
kosmos-ref-color-blue600
Light #0075DB
Dark #0075DB
Blue 500
kosmos-ref-color-blue500
Light #339EF5
Dark #0966B8
Blue 400
kosmos-ref-color-blue400
Light #5FB4FF
Dark #0F5391
Blue 300
kosmos-ref-color-blue300
Light #7AC1FA
Dark #0B3F6E
Blue 200
kosmos-ref-color-blue200
Light #BBDEFB
Dark #5CA5E5 23%
Blue 100
kosmos-ref-color-blue100
Light #E3F2FD
Dark #5CA5E5 12%
Blue Grad
kosmos-ref-grad-blue
1 #285BDE
2 #30C3FC
Indigo
Indigo 700
kosmos-ref-color-indigo700
Light #1D2C99
Dark #2B3A94
Indigo 600 contrast
kosmos-ref-color-indigo600contrast
Light #2C3FB0
Dark #8498F0
Indigo 600
kosmos-ref-color-indigo600
Light #2C3FB0
Dark #2C3FB0
Indigo 500
kosmos-ref-color-indigo500
Light #5C6BC0
Dark #2B3A94
Indigo 400
kosmos-ref-color-indigo400
Light #8591D3
Dark #253178
Indigo 300
kosmos-ref-color-indigo300
Light #9FA8DA
Dark #1D265C
Indigo 200
kosmos-ref-color-indigo200
Light #C5CAE9
Dark #8498F0 23,5%
Indigo 100
kosmos-ref-color-indigo100
Light #E8EAF6
Dark #8498F0 12%
Indigo Grad
kosmos-ref-grad-indigo
1 #2C2A9B
2 #3885CE
Violet
Violet 700
kosmos-ref-color-violet700
Light #4E198C
Dark #591994
Violet 600 contrast
kosmos-ref-color-violet600contrast
Light #6821AF
Dark #A166F2
Violet 600
kosmos-ref-color-violet600
Light #6821AF
Dark #6821AF
Violet 500
kosmos-ref-color-violet500
Light #7E57C2
Dark #591994
Violet 400
kosmos-ref-color-violet400
Light #9F81D5
Dark #481C78
Violet 300
kosmos-ref-color-violet300
Light #B39DDB
Dark #37175C
Violet 200
kosmos-ref-color-violet200
Light #D1C4E9
Dark #A166F2 29%
Violet 100
kosmos-ref-color-violet100
Light #F1ECF8
Dark #A166F2 15%
Violet Grad
kosmos-ref-grad-violet
1 #492496
2 #7E57C2
Purple
Purple 700
kosmos-ref-color-purple700
Light #73118D
Dark #72138A
Purple 600 contrast
kosmos-ref-color-purple600contrast
Light #8A0CAB
Dark #B15CC7
Purple 600
kosmos-ref-color-purple600
Light #8A0CAB
Dark #8A0CAB
Purple 500
kosmos-ref-color-purple500
Light #AD3BC1
Dark #72138A
Purple 400
kosmos-ref-color-purple400
Light #C074D4
Dark #5D1270
Purple 300
kosmos-ref-color-purple300
Light #CF99DD
Dark #44174F
Purple 200
kosmos-ref-color-purple200
Light #E3C5EB
Dark #B15CC7 30%
Purple 100
kosmos-ref-color-purple100
Light #F6ECF8
Dark #B15CC7 16%
Puprple Grad
kosmos-ref-grad-purple
1 #7D0C9A
2 #CA1EC3
Pink
Pink 700
kosmos-ref-color-pink700
Light #B10751
Dark #BA0F4E
Pink 600 contrast
kosmos-ref-color-pink600contrast
Light #E20959
Dark #EB5E8D
Pink 600
kosmos-ref-color-pink600
Light #E20959
Dark #E20959
Pink 500
kosmos-ref-color-pink500
Light #EC407A
Dark #BA0F4E
Pink 400
kosmos-ref-color-pink400
Light #EF7DA3
Dark #940F40
Pink 300
kosmos-ref-color-pink300
Light #F8A5C1
Dark #6B1333
Pink 200
kosmos-ref-color-pink200
Light #FFC9DB
Dark #EB5E8D 27%
Pink 100
kosmos-ref-color-pink100
Light #FFEBF1
Dark #EB5E8D 14%
Pink Grad
kosmos-ref-grad-pink
1 #ED1515
2 #ED45B5
Brown
Brown 700
kosmos-ref-color-brown700
Light #442818
Dark #59341F
Brown 600 contrast
kosmos-ref-color-brown600contrast
Light #673B22
Dark #A3643C
Brown 600
kosmos-ref-color-brown600
Light #673B22
Dark #673B22
Brown 500
kosmos-ref-color-brown500
Light #9D5C38
Dark #59341F
Brown 400
kosmos-ref-color-brown400
Light #C6784C
Dark #4B2D1C
Brown 300
kosmos-ref-color-brown300
Light #D4A286
Dark #3C2519
Brown 200
kosmos-ref-color-brown200
Light #E4C5B4
Dark #A3643C 33%
Brown 100
kosmos-ref-color-brown100
Light #F1E2D9
Dark #A3643C 17%
Brown Grad
kosmos-ref-grad-brown
1 #5C281
2 #95523A
Steel
Steel 700
kosmos-ref-color-steel700
Light #2E414A
Dark #3C545E
Steel 600 contrast
kosmos-ref-color-steel600contrast
Light #486775
Dark #658EA1
Steel 600
kosmos-ref-color-steel600
Light #486775
Dark #486775
Steel 500
kosmos-ref-color-steel500
Light #6B8A99
Dark #3C545E
Steel 400
kosmos-ref-color-steel400
Light #8BA5B2
Dark #2F434D
Steel 300
kosmos-ref-color-steel300
Light #B0BEC5
Dark #20323A
Steel 200
kosmos-ref-color-steel200
Light #CFD8DC
Dark #658EA1 27,5%
Steel 100
kosmos-ref-color-steel100
Light #ECEFF1
Dark #658EA1 14%
Steel Grad
kosmos-ref-grad-steel
1 #3A5764
2 #92B5C7
Indicações das escalas
Essas escalas não tem a obrigatoriedade de serem aplicadas somente a estes contextos, mas sim estes contextos necessitam dessas escalas.
100
Backgrounds claros
200
Bordas
300
Elementos desabilitados
400
Elementos ativos
500
Textos secundários
600
Aplicações primárias de contraste com o background. Esta é a cor principal da paleta.
600 contrast
Aplicações primárias de maior contraste: textos, Ãcones e outros elementos semelhantes.
700
Aplicações de hover.
Aplicações sistêmicas
System
Escalas Neutral e System
System brand
Letras Primary/Secondary e Academy Primary/Secondary
Negative
Red 100 a 700
Warning
Orange 100 a 700
Attention
Yellow 100 a 700
Positive
Green 100 a 700
Tooltips & Snackbars
System toolitip
Overlays & Fades
System overlay
Tokens Alias
Alias é um token que referencia outro token, no nosso caso, os refference tokens.
Para entender melhor sobre design tokens, leia nosso guia.
As implementações dos tokens de cores para o modo escuro na web apresentaram alguns desafios, especialmente no que diz respeito ao header. A transição das cores equivalentes entre os temas após a aplicação não foi boa. A solução mais eficaz foi a substituição das cores para tons não equivalentes entre os modos light e dark. Para viabilizar essa abordagem, foram introduzidos os tokens alias, associando cada um a um token ref especÃfico para o respectivo tema.
Cores de fallback
Para todos os contextos que podem ou avsaardidasr de acordo com o modo (light/dark), é recomendado o uso da escala Neutral para fallback. Em casos que suportam aplicações não variáveis, como backgrounds de Ãcones de cor fixa, a escala indicada é Back Solid.
Exemplo de aplicação de fallback colors:
Tabela de Tokens
Atualizado