Cores

As cores são usadas para expressar estilo e comunicar significado.

Essas são as cores usadas nas interfaces de todos nossos produtos:

Scale Application

Essas escalas não tem a obrigatoriedade de serem aplicadas somente a estes contextos, mas sim estes contextos necessitam dessas escalas.

Escala

Aplicação

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.

Para aplicações em nomes de música, há uma exceção a essa regra, sendo correto a aplicação do token Letras Secondary 600. O token Letras Secondary Contrast fica reservado para o aumento de contraste em textos do blog.

System Colors

Contextos

Escalas

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.

Fallback colors

Para todos os contextos que podevam variar 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

https://docs.google.com/spreadsheets/d/1jRWuA1-5kjIoKlg9vYOX2c5JuO7-zwmAMXEo9AAsLyQ/edit?usp=sharingdocs.google.com

Token

Hex Light

Alpha Light

Hex Dark

Alpha Dark

cosmos-ref-color-neutral700

#000000

100%

#FFFFFF

100%

cosmos-ref-color-neutral600

#2A2A2A

100%

#E8E8E8

100%

cosmos-ref-color-neutral500

#757575

100%

#9C9C9C

100%

cosmos-ref-color-neutral400

#9E9E9E

100%

#737373

100%

cosmos-ref-color-neutral300

#BDBDBD

100%

#505050

100%

cosmos-ref-color-neutral300alfa

#000000

26%

#FFFFFF

27%

cosmos-ref-color-neutral200

#E0E0E0

100%

#303030

100%

cosmos-ref-color-neutral200alfa

#000000

12%

#FFFFFF

13,7%

cosmos-ref-color-neutral100

#F2F2F2

100%

#202020

100%

cosmos-ref-color-neutral100alfa

#000000

#FFFFFF

cosmos-ref-color-neutral50

#FFFFFF

100%

#000000

100%

cosmos-ref-color-blackSolid700

#000000

100%

#000000

100%

cosmos-ref-color-blackSolid600

#000000

88%

#000000

88%

cosmos-ref-color-blackSolid400

#000000

55%

#000000

55%

cosmos-ref-color-blackSolid300

#000000

40%

#000000

40%

cosmos-ref-color-blackSolid200

#000000

20%

#000000

20%

cosmos-ref-color-blackSolid100

#000000

12%

#000000

12%

cosmos-ref-color-whiteSolid700

#FFFFFF

100%

#FFFFFF

100%

cosmos-ref-color-whiteSolid600

#FFFFFF

88%

#FFFFFF

88%

cosmos-ref-color-whiteSolid500

#FFFFFF

71%

#FFFFFF

71%

cosmos-ref-color-whiteSolid400

#FFFFFF

55%

#FFFFFF

55%

cosmos-ref-color-whiteSolid300

#FFFFFF

40%

#FFFFFF

40%

cosmos-ref-color-whiteSolid200

#FFFFFF

13,70%

#FFFFFF

13,70%

cosmos-ref-color-whiteSolid100

#FFFFFF

cosmos-ref-color-systemBackground

#FFFFFF

100%

#0F0F0F

100%

cosmos-ref-color-systemElevation

#FFFFFF

100%

#1F1F1F

100%

cosmos-ref-color-systemTooltip

#212121

100%

#313131

100%

cosmos-ref-color-systemOverlay

#000000

72%

#000000

72%

cosmos-ref-color-letrasPrimary700

#9FA101

100%

#A3A303

100%

cosmos-ref-color-letrasPrimary600contrast

#B7B700

100%

#C2C800

100%

cosmos-ref-color-letrasPrimary600

#C2C800

100%

#B7B700

100%

cosmos-ref-color-letrasPrimary400

#D8DF00

100%

#989800

100%

cosmos-ref-color-letrasPrimary300

#E7E999

100%

#808406

100%

cosmos-ref-color-letrasPrimary200

#F2F3C7

100%

#C2C800

19%

cosmos-ref-color-letrasPrimary100

#F9FBE7

100%

#C2C800

10%

cosmos-ref-color-letrasSecondary700

#CC5200

100%

#D15604

100%

cosmos-ref-color-letrasSecondary600contrast

#ED4800

100%

#E75D00

100%

cosmos-ref-color-letrasSecondary600

#F56200

100%

#F56200

100%

cosmos-ref-color-letrasSecondary400

#FF7E28

100%

#9E4509

100%

cosmos-ref-color-letrasSecondary300

#FCB17F

100%

#78370B

100%

cosmos-ref-color-letrasSecondary200

#FED1B3

100%

#F56200

27%

cosmos-ref-color-letrasSecondary100

#FFECE0

100%

#F56200

14%

cosmos-ref-color-letrasTertiary700

#6624B2

100%

#6F1FBF

100%

cosmos-ref-color-letrasTertiary600contrast

#8422E5

100%

#A366FF

100%

cosmos-ref-color-letrasTertiary600

#8422E5

100%

#8422E5

100%

cosmos-ref-color-letrasTertiary400

#A157FF

100%

#5C1D9B

100%

cosmos-ref-color-letrasTertiary300

#D0B3FF

100%

#491A75

100%

cosmos-ref-color-letrasTertiary200

#EADEFF

100%

#A366FF

28%

cosmos-ref-color-letrasTertiary100

#F7F2FF

100%

#A366FF

15%

cosmos-ref-color-red700

#CC1818

100%

#CC211F

100%

cosmos-ref-color-red600contrast

#E81A16

100%

#EF5350

100%

cosmos-ref-color-red600

#E81A16

100%

#E81A16

100%

cosmos-ref-color-red500

#EF5350

100%

#CC211F

100%

cosmos-ref-color-red400

#FF8080

100%

#A11F1D

100%

cosmos-ref-color-red300

#FFADAD

100%

#741917

100%

cosmos-ref-color-red200

#FFD1D5

100%

#EF5350

28,50%

cosmos-ref-color-red100

#FFEBEE

100%

#EF5350

15%

cosmos-ref-color-orange700

#D43504

100%

#D43A0B

100%

cosmos-ref-color-orange600contrast

#EF3700

100%

#F2592C

100%

cosmos-ref-color-orange600

#EF3700

100%

#EF3700

100%

cosmos-ref-color-orange500

#F6653A

100%

#D43A0B

100%

cosmos-ref-color-orange400

#FA8865

100%

#AD310A

100%

cosmos-ref-color-orange300

#FBAD95

100%

#77250C

100%

cosmos-ref-color-orange200

#FFCCBC

100%

#F2592C

28%

cosmos-ref-color-orange100

#FBE9E7

100%

#F2592C

15%

cosmos-ref-color-yellow700

#EBA000

100%

#D99802

100%

cosmos-ref-color-yellow600contrast

#FAAF00

100%

#F0B12B

100%

cosmos-ref-color-yellow600

#FAAF00

100%

#FAAF00

100%

cosmos-ref-color-yellow500

#FFC328

100%

#D99802

100%

cosmos-ref-color-yellow400

#FFD249

100%

#AD7B07

100%

cosmos-ref-color-yellow300

#FFDB6D

100%

#573D04

100%

cosmos-ref-color-yellow200

#FFECB3

100%

#F0B12B

19%

cosmos-ref-color-yellow100

#FFF8E1

100%

#F0B12B

10%

cosmos-ref-color-green700

#40860E

100%

#4E8F13

100%

cosmos-ref-color-green600contrast

#58A512

100%

#7EBF41

100%

cosmos-ref-color-green600

#58A512

100%

#58A512

100%

cosmos-ref-color-green500

#7DC23D

100%

#4E8F13

100%

cosmos-ref-color-green400

#99D067

100%

#3F7310

100%

cosmos-ref-color-green300

#ADDB82

100%

#294A0A

100%

cosmos-ref-color-green200

#D2E9BC

100%

#7EBF41

21%

cosmos-ref-color-green100

#EAF7DF

100%

#7EBF41

11%

cosmos-ref-color-emerald700

#237827

100%

#27872B

100%

cosmos-ref-color-emerald600contrast

#2A992F

100%

#5EBD63

100%

cosmos-ref-color-emerald600

#2A992F

100%

#2A992F

100%

cosmos-ref-color-emerald500

#49B84E

100%

#27872B

100%

cosmos-ref-color-emerald400

#74CB78

100%

#206E24

100%

cosmos-ref-color-emerald300

#93D696

100%

#184D1A

100%

cosmos-ref-color-emerald200

#C8E6C9

100%

#5EBD63

22%

cosmos-ref-color-emerald100

#E8F5E9

100%

#5EBD63

11,3%

cosmos-ref-color-teal700

#006357

100%

#127369

100%

cosmos-ref-color-teal600contrast

#008577

100%

#29AB9E

100%

cosmos-ref-color-teal600

#008577

100%

#008577

100%

cosmos-ref-color-teal500

#26A69A

100%

#127369

100%

cosmos-ref-color-teal400

#50BCB2

100%

#125951

100%

cosmos-ref-color-teal300

#80CBC4

100%

#0C3B36

100%

cosmos-ref-color-teal200

#B2DFDB

100%

#29AB9E

24,5%

cosmos-ref-color-teal100

#E2F3F2

100%

#29AB9E

13%

cosmos-ref-color-cyan700

#007E8A

100%

#088999

100%

cosmos-ref-color-cyan600contrast

#009FB2

100%

#45C6D6

100%

cosmos-ref-color-cyan600

#009FB2

100%

#009FB2

100%

cosmos-ref-color-cyan500

#24BED1

100%

#088999

100%

cosmos-ref-color-cyan400

#44D0E2

100%

#066E7A

100%

cosmos-ref-color-cyan300

#6EDBE9

100%

#115159

100%

cosmos-ref-color-cyan200

#B2EBF2

100%

#45C6D6

20%

cosmos-ref-color-cyan100

#E0F7FA

100%

#45C6D6

10.5%

cosmos-ref-color-blue700

#065BBC

100%

#0966B8

100%

cosmos-ref-color-blue600contrast

#0075DB

100%

#5CA5E5

100%

cosmos-ref-color-blue600

#0075DB

100%

#0075DB

100%

cosmos-ref-color-blue500

#339EF5

100%

#0966B8

100%

cosmos-ref-color-blue400

#5FB4FF

100%

#0F5391

100%

cosmos-ref-color-blue300

#7AC1FA

100%

#0B3F6E

100%

cosmos-ref-color-blue200

#BBDEFB

100%

#5CA5E5

23%

cosmos-ref-color-blue100

#E3F2FD

100%

#5CA5E5

12%

cosmos-ref-color-indigo700

#1D2C99

100%

#2B3A94

100%

cosmos-ref-color-indigo600contrast

#2C3FB0

100%

#8498F0

100%

cosmos-ref-color-indigo600

#2C3FB0

100%

#2C3FB0

100%

cosmos-ref-color-indigo500

#5C6BC0

100%

#2B3A94

100%

cosmos-ref-color-indigo400

#8591D3

100%

#253178

100%

cosmos-ref-color-indigo300

#9FA8DA

100%

#1D265C

100%

cosmos-ref-color-indigo200

#C5CAE9

100%

#8498F0

23.5%

cosmos-ref-color-indigo100

#E8EAF6

100%

#8498F0

12.2%

cosmos-ref-color-violet700

#4E198C

100%

#591994

100%

cosmos-ref-color-violet600contrast

#6821AF

100%

#A166F2

100%

cosmos-ref-color-violet600

#6821AF

100%

#6821AF

100%

cosmos-ref-color-violet500

#7E57C2

100%

#591994

100%

cosmos-ref-color-violet400

#9F81D5

100%

#481C78

100%

cosmos-ref-color-violet300

#B39DDB

100%

#37175C

100%

cosmos-ref-color-violet200

#D1C4E9

100%

#A166F2

29%

cosmos-ref-color-violet100

#F1ECF8

100%

#A166F2

15%

cosmos-ref-color-purple700

#73118D

100%

#72138A

100%

cosmos-ref-color-purple600contrast

#8A0CAB

100%

#B15CC7

100%

cosmos-ref-color-purple600

#8A0CAB

100%

#8A0CAB

100%

cosmos-ref-color-purple500

#AD3BC1

100%

#72138A

100%

cosmos-ref-color-purple400

#C074D4

100%

#5D1270

100%

cosmos-ref-color-purple300

#44174F

100%

#CF99DD

100%

cosmos-ref-color-purple200

#E3C5EB

100%

#B15CC7

30.5%

cosmos-ref-color-purple100

#F6ECF8

100%

#B15CC7

16%

cosmos-ref-color-pink700

#B10751

100%

#BA0F4E

100%

cosmos-ref-color-pink600contrast

#E20959

100%

#EB5E8D

100%

cosmos-ref-color-pink600

#E20959

100%

#E20959

100%

cosmos-ref-color-pink500

#EC407A

100%

#BA0F4E

100%

cosmos-ref-color-pink400

#EF7DA3

100%

#940F40

100%

cosmos-ref-color-pink300

#F8A5C1

100%

#6B1333

100%

cosmos-ref-color-pink200

#FFC9DB

100%

#EB5E8D

27%

cosmos-ref-color-pink100

#FFEBF1

100%

#EB5E8D

14%

cosmos-ref-color-brown700

#442818

100%

#59341F

100%

cosmos-ref-color-brown600contrast

#673B22

100%

#A3643C

100%

cosmos-ref-color-brown600

#673B22

100%

#673B22

100%

cosmos-ref-color-brown500

#9D5C38

100%

#59341F

100%

cosmos-ref-color-brown400

#C6784C

100%

#4B2D1C

100%

cosmos-ref-color-brown300

#D4A286

100%

#3C2519

100%

cosmos-ref-color-brown200

#E4C5B4

100%

#A3643C

33%

cosmos-ref-color-brown100

#F1E2D9

100%

#A3643C

17.5%

cosmos-ref-color-steel700

#2E414A

100%

#3C545E

100%

cosmos-ref-color-steel600contrast

#486775

100%

#658EA1

100%

cosmos-ref-color-steel600

#486775

100%

#486775

100%

cosmos-ref-color-steel500

#6B8A99

100%

#3C545E

100%

cosmos-ref-color-steel400

#8BA5B2

100%

#2F434D

100%

cosmos-ref-color-steel300

#B0BEC5

100%

#20323A

100%

cosmos-ref-color-steel200

#CFD8DC

100%

#658EA1

27.5%

cosmos-ref-color-steel100

#ECEFF1

100%

#658EA1

14%

Histórico de Atualizações

Figma

Gitbook

Android

iOS

Web

04/02/2025

Ver na tabela

Atualizações por data

Fevereiro 2025

04/02/2025
Remoção da paleta Academy Secondary e transformação da paleta Academy Primary em Letras Tertiary

Agosto 2024

27/08/2024
Atualização dos tokens, mudando do nome "cosmos" para "kosmos"

Julho 2024

31/07/2024
A escala 600 contrast do Appearance no modo White solid, puxava a escala de cor White Solid 600. Mudamos para que esse appearance 600 contrast puxe a escala 700 do White Solid

30/07/2024
Atualização de opacidade nas escalas 100 e 200 do White Solid (Light & Dark)

Percebeu um erro, ficou com dúvida ou tem uma sugestão?

Contribua com o Kósmos preenchendo nosso formulário de contribuição — sua colaboração ajuda a tornar o Design System mais claro, útil e evolutivo para todo o time.

AnteriorVisão geral dos estilos PróximoElevação

Atualizado há 16 dias