aggios.app/1. docs/design-system.md

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

--font-sans: Inter;        /* Corpo, UI, labels */
--font-heading: Open Sans; /* Títulos, headings */
--font-mono: Fira Code;    /* Código, domínios */

System Font Stack

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)

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)

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

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)

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

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

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)

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

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

<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

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)

className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"

Grid de Pricing (3 planos)

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

*: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

className="transition-opacity"  /* Para opacity */
className="transition-colors"   /* Para cores/backgrounds */

• Duration: Default (150ms)
• Easing: Default ease

Gradiente de Texto

<span className="gradient-text">texto com gradiente</span>

.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

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