108 lines
2.4 KiB
Markdown
108 lines
2.4 KiB
Markdown
# 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`:
|
|
|
|
```css
|
|
--color-brand-500
|
|
--color-gray-200
|
|
--spacing-md
|
|
--gradient-primary
|
|
--focus-ring
|
|
```
|
|
|
|
## Classes Utilitárias
|
|
|
|
```css
|
|
.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
|