> ## Documentation Index
> Fetch the complete documentation index at: https://docs.replit.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Design systems, explicados

> Um design system captura seus tokens, cores, tipografia e componentes para que todo design que você gerar permaneça fiel à marca.

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](/pt/design/design-md).

## 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](/pt/design/create-a-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](/pt/design/apply-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.