Colors
Os Design Tokens compõem o núcleo da Plataforma Copan. É através dos tokens que é possível compartilhar estilos de forma organizada, sobrescrever características específicas de um tema sem perder o restante dos estilos e fornecer variáveis a quaisquer aplicações para que até mesmo componentes de negócio sigam regras básicas e unificadas de espaçamento, dimensionamento e estilo em geral.
Background
Primary
#FFFFFF
rgba(255, 255, 255, 1)
neutral.0
Fundo base de todas as superfícies.
color.background.primary
Secondary
#F2F4F8
rgba(242, 244, 248, 1)
neutral.50
Fundo usado para atingir maior destaque.
color.background.secondary
Tertiary
#DDE1E6
rgba(221, 225, 230, 1)
neutral.100
Proporciona ainda mais destaque que o background secundário.
color.background.tertiary
Inverted
#191F23
rgba(25, 31, 35, 1)
neutral.900
Usado para elementos neutros que necessitem de destaque maior através do alto contraste.
color.background.inverted
Backdrop
#191F2380
rgba(25, 31, 35, 0.5)
neutral.900
Fundo para dar destaque a telas secundárias (como diálogos/modais).
color.background.backdrop
Brand
#FF774A
rgba(255, 119, 74, 1)
orange.500
Fundo com a cor primária da marca.
color.background.brand
Premium
#BD7B00
rgba(189, 123, 0, 1)
yellow.900
Fundo com a cor de produtos premium.
color.background.premium
Decorative
Orange main
#FF774A
rgba(255, 119, 74, 1)
orange.500
color.decorative.orange.main
Yellow main
#FFA600
rgba(255, 166, 0, 1)
yellow.700
color.decorative.yellow.main
Yellow light
#FFF3DE
rgba(255, 243, 222, 1)
yellow.100
color.decorative.yellow.light
Green main
#20A483
rgba(32, 164, 131, 1)
green.700
color.decorative.green.main
Green light
#98CBC0
rgba(152, 203, 192, 1)
green.300
color.decorative.green.light
Purple main
#7351BA
rgba(115, 81, 186, 1)
purple.500
color.decorative.purple.main
Blue light
#DDE1E6
rgba(221, 225, 230, 1)
neutral.100
color.decorative.blue.light
Brown main
#6A5151
rgba(106, 81, 81, 1)
brown.700
color.decorative.brown.main
Brown light
#BC9F9F
rgba(188, 159, 159, 1)
brown.400
color.decorative.brown.light
Brown lighter
#F7F2F2
rgba(247, 242, 242, 1)
brown.100
color.decorative.brown.lighter
Feedback
Positive main
#20A483
rgba(32, 164, 131, 1)
green.700
Usada para indicar algo positivo.
color.feedback.positive.main
Positive light
#E4F0ED
rgba(228, 240, 237, 1)
green.100
Versão mais clara do feedback positivo. Deve ser usada apenas em fundos.
color.feedback.positive.light
Warning main
#FFA600
rgba(255, 166, 0, 1)
yellow.700
Usada para informar que alguma ação do usuário é necessária.
color.feedback.warning.main
Warning light
#FFF3DE
rgba(255, 243, 222, 1)
yellow.100
Versão mais clara do feedback de atenção. Deve ser usada apenas em fundos.
color.feedback.warning.light
Negative main
#CE4242
rgba(206, 66, 66, 1)
red.500
Usada para elementos interativos destrutivos, erros e eventos críticos que requerem uma ação imediata.
color.feedback.negative.main
Negative light
#FACDCD
rgba(250, 205, 205, 1)
red.100
Versão mais clara do feedback negativo. Deve ser usada apenas em fundos.
color.feedback.negative.light
Informative main
#387BA8
rgba(56, 123, 168, 1)
blue.500
Usada para destacar elementos informativos e para chamar a atenção para novas informações.
color.feedback.informative.main
Informative light
#F2F4F8
rgba(242, 244, 248, 1)
neutral.50
Versão mais clara do feedback informativo. Deve ser usada apenas em fundos.
color.feedback.informative.light
Neutral main
#697077
rgba(105, 112, 119, 1)
neutral.500
Usada em momentos em que a informação apresentada não representa algo positivo ou negativo.
color.feedback.neutral.main
Neutral light
#DDE1E6
rgba(221, 225, 230, 1)
neutral.100
Versão mais clara do feedback neutro. Deve ser usada apenas em fundos.
color.feedback.neutral.light
Icon
Highlight
#FF774A
rgba(255, 119, 74, 1)
orange.500
Cor de destaque para ícones.
color.icon.highlight
Premium
#BD7B00
rgba(189, 123, 0, 1)
yellow.900
Cor para ícones de produtos premium.
color.icon.premium
Primary
#191F23
rgba(25, 31, 35, 1)
neutral.900
Cor padrão para ícones. Usada quando ícones tem papel importante na comunicação.
color.icon.primary
Muted
#697077
rgba(105, 112, 119, 1)
neutral.500
Deve ser usada em casos em que o ícone não pode roubar o foco do texto.
color.icon.muted
Inverted
#FFFFFF
rgba(255, 255, 255, 1)
neutral.0
Cor utilizada em casos em que é as cores padrão não atingem o nível de contraste necessário em relação ao fundo.
color.icon.inverted
Interaction
Link
#20A483
rgba(32, 164, 131, 1)
green.700
Cor primária para links.
color.interaction.link
Primary main
#F56738
rgba(245, 103, 56, 1)
orange.550
Cor principal, geralmente usada no fundo do elemento
color.interaction.primary.main
Primary hover
#D94616
rgba(217, 70, 22, 1)
orange.700
color.interaction.primary.hover
Primary pressed
#D94616
rgba(217, 70, 22, 1)
orange.700
color.interaction.primary.pressed
Primary border main
#D94616
rgba(217, 70, 22, 1)
orange.700
color.interaction.primary.border.main
Primary border hover
#D94616
rgba(217, 70, 22, 1)
orange.700
color.interaction.primary.border.hover
Primary border pressed
#D94616
rgba(217, 70, 22, 1)
orange.700
color.interaction.primary.border.pressed
Secondary main
#00000000
rgba(0, 0, 0, 0)
transparent
Cor principal, geralmente usada no fundo do elemento
color.interaction.secondary.main
Secondary hover
#191F231A
rgba(25, 31, 35, 0.1)
neutral.900
color.interaction.secondary.hover
Secondary pressed
#191F231A
rgba(25, 31, 35, 0.1)
neutral.900
color.interaction.secondary.pressed
Secondary border main
#191F23
rgba(25, 31, 35, 1)
neutral.900
color.interaction.secondary.border.main
Secondary border hover
#191F23
rgba(25, 31, 35, 1)
neutral.900
color.interaction.secondary.border.hover
Secondary border pressed
#191F23
rgba(25, 31, 35, 1)
neutral.900
color.interaction.secondary.border.pressed
Solid main
#FFFFFF
rgba(255, 255, 255, 1)
neutral.0
Cor principal, geralmente usada no fundo do elemento
color.interaction.solid.main
Solid hover
#DDE1E6
rgba(221, 225, 230, 1)
neutral.100
color.interaction.solid.hover
Solid pressed
#DDE1E6
rgba(221, 225, 230, 1)
neutral.100
color.interaction.solid.pressed
Solid border main
#DDE1E6
rgba(221, 225, 230, 1)
neutral.100
color.interaction.solid.border.main
Solid border hover
#DDE1E6
rgba(221, 225, 230, 1)
neutral.100
color.interaction.solid.border.hover
Solid border pressed
#DDE1E6
rgba(221, 225, 230, 1)
neutral.100
color.interaction.solid.border.pressed
Inverted main
#FFFFFF
rgba(255, 255, 255, 1)
neutral.0
Cor principal, geralmente usada no fundo do elemento
color.interaction.inverted.main
Inverted hover
#FFFFFFD9
rgba(255, 255, 255, 0.85)
neutral.0
color.interaction.inverted.hover
Inverted pressed
#FFFFFFD9
rgba(255, 255, 255, 0.85)
neutral.0
color.interaction.inverted.pressed
Inverted disabled
#FFFFFF59
rgba(255, 255, 255, 0.35)
neutral.0
Cor auxiliar para o estado desabilitado dos elementos inverted.
color.interaction.inverted.disabled
Inverted border main
#FFFFFF
rgba(255, 255, 255, 1)
neutral.0
color.interaction.inverted.border.main
Inverted border hover
#FFFFFF
rgba(255, 255, 255, 1)
neutral.0
color.interaction.inverted.border.hover
Inverted border pressed
#FFFFFF
rgba(255, 255, 255, 1)
neutral.0
color.interaction.inverted.border.pressed
Inverted secondary main
#00000000
rgba(0, 0, 0, 0)
transparent
Cor principal, geralmente usada no fundo do elemento
color.interaction.invertedSecondary.main
Inverted secondary hover
#FFFFFF1A
rgba(255, 255, 255, 0.1)
neutral.0
color.interaction.invertedSecondary.hover
Inverted secondary pressed
#FFFFFF1A
rgba(255, 255, 255, 0.1)
neutral.0
color.interaction.invertedSecondary.pressed
Inverted secondary border main
#FFFFFF
rgba(255, 255, 255, 1)
neutral.0
color.interaction.invertedSecondary.border.main
Inverted secondary border hover
#FFFFFF
rgba(255, 255, 255, 1)
neutral.0
color.interaction.invertedSecondary.border.hover
Inverted secondary border pressed
#FFFFFF
rgba(255, 255, 255, 1)
neutral.0
color.interaction.invertedSecondary.border.pressed
Premium main
#BD7B00
rgba(189, 123, 0, 1)
yellow.900
Cor principal, geralmente usada no fundo do elemento
color.interaction.premium.main
Premium hover
#DE9000
rgba(222, 144, 0, 1)
yellow.800
color.interaction.premium.hover
Premium pressed
#DE9000
rgba(222, 144, 0, 1)
yellow.800
color.interaction.premium.pressed
Premium border main
#BD7B00
rgba(189, 123, 0, 1)
yellow.900
color.interaction.premium.border.main
Premium border hover
#BD7B00
rgba(189, 123, 0, 1)
yellow.900
color.interaction.premium.border.hover
Premium border pressed
#BD7B00
rgba(189, 123, 0, 1)
yellow.900
color.interaction.premium.border.pressed
Selectors
#20A483
rgba(32, 164, 131, 1)
green.700
Cor padrão para seletores: checkboxes, radio buttons e switches.
color.interaction.selectors
Disabled
#A2A9B0
rgba(162, 169, 176, 1)
neutral.300
Cor que indica que elementos interativos não estão disponíveis no momento. Em casos inverted, talvez seja necessário usar a cor 'interaction.inverted.disabled'.
color.interaction.disabled
Separator
Main
#697077
rgba(105, 112, 119, 1)
neutral.500
Cor padrão para bordas e divisores.
color.separator.main
Heavy
#191F23
rgba(25, 31, 35, 1)
neutral.900
Deve ser utilizada em momentos em que se quer isolar um determinado conteúdo do resto da página.
color.separator.heavy
Light
#C1C7CD
rgba(193, 199, 205, 1)
neutral.200
Usada quando a divisão é sutil e serve de apoio visual para a diagramação.
color.separator.light
Inverted
#FFFFFF
rgba(255, 255, 255, 1)
neutral.0
Cor utilizada em casos em que é as cores padrão não atingem o nível de contraste necessário em relação ao fundo.
color.separator.inverted
Text
Highlight
#FF774A
rgba(255, 119, 74, 1)
orange.500
Cor de destaque para títulos.
color.text.highlight
Premium
#BD7B00
rgba(189, 123, 0, 1)
yellow.900
Cor de destaque para títulos de produtos premium.
color.text.premium
Primary
#191F23
rgba(25, 31, 35, 1)
neutral.900
Cor primária para textos. Deve ser usada no conteúdo mais relevante.
color.text.primary
Secondary
#697077
rgba(105, 112, 119, 1)
neutral.500
Cor secundária que serve principalmente para textos de apoio ou de menor relevância.
color.text.secondary
Placeholder
#878D96
rgba(135, 141, 150, 1)
neutral.400
Cor utilizada apenas em placeholders de formulários.
color.text.placeholder
Inverted
#FFFFFF
rgba(255, 255, 255, 1)
neutral.0
Cor utilizada em casos em que é as cores padrão não atingem o nível de contraste necessário em relação ao fundo.
color.text.inverted