Cores

A gama completa de nossa paleta de cores é utilizada em gráficos e ilustrações, explorando combinações únicas e modernas, bem como contrastes monocromáticos. Ela pode ser usada para destacar um tópico específico ou um ponto de ênfase.

A paleta F5 utiliza sete cores primárias de marca mais preto e branco, cada uma com quatro variantes de tom/matiz, totalizando 45 cores. Esta página é a fonte única de verdade para o mapeamento das cores de marca às propriedades CSS customizadas do Starlight durante o desenvolvimento do tema.

Cores Primárias

#e4002b

F5 Red—f5-red

#f29a36

Tangerine—f5-tangerine

#0e41aa

River—f5-river

#ab2782

Raspberry—f5-raspberry

#009639

Jade—f5-jade

#62228b

Eggplant—f5-eggplant

#0072b0

Bay—f5-bay

#ffffff

White—f5-white

#000000

Black—f5-black

Nome	HEX	RGB	CMYK	LESS	PMS	Variável CSS
F5 Red	`#e4002b`	228, 0, 43	0, 100, 81, 11	`monza`	185	`--f5-red`
Tangerine	`#f29a36`	242, 154, 54	0, 36, 78, 5	`carrot-orange`	1375	`--f5-tangerine`
River	`#0e41aa`	14, 65, 170	92, 62, 0, 33	`tory-blue`	293	`--f5-river`
Raspberry	`#ab2782`	171, 39, 130	0, 77, 24, 33	—	241	`--f5-raspberry`
Jade	`#009639`	0, 150, 57	100, 0, 62, 41	`fun-green`	355	`--f5-jade`
Eggplant	`#62228b`	98, 34, 139	29, 76, 0, 45	`honey-flower`	2617	`--f5-eggplant`
Bay	`#0072b0`	0, 114, 176	100, 35, 0, 31	—	7461	`--f5-bay`
White	`#ffffff`	255, 255, 255	0, 0, 0, 0	`alabaster`	—	`--f5-white`
Black	`#000000`	0, 0, 0	60, 50, 40, 100	`black`	Black	`--f5-black`

Observação sobre nomes LESS: O Brand Center exibe Raspberry como tory-blue e Bay como honey-flower — esses são erros de copiar e colar das entradas de River e Eggplant, respectivamente. Eles estão marcados com — acima para evitar a propagação de valores incorretos.

Cores Secundárias (Tons e Matizes)

Cada cor primária possui quatro variantes ordenadas da mais clara (Nível 1) à mais escura (Nível 4).

O Brand Center atribui nomes de variáveis LESS às cores secundárias. As variantes de Cloud Red e Tangerine possuem nomes únicos e significativos. Todos os outros grupos de cores exibem os mesmos nomes de espaço reservado (wewak, froly, carmine, venetian-red) — estes são padrões de template da plataforma de marca e estão incluídos abaixo para completude, mas não devem ser considerados identificadores canônicos.

F5 Red

#e4002b

F5 Red (base)—f5-red

#f7b2bf

Nível 1—f5-red-1

#f06680

Nível 2—f5-red-2

#a70020

Nível 3—f5-red-3

#720016

Nível 4—f5-red-4

Nível	HEX	RGB	CMYK	LESS
1 (mais claro)	`#f7b2bf`	247, 178, 191	0, 28, 23, 3	`wewak`
2	`#f06680`	240, 102, 128	0, 57, 47, 6	`froly`
3	`#a70020`	167, 0, 32	0, 100, 81, 35	`carmine`
4 (mais escuro)	`#720016`	114, 0, 22	0, 100, 81, 55	`venetian-red`

Tangerine

#f29a36

Tangerine (base)—f5-tangerine

#ffe4c4

Nível 1—f5-tangerine-1

#ffbd61

Nível 2—f5-tangerine-2

#a35700

Nível 3—f5-tangerine-3

#7a4100

Nível 4—f5-tangerine-4

Nível	HEX	RGB	CMYK	LESS
1 (mais claro)	`#ffe4c4`	255, 228, 196	0, 11, 23, 0	`tequila`
2	`#ffbd61`	255, 189, 97	0, 26, 62, 0	`koromiko`
3	`#a35700`	163, 87, 0	0, 47, 100, 36	`chelsea-gem`
4 (mais escuro)	`#7a4100`	122, 65, 0	0, 47, 100, 52	`cinnamon`

River

#0e41aa

River (base)—f5-river

#b7c6e5

Nível 1—f5-river-1

#6e8dcc

Nível 2—f5-river-2

#0b3180

Nível 3—f5-river-3

#072155

Nível 4—f5-river-4

Nível	HEX	RGB	CMYK	LESS
1 (mais claro)	`#b7c6e5`	183, 198, 229	0, 28, 23, 3	`wewak`
2	`#6e8dcc`	110, 141, 204	0, 58, 47, 6	`froly`
3	`#0b3180`	11, 49, 128	0, 100, 81, 35	`carmine`
4 (mais escuro)	`#072155`	7, 33, 85	0, 100, 81, 55	`venetian-red`

Raspberry

#ab2782

Raspberry (base)—f5-raspberry

#e6bed9

Nível 1—f5-raspberry-1

#cd7db4

Nível 2—f5-raspberry-2

#801d62

Nível 3—f5-raspberry-3

#561441

Nível 4—f5-raspberry-4

Nível	HEX	RGB	CMYK	LESS
1 (mais claro)	`#e6bed9`	230, 190, 217	0, 28, 23, 3	`wewak`
2	`#cd7db4`	205, 125, 180	0, 58, 47, 6	`froly`
3	`#801d62`	128, 29, 98	0, 100, 81, 35	`carmine`
4 (mais escuro)	`#561441`	86, 20, 65	0, 100, 81, 55	`venetian-red`

Jade

#009639

Jade (base)—f5-jade

#b2dfc4

Nível 1—f5-jade-1

#66c088

Nível 2—f5-jade-2

#00712b

Nível 3—f5-jade-3

#004b1d

Nível 4—f5-jade-4

Nível	HEX	RGB	CMYK	LESS
1 (mais claro)	`#b2dfc4`	178, 223, 196	0, 28, 23, 3	`wewak`
2	`#66c088`	102, 192, 136	0, 58, 47, 6	`froly`
3	`#00712b`	0, 113, 43	0, 100, 81, 35	`carmine`
4 (mais escuro)	`#004b1d`	0, 75, 29	0, 100, 81, 55	`venetian-red`

Eggplant

#62228b

Eggplant (base)—f5-eggplant

#cdabe3

Nível 1—f5-eggplant-1

#9c59c9

Nível 2—f5-eggplant-2

#822cb8

Nível 3—f5-eggplant-3

#41175d

Nível 4—f5-eggplant-4

Nível	HEX	RGB	CMYK	LESS
1 (mais claro)	`#cdabe3`	205, 171, 227	0, 28, 23, 3	`wewak`
2	`#9c59c9`	156, 89, 201	0, 58, 47, 6	`froly`
3	`#822cb8`	130, 44, 184	0, 100, 81, 35	`carmine`
4 (mais escuro)	`#41175d`	65, 23, 93	0, 100, 81, 55	`venetian-red`

Bay

#0072b0

Bay (base)—f5-bay

#b2d7eb

Nível 1—f5-bay-1

#66afd7

Nível 2—f5-bay-2

#005c8d

Nível 3—f5-bay-3

#003d5f

Nível 4—f5-bay-4

Nível	HEX	RGB	CMYK	LESS
1 (mais claro)	`#b2d7eb`	178, 215, 235	0, 28, 23, 3	`wewak`
2	`#66afd7`	102, 175, 215	0, 58, 47, 6	`froly`
3	`#005c8d`	0, 92, 141	0, 100, 81, 35	`carmine`
4 (mais escuro)	`#003d5f`	0, 61, 95	0, 100, 81, 55	`venetian-red`

White (Neutros)

#ffffff

White (base)—f5-white

#faf9f7

Nível 1—f5-white-1

#f5f5f5

Nível 2—f5-white-2

#e6e6e6

Nível 3—f5-white-3

#cccccc

Nível 4—f5-white-4

Nível	HEX	RGB	CMYK	LESS
1 (mais claro)	`#faf9f7`	250, 249, 247	0, 28, 23, 3	`wewak`
2	`#f5f5f5`	245, 245, 245	0, 58, 47, 6	`froly`
3	`#e6e6e6`	230, 230, 230	0, 100, 81, 35	`carmine`
4 (mais escuro)	`#cccccc`	204, 204, 204	0, 100, 81, 55	`venetian-red`

Black (Cinzas)

#000000

Black (base)—f5-black

#999999

Nível 1—f5-black-1

#666666

Nível 2—f5-black-2

#343434

Nível 3—f5-black-3

#222222

Nível 4—f5-black-4

Nível	HEX	RGB	CMYK	LESS
1 (mais claro)	`#999999`	153, 153, 153	0, 28, 23, 3	`wewak`
2	`#666666`	102, 102, 102	0, 58, 47, 6	`froly`
3	`#343434`	52, 52, 52	0, 100, 81, 35	`carmine`
4 (mais escuro)	`#222222`	34, 34, 34	0, 100, 81, 55	`venetian-red`

Mapeamento para Propriedades CSS Customizadas do Starlight

O Starlight expõe variáveis --sl-color-* para tematização. Abaixo está o mapeamento da paleta F5 para os slots de cor semântica do Starlight, implementado em styles/custom.css.

Como funciona a tematização do Starlight: No Starlight, o modo escuro é o padrão :root — não há seletor data-theme="dark". O modo claro utiliza :root[data-theme='light']. As variáveis de escala de cinza são semânticas, não ordenadas por brilho: gray-1 é sempre “texto principal” e gray-6/gray-7 são sempre “fundos sutis”, independentemente do modo. Os valores reais de brilho se invertem entre os modos. Da mesma forma, accent-high é sempre a cor de texto de destaque de alta visibilidade e accent-low é sempre o fundo de destaque sutil — seu brilho se inverte entre os modos.

/* Dark mode — Starlight default (:root) */
:root {
  --sl-color-white: #ffffff;      /* Heading text (brightest) */
  --sl-color-gray-1: #f5f5f5;    /* Primary text — White Level 2 */
  --sl-color-gray-2: #cccccc;    /* Body text — White Level 4 */
  --sl-color-gray-3: #999999;    /* Dim/muted text — Black Level 1 */
  --sl-color-gray-4: #666666;    /* Borders — Black Level 2 */
  --sl-color-gray-5: #343434;    /* Inline code bg — Black Level 3 */
  --sl-color-gray-6: #222222;    /* Sidebar bg — Black Level 4 */
  --sl-color-black: #000000;     /* Page background */
  --sl-color-accent-low: #720016;   /* Subtle accent bg — F5 Red Level 4 */
  --sl-color-accent: #f06680;       /* Links, active — F5 Red Level 2 */
  --sl-color-accent-high: #f7b2bf;  /* Accent text — F5 Red Level 1 */
}

/* Light mode — inverted gray scale and accent brightness */
:root[data-theme='light'] {
  --sl-color-white: #222222;      /* Heading text (darkest) — Black Level 4 */
  --sl-color-gray-1: #222222;    /* Primary text — Black Level 4 */
  --sl-color-gray-2: #343434;    /* Body text — Black Level 3 */
  --sl-color-gray-3: #666666;    /* Dim text — Black Level 2 */
  --sl-color-gray-4: #999999;    /* Borders — Black Level 1 */
  --sl-color-gray-5: #cccccc;    /* Light borders — White Level 4 */
  --sl-color-gray-6: #f5f5f5;    /* Sidebar bg — White Level 2 */
  --sl-color-gray-7: #faf9f7;    /* Nav bg — White Level 1 */
  --sl-color-black: #ffffff;     /* Page background */
  --sl-color-accent-low: #f7b2bf;   /* Subtle accent bg — F5 Red Level 1 (inverted) */
  --sl-color-accent: #e4002b;       /* Links, active — F5 Red */
  --sl-color-accent-high: #720016;  /* Accent text — F5 Red Level 4 (inverted) */
}

Prévia Visual dos Tokens

Alterne o seletor de tema para ver esses tokens semânticos mudarem entre o modo escuro e o modo claro.

Tokens da Escala de Cinza

white

Texto de título—sl-color-white

gray-1

Texto principal—sl-color-gray-1

gray-2

Texto do corpo—sl-color-gray-2

gray-3

Texto esmaecido—sl-color-gray-3

gray-4

Bordas—sl-color-gray-4

gray-5

Fundo de código inline—sl-color-gray-5

gray-6

Fundo da barra lateral—sl-color-gray-6

black

Fundo da página—sl-color-black

Tokens de Destaque

accent-low

Fundo de destaque sutil—sl-color-accent-low

accent

Links, ativo—sl-color-accent

accent-high

Texto de destaque—sl-color-accent-high

Tokens de Badge

default

Badge padrão—sl-color-bg-badge-default

note

Badge de nota—sl-color-bg-badge-note

danger

Badge de perigo—sl-color-bg-badge-danger

success

Badge de sucesso—sl-color-bg-badge-success

caution

Badge de atenção—sl-color-bg-badge-caution

tip

Badge de dica—sl-color-bg-badge-tip

Verificação de contraste (WCAG AA)

Modo escuro (texto sobre fundo de página #000000):

Texto do corpo #cccccc → 16,3:1 (AAA)
Texto esmaecido #999999 → 10:1 (AAA)
Link de destaque #f06680 → 5,6:1 (AA)

Modo claro (texto sobre fundo de página #ffffff):

Texto do corpo #343434 → 11,6:1 (AAA)
Texto esmaecido #666666 → 5,7:1 (AA)
Link de destaque #e4002b → 4,6:1 (AA)

Sugestões de cores semânticas

Variável do Starlight	Cor F5	Caso de Uso
`--sl-color-accent`	F5 Red `#e4002b`	Links, botões, estados ativos
`--sl-color-text-accent`	F5 Red Nível 2 `#f06680`	Estados de hover no modo escuro
`--sl-color-bg-accent`	F5 Red Nível 4 `#720016`	Fundos de destaque
Customizada: `--sl-color-info`	Bay `#0072b0`	Chamadas informacionais
Customizada: `--sl-color-success`	Jade `#009639`	Mensagens de sucesso
Customizada: `--sl-color-warning`	Tangerine `#f29a36`	Chamadas de aviso
Customizada: `--sl-color-danger`	F5 Red `#e4002b`	Chamadas de erro/perigo

Contraste de Cores

Para garantir que todos possam acessar e compreender nossas comunicações, utilize combinações de cores de fundo e texto que atendam aos padrões de acessibilidade. Selecione pares de cores com uma relação de contraste mínima de 3:1 para texto grande e 4,5:1 para texto regular.

Todas as combinações de cores devem atender aos requisitos de contraste WCAG AA:

Texto regular (< 18pt / 14pt negrito): relação de contraste mínima de 4,5:1
Texto grande (≥ 18pt / 14pt negrito): relação de contraste mínima de 3:1
Componentes de interface e objetos gráficos: relação de contraste mínima de 3:1

Combinações seguras recomendadas

Primeiro plano	Fundo	Relação de Contraste	Aprovado
Branco `#ffffff`	F5 Red `#e4002b`	4,6:1	AA
Branco `#ffffff`	River `#0e41aa`	6,4:1	AA / AAA
Branco `#ffffff`	Bay `#0072b0`	4,6:1	AA
Branco `#ffffff`	Jade `#009639`	4,2:1	AA (texto grande)
Branco `#ffffff`	Eggplant `#62228b`	6,5:1	AA / AAA
Branco `#ffffff`	Raspberry `#ab2782`	4,7:1	AA
Preto `#000000`	Tangerine `#f29a36`	7,8:1	AA / AAA
Preto `#000000`	F5 Red Nível 1 `#f7b2bf`	10,1:1	AA / AAA
Preto `#222222`	White Nível 1 `#faf9f7`	15,8:1	AA / AAA

Dica: Sempre verifique as relações de contraste com uma ferramenta como o WebAIM Contrast Checker ao criar novas combinações de cores.

Diretrizes de Uso

Família de Cores	Função	Quando Usar
F5 Red	Identidade de marca, CTAs primários	Seções hero, botões primários, marcas da empresa, estados de erro
River	Informacional, confiança	Links de navegação, banners informativos, visualizações de dados
Bay	Informacional, secundário	Links secundários, chamadas informacionais, destaques em blocos de código
Jade	Sucesso, positivo	Mensagens de sucesso, estados de confirmação, indicadores de progresso
Tangerine	Aviso, atenção	Chamadas de aviso, estados que requerem atenção, marcadores de destaque
Raspberry	Destaque, decorativo	Tags, badges, destaques secundários, marcadores de categoria
Eggplant	Destaque, premium	Destaques de recursos, indicadores premium, destaques decorativos
White / Neutros	Fundos, superfícies	Fundos de página, superfícies de card, divisores, bordas sutis
Black / Cinzas	Texto, estrutura	Texto do corpo, títulos, bordas, camadas de sombra

Verificações de Tema

A borda de .swatch utiliza --sl-color-gray-5
O fundo de .swatch-label utiliza --sl-color-gray-6
Todas as amostras --f5-* exibem sua cor real (as propriedades CSS customizadas são resolvidas a partir de custom.css)
As amostras de cores são visíveis nos modos claro e escuro
As amostras de tokens de badge são atualizadas ao alternar o tema