Skip to main content

Cores

As cores do Ocean Design System são organizadas em categorias específicas para garantir consistência e acessibilidade em toda a experiência do usuário.

Paleta de Cores Interativa​

Cores da Marca

Cores principais da identidade visual do Ocean

brandPure
Color Brand Primary Pure
#0025E0
Cor principal da marca, CTAs principais
brandUp
Color Brand Primary Up
#B8C3FF
Fundos sutis, estados hover suaves
brandDown
Color Brand Primary Down
#5872F5
Estados ativos, elementos secundários
brandDeep
Color Brand Primary Deep
#0E248F
Textos importantes, elementos de destaque escuro

Cores Complementares

Cores que oferecem contraste e variedade visual

complementaryPure
Color Complementary Pure
#13BDBD
Elementos de destaque secundários, ícones informativos
complementaryUp
Color Complementary Up
#B0F5F5
Fundos de destaque suaves, estados hover
complementaryDown
Color Complementary Down
#6AE5E5
Estados ativos, elementos interativos
complementaryDeep
Color Complementary Deep
#1C9999
Textos importantes, elementos de destaque

Cores de Destaque

Cores para chamar atenção e indicar ações importantes

highlightPure
Color Highlight Pure
#FF726E
Alertas, notificações, elementos que precisam de atenção
highlightUp
Color Highlight Up
#FFB8B2
Fundos de alerta suaves, estados hover
highlightDown
Color Highlight Down
#F0584D
Estados ativos, elementos de erro
highlightDeep
Color Highlight Deep
#E53E32
Textos de erro críticos, elementos de destaque escuro

Cores de Interface - Claras

Cores claras para layouts e elementos de UI

interfaceLightPure
Color Interface Light Pure
#FFFFFF
Fundo principal, superfícies de cartões
interfaceLightUp
Color Interface Light Up
#F3F5FE
Fundos secundários, estados hover suaves
interfaceLightDown
Color Interface Light Down
#E0E2EE
Bordas, divisores, elementos de separação
interfaceLightDeep
Color Interface Light Deep
#CED1E1
Fundos de destaque, estados selecionados

Cores de Interface - Escuras

Cores escuras para textos e elementos de destaque

interfaceDarkPure
Color Interface Dark Pure
#0C0014
Textos principais, elementos de destaque escuro
interfaceDarkUp
Color Interface Dark Up
#AAADC0
Textos secundários, placeholders
interfaceDarkDown
Color Interface Dark Down
#67697A
Textos terciários, elementos desabilitados
interfaceDarkDeep
Color Interface Dark Deep
#393847
Fundos escuros, elementos de destaque

Cores de Status - Positivas

Cores para comunicar sucessos e confirmações

statusPositivePure
Color Status Positive Pure
#3DCC64
Sucessos, confirmações, estados ativos
statusPositiveUp
Color Status Positive Up
#F2FDF5
Fundos de sucesso, notificações positivas
statusPositiveDown
Color Status Positive Down
#7ADC94
Estados hover, elementos interativos positivos
statusPositiveDeep
Color Status Positive Deep
#20A04F
Textos de sucesso, elementos de destaque

Cores de Status - Aviso

Cores para comunicar avisos e estados de atenção

statusWarningPure
Color Status Warning Pure
#FFA347
Avisos, alertas, estados de atenção
statusWarningUp
Color Status Warning Up
#FFF7F0
Fundos de aviso, notificações de atenção
statusWarningDown
Color Status Warning Down
#FFBD7A
Estados hover, elementos interativos de aviso
statusWarningDeep
Color Status Warning Deep
#FFBA14
Textos de aviso, elementos de destaque

Cores de Status - Negativas

Cores para comunicar erros e estados críticos

statusNegativePure
Color Status Negative Pure
#F5456C
Erros, exclusões, estados críticos
statusNegativeUp
Color Status Negative Up
#FFF1F4
Fundos de erro, notificações negativas
statusNegativeDown
Color Status Negative Down
#F27992
Estados hover, elementos interativos negativos
statusNegativeDeep
Color Status Negative Deep
#D31441
Textos de erro, elementos de destaque críticos

Cores da Marca (Brand Colors)​

As cores da marca representam a identidade visual principal do Ocean, utilizando tons de azul como cor primária.

Cor Primária Pura​

  • Token: colorBrandPrimaryPure
  • Nome: Color Brand Primary Pure
  • Hex: #0025E0
  • Uso: Cor principal da marca, utilizada em elementos de destaque e CTAs principais

Variações da Cor Primária​

Cor Primária Up​

  • Token: colorBrandPrimaryUp
  • Nome: Color Brand Primary Up
  • Hex: #B8C3FF
  • Uso: Fundos sutis, estados hover suaves

Cor Primária Down​

  • Token: colorBrandPrimaryDown
  • Nome: Color Brand Primary Down
  • Hex: #5872F5
  • Uso: Estados ativos, elementos secundários

Cor Primária Deep​

  • Token: colorBrandPrimaryDeep
  • Nome: Color Brand Primary Deep
  • Hex: #0E248F
  • Uso: Textos importantes, elementos de destaque escuro

Cores Complementares (Complementary Colors)​

As cores complementares oferecem contraste e variedade visual, utilizando tons de teal/ciano.

Cor Complementar Pura​

  • Token: colorComplementaryPure
  • Nome: Color Complementary Pure
  • Hex: #13BDBD
  • Uso: Elementos de destaque secundários, ícones informativos

Variações da Cor Complementar​

Cor Complementar Up​

  • Token: colorComplementaryUp
  • Nome: Color Complementary Up
  • Hex: #B0F5F5
  • Uso: Fundos de destaque suaves, estados hover

Cor Complementar Down​

  • Token: colorComplementaryDown
  • Nome: Color Complementary Down
  • Hex: #6AE5E5
  • Uso: Estados ativos, elementos interativos

Cor Complementar Deep​

  • Token: colorComplementaryDeep
  • Nome: Color Complementary Deep
  • Hex: #1C9999
  • Uso: Textos importantes, elementos de destaque

Cores de Destaque (Highlight Colors)​

As cores de destaque são utilizadas para chamar atenção e indicar ações importantes, utilizando tons de coral/vermelho.

Cor de Destaque Pura​

  • Token: colorHighlightPure
  • Nome: Color Highlight Pure
  • Hex: #FF726E
  • Uso: Alertas, notificações, elementos que precisam de atenção

Variações da Cor de Destaque​

Cor de Destaque Up​

  • Token: colorHighlightUp
  • Nome: Color Highlight Up
  • Hex: #FFB8B2
  • Uso: Fundos de alerta suaves, estados hover

Cor de Destaque Down​

  • Token: colorHighlightDown
  • Nome: Color Highlight Down
  • Hex: #F0584D
  • Uso: Estados ativos, elementos de erro

Cor de Destaque Deep​

  • Token: colorHighlightDeep
  • Nome: Color Highlight Deep
  • Hex: #E53E32
  • Uso: Textos de erro críticos, elementos de destaque escuro

Cores de Interface (Interface Colors)​

As cores de interface fornecem a base para layouts e elementos de UI, com variações claras e escuras.

Cores Claras (Light Colors)​

Cor de Interface Light Pure​

  • Token: colorInterfaceLightPure
  • Nome: Color Interface Light Pure
  • Hex: #FFFFFF
  • Uso: Fundo principal, superfícies de cartões

Cor de Interface Light Up​

  • Token: colorInterfaceLightUp
  • Nome: Color Interface Light Up
  • Hex: #F3F5FE
  • Uso: Fundos secundários, estados hover suaves

Cor de Interface Light Down​

  • Token: colorInterfaceLightDown
  • Nome: Color Interface Light Down
  • Hex: #E0E2EE
  • Uso: Bordas, divisores, elementos de separação

Cor de Interface Light Deep​

  • Token: colorInterfaceLightDeep
  • Nome: Color Interface Light Deep
  • Hex: #CED1E1
  • Uso: Fundos de destaque, estados selecionados

Cores Escuras (Dark Colors)​

Cor de Interface Dark Pure​

  • Token: colorInterfaceDarkPure
  • Nome: Color Interface Dark Pure
  • Hex: #0C0014
  • Uso: Textos principais, elementos de destaque escuro

Cor de Interface Dark Up​

  • Token: colorInterfaceDarkUp
  • Nome: Color Interface Dark Up
  • Hex: #AAADC0
  • Uso: Textos secundários, placeholders

Cor de Interface Dark Down​

  • Token: colorInterfaceDarkDown
  • Nome: Color Interface Dark Down
  • Hex: #67697A
  • Uso: Textos terciários, elementos desabilitados

Cor de Interface Dark Deep​

  • Token: colorInterfaceDarkDeep
  • Nome: Color Interface Dark Deep
  • Hex: #393847
  • Uso: Fundos escuros, elementos de destaque

Cores de Status (Status Colors)​

As cores de status comunicam o estado de elementos e ações, organizadas por significado semântico.

Cores Positivas (Positive)​

Cor de Status Positive Pure​

  • Token: colorStatusPositivePure
  • Nome: Color Status Positive Pure
  • Hex: #3DCC64
  • Uso: Sucessos, confirmações, estados ativos

Cor de Status Positive Up​

  • Token: colorStatusPositiveUp
  • Nome: Color Status Positive Up
  • Hex: #F2FDF5
  • Uso: Fundos de sucesso, notificações positivas

Cor de Status Positive Down​

  • Token: colorStatusPositiveDown
  • Nome: Color Status Positive Down
  • Hex: #7ADC94
  • Uso: Estados hover, elementos interativos positivos

Cor de Status Positive Deep​

  • Token: colorStatusPositiveDeep
  • Nome: Color Status Positive Deep
  • Hex: #20A04F
  • Uso: Textos de sucesso, elementos de destaque

Cores de Aviso (Warning)​

Cor de Status Warning Pure​

  • Token: colorStatusWarningPure
  • Nome: Color Status Warning Pure
  • Hex: #FFA347
  • Uso: Avisos, alertas, estados de atenção

Cor de Status Warning Up​

  • Token: colorStatusWarningUp
  • Nome: Color Status Warning Up
  • Hex: #FFF7F0
  • Uso: Fundos de aviso, notificações de atenção

Cor de Status Warning Down​

  • Token: colorStatusWarningDown
  • Nome: Color Status Warning Down
  • Hex: #FFBD7A
  • Uso: Estados hover, elementos interativos de aviso

Cor de Status Warning Deep​

  • Token: colorStatusWarningDeep
  • Nome: Color Status Warning Deep
  • Hex: #FFBA14
  • Uso: Textos de aviso, elementos de destaque

Cores Negativas (Negative)​

Cor de Status Negative Pure​

  • Token: colorStatusNegativePure
  • Nome: Color Status Negative Pure
  • Hex: #F5456C
  • Uso: Erros, exclusões, estados críticos

Cor de Status Negative Up​

  • Token: colorStatusNegativeUp
  • Nome: Color Status Negative Up
  • Hex: #FFF1F4
  • Uso: Fundos de erro, notificações negativas

Cor de Status Negative Down​

  • Token: colorStatusNegativeDown
  • Nome: Color Status Negative Down
  • Hex: #F27992
  • Uso: Estados hover, elementos interativos negativos

Cor de Status Negative Deep​

  • Token: colorStatusNegativeDeep
  • Nome: Color Status Negative Deep
  • Hex: #D31441
  • Uso: Textos de erro, elementos de destaque críticos

Uso e Aplicação​

Princípios de Uso​

  1. Hierarquia Visual: Use as cores para criar hierarquia clara na interface
  2. Consistência: Mantenha o uso consistente das cores em toda a aplicação
  3. Acessibilidade: Sempre considere o contraste adequado para leitura
  4. Significado Semântico: Use as cores de status de acordo com seu significado

Exemplos de Aplicação​

  • Botões Primários: colorBrandPrimaryPure
  • Botões Secundários: colorBrandPrimaryDown
  • Estados de Sucesso: colorStatusPositivePure
  • Estados de Erro: colorStatusNegativePure
  • Avisos: colorStatusWarningPure
  • Fundos de Cartões: colorInterfaceLightPure
  • Textos Principais: colorInterfaceDarkPure

Exemplos de Aplicação​

Botões Primários​

background-color: ${colorBrandPrimaryPure};
color: ${colorInterfaceLightPure};
border: none;
padding: 12px 24px;
border-radius: 6px;
font-weight: ${fontWeightMedium};

Botões Secundários​

background-color: ${colorInterfaceLightPure};
color: ${colorBrandPrimaryPure};
border: 1px solid ${colorBrandPrimaryPure};
padding: 12px 24px;
border-radius: 6px;
font-weight: ${fontWeightMedium};

Estados de Sucesso​

background-color: ${colorStatusPositiveUp};
color: ${colorStatusPositiveDeep};
border: 1px solid ${colorStatusPositivePure};
padding: 16px;
border-radius: 8px;

Estados de Erro​

background-color: ${colorStatusNegativeUp};
color: ${colorStatusNegativeDeep};
border: 1px solid ${colorStatusNegativePure};
padding: 16px;
border-radius: 8px;

Estados de Aviso​

background-color: ${colorStatusWarningUp};
color: ${colorStatusWarningDeep};
border: 1px solid ${colorStatusWarningPure};
padding: 16px;
border-radius: 8px;

Cartões de Conteúdo​

background-color: ${colorInterfaceLightPure};
border: 1px solid ${colorInterfaceLightDown};
border-radius: 8px;
padding: 24px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

Textos de Destaque​

color: ${colorBrandPrimaryPure};
font-weight: ${fontWeightBold};
font-size: ${fontSizeMd};
color: ${colorBrandPrimaryPure};
text-decoration: none;
transition: color 0.2s ease;
color: ${colorBrandPrimaryDown};
text-decoration: underline;

Fundos de Seção​

background-color: ${colorInterfaceLightUp};
padding: 32px;
border-radius: 12px;

Elementos Desabilitados​

background-color: ${colorInterfaceLightDown};
color: ${colorInterfaceDarkDown};
cursor: not-allowed;
opacity: 0.6;

Combinações Recomendadas​

ElementoCor PrincipalCor SecundáriaCor de Texto
Botões PrimárioscolorBrandPrimaryPure-colorInterfaceLightPure
Botões SecundárioscolorInterfaceLightPurecolorBrandPrimaryPurecolorBrandPrimaryPure
Estados de SucessocolorStatusPositiveUpcolorStatusPositivePurecolorStatusPositiveDeep
Estados de ErrocolorStatusNegativeUpcolorStatusNegativePurecolorStatusNegativeDeep
Estados de AvisocolorStatusWarningUpcolorStatusWarningPurecolorStatusWarningDeep
CartõescolorInterfaceLightPurecolorInterfaceLightDowncolorInterfaceDarkPure
LinkscolorBrandPrimaryPurecolorBrandPrimaryDown-
FundoscolorInterfaceLightUp-colorInterfaceDarkPure