Framing

No Kósmos, framing é o conjunto de diretrizes que define a estrutura dimensional dos componentes, abrangendo altura, espaçamentos internos, tamanhos de ícones e tipografia.

Seu principal objetivo é garantir uma escala coerente de densidade visual em todos os contextos, criando padrões previsíveis de espaçamento e proporção entre os elementos. Isso, assegura que componentes do mesmo tamanho se alinhem perfeitamente, mantendo ritmo, equilíbrio e consistência visual em toda a interface do produto.

Quando aplicar o Framing

O framing deve ser aplicado em componentes compostos por estrutura de ícone–label–ícone, dispostos verticalmente e centralizados.

O framing garante que todos os elementos dentro do componente tenham espaçamento e proporção consistentes, evitando desalinhamentos ao serem combinados lado a lado com outros componentes (ex.: botões, inputs, selects).

Exemplos de aplicação:

• Componentes com variações dimensionais padronizadas, como Botão, Input, Select, Tag e Dropdown.

• Componentes com estrutura vertical alinhada, como Botão com ícone à esquerda/direita ou com ícone de loading central.

• Situações em que o componente precisa encaixar perfeitamente em layouts modulares, mantendo altura e espaçamento equivalentes aos demais.

Escala de Framings

A escala de framings do Kósmos segue 5 tamanhos padrões.

Size	Height	Padding	Gap itens	Icon	Font	Border radius
X Small	24px	4px	4px	16px	12	8px
Small	32px	6px	6px	20px	14	8px
Medium	40px	8px	8px	24px	14	12px
Large	48px	12px	8px	24px	16	16px
X Large	64px	20px	12px	24px	16	20px

Os valores de Padding e Gap itens se referem ao espaço total entre os elementos do componente. Portanto, pode ser necessário:

• Adicionar paddings internos nos itens do componente;

• Somar auto layouts para atingir o valor total indicado na tabela.

Atualmente, adotamos a prática de:

• Colocar a label dentro de um auto layout (label area) com metade do gap;

• Quando necessário, colocar o ícone dentro de outro auto layout com metade do gap ou do padding.

Exemplo:

Essa abordagem garante que o framing final do componente respeite a escala e o alinhamento do Kósmos.