267 lines
7.0 KiB
Markdown
267 lines
7.0 KiB
Markdown
# Design System - aggios.app
|
|
|
|
## Cores
|
|
|
|
### Cores Principais
|
|
--gradient: linear-gradient(90deg, #FF3A05, #FF0080);
|
|
--gradient-text: linear-gradient(to right, #FF3A05, #FF0080);
|
|
```
|
|
|
|
### Gradientes
|
|
```css
|
|
--gradient: linear-gradient(90deg, #FF3A05, #FF0080);
|
|
--gradient-text: linear-gradient(to right, #FF3A05, #FF0080);
|
|
```
|
|
|
|
**Uso do gradiente:**
|
|
- Botões principais (CTA)
|
|
- Texto em destaque (com `-webkit-background-clip: text`)
|
|
- Backgrounds de seções especiais
|
|
- Cards destacados (plano Pro)
|
|
|
|
## Ícones
|
|
|
|
- **Biblioteca**: Remix Icon (https://remixicon.com/)
|
|
- **Pacote**: `remixicon`
|
|
- **Importação**: `@import "remixicon/fonts/remixicon.css";`
|
|
- **Uso**: Classes CSS (`<i className="ri-arrow-right-line"></i>`)
|
|
- **Estilo padrão**: Line icons (outline)
|
|
- **Tamanhos comuns**:
|
|
- Ícones em botões: `text-base` (16px)
|
|
- Ícones em cards: `text-2xl` (24px)
|
|
- Ícones em features: `text-2xl` (24px)
|
|
|
|
## Tipografia
|
|
|
|
### Fontes
|
|
```css
|
|
--font-sans: Inter; /* Corpo, UI, labels */
|
|
--font-heading: Open Sans; /* Títulos, headings */
|
|
--font-mono: Fira Code; /* Código, domínios */
|
|
```
|
|
|
|
### System Font Stack
|
|
```css
|
|
font-family: var(--font-sans), -apple-system, BlinkMacSystemFont,
|
|
'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
|
|
'Helvetica Neue', Arial, sans-serif;
|
|
```
|
|
|
|
### Hierarquia
|
|
|
|
| Elemento | Font | Tamanho | Peso | Line Height |
|
|
|----------|------|---------|------|-------------|
|
|
| H1 (Hero) | Open Sans | 48-72px | 700 | 1.1 |
|
|
| H2 (Seções) | Open Sans | 32-48px | 700 | 1.2 |
|
|
| H3 (Cards) | Open Sans | 20-24px | 700 | 1.3 |
|
|
| Body | Inter | 14-16px | 400 | 1.5 |
|
|
| Body Large | Inter | 18-20px | 400 | 1.6 |
|
|
| Labels | Inter | 13-14px | 600 | 1.4 |
|
|
| Small | Inter | 12-13px | 400 | 1.4 |
|
|
| Code/Mono | Fira Code | 12-14px | 400 | 1.5 |
|
|
|
|
## Componentes
|
|
|
|
### Botões
|
|
|
|
#### Botão Primário (Gradient)
|
|
```tsx
|
|
className="px-6 py-3 bg-gradient-to-r from-primary to-secondary
|
|
text-white font-semibold rounded-lg
|
|
hover:opacity-90 transition-opacity shadow-lg"
|
|
```
|
|
- **Padding**: 24px 12px (px-6 py-3)
|
|
- **Background**: Gradiente primary → secondary
|
|
- **Border Radius**: 8px (rounded-lg)
|
|
- **Font**: Inter 600 / 14-16px
|
|
- **Hover**: Opacity 0.9
|
|
- **Shadow**: shadow-lg
|
|
|
|
#### Botão Secundário (Outline)
|
|
```tsx
|
|
className="px-6 py-3 border-2 border-primary text-primary
|
|
font-semibold rounded-lg
|
|
hover:bg-primary hover:text-white transition-colors"
|
|
```
|
|
- **Padding**: 24px 12px (px-6 py-3)
|
|
- **Border**: 2px solid primary
|
|
- **Hover**: Background primary + text white
|
|
|
|
#### Botão Ghost
|
|
```tsx
|
|
className="px-6 py-3 border-2 border-border text-foreground
|
|
font-semibold rounded-lg
|
|
hover:border-primary transition-colors"
|
|
```
|
|
- **Border**: 2px solid border
|
|
- **Hover**: Border muda para primary
|
|
|
|
#### Botão Header (Compacto)
|
|
```tsx
|
|
className="px-6 py-2 bg-gradient-to-r from-primary to-secondary
|
|
text-white font-semibold rounded-lg
|
|
hover:opacity-90 transition-opacity shadow-lg"
|
|
```
|
|
- **Padding**: 24px 8px (px-6 py-2)
|
|
- **Uso**: Headers, navegação
|
|
- **Tamanho**: Menor para espaços reduzidos
|
|
|
|
### Input
|
|
```tsx
|
|
className="w-full px-4 py-3 border border-border rounded-lg
|
|
focus:border-primary focus:outline-none
|
|
text-sm placeholder:text-text-secondary"
|
|
```
|
|
- **Padding**: 16px 12px
|
|
- **Border**: 1px solid border (#E5E5E5)
|
|
- **Border Radius**: 8px (rounded-lg)
|
|
- **Font**: Inter 400 / 14px
|
|
- **Focus**: Border primary, sem outline
|
|
- **Placeholder**: text-secondary (#7D7D7D)
|
|
|
|
### Cards
|
|
|
|
#### Card Padrão
|
|
```tsx
|
|
className="bg-white p-8 rounded-2xl border border-border
|
|
hover:border-primary transition-colors"
|
|
```
|
|
- **Background**: white
|
|
- **Padding**: 32px
|
|
- **Border Radius**: 16px (rounded-2xl)
|
|
- **Border**: 1px solid border
|
|
- **Hover**: Border muda para primary
|
|
|
|
#### Card Gradient (Destaque)
|
|
```tsx
|
|
className="bg-gradient-to-br from-primary to-secondary
|
|
p-8 rounded-2xl text-white shadow-2xl"
|
|
```
|
|
- **Background**: Gradiente diagonal
|
|
- **Text**: Branco
|
|
- **Shadow**: shadow-2xl
|
|
|
|
### Badge
|
|
```tsx
|
|
className="inline-flex items-center gap-2 px-4 py-2
|
|
bg-primary/10 rounded-full text-sm text-primary font-medium"
|
|
```
|
|
- **Padding**: 8px 16px
|
|
- **Border Radius**: 9999px (rounded-full)
|
|
- **Background**: primary com 10% opacity
|
|
- **Font**: Inter 500 / 12-14px
|
|
|
|
### Ícones em Cards
|
|
```tsx
|
|
<div className="w-12 h-12 bg-gradient-to-r from-primary to-secondary
|
|
rounded-xl flex items-center justify-center">
|
|
<i className="ri-icon-name text-2xl text-white"></i>
|
|
</div>
|
|
```
|
|
- **Tamanho**: 48x48px (w-12 h-12)
|
|
- **Background**: Gradiente
|
|
- **Border Radius**: 12px (rounded-xl)
|
|
- **Ícone**: 24px, branco
|
|
|
|
## Espaçamento
|
|
|
|
| Nome | Valor | Uso |
|
|
|------|-------|-----|
|
|
| xs | 4px | Gaps pequenos, ícones |
|
|
| sm | 8px | Gaps entre elementos relacionados |
|
|
| md | 16px | Padding padrão, gaps |
|
|
| lg | 24px | Espaçamento entre seções |
|
|
| xl | 32px | Padding de cards |
|
|
| 2xl | 48px | Espaçamento entre seções grandes |
|
|
| 3xl | 64px | Hero sections |
|
|
| 4xl | 80px | Separação de blocos |
|
|
|
|
## Layout
|
|
|
|
### Container
|
|
```tsx
|
|
className="max-w-7xl mx-auto px-6 lg:px-8"
|
|
```
|
|
- **Max Width**: 1280px (max-w-7xl)
|
|
- **Padding horizontal**: 24px mobile, 32px desktop
|
|
|
|
### Grid de Features (3 colunas)
|
|
```tsx
|
|
className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"
|
|
```
|
|
|
|
### Grid de Pricing (3 planos)
|
|
```tsx
|
|
className="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-6xl mx-auto"
|
|
```
|
|
|
|
### Section Spacing
|
|
- **Padding top/bottom**: py-20 (80px)
|
|
- **Background alternado**: bg-zinc-50 para seções pares
|
|
|
|
## Estados Interativos
|
|
|
|
### Focus
|
|
```css
|
|
*:focus-visible {
|
|
outline: 2px solid var(--primary);
|
|
outline-offset: 2px;
|
|
}
|
|
```
|
|
|
|
### Hover States
|
|
- **Botões**: `hover:opacity-90` ou `hover:bg-primary`
|
|
- **Cards**: `hover:border-primary`
|
|
- **Links**: `hover:text-primary`
|
|
- **Ícones sociais**: `hover:text-white`
|
|
|
|
### Transições
|
|
```tsx
|
|
className="transition-opacity" /* Para opacity */
|
|
className="transition-colors" /* Para cores/backgrounds */
|
|
```
|
|
- **Duration**: Default (150ms)
|
|
- **Easing**: Default ease
|
|
|
|
## Gradiente de Texto
|
|
|
|
```tsx
|
|
<span className="gradient-text">texto com gradiente</span>
|
|
```
|
|
|
|
```css
|
|
.gradient-text {
|
|
background: var(--gradient-text);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
}
|
|
```
|
|
|
|
## Acessibilidade
|
|
|
|
- **Contraste Mínimo**: WCAG AA (4.5:1 para texto normal, 3:1 para texto grande)
|
|
- **Touch Target**: Mínimo 44x44px para mobile
|
|
- **Fonte Mínima**: 14px para corpo, 13px para labels
|
|
- **Line Height**: 1.5 para melhor legibilidade
|
|
- **Focus Visible**: Outline 2px primary com offset
|
|
- **Alt Text**: Obrigatório em todas as imagens
|
|
- **Smooth Scroll**: `html { scroll-behavior: smooth; }`
|
|
|
|
## Responsividade
|
|
|
|
### Breakpoints
|
|
```css
|
|
sm: 640px /* Tablets pequenos */
|
|
md: 768px /* Tablets */
|
|
lg: 1024px /* Laptops */
|
|
xl: 1280px /* Desktops */
|
|
2xl: 1536px /* Telas grandes */
|
|
```
|
|
|
|
### Mobile First
|
|
- Começar com design mobile
|
|
- Adicionar complexidade em breakpoints maiores
|
|
- Grid: 1 coluna → 2 colunas → 3 colunas
|
|
- Font sizes: Menores no mobile, maiores no desktop
|