aggios.app/frontend-aggios.app/app/design-system/README.md

Design System - Aggios Platform

Documentação visual completa do Design System da plataforma Aggios.

Acesso

Acesse em: /design-system

O que está incluído

🎨 Cores

• Brand Colors: Paleta completa de azul (50-950)
• Gray Scale: Escala de cinzas (50-950)
• Surface Colors: Cores de superfície (light, dark, muted, card)
• Text Colors: Cores de texto (primary, secondary, inverse)

📏 Espaçamentos

• xs - 4px (0.25rem)
• sm - 8px (0.5rem)
• md - 16px (1rem)
• lg - 24px (1.5rem)
• xl - 32px (2rem)
• 2xl - 48px (3rem)

✍️ Tipografia

• Headings: Arimo (h1-h6)
• Body: Inter (text-xs até text-xl)
• Code: Fira Code (monospace)

🔲 Bordas

• Border Radius: De rounded-none até rounded-full
• Border Styles: Solid, dashed, diferentes espessuras
• Border Colors: Variações de zinc e brand

🌈 Gradientes

• Brand Gradient (bg-brand)
• Primary Gradient (var(--gradient-primary))
• Accent Gradient (var(--gradient-accent))
• Gradient Text (.gradient-text)

🎭 Sombras

• Sistema de elevação completo
• Sombras com brand color (shadow-brand-20)

🎯 Ícones

• Heroicons (biblioteca completa - outline e solid)
• Exemplos de uso em diferentes contextos
• Integração perfeita com Headless UI

🔘 Componentes

Botões

• Primary, Secondary, Outline, Ghost
• Icon Buttons
• Estados: Normal, Hover, Disabled, Loading

Cards

• Basic, Elevated, Gradient
• Icon Card, Stat Card, Interactive Card

Inputs

• Text, Email, Textarea
• Input with Icon
• Select, Checkbox, Radio

Badges

• Status Badges (success, info, warning, error)
• Pill Badges
• Count Badges
• Dot Indicators

Variáveis CSS

Todas as variáveis estão definidas em app/tokens.css:

--color-brand-500
--color-gray-200
--spacing-md
--gradient-primary
--focus-ring

Classes Utilitárias

.bg-brand          /* Gradiente de marca */
.bg-brand-soft     /* Gradiente suave */
.gradient-text     /* Texto com gradiente */
.shadow-brand-20   /* Sombra com cor da marca */
.font-heading      /* Fonte para headings (Open Sans) */

Dark Mode

Todos os componentes suportam dark mode automático através da classe .dark no HTML.

Toggle disponível na página do Design System.

Uso

Para usar qualquer componente, copie o código HTML/JSX diretamente da página do Design System.

---

Versão: 1.0 Data: 2025