Design System Fraga

O contexto

A empresa não tinha padronização nem identidade visual própria. Cada projeto começava do zero e reinventava os mesmos elementos, o que gerava telas diferentes para problemas iguais.

Comecei o design system por iniciativa própria, como projeto paralelo. Levou pouco mais de um ano para ficar completo, construído aos poucos entre as demandas do dia a dia.

O que construí

Componentes com variantes. 21 componentes, entre alerts, accordions, badges, buttons e inputs, somando cerca de 600 variantes. Cada um já vem com seus estados prontos, então aplicar virou uma questão de escolher a variante certa.

Paleta autoral. Desenvolvi a paleta do zero, em escala de 100 a 900. Ela cobre desde a base da página até os estados de interação, com um tom definido para cada função.

Contraste documentado em cada token. Todos os tokens têm o nível de contraste registrado em AA ou AAA. A acessibilidade foi resolvida na definição da cor, antes de qualquer tela ser desenhada.

Padronização com ganho de tempo. Com estados e variantes prontos, o time monta telas mais rápido e as decisões visuais param de se repetir a cada projeto.

O que fica

Hoje o design system é o padrão visual da Fraga, adotado em todos os novos projetos, incluindo a refatoração completa do sistema principal.

Tecnologias envolvidas

Figma. Biblioteca completa de componentes, tokens e estilos, publicada e consumida pelos times.