Skip to main content
Um design system é a sua marca, tornada utilizável por máquinas. Ele captura as decisões que fazem seu produto parecer o seu produto — tokens de cor, tipografia, espaçamento e componentes de exemplo — para que o Design possa gerar resultados fiéis à marca em vez de resultados genericamente bonitos.

​
O que um design system contém

Um design system gerado inclui:
  • Tokens — os valores nomeados (cores, espaçamentos, raios) que tudo o mais referencia
  • Cores — sua paleta, com funções (primária, superfície, destaque…)
  • Tipografia — famílias, tamanhos e pesos
  • Componentes de exemplo — alguns componentes construídos (botões, cards…) mostrando o sistema em uso
  • Logos e ativos de marca, quando você os fornece
O sistema também pode ser expresso como um arquivo DESIGN.md no seu projeto — veja a referência.

​
De onde vêm os design systems

Duas maneiras de criar um:
  1. Do zero — peça um a partir da home page da Replit e responda a um pequeno questionário sobre sua marca.
  2. A partir de um design existente — extraia um sistema de um mockup que você já gosta (menu de três pontos no frame → extrair).
Você também pode alimentar um a partir de uma fonte: uma URL do Figma, um site, código, imagens de referência ou um DESIGN.md já existente. Detalhes em Crie um design system.

​
Quando um design system vale a pena

  • Você projeta mais de uma vez. O segundo design é onde a inconsistência começa; um sistema mantém a geração N parecida com a geração 1.
  • Uma equipe projeta junto. Salve o sistema no seu workspace e todos geram a partir da mesma marca.
  • Você o aplica a um trabalho existente. Um artefato existente pode ser reconstruído sob o sistema — veja Aplicar um design system, incluindo o que significa o aviso de tempo/créditos.

​
Onde eles vivem

Os design systems são salvos no seu workspace, selecionáveis quando você cria um novo artefato, e alternáveis por projeto.