feat: site institucional completo com design system - Implementa\u00e7\u00e3o do site institucional da Aggios com design system completo incluindo gradientes, tipografia, componentes e se\u00e7\u00f5es de recursos, pre\u00e7os e CTA
This commit is contained in:
Erik Silva
266
1. docs/design-system.md
Normal file
266
1. docs/design-system.md
Normal file
@@ -0,0 +1,266 @@
|
||||
# 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
|
||||
Reference in New Issue
Block a user