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