Status
As cores de status no CiniDS são usadas para transmitir mensagens claras e diretas ao usuário, indicando diferentes estados e notificações importantes. Cada cor foi cuidadosamente selecionada para atender à compreensão universal do significado das cores:
- Verde (Success): Indica sucesso, ações concluídas ou resultados positivos.
- Amarelo (Warning): Representa avisos ou situações que requerem atenção, mas que ainda não são críticas.
- Vermelho (Danger): Assinala erros graves, falhas ou estados que exigem correção imediata.
- Azul (Info): Utilizado para fornecer informações adicionais ou atualizações.
A seleção dessas cores segue o princípio de manter uma experiência consistente entre diferentes produtos e sistemas. Evitamos personalizações excessivas que possam comprometer a compreensão intuitiva do usuário sobre o significado de cada cor.
Success
A cor de sucesso no nosso design system é o verde Success. Essa cor é utilizada exclusivamente em elementos de status que remetam ao positivo, como confirmações, resultados bem-sucedidos e indicadores de progresso. O verde vibrante do Success simboliza crescimento, sucesso e estabilidade.
Ultralight
$successUltraLight
HEX
#edf7ee
RGB
(237, 247, 238)
Lightest
$successLightest
HEX
#c8e6c9
RGB
(200, 230, 201)
Lighter
$successLighter
HEX
#addaaf
RGB
(173, 218, 175)
Light
$successLight
HEX
#87c98a
RGB
(135, 201, 138)
Pure
$successPure
HEX
#4caf50
RGB
(76, 175, 80)
Dark
$successDark
HEX
#367c39
RGB
(54, 124, 57)
Darker
$successDarker
HEX
#2A602C
RGB
(246, 185, 155)
Darkest
$successDarkest
HEX
#204a22
RGB
(32, 74, 34)
Utilize o verde Success para indicar estados positivos e transmitir uma sensação de confiança e êxito aos nossos usuários.
Para garantir acessibilidade e legibilidade, o verde Success foi reformulado para cumprir as diretrizes de acessibilidade aprovadas pelo WCAG:
- Nota AAA (7.56) quando usado com preto, garantindo máxima legibilidade em textos e ícones.
A aplicação consistente do verde Success ajuda a criar uma experiência de usuário intuitiva e agradável, destacando de forma clara os elementos positivos e de sucesso dentro do sistema.
Warning
A cor de atenção no nosso design system é o amarelo Warning. Essa cor é utilizada exclusivamente em elementos que necessitam de atenção, como avisos, alertas e indicadores de ações críticas. O amarelo vibrante do amarelo Warning chama a atenção imediatamente, sinalizando cuidado e necessidade de ação.
Ultralight
$warningUltraLight
HEX
#fff9e6
RGB
(255, 249, 230)
Lightest
$warningLightest
HEX
#ffecb2
RGB
(255, 236, 178)
Lighter
$warningLighter
HEX
#ffe28d
RGB
(255, 226, 141)
Light
$warningLight
HEX
#ffd559
RGB
(255, 213, 89)
Pure
$warningPure
HEX
#ffc107
RGB
(255, 193, 7)
Dark
$warningDark
HEX
#b58905
RGB
(181, 137, 5)
Darker
$warningDarker
HEX
#8c6a04
RGB
(140, 106, 4)
Darkest
$warningDarkest
HEX
RGB
(107, 81, 3)
Utilize o amarelo Warning para indicar estados de alerta e garantir que nossos usuários percebam rapidamente áreas que necessitam de cuidado ou ações críticas.
Para garantir acessibilidade e legibilidade, o amarelo Warning foi reformulado para cumprir as diretrizes de acessibilidade aprovadas pelo WCAG:
- Nota AAA (12.88) quando usado com preto, garantindo máxima legibilidade em textos e ícones.
A aplicação consistente do amarelo Warning ajuda a criar uma experiência de usuário clara e intuitiva, destacando elementos que requerem atenção imediata.
Danger
A cor de perigo no nosso design system é o vermelho Danger. Essa cor é utilizada exclusivamente em elementos que necessitam de atenção imediata, como erros, falhas e indicadores de ações proibidas. O vermelho intenso do vermelho Danger é ideal para sinalizar urgência e gravidade.
Ultralight
$dangerUltraLight
HEX
#fbeaea
RGB
(251, 234, 234)
Lightest
$dangerLightest
HEX
#f1bfbf
RGB
(241, 191, 191)
Lighter
$dangerLighter
HEX
#eb9f9f
RGB
(235, 159, 159)
Light
$dangerLight
HEX
#e27474
RGB
(226, 116, 116)
Pure
$dangerPure
HEX
#d32f2f
RGB
(211, 47, 47)
Dark
$dangerDark
HEX
#962121
RGB
(150, 33, 33)
Darker
$dangerDarker
HEX
#741a1a
RGB
(116, 26, 26)
Darkest
$dangerDarkest
HEX
#591414
RGB
(89, 20, 20)
Utilize o vermelho Danger para indicar estados de erro ou perigo e garantir que nossos usuários percebam rapidamente áreas que necessitam de ação corretiva urgente.
Para garantir acessibilidade e legibilidade, o vermelho Danger foi reformulado para cumprir as diretrizes de acessibilidade aprovadas pelo WCAG:
- Nota AA (4.22) quando usado com preto, garantindo boa legibilidade em textos e ícones.
- Nota AAA (4.98) quando usado com branco, assegurando excelente contraste e visibilidade.
A aplicação consistente do vermelho Danger ajuda a criar uma experiência de usuário clara e segura, destacando elementos críticos que requerem atenção imediata.
Info
A cor de informação no nosso design system é o azul Info. Essa cor é utilizada exclusivamente em elementos que necessitam apenas trazer informações aos usuários, como dicas, notificações e indicadores de status. O azul vivo do Info transmite confiança e clareza, sendo ideal para destacar informações importantes de forma não intrusiva.
Ultralight
$infoUltraLight
HEX
#e9f5fe
RGB
(233, 245, 254)
Lightest
$infoLightest
HEX
#badefb
RGB
(249, 208, 188)
Lighter
$infoLighter
HEX
#99cff9
RGB
(246, 185, 155)
Light
$infoLight
HEX
#6ab9f7
RGB
(106, 185, 247)
Pure
$infoPure
HEX
#2196f3
RGB
(33, 150, 243)
Dark
$infoDark
HEX
#176bad
RGB
(23, 107, 173)
Darker
$infoDarker
HEX
#125386
RGB
(18, 83, 134)
Darkest
$infoDarkest
HEX
#0e3f66
RGB
(14, 63, 102)
Utilize o azul Info para apresentar informações de forma clara e garantir que nossos usuários percebam e compreendam rapidamente os dados apresentados.
Para garantir acessibilidade e legibilidade, o azul Info foi reformulado para cumprir as diretrizes de acessibilidade aprovadas pelo WCAG:
- Nota AAA (6.72) quando usado com preto, garantindo máxima legibilidade em textos e ícones.
- Nota AA (3.12) quando usado com branco, assegurando boa visibilidade e contraste adequado.
A aplicação consistente do azul Info ajuda a criar uma experiência de usuário informativa e acessível, destacando elementos que fornecem informações cruciais sem causar distrações.
