Skins

Skins são variações no padrão estético de um componente, geralmente desconsiderando cor.

Elas não alteram a estrutura do componente, mas alteram a forma que ele comunica seu conteúdo, geralmente ganhando mais ou menos ênfase.

Skins permitem que componentes sejam usados em uma quantidade maior de contextos diferentes e em combinação com uma variedade maior de elementos na mesma página.

O core de uma skin é a variação principal e mais marcante da skin, é fator visual que nos faz identificar a variação como sendo aquela skin.

Cada Skin de um componente deve ser documentado como um value de uma variant property nomeada “Skin”.

A adição de skins na criação de componentes não é obrigatória e é recomendado que skins sejam adicionadas em componentes apenas quando necessário.

Componentes podem ter skins específicas fora das documentadas aqui.

Image

background image

Recomendações

Token
Recommended values

cosmos-alias-skin-image-background

image (+ overlay, se contiver texto)

cosmos-alias-skin-image-mainText

white solid/600

cosmos-alias-skin-image-iconColor

white solid/600

cosmos-alias-skin-image-secText

white solid/500

cosmos-alias-skin-image-supportText

white/400 ⚠ Contraste baixo

cosmos-alias-skin-image-border

-

Neutral

Token
Recommended values

cosmos-alias-skin-image-background

image + cosmos-ref-color-blackSolid100

cosmos-alias-skin-image-mainText

cosmos-ref-color-whiteSolid600

cosmos-alias-skin-image-iconColor

cosmos-ref-color-whiteSolid600

cosmos-alias-skin-image-secText

cosmos-ref-color-whiteSolid500

cosmos-alias-skin-image-supportText

cosmos-ref-color-whiteSolid400

cosmos-alias-skin-image-border

-

Candy

gradient background

Recomendações

Token
Recommended values

cosmos-alias-skin-candy-background

any/grad

cosmos-alias-skin-candy-mainText

white solid/600

cosmos-alias-skin-candy-iconColor

white solid/600

cosmos-alias-skin-candy-secText

white solid/500

cosmos-alias-skin-candy-supportText

white/400 ⚠ Contraste baixo

cosmos-alias-skin-candy-border

-

Neutral

Token
Recommended values

cosmos-alias-skin-candy-background

cosmos-ref-grad-neutral

cosmos-alias-skin-candy-mainText

cosmos-ref-color-whiteSolid600

cosmos-alias-skin-candy-iconColor

cosmos-ref-color-whiteSolid600

cosmos-alias-skin-candy-secText

cosmos-ref-color-whiteSolid500

cosmos-alias-skin-candy-supportText

cosmos-ref-color-whiteSolid400

cosmos-alias-skin-candy-border

-

Brand Letras

Token
Recommended values

cosmos-alias-skin-candy-background

cosmos-ref-grad-letrasPrimary

cosmos-alias-skin-candy-mainText

cosmos-ref-color-whiteSolid600

cosmos-alias-skin-candy-iconColor

cosmos-ref-color-whiteSolid600

cosmos-alias-skin-candy-secText

cosmos-ref-color-whiteSolid500

cosmos-alias-skin-candy-supportText

cosmos-ref-color-whiteSolid400

cosmos-alias-skin-candy-border

-

Brand Academy

Token
Recommended values

cosmos-alias-skin-candy-background

cosmos-ref-grad-academyPrimary

cosmos-alias-skin-candy-mainText

cosmos-ref-color-whiteSolid600

cosmos-alias-skin-candy-iconColor

cosmos-ref-color-whiteSolid600

cosmos-alias-skin-candy-secText

cosmos-ref-color-whiteSolid500

cosmos-alias-skin-candy-supportText

cosmos-ref-color-whiteSolid400

cosmos-alias-skin-candy-border

-

Fill

Recomendações

Token
Recommended values

cosmos-alias-skin-candy-background

any/600

cosmos-alias-skin-candy-mainText

white solid/600

cosmos-alias-skin-candy-iconColor

white solid/600

cosmos-alias-skin-candy-secText

white solid/500

cosmos-alias-skin-candy-supportText

white/400 ⚠ Contraste baixo

cosmos-alias-skin-candy-border

-

Neutral

Token
Recommended values

cosmos-alias-skin-candy-background

cosmos-ref-color-neutral600

cosmos-alias-skin-candy-mainText

cosmos-ref-color-whiteSolid600

cosmos-alias-skin-candy-iconColor

cosmos-ref-color-whiteSolid600

cosmos-alias-skin-candy-secText

cosmos-ref-color-whiteSolid500

cosmos-alias-skin-candy-supportText

cosmos-ref-color-whiteSolid400

cosmos-alias-skin-candy-border

-

Brand Letras

Token
Recommended values

cosmos-alias-skin-candy-background

cosmos-ref-color-letrasPrimary600

cosmos-alias-skin-candy-mainText

cosmos-ref-color-whiteSolid600

cosmos-alias-skin-candy-iconColor

cosmos-ref-color-whiteSolid600

cosmos-alias-skin-candy-secText

cosmos-ref-color-whiteSolid500

cosmos-alias-skin-candy-supportText

cosmos-ref-color-whiteSolid400

cosmos-alias-skin-candy-border

-

Brand Academy

Token
Recommended values

cosmos-alias-skin-candy-background

cosmos-ref-color-academyPrimary600

cosmos-alias-skin-candy-mainText

cosmos-ref-color-whiteSolid600

cosmos-alias-skin-candy-iconColor

cosmos-ref-color-whiteSolid600

cosmos-alias-skin-candy-secText

cosmos-ref-color-whiteSolid500

cosmos-alias-skin-candy-supportText

cosmos-ref-color-whiteSolid400

cosmos-alias-skin-candy-border

-

Tonal

light background

Recomendações

Token
Recommended values

cosmos-alias-skin-candy-background

any/100

cosmos-alias-skin-candy-mainText

neutral/600 contrast

cosmos-alias-skin-candy-iconColor

neutral/600 contrast

cosmos-alias-skin-candy-secText

neutral/500

cosmos-alias-skin-candy-supportText

neutral/400 ⚠ Contraste baixo

cosmos-alias-skin-candy-border

-

Neutral

Token
Recommended values

cosmos-alias-skin-candy-background

cosmos-ref-color-neutral100

cosmos-alias-skin-candy-mainText

cosmos-ref-color-neutral600

cosmos-alias-skin-candy-iconColor

cosmos-ref-color-neutral600

cosmos-alias-skin-candy-secText

cosmos-ref-color-neutral500

cosmos-alias-skin-candy-supportText

cosmos-ref-color-neutral400

cosmos-alias-skin-candy-border

-

Brand Letras

Token
Recommended values

cosmos-alias-skin-candy-background

cosmos-ref-color-letrasPrimary100

cosmos-alias-skin-candy-mainText

cosmos-ref-color-neutral600

cosmos-alias-skin-candy-iconColor

cosmos-ref-color-neutral600

cosmos-alias-skin-candy-secText

cosmos-ref-color-neutral500

cosmos-alias-skin-candy-supportText

cosmos-ref-color-neutral400

cosmos-alias-skin-candy-border

-

Brand Academy

Token
Recommended values

cosmos-alias-skin-candy-background

cosmos-ref-color-academyPrimary100

cosmos-alias-skin-candy-mainText

cosmos-ref-color-neutral600

cosmos-alias-skin-candy-iconColor

cosmos-ref-color-neutral600

cosmos-alias-skin-candy-secText

cosmos-ref-color-neutral500

cosmos-alias-skin-candy-supportText

cosmos-ref-color-neutral400

cosmos-alias-skin-candy-border

-

Outline

light stroke with no background

Recomendações

Token
Recommended values

cosmos-alias-skin-candy-background

-

cosmos-alias-skin-candy-mainText

neutral/600 contrast

cosmos-alias-skin-candy-iconColor

neutral/600 contrast

cosmos-alias-skin-candy-secText

neutral/500

cosmos-alias-skin-candy-supportText

neutral/400 ⚠ Contraste baixo

cosmos-alias-skin-candy-border

any/200

Neutral

Token
Recommended values

cosmos-alias-skin-candy-background

-

cosmos-alias-skin-candy-mainText

cosmos-ref-color-neutral600

cosmos-alias-skin-candy-iconColor

cosmos-ref-color-neutral600

cosmos-alias-skin-candy-secText

cosmos-ref-color-neutral500

cosmos-alias-skin-candy-supportText

cosmos-ref-color-neutral400

cosmos-alias-skin-candy-border

cosmos-ref-color-neutral200

Brand Letras

Token
Recommended values

cosmos-alias-skin-candy-background

-

cosmos-alias-skin-candy-mainText

cosmos-ref-color-neutral600

cosmos-alias-skin-candy-iconColor

cosmos-ref-color-neutral600

cosmos-alias-skin-candy-secText

cosmos-ref-color-neutral500

cosmos-alias-skin-candy-supportText

cosmos-ref-color-neutral400

cosmos-alias-skin-candy-border

cosmos-ref-color-letrasPrimary200

Brand Academy

Token
Recommended values

cosmos-alias-skin-candy-background

-

cosmos-alias-skin-candy-mainText

cosmos-ref-color-neutral600

cosmos-alias-skin-candy-iconColor

cosmos-ref-color-neutral600

cosmos-alias-skin-candy-secText

cosmos-ref-color-neutral500

cosmos-alias-skin-candy-supportText

cosmos-ref-color-neutral400

cosmos-alias-skin-candy-border

cosmos-ref-color-academyPrimary200

Clear

no stroke, no background

Recomendações

Token
Recommended values

cosmos-alias-skin-candy-background

-

cosmos-alias-skin-candy-mainText

neutral/600 contrast

cosmos-alias-skin-candy-iconColor

neutral/600 contrast

cosmos-alias-skin-candy-secText

neutral/500

cosmos-alias-skin-candy-supportText

neutral/400 ⚠ Contraste baixo

cosmos-alias-skin-candy-border

-

Neutral

Token
Recommended values

cosmos-alias-skin-candy-background

-

cosmos-alias-skin-candy-mainText

cosmos-ref-color-neutral600

cosmos-alias-skin-candy-iconColor

cosmos-ref-color-neutral600

cosmos-alias-skin-candy-secText

cosmos-ref-color-neutral500

cosmos-alias-skin-candy-supportText

cosmos-ref-color-neutral400

cosmos-alias-skin-candy-border

-

Histórico de Atualizações

Figma
Gitbook
Android
iOS
Web

N/A

11/11/1111

N/A

N/A

N/A

Percebeu um erro, ficou com dúvida ou tem uma sugestão?

Contribua com o Kósmos preenchendo nosso formulário de contribuição — sua colaboração ajuda a tornar o Design System mais claro, útil e evolutivo para todo o time.

AnteriorRadiusPróximoSpacing

Atualizado