Pão de Açúcar // Design System [Landing Pages] v.01/2025
Pão de Açúcar // Design System [Landing Pages] v.01/2025
Os botões são agrupados em três famílias principais: brand, neutrals e semantics, cada uma com suas próprias diretrizes totalizando 240 variações de botões. A família "brand" é para usos ligados à marca Pão de Açúcar, alinhando-se à sua identidade visual em ações que destacam a identidade. A "neutrals" também é para uso da marca, porém em fundos predominantemente verdes ou escuros. Já a "Semantics" é voltada para funções que priorizam a compreensão e clareza, aplicadas em ações cognitivas comuns.
A taxonomia organiza os botões com base na família, cor, tamanho e tipo e estado de interação. As cores são agrupadas em "primary", "secondary", "accent", "neutral light", "neutral dark", "positivo", "negativo", "alerta" e "info", seguindo a paleta de cores. Os tamanhos incluem "large", "normal" (padrão), "small" e "normal". Os botões podem ser "sólidos" ou "contornados" e têm estados de interação como "default", "hover", "focus" e "disabled" (desabilitado). Os botões podem levar ícones à direita e esquerda ou ambos.
Família > Cor > Tamanho > Tipo > Estado
.button {
display: inline-flex;
border: 1px solid transparent;
vertical-align: middle;
align-items: center ;
justify-content: center;
text-align: center;
margin: 0;
padding: ; /*var_button-size (.large; .normal; .small; .tiny)*/
border-radius: 6px;
-webkit-transition: background-color 0.25s ease-out, color 0.25s ease-out;
transition: background-color 0.25s ease-out, color 0.25s ease-out;
font-family: "Montserrat", Arial, sans-serif;
letter-spacing: 0;
font-size: ; /*var_text-button-size*/
font-optical-sizing: auto;
font-style: normal;
font-weight: 646; /*semi-bold*/
line-height: 1;
cursor: pointer;
-webkit-appearance: none;
}
.button.large {
padding: calc( var(--rem-base) * 1.375) var(--rem-base);
font-size: 1.125rem;
font-family: "Montserrat", Arial, sans-serif;
}
.button.normal {
padding: var(--rem-base);
font-size: var(--rem-base);
font-family: "Montserrat", Arial, sans-serif;
}
.button.small {
padding: calc( var(--rem-base) * .875) var(--rem-base);
font-size: 0.875rem;
font-family: "Montserrat", Arial, sans-serif;
}
.button.tiny {
padding: calc( var(--rem-base) * .625) calc( var(--rem-base) * .75);
font-size: .75rem;
font-family: "Montserrat", Arial, sans-serif;
}
Abaixo encontra-se as especificações gerais dos diferentes tamanhos de botões. À esquerda informações gerais sobre componentes do botão (borda, ícones e texto) e à direita encontra-se as dimensões de espaçamento (em pixels).
