Design Tokens

Colors

Para manter nossos produtos consistentes os seguintes conceitos são a base para garantir equilíbrio e harmonia nas interfaces.

Cores primárias

Serão utilizadas para compor os produtos digitais e devem ajudar o usuário a direcionar sua atenção.

Variações mais escuras e mais claras serão utilizadas, quando necessários, em hovers, componentes, e shapes.

Vermelho claro

  • Hex: #CE181E
  • RGB: rgb(206, 24, 30)
  • CSS Variable: colors.primary-red

Vermelho escuro

  • Hex: #AA1B22
  • RGB: rgb(170, 27, 34)
  • CSS Variable: colors.primary-red-dark

Cores secundárias

As cores secundárias são usadas para complementos que devem refletir o complemento das cores primárias. Também é usada em situações específicas onde é necessário categorizar ou destacar algo.

Foi utilizado uma harmonia de cores tríade para a definição dessa paleta e acrescentado o cinza grafite com uma cor extra.

Amarelo

  • Hex: #FACC00
  • RGB: rgb(250, 204, 0)
  • CSS Variable: colors.secondary-yellow

Azul claro

  • Hex: #048ABF
  • RGB: rgb(4, 138, 191)
  • CSS Variable: colors.secondary-blue-light

Azul escuro

  • Hex: #173161
  • RGB: rgb(23, 49, 97)
  • CSS Variable: colors.secondary-blue-dark

Branco

  • Hex: #FFFFFF
  • RGB: rgb(255, 255, 255)
  • CSS Variable: colors.secondary-white

Cinza grafite

  • Hex: #191E26
  • RGB: rgb(25, 30, 38)
  • CSS Variable: colors.secondary-gray-graphite

Laranja

  • Hex: #F24F1D
  • RGB: rgb(242, 79, 29)
  • CSS Variable: colors.secondary-orange

Tons de cinza

A paleta Tons de cinza é usada para aplicação em texto e pode ser utilizada em elementos de apoio visual que organizam e mantém a hierarquia da interface (dividers, linhas de tabela, background e strokes).

100%

  • Hex: #5E6267
  • RGB: rgb(94, 98, 103)
  • CSS Variable: colors.gray-100

90%

  • Hex: #6E7276
  • RGB: rgb(110, 114, 118)
  • CSS Variable: colors.gray-90

80%

  • Hex: #7E8185
  • RGB: rgb(126, 129, 133)
  • CSS Variable: colors.gray-80

70%

  • Hex: #8E9195
  • RGB: rgb(142, 145, 149)
  • CSS Variable: colors.gray-70

60%

  • Hex: #9EA1A4
  • RGB: rgb(158, 161, 164)
  • CSS Variable: colors.gray-60

50%

  • Hex: #AFB0B3
  • RGB: rgb(175, 176, 179)
  • CSS Variable: colors.gray-50

40%

  • Hex: #BFC0C2
  • RGB: rgb(191, 192, 194)
  • CSS Variable: colors.gray-40

30%

  • Hex: #CFD0D1
  • RGB: rgb(207, 208, 209)
  • CSS Variable: colors.gray-30

20%

  • Hex: #E7E7E8
  • RGB: rgb(231, 231, 232)
  • CSS Variable: colors.gray-20

10%

  • Hex: #F7F7F7
  • RGB: rgb(247, 247, 247)
  • CSS Variable: colors.gray-10

Cor de Status/feedback

As cores de Status/Feedback são utilizadas em conjunto com outros elementos para retornar uma informação ou notificar um processo ao usuário, e geralmente são aplicadas em formulários, alerta e notificações.

Atenção: Para atender as Diretrizes de Acessibilidade, elementos que representam feedback não devem ser representados apenas por cores, eles precisam sempre ser acompanhados de apoios visuais, como ícones, por exemplo.

Neutro

Usado para feedbacks neutros, como avisos de sistema.

01

  • Hex: #152045
  • RGB: rgb(21, 32, 69)
  • CSS Variable: colors.feedback-neutral-1

02

  • Hex: #27376B
  • RGB: rgb(39, 55, 107)
  • CSS Variable: colors.feedback-neutral-2

03

  • Hex: #3855B5
  • RGB: rgb(56, 85, 181)
  • CSS Variable: colors.feedback-neutral-3

04

  • Hex: #486DE8
  • RGB: rgb(72, 109, 232)
  • CSS Variable: colors.feedback-neutral-4

05

  • Hex: #90A5EC
  • RGB: rgb(144, 165, 236)
  • CSS Variable: colors.feedback-neutral-5

Crítico

Usado para feedbacks que exigem ações importantes/destrutivas do usuário e avisos que bloqueiam o fluxo.

01

  • Hex: #6B203C
  • RGB: rgb(107, 32, 60)
  • CSS Variable: colors.feedback-critical-1

02

  • Hex: #6B0027
  • RGB: rgb(107, 0, 39)
  • CSS Variable: colors.feedback-critical-2

03

  • Hex: #B80043
  • RGB: rgb(184, 0, 67)
  • CSS Variable: colors.feedback-critical-3

04

  • Hex: #EB0056
  • RGB: rgb(235, 0, 86)
  • CSS Variable: colors.feedback-critical-4

05

  • Hex: #EE4784
  • RGB: rgb(238, 71, 132)
  • CSS Variable: colors.feedback-critical-5

Alerta

Usado para feedbacks que exigem atenção do usuário, ou avisos que bloqueiam o fluxo.

01

  • Hex: #452273
  • RGB: rgb(69, 34, 115)
  • CSS Variable: colors.feedback-alert-1

02

  • Hex: #5300BF
  • RGB: rgb(83, 0, 191)
  • CSS Variable: colors.feedback-alert-2

03

  • Hex: #6800F1
  • RGB: rgb(104, 0, 241)
  • CSS Variable: colors.feedback-alert-3

04

  • Hex: #8325FE
  • RGB: rgb(131, 37, 254)
  • CSS Variable: colors.feedback-alert-4

05

  • Hex: #9349F4
  • RGB: rgb(147, 73, 244)
  • CSS Variable: colors.feedback-alert-5

Sucesso

Usado para indicar sucesso em alguma ação do usuário e término de fluxos.

01

  • Hex: #005422
  • RGB: rgb(0, 84, 34)
  • CSS Variable: colors.feedback-success-1

02

  • Hex: #008836
  • RGB: rgb(0, 136, 54)
  • CSS Variable: colors.feedback-success-2

03

  • Hex: #008F39
  • RGB: rgb(0, 143, 57)
  • CSS Variable: colors.feedback-success-3

04

  • Hex: #2F9B5A
  • RGB: rgb(47, 155, 90)
  • CSS Variable: colors.feedback-success-4

05

  • Hex: #3FD47B
  • RGB: rgb(63, 212, 123)
  • CSS Variable: colors.feedback-success-5