> ## 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. # Conteúdo do design system e DESIGN.md > O que um design system gerado contém — tokens, cores, tipografia, componentes — e como o DESIGN.md o representa no seu projeto. ## Conteúdo de um design system Um design system gerado inclui: * **Tokens** — valores nomeados (cores, espaçamentos, raios) que o restante do sistema referencia * **Cores** — a paleta com funções (primária, superfície, destaque…) * **Tipografia** — famílias, tamanhos, pesos * **Componentes de exemplo** — 2 a 3 componentes construídos mostrando o sistema em uso * **Logos e ativos de marca** — incluídos quando você os fornece claramente O APEX X1 Design System renderizado como um guia de estilo vivo em modo foco, com uma barra lateral de cores, fontes, layout e componentes, a paleta principal, a escala de tipos e componentes de exemplo ## Como é armazenado Um sistema gerado vive no seu projeto como um **guia de estilo vivo**: os tokens em `tokens.json` alimentam as variáveis CSS (por exemplo, `src/index.css`) que seus componentes consomem. O `DESIGN.md` é a representação em documento — legível por você, utilizável pelo Agent. ## Usando o DESIGN.md como fonte Um `DESIGN.md` existente pode alimentar um novo design system: aponte para ele ao [criar um](/pt/design/create-a-design-system), junto com outras fontes como uma URL do Figma, um site, código ou imagens de referência.