Colors

As cores são usadas para expressar estilo e comunicar significado.

✅ Atualizado (07/07/2025) - Ver detalhes

Julho 2025

  • 07/07/2025 .Adição de tokens Alpha Colors (Global Tokens) neutral-alpha-100-92 e neutral-alpha-13-92 .Adição de token elevation (Aplicação dos tokens acima) base-neutral-elevation-dynamicAlpha-over-92 .Adição de token background base-neutralReverse-background-dynamicAlpha-100-0-alt OBS: Diferente do token que temos na mesma categoria (apenas 100-0), sua versão com sufixo alt, converte a cor base de 100 para 10.

Junho 2025

  • 16/06/2025

.Correção na organização de tokens Neutral Dynamic Colors (Alpha) separados entre Neutral e Neutral Reverse. (Sendo neutral: tokens em alpha que iniciam com paleta escura no light e neutralReverse: tokens em alpha que iniciam com paleta clara no light) ---------------------------------------------------------------------------------------------------------- .Adição de tokens em alpha para elevation base-neutral-elevation-dynamicAlpha-under-0 base-neutral-elevation-dynamicAlpha-over-0 ---------------------------------------------------------------------------------------------------------- .Revisão: tokens de border (neutral e neutralReverse) (apenas para conferirmos se cadastramos todos esses tokens) .Border (neutral) Possui as seguintes categorias e tokens dynamic: base-neutral-border-dynamic-10 dynamicAlpha: base-neutral-border-dynamicAlpha-0-6 base-neutral-border-dynamicAlpha-0-8

fixedAlpha: base-neutral-border-fixedAlpha-0-6 base-neutral-border-fixedAlpha-0-8 .Border (neutralReverse) Possui as seguintes categorias e tokens dynamicAlpha: base-neutralReverse-border-dynamicAlpha-100-6 base-neutralReverse-border-dynamicAlpha-100-8 fixedAlpha: base-neutralReverse-border-fixedAlpha-100-6 base-neutralReverse-border-fixedAlpha-100-8 ---------------------------------------------------------------------------------------------------------- .Cadastro de novas decorative colors Foreground (dynamic colors) todas as cores com o token: decorative-(nome da cor)-foreground-dynamic-50 Background (fixed colors - alpha) todas as cores com o token: decorative-(nome da cor)-background-fixedAlpha-60-8 Novo* Border (fixed colors - alpha) todas as cores com o token: decorative-(nome da cor)-border-fixedAlpha-60-16 com excessão do vermelho, que fica como: decorative-red-border-fixedAlpha-70-16 ---------------------------------------------------------------------------------------------------------- .Global colors adicionadas Alpha colors adição de: (nome da cor)-alpha-60-16 conferir se temos* :

neutral-alpha-10-0 neutral-alpha-13-0 neutral-alpha-98-0

----------------------------------------------------------------------------------------------------------

Abril 2025

  • 28/04/2025 .Agora o token elevation-dynamic-over, converte no dark para neutral-solid-13 (#222222)

  • 23/04/2025

    . Adicionamos 3 novos Global Tokens neutral-alpha na paleta: 10-0, 13-0 e 98-0. Esses tokens base nos ajudarão a criar gradientes em diferentes superficies.

    . A partir desses Global Tokens, adicionamos os seguintes 4 Semantic Tokens:

    base-neutral-background-dynamicAlpha-0-0 e também 100-0

    além de

    base-neutral-elevation-dynamicAlpha-under-0 e também over-0

  • 03/04/2025 Adição dos seguintes tokens: state-neutralReverse-common-fixedAlpha-enabled state-neutralReverse-common-fixedAlpha-hovered state-neutralReverse-common-fixedAlpha-pressed state-neutralReverse-common-fixedAlpha-focused state-neutralReverse-foreground-fixedAlpha-disabled

Março 2025

  • 11/03/2025 Adição do token: base-cifraBrand-border-fixedAlpha-70-16

  • 10/03/2025 base-background-dinamicAlpha: adição dos tokens: 0-8, 100-4 e 100-8

Fevereiro 2025

  • 18/02/2025 Common States: As opacidades de hover, pressed e focused foram ajustadas para: 6, 12 e 6 respectivamente.

Janeiro 2025

  • 20/01/25 Geral > Revisão geral e repadronização das nomenclaturas. Seguindo a mesma ordem das partes do token sempre e corrigindo os papeis conforme o novo padrão. > Adição de anotações complementares. > Referências aos Global Tokens adicionada. > Reordenação das seções da página para maior clareza | Motivo: Nos tokens semânticos em alguns casos existem tanto alpha colors | como solid colors dentro de uma mesma categoria. > Adição do guia de nomenclatura e organização dos tokens. > Nova separação de papeis de cores: foreground, background, elevation, border e common. Anotações com significado adicionadas. > Distinção de comportamento de cores Alpha e Solid. Comportamentos atuais: fixed, fixedAlpha, dynamic, dynamicAlpha.

    ------------------------------------------------------------------------ Neutral Colors (Semantic Tokens) > Adição de prefixo "base" para consistência com os demais tokens. > Remoção de foreground-dynamic-95 (tanto dynmaic quanto fixed) > Adição do token em alpha à tab de background: background-dynamicAlpha-0-4. Apesar de estar em alpha, os locais de uso e papeis correspondem às demais cores da tabela. > Junção de Elevation e Border como papéis das Neutral Colors. (Antes estavam separadas) > Agora temos dois níveis de border. ------------------------------------------------------------------------ Decorative Colors (Semantic tokens) > Redução na quantidade de tokens foreground e alteração nos valores para 50 e 60. > Simplificação nos backgrounds para fixed-solid-50 e alpha-solid-60-16 > Reordenação no nome dos tokens, para consistência com os demais. Ex.: decorative-background-dynamic-blue-95 para decorative-blue-background-dynamic-95 > Adição do identificador "solid" em todos os Global Tokens. > Adição do Global Token "red-solid-40" correspondente à Brand Color do palcomp3. -------------------------------------------------------------------------- Alpha Colors > Agora aparecem junto às categorias correspondentes, mas os global tokens continuam separados. (Algumas cores estavam ficando muito separadas de cores solidas em comum) -------------------------------------------------------------------------- States > Alteração na opacidade de Backgrounds disabled para 4% > Alteração na opacidade de Borders disabled para 6% --------------------------------------------------------------------------- Status Colors > Redução nos foregrounds apenas para 50 e 80 (Dyamic e Solid) > Backgrounds utilizando apenas fixed-50 e fixedAlpha-60-16 e 70-16. > Borders atualizados para corresponder ao foreground. --------------------------------------------------------------------------- Brand Colors > Ajustes e redução na quantidade de valores dentro dos papéis. > Adição do papel Border. > Ajuste para deixar compativeis as cores Brand e Assistant do Cifra Club e Academy. (Elas devem ser os mesmos valores invertidos entre assistant e brand) --------------------------------------------------------------------------- Shadows > Remoção dos tokens: shadows-dynamic-16 e 32 --------------------------------------------------------------------------- Overlay > Adição de mais um nível de overlay.

Dezembro 2024

  • 12/12/24 Inclusão de Global Tokens green/50 e purple/55 para as Semantic Tokens utilizadas no palcoAssistant e letrasBrand.

  • 10/12/24

    Inclusão de todas as cores e tokens respectivos cadastrados para o novo design system - Compasso.

4KB
Global Colors 07-07-25.json
Abrir
26KB
Modes 07-07-25.json
Abrir

Fundamentos

↳ Global Token vs Semantic Token

A estrutura abaixo de semantic tokens é uma estrutura utilizada para facilitar o fluxo de trabalho do time de design no Figma. No caso de times de desenvolvimento essa estrutura pode ser executada de outra forma, sem existir esta herança, apenas cadastrando os HEX das cores respectivas.

No Figma, os Semantic Tokens foram nomeados como Modes para facilitar o entendimento dentro da estrutura (Modes reflete a troca entre estados dark e light mode), mas a aplicação é a mesma.

No Compasso, os tokens são organizados em duas categorias principais: Global Tokens e Semantic Tokens. Entender a diferença entre eles é essencial para garantir consistência e flexibilidade no uso das cores e outros estilos.

1

Global Tokens

Os Global Tokens representam valores puros e absolutos, sem associação a um contexto ou função específica.

Características:

  • São valores fixos, sem relação direta com o propósito de uso.

  • Exemplo: neutral-solid-50 (#777777).

  • Utilizados para criar Semantic Tokens e outros elementos do sistema.

Analogia: Pense nos Global Tokens como os "materiais brutos", como tinta ou tecido, prontos para serem moldados em algo específico.

2

Semantic Tokens

Os Semantic Tokens, por sua vez, são abstrações contextuais baseadas nos Global Tokens. Eles traduzem valores brutos em aplicações práticas e específicas, como cores para textos, fundos, bordas, ou estados de interação.

Características:

  • São utilizados em componentes com base no seu propósito funcional.

  • Adotam valores dos Global Tokens, mas com um significado atribuído.

  • Exemplo:

    • neutral-foreground-dynamic-10 (é um token utilizado usado para textos - em light mode ele herda o token neutral-solid-10 e para dark mode herda neutral-solid-95 mas o token aplicado no componente texto em si, é único).

Analogia: Os Semantic Tokens são como peças de roupa feitas a partir do tecido bruto — elas têm um propósito e um design que atende a uma necessidade específica.

Por que essa distinção é importante?

A separação entre Global Tokens e Semantic Tokens proporciona:

  1. Flexibilidade: Alterações nos Global Tokens atualizam automaticamente os Semantic Tokens e mantêm a consistência.

  2. Contextualização: Os Semantic Tokens garantem que as aplicações sejam feitas com base no significado funcional, não apenas no valor bruto.

  3. Escalabilidade: Permite ajustes e adaptações entre temas (como Light e Dark Mode) ou novas implementações sem comprometer a estrutura base.

↳ Estrutura de Semantic Tokens

Nossos tokens seguem uma estrutura base que ajuda a definir os papeis e comportamentos de cada token, bem como seus valores.

Agrupamentos documentados

Esses agrupamentos formam as combinações que serão encontradas ao longo dos tokens.

↳ Fixed e Dynamic Colors

Nos nossos tokens, você encontrará definições de fixed e dynamic, que se comportam de formas distintas dependendo do tema (Light ou Dark):

  • Fixed Colors (Solid + Alpha) São cores que permanecem inalteradas, independentemente do tema ativo. Ou seja, elas não sofrem conversão ao alternar entre os modos Light e Dark. Essa característica pode ser identificada no token por meio de fixed e fixedAlpha. -

  • Dynamic Colors (Solid + Alpha) São cores que se adaptam automaticamente ao tema. Ao mudar de Light para Dark (ou vice-versa), essas cores serão convertidas para versões específicas, garantindo contraste e legibilidade adequados em cada ambiente. Essa característica pode ser identificada no token por meio de dynamic e dynamicAlpha. -

↳ Neutral e Neutral Reverse

  • Neutral São paletas utilizadas com referência ao tema aplicado (Dark e Light) Em cores sólidas, geralmente se juntam às cores mais próximas em contraste aos BGs do tema em questão. Já as cores em alpha, as cores mais opostas ao tema base, são tidas como Neutral, pois a aplicação devida necessita contraste no tema. Aparece em aplicações como: States e Borders. -

  • Neutral Reverse Em cores sólidas, geralmente estão opostas ao tema aplicado. Em cores com alpha, estarão próximas à base do tema, mas desta maneira precisam ser aplicadas em elementos que se opõem à base (escura ou clara). Pois apenas assim permanecem gerando contraste. Aparece em aplicações como: States e Borders. Essa característica pode ser identificada no token por meio de dynamic e dynamicAlpha. -

↳ Papéis das cores

Definem em quais locais pode der aplicado cada token.

  1. Foreground Elementos em camadas superiores, como textos e ícones.

  2. Background Elementos de base que ficam abaixo dos foregrounds, como superfícies (surfaces), containers, entre outros.

  3. Border Utilizadas em bordas de elementos como cards, botões e divisores.

  4. Elevation

    Utilizados para gerar uma noção de profundidade nos elementos da tela.

  5. Common Aparecem em em tokens onde não há distinção de utilização entre foreground ou background. Ex.: States. -

🟠 Semantic Color Tokens

↳ Neutral (Base) 🏁

Tokens que servem para montar os materiais básicos de todo o sistema e determinar a conversão de tons neutros entre os modos de aparência Light e Dark. Ajudam a manter a consistência e contraste em tons neutros. São utilizadas nessa categoria, as paletas: neutral e neutralReverse. OBS: Neutral Reverse Colors aparecem em tokens com cores em alpha, pois neles há distinção do que deve ser utilizado entre Light e Dark Mode. Seus papéis são divididos entre: foreground, background, elevation e border.

Dynamic Colors (Solid)

Token (Neutral)
Global Token (Light)
Global Token (Dark)

base-neutral-foreground-dynamic-10

neutral-solid-10

neutral-solid-95

base-neutral-foreground-dynamic-40

neutral-solid-40

neutral-solid-70

base-neutral-foreground-dynamic-70

neutral-solid-70

neutral-solid-40

base-neutral-foreground-dynamic-100

neutral-solid-100

neutral-solid-10

Fixed Colors (Solid)

Token (Neutral)
Global Token (Light)
Global Token (Dark)

base-neutral-foreground-fixed-10

neutral-solid-10

neutral-solid-10

base-neutral-foreground-fixed-40

neutral-solid-40

neutral-solid-40

base-neutral-foreground-fixed-70

neutral-solid-70

neutral-solid-70

base-neutral-foreground-fixed-100

neutral-solid-100

neutral-solid-100

↳ Brand (Base) 🔶

A escala de Brand Colors é aplicada em componentes que possuem direta correlação com algum de nossos produtos.

↳ Global tokens

No caso de Brand Colors os tokens globais já são cadastrados herdados das Decorative Colors, sem necessidade de replicação. Ver Decorative Colors →

↳ Semantic Tokens ✦ cifraBrand

A escala do cifraBrand é utilizada em componentes e elementos que tem referência direta à cor orange, também primária do Cifra Club. Na prática ela serve para facilitar a dinâmica de troca de temas em componentes e telas, também complementando as Neutral Colors para a definir nossa identidade visual. Seus papéis são divididos entre: foreground, backgrounde border.

Dynamic Colors (Solid)

Token
Global Token (Light)
Global Token (Dark)

base-cifraBrand-foreground-dynamic-68

orange-solid-68

orange-solid-75

Fixed Colors (Solid)

Token
Global Token (Light)
Global Token (Dark)

base-cifraBrand-foreground-fixed-70

orange-solid-70

orange-solid-70

O orange-solid-68 e orange-solid-75(apesar de ser muito semelhante ao orange-solid-70) existe por questão de acessibilidade. Ele é uma cor de fonte pra casos específicos tipo Nome do Artista na tela de cifra que é usado SÓ pra texto (em versoes light e dark), porque o laranja orange-70 #FF6600 não funciona.

Exemplos:

↳ Semantic Tokens ✦ cifraAssistant

A escala do cifraAssistant é utilizada em componentes e elementos que tem referência direta à cor teal da escala Global, utilizada também na identidade visual das assinaturas. Seus papéis são divididos entre: foreground, backgrounde border.

Dynamic Colors (Solid)

Token
Global Token (Light)
Global Token (Dark)

base-cifraAssistant-foreground-dynamic-50

teal-solid-50

teal-solid-80

Fixed Colors (Solid)

Token
Global Token (Light)
Global Token (Light)

base-cifraAssistant-foreground-fixed-50

teal-solid-50

teal-solid-50

↳ Semantic Tokens ✦ academyBrand

A escala do academyBrand é utilizada em componentes e elementos que tem referência direta à cor cifraAssistant do Cifra Club. Na prática ela serve para facilitar a dinâmica de troca de temas em componentes e telas. Seus papéis são divididos entre: foreground, backgrounde border.

Dynamic Colors (Solid)

Token
Global Token (Light)
Global Token (Dark)

base-academyBrand-foreground-dynamic-50

teal-solid-50

teal-solid-80

Fixed Colors (Solid)

Token
Global Token (Light)
Global Token (Dark)

base-academyBrand-foreground-fixed-50

teal-solid-50

teal-solid-50

↳ Semantic Tokens ✦ academyAssistant

A escala do academyAssistant é utilizada em componentes e elementos secundários que tem referência direta à cor cifraBrand do Cifra Club. Seus papéis são divididos entre: foreground, backgrounde border.

Dynamic Colors (Solid)

Token
Global Token (Light)
Global Token (Dark)

base-academyAssistant-foreground-dynamic-68

orange-solid-68

orange-solid-75

Fixed Colors (Solid)

Token
Global Token (Light)
Global Token (Dark)

base-academyAssistant-foreground-fixed-68

orange-solid-68

orange-solid-68

↳ Semantic Tokens ✦ palcoBrand

A escala do palcoBrand é utilizada em componentes e elementos que tem referência direta à cor identidade visual do PalcoMP3. Utiliza apenas o papel: background.

Background (Fixed Colors)

Token
Global Token (Light)
Global Token (Dark)

base-palcoBrand-background-fixed-40

red-solid-40

red-solid-40

↳ Semantic Tokens ✦ palcoAssistant

A escala do palcoAssistant é utilizada em componentes e elementos que tem secundários em relação a identidade visual do PalcoMP3. Utiliza apenas o papel: background.

Background (Fixed Colors)

Token
Global Token (Light)
Global Token (Dark)

base-palcoAssistant-background-fixed-40

green-solid-40

green-solid-40

↳ Semantic Tokens ✦ letrasBrand

A escala do letrasBrand é utilizada em componentes e elementos que tem referência direta à cor identidade visual do Letras. Seus papéis são divididos entre: foreground e background.

Background (Dynamic)

Token
HEX Light
HEX Dark

base-letrasBrand-foreground-dynamic-39

citron-solid-39

citron-solid-36

base-letrasBrand-background-dynamic-36

citron-solid-36

citron-solid-39

↳ Decorative 🏳️‍🌈

Tokens semânticos de função decorativa utilizadas em contextos variados. Seus papéis são divididos entre: foreground,backgrounde border

Fixed colors (Solid)

Token
Global Token (Light)
Global Token (Dark)

decorative-blue-foreground-fixed-50

blue-solid-50

blue-solid-50

decorative-blue-foreground-fixed-60

blue-solid-60

blue-solid-60

decorative-orange-foreground-fixed-50

orange-solid-50

orange-solid-50

decorative-orange-foreground-fixed-60

orange-solid-60

orange-solid-60

decorative-purple-foreground-fixed-50

purple-solid-50

purple-solid-50

decorative-purple-foreground-fixed-60

purple-solid-60

purple-solid-60

decorative-red-foreground-fixed-50

red-solid-50

red-solid-50

decorative-red-foreground-fixed-60

red-solid-60

red-solid-60

decorative-rose-foreground-fixed-50

rose-solid-50

rose-solid-50

decorative-rose-foreground-fixed-60

rose-solid-60

rose-solid-60

decorative-teal-foreground-fixed-50

teal-solid-50

teal-solid-50

decorative-teal-foreground-fixed-60

teal-solid-60

teal-solid-60

decorative-yellow-foreground-fixed-50

yellow-solid-50

yellow-solid-50

decorative-yellow-foreground-fixed-60

yellow-solid-60

yellow-solid-60

Dynamic colors (Solid)

Token
Global Token (Light)
Global Token (Dark)

decorative-blue-foreground-dynamic-50

blue-solid-50

blue-solid-80

decorative-orange-dynamic-fixed-50

orange-solid-50

orange-solid-80

decorative-purple-foreground-dynamic-50

purple-solid-50

purple-solid-80

decorative-red-foreground-dynamic-50

red-solid-50

red-solid-80

decorative-rose-foreground-dynamic-50

rose-solid-50

rose-solid-80

decorative-teal-foreground-dynamic-50

teal-solid-50

teal-solid-80

decorative-yellow-foreground-dynamic-50

yellow-solid-50

yellow-solid-80

↳ States 👆

Tokens que se sobrepõem a camadas de background em elementos interativos para gerar feedback visual em seus estados. Aplicadas em contextos que requerem a representação de um estado específico, como botões em estados de hover ou pressed. Para esses casos, os States utilizam cores neutras com transparências (alfa). Por exemplo, em um botão com a cor base #FF6600 no estado hover, será aplicado o token correspondente, que combina o HEX da cor base com a neutral color ajustada com alfa. Seus papéis são divididos entre: foreground, commone border. O papel common aparece nesta categoria pois states muitas vezes tem os mesmos comportamentos independente de estarem aplicados em background ou foreground.

Os states com opacidade 0% servem para que uma das camadas do objeto varie seu preenchimento entre 0, 4, 8, 16% de opacidade. Em casos de Disabled Foreground, a opacidade é 24%.

Neutral (Dynamic)

State
Token
Global Token (Light)
Global Token (Dark)

Disabled

state-neutral-foreground-dynamicAlpha-disabled

neutral-alpha-0-24

neutral-alpha-100-24

Neutral Reverse (Dynamic)

State
Token
Global Token (Light)
Global Token (Dark)

Disabled

state-neutralReverse-foreground-dynamicAlpha-disabled

neutral-alpha-100-24

neutral-alpha-0-24

Neutral Reverse (Fixed)

State
Token
Global Token (Light)
Global Token (Dark)

Disabled

state-neutralReverse-foreground-fixedAlpha-disabled

neutral-alpha-100-24

neutral-alpha-100-24

↳ Shadows 🌒

Utilizados para que nossos efeitos de sombra sejam mais escuros em Dark Mode.

Token
Global Token (Light)
Global Token (Dark)

shadows-dynamicAlpha-0-4

neutral-alpha-0-4

neutral-alpha-0-16

shadows-dynamicAlpha-0-8

neutral-alpha-0-8

neutral-alpha-0-24

↳ Overlay ⬛️

Utilizados em camadas de cor que escurecem o conteúdo por trás, para ressaltar algum item na tela. Ex: Ao abrir Modais e Bottom Sheets.

Token
Global Token (Light)
Global Token (Dark)

overlay-fixedAlpha-0-32

neutral-alpha-0-32

neutral-alpha-0-32

overlay-fixedAlpha-0-60

neutral-alpha-0-60

neutral-alpha-0-60

↳ Status Colors 🚩

A escala status é aplicada para dar o feedback de status do sistema como por exemplo, erro, sucesso e alertas.

↳ Global Tokens

No caso de Status Colors os tokens globais já são cadastrados herdados das Decorative Colors, sem necessidade de replicação. Ver Decorative Colors →

↳ Semantic Tokens

Os semantic tokens são tokens referenciados pelos global tokens, onde são utilizados em contextos para papéis aplicados.

Dynamic Colors (Solid)

Token Light
Global Token (Light)
Global Token (Dark)

status-error-foreground-dynamic-50

red-solid-50

red-solid-80

status-error-foreground-dynamic-80

red-solid-80

red-solid-50

status-success-foreground-dynamic-50

teal-solid-50

teal-solid-80

status-success-foreground-dynamic-80

teal-solid-80

teal-solid-50

status-alert-foreground-dynamic-50

blue-solid-50

blue-solid-80

status-alert-foreground-dynamic-80

blue-solid-80

blue-solid-50

Fixed Colors (Solid)

Token Light
Global Token (Light)
Global Token (Dark)

status-error-foreground-fixed-50

red-solid-50

red-solid-50

status-error-foreground-fixed-80

red-solid-80

red-solid-80

status-success-foreground-fixed-50

teal-solid-50

teal-solid-50

status-success-foreground-fixed-80

teal-solid-80

teal-solid-80

status-alert-foreground-fixed-50

blue-solid-50

blue-solid-50

status-alert-foreground-fixed-95

blue-solid-80

blue-solid-80

🟣 Global Color Tokens

A escala Global Color Tokens é a base das cores do Compasso. São tokens de cores puras que são utilizadas dentro dos Semantic Color Tokens e não estão aplicadas diretamente aos componentes.

↳ Neutral Colors

Paleta tonal completa de cores entre Branco #FF e Preto #00. Compõem os Neutral Semantic Tokens de Foreground, Background e Borders.

Cor
Global Token/Name
HEX

neutral-solid-0

#000000

neutral-solid-10

#1B1B1B

neutral-solid-13

#222222

neutral-solid-15

#262626

neutral-solid-20

#303030

neutral-solid-30

#474747

neutral-solid-40

#5E5E5E

neutral-solid-50

#777777

neutral-solid-60

#919191

neutral-solid-70

#ABABAB

neutral-solid-80

#C6C6C6

neutral-solid-90

#E2E2E2

neutral-solid-95

#F1F1F1

neutral-solid-98

#F5F5F5

neutral-solid-100

#FFFFFF

↳ Decorative Colors

Conjunto de paletas tonais decorativas. Compõem semantic tokens dentro das categorias: Brand, Decorative e Status.

Cor
Global Token/Name
HEX

blue-solid-95

#D0E8FF

blue-solid-90

#C1E0FF

blue-solid-80

#81BFFF

blue-solid-70

#359BFF

blue-solid-60

#2B81EB

blue-solid-50

#1D60B1

blue-solid-30

#092B54

blue-solid-20

#031631

orange-solid-95

#FFE8DC

orange-solid-90

#FFD0BA

orange-solid-80

#FF9E73

orange-solid-75*

#FF8822*

orange-solid-70

#FF6600

orange-solid-68 *

#EE6600 *

orange-solid-60

#D65400

orange-solid-50

#A13D00

orange-solid-30

#4C1900

orange-solid-20

#2C0B00

orange-solid-15

#180400

purple-solid-95

#EFDDFF

purple-solid-90

#EAD2FF

purple-solid-80

#D5A4FF

purple-solid-60

#A15FD4

purple-solid-50

#78459F

purple-solid-30

#371D4B

purple-solid-20

#1E0D2B

red-solid-95

#FFD7D5

red-solid-90

#FFCAC7

red-solid-80

#FFA19E

red-solid-70

#FB5259

red-solid-60

#DF484F

red-solid-50

#AB353A

red-solid-40

#CC3300

red-solid-30

#4A1215

red-solid-20

#2B0708

rose-solid-95

#FFE5ED

rose-solid-90

#FFCCDC

rose-solid-80

#FF96B9

rose-solid-60

#D3497E

rose-solid-50

#9F355E

rose-solid-30

#4B142A

rose-solid-20

#2B0816

teal-solid-95

#CBE3D9

teal-solid-90

#BADACC

teal-solid-80

#96C8B4

teal-solid-70

#5EAC90

teal-solid-60

#00916E

teal-solid-50

#017155

teal-solid-30

#003526

teal-solid-20

#001A11

teal-solid-15

#000E08

green-solid-40

#14B866

citron-solid-36

#C2C800

citron-solid-39

#B7B700

yellow-solid-95

#F4ECCF

yellow-solid-90

#ECDDA9

yellow-solid-80

#D9B83D

yellow-solid-70

#C89600

yellow-solid-60

#AB8000

yellow-solid-50

#805F00

yellow-solid-30

#3A2900

yellow-solid-20

#231700

yellow-solid-15

#130B00

↳ Alpha Colors

Conjunto de paletas tonais baseadas em opacidade. Compõem semantic tokens dentro das categorias: Neutral (Background, Border, Overlay e Shadow) e States.

1

Background

Existem componentes que necessitam ter uma cor cinza leve e que funcione em telas com diferentes tonalidades de background. Os alphas nesse caso, garantem que a cor do BG do componente sempre será somada à cor do BG da tela, garantindo um contraste consistente.

2

States

No caso de states, os tokens de alpha são aplicados acima de um componente que já possui outro token de cor aplicado, a fim de trazer o status do sistema respectivo, como hovered, pressed, focused etc.

3

Shadows

Em contextos que precisamos adicionar uma cor à sombra, por exemplo cards e top bars no estado de scroll.

4

Borders

Aplicado em bordas, por exemplo de botões outlines, para que se comporte da mesma forma no light e dark mode, sem necessidade de aplicar cores sólidas.

5

Overlay

Aplicado em contextos sobrepondo outras telas, por exemplo, a camada visual que fica abaixo de modais e no estado de hover em imagens.

Cor
Global Token/Name
HEX

neutral-alpha-0-0

#000000, 0%

neutral-alpha-0-4

#000000, 4%

neutral-alpha-0-6

#000000, 6%

neutral-alpha-0-8

#000000, 8%

neutral-alpha-0-12

#000000, 12%

neutral-alpha-0-16

#000000, 16%

neutral-alpha-0-24

#000000, 24%

neutral-alpha-0-32

#000000, 32%

neutral-alpha-0-40

#000000, 40%

neutral-alpha-0-60

#000000, 60%

neutral-alpha-10-0

#1B1B1B, 0%

neutral-alpha-13-0

#222222, 0%

neutral-alpha-13-92

#222222, 92%

neutral-alpha-98-0

#F5F5F5, 0%

neutral-alpha-100-0

#FFFFFF, 0%

neutral-alpha-100-4

#FFFFFF, 4%

neutral-alpha-100-6

#FFFFFF, 6%

neutral-alpha-100-8

#FFFFFF, 8%

neutral-alpha-100-12

#FFFFFF, 12%

neutral-alpha-100-16

#FFFFFF, 16%

neutral-alpha-100-24

#FFFFFF, 24%

neutral-alpha-100-60

#FFFFFF, 60%

neutral-alpha-100-92

#FFFFFF, 92%

orange-alpha-70-0

#FF6600, 0%

orange-alpha-70-8

#FF6600, 8%

orange-alpha-70-16

#FF6600, 16%

red-alpha-70-0

#FB5259, 0%

red-alpha-70-8

#FB5259, 8%

red-alpha-70-16

#FB5259, 16%

blue-alpha-60-8

#2B81EB, 8%

blue-alpha-60-16

#2B81EB, 16%

purple-alpha-60-8

#A15FD4, 8%

purple-alpha-60-16

#A15FD4, 16%

rose-alpha-60-8

#D3497E, 8%

rose-alpha-60-16

#D3497E, 16%

teal-alpha-60-8

#00916E, 8%

teal-alpha-60-16

#00916E, 16%

yellow-alpha-60-8

#AB8000, 8%

yellow-alpha-60-16

#AB8000, 16%

Atualizado