ZOI Design System

O Design System oficial da ZOI Tech. Tokens de design, configurações do Tailwind e estilos base prontos para uso em aplicações React, Vue ou estáticas.

📦 Instalação

npm install @zoitechnologies/ds

🚀 Como Usar

1. CSS Base (Tokens)

Importe o arquivo CSS principal no ponto de entrada da sua aplicação (pages/_app.js, main.ts, ou styles.css):

/* No seu CSS global */
@import '@zoitechnologies/ds/styles/theme.css';

2. Tailwind CSS

Adicione o preset ao seu arquivo tailwind.config.js. Isso disponibilizará automaticamente classes como bg-brand-primary ou text-display-xl.

// tailwind.config.js
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  // Herda toda a configuração ZOI (Cores, Fontes, Spacing)
  presets: [
    require('@zoitechnologies/ds')
  ],
  theme: {
    extend: {
      // Suas extensões locais aqui
    },
  },
}

🎨 Documentação Visual

O Styleguide Interativo está incluído no pacote! Após a instalação, abra o arquivo:

node_modules/@zoitechnologies/ds/styleguide/index.html

No styleguide você encontra:

• Paleta de cores completa (brand, neutros, sistema)
• Tipografia e escalas de texto (Display XL até Body SM)
• Componentes com exemplos ao vivo (botões, formulários, cards)
• Design tokens documentados (spacing, shadows, motion)
• Modo claro/escuro com toggle funcional e persistência local

O styleguide utiliza as fontes oficiais ZOI (Clash Display + System UI) e implementa a identidade visual corporativa com acabamento profissional moderno.

🛠 Desenvolvimento

Este pacote foi gerado via engenharia reversa e refinamento manual. Para regenerar os tokens base:

npm run crawler:extract