Skip to main content

​
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, junto com outras fontes como uma URL do Figma, um site, código ou imagens de referência.