Quatro design systems públicos que vale estudar, o que cada um publica e um gerador ao vivo que transforma as suas escolhas de cor, tipografia e cantos em um guia de estilo de uma página com CSS.
Um design system é o conjunto compartilhado de tokens, componentes e regras de uso com que uma equipe trabalha; um guia de estilo de site é a sua forma mínima, uma página com cores, tipografia e componentes essenciais. Estude sistemas públicos como USWDS, GOV.UK, Carbon e Atlassian e depois use o gerador abaixo para criar um guia inicial para o seu próprio site.
O que um design system normalmente contém
Listas de design systems só mandam links e param por aí. Esta página explica o que aproveitar de quatro sistemas públicos bem documentados e depois entrega um gerador de guia de estilo funcional, que renderiza botões, um campo de formulário, um card e um alerta a partir das suas escolhas e exporta as CSS custom properties correspondentes.
Um guia de estilo registra regras visuais: cores, fontes, uso do logo e tom. Um design system acrescenta os componentes em código, os tokens e a documentação que levam essas regras aos produtos, e normalmente um processo para mudá-las. A maioria dos sites pequenos só precisa do guia de estilo e de alguns componentes.
Sistemas de governo como o USWDS e o GOV.UK são públicos, explicam os motivos de cada escolha e priorizam a acessibilidade. O Carbon mostra como uma grande empresa documenta componentes complexos. O Atlassian é um bom modelo para nomear tokens pela função.
Vários publicam código open source, mas cada um define a própria licença e as próprias regras de marca, e o visual de um governo ou de uma empresa em um site sem relação com eles pode enganar os visitantes. Leia a licença e as regras de marca no site do sistema antes de reutilizar os componentes ou o visual.
Comece com uma cor de marca, um quase preto para o texto, um ou dois cinzas para bordas e superfícies e um vermelho para erros. Adicione mais só quando um componente real precisar.
Toda regra lê uma custom property, então mudar --brand ou --radius muda o estilo de todos os componentes de uma vez.
Administração de Serviços Gerais dos EUA (GSA)
Design tokens, componentes com orientações de acessibilidade e de implementação
Escalas de tokens para cor, tipografia e unidades de espaçamento
Government Digital Service do Reino Unido
Estilos, componentes e padrões
Padrões para tarefas inteiras, como pedir nomes
IBM
Componentes open source para React e Web Components, construídos sobre a fonte IBM Plex
Tabelas de dados corporativas e layouts densos
Atlassian
Design tokens nomeados por fundamento, propriedade e modificador, como color.text
Um esquema claro de nomes de tokens
Sans do sistema
Serifada do sistema
Arredondada
Monoespaçada
Escolha uma cor de marca, uma pilha de fontes, um raio de canto e um passo de espaçamento. A folha e o CSS abaixo se atualizam juntos.
Cor da marca
Pilha de fontes
Raio do canto: {n}px
Passo de espaçamento: {n}px
Texto branco sobre a sua cor de marca:
(atende 4.5:1 para texto normal)
(só texto grande, precisa de 3:1)
(baixo demais para texto)
Salvar
Cancelar
Título do card
Cards agrupam uma ideia com a sua ação.
Digite um endereço de e-mail no formato [email protected]
Copiar CSS
Design systems públicos que vale estudar
Verificado no site oficial de cada sistema, outubro de 2026
Sistema
Criado por
O que publica
Estude para
Comece grátis · Sem cartão de crédito