Design System - Porto Indie

Documentação completa do design system baseado em Atomic Design, incluindo componentes, padrões e diretrizes de uso.

Versão 1.0.0

Paleta de Cores

Accent

#001E33

Cor principal para elementos de destaque

Secondary

#002F6C

Cor secundária para elementos de apoio

Primary

#0078D7

Cor primária para CTAs e links

Neutral

#F2F2F2

Cor neutra para textos e fundos

Dark

#001933

Cor escura para fundos e contrastes

Tipografia

Heading 1 - 48px/60px

Usado para títulos principais e hero sections

Heading 2 - 36px/44px

Usado para títulos de seções

Heading 3 - 24px/32px

Usado para subtítulos e cards

Heading 4 - 20px/28px

Usado para títulos menores

Lead Text - 20px/28px

Usado para texto de destaque e introduções

Body Text - 16px/24px

Usado para texto principal do corpo

Small Text - 14px/20pxUsado para legendas e textos auxiliares

Sistema de Espaçamento

Escala de Espaçamento

4px - xs

8px - sm

16px - md

24px - lg

32px - xl

Aplicação

• Padding interno: 16px, 24px, 32px
• Margins entre elementos: 16px, 24px
• Gaps em grids: 24px, 32px
• Espaçamento de seções: 64px, 80px

Atomic Design

Átomos

Elementos básicos e indivisíveis

• Button
• Typography (H1, H2, H3, H4, P)
• Icon
• Input
• Badge

Moléculas

Combinações de átomos

• FeatureCard
• Navigation
• SearchBar
• FormField
• SocialLinks

Organismos

Seções complexas da interface

• Header
• Hero
• Features
• Footer
• ContactForm

Componentes Principais

Buttons

Variações disponíveis do componente Button

Cards

Exemplo de FeatureCard usado na landing page

Exemplo de Card

Este é um exemplo de como os cards são estruturados no design system.

Diretrizes de Uso

✓ Faça

• Use a paleta de cores definida
• Mantenha consistência no espaçamento
• Siga a hierarquia tipográfica
• Use componentes existentes quando possível
• Teste a acessibilidade

✗ Não Faça

• Não use cores fora da paleta
• Não misture diferentes escalas de espaçamento
• Não crie variações não documentadas
• Não ignore os estados de hover/focus
• Não comprometa a legibilidade