Design System
Sistema de Design Completo do Movimento da Palavra
O que é um Design System?
Um Design System é uma coleção completa de padrões, componentes, diretrizes e princípios que garantem consistência visual e experiência unificada em todo o produto digital.
Este documento cataloga todos os elementos visuais, componentes de interface, padrões de interação e princípios de design utilizados no website do Movimento da Palavra.
Consistência
Elementos visuais padronizados em todas as páginas
Eficiência
Componentes reutilizáveis aceleram o desenvolvimento
Escalabilidade
Sistema preparado para crescer com o projeto
Briefing & Arquitetura da Informação
Panorama do Projeto
O Movimento da Palavra é um método artístico-pedagógico que integra corpo, palavra, arte e ecologia desenvolvido pela artista e pesquisadora Thaís Kuri.
O projeto oferece oficinas, espetáculos e formações que exploram a relação entre performance, poesia e materiais do Cerrado.
Públicos-Alvo
Artistas & Performers
Interessados em métodos criativos
Educadores & Pesquisadores
Buscando metodologias inovadoras
Público Geral
Interessado em arte e ecologia
Sitemap Visual
Mapa de Arquitetura do Site
Início
- → Página Principal
- → Versão Editorial
- → Versão Brutalist
- → Versão Orgânica
O Projeto
- → Sobre Thaís
- → O Método
- → Equipe
- → Design System
Experiências
- → Oficinas
- → Agenda
Acervo
- → Portfólio
- → Vídeos
- → Publicações
- → Pesquisa
Imprensa
- → Press Kit
- → Notícias
- → Contato Imprensa
Contato
- → Formulário
- → Redes Sociais
- → Localização
Princípios Editoriais
Narrativa
- ✓ Tom acolhedor e inspirador
- ✓ Linguagem acessível mas poética
- ✓ Foco na experiência sensorial
- ✓ Valorização do processo criativo
Conteúdo
- ✓ Prioridade para mídia visual
- ✓ Documentação de processos
- ✓ Acessibilidade em primeiro lugar
- ✓ Atualização constante
Design Tokens
Sistema de Cores
Cores Primárias
AMARELO NEON
#FFEB3B
Atenção, destaque, CTAs
MAGENTA
#FF00FF
Arte, criatividade, paixão
CIANO
#00FFFF
Água, fluxo, natureza
Cores Secundárias
AZUL ELÉTRICO
#0066FF
Movimento, energia, digital
VERDE NEON
#00FF00
Cerrado, vida, crescimento
LARANJA
#FF6600
Energia, calor, vitalidade
Cores Neutras
PRETO
#000000
Texto, bordas, contraste
BRANCO
#FFFFFF
Fundos, espaços, respiro
CINZA
#808080
Texto secundário, desabilitado
Sistema Tipográfico
Fonte Display
Aa Bb Cc
Font: System Black / 900
Uso: Títulos principais, headings, CTAs
Display 60px
H1 48px
H2 36px
H3 24px
H4 20px
Fonte Corpo
Aa Bb Cc
Font: System Bold / 700
Uso: Corpo de texto, navegação, UI
Large 20px Bold
Body 18px Bold
Base 16px Bold
Small 14px Bold
Caption 12px Bold
Sistema de Bordas Brutalist
1px
Separadores sutis
2px
Elementos secundários
3px
Cards padrão
4px
Elementos importantes
8px
Seções principais
12px
Destaque máximo
Escala de Espaçamento (8px Grid)
Sistema de Sombras
SOMBRA PEQUENA
4px 4px 0 0
Hover states, elevação sutil
SOMBRA MÉDIA
8px 8px 0 0
Cards, elementos interativos
SOMBRA GRANDE
12px 12px 0 0
Modais, overlays, destaque máximo
Componentes UI (shadcn/ui)
Button
Variantes: default, secondary, outline, ghost, destructive, link
Card
Card Title
Card content goes here with description text.
Container para conteúdo agrupado com header, content e footer
Badge
Tags, labels, status indicators
Input
Campo de entrada de texto com suporte a tipos HTML5
Separator
Conteúdo acima
Conteúdo abaixo
Divisor visual horizontal ou vertical
Outros Componentes
- ✓ Accordion
- ✓ Alert
- ✓ Avatar
- ✓ Checkbox
- ✓ Dialog
- ✓ Dropdown Menu
- ✓ Form
- ✓ Label
- ✓ Radio Group
- ✓ Select
Componentes Avançados
- ✓ Slider
- ✓ Switch
- ✓ Table
- ✓ Tabs
- ✓ Textarea
- ✓ Toast
- ✓ Tooltip
- ✓ Popover
- ✓ Command
- ✓ Context Menu
Componentes de Navegação
- ✓ Breadcrumb
- ✓ Navigation Menu
- ✓ Pagination
- ✓ Scroll Area
- ✓ Sheet
- ✓ Skeleton
- ✓ Sonner
- ✓ Toggle
- ✓ Toggle Group
Total: 54 componentes do shadcn/ui disponíveis no projeto
Sistema de CTAs
Hierarquia de Call-to-Actions
O sistema de CTAs segue uma hierarquia clara de três níveis, cada um com propósito e estilo visual distintos para guiar a atenção do usuário.
CTAs Primários
Ação principal da página. Máximo destaque visual com bordas de 8px, cores vibrantes e sombra brutal.
→ Cor: Magenta
→ Uso: Ações principais gerais
→ Exemplo: "Inscreva-se Agora"
→ Cor: Amarelo
→ Uso: Atenção máxima, urgência
→ Exemplo: "Garanta Sua Vaga"
→ Cor: Azul
→ Uso: Conteúdo, aprendizado
→ Exemplo: "Explore o Método"
→ Cor: Verde
→ Uso: Ecologia, natureza
→ Exemplo: "Conecte-se ao Cerrado"
→ Cor: Ciano
→ Uso: Comunidade, conexão
→ Exemplo: "Junte-se à Comunidade"
Tamanhos Disponíveis
CTAs Secundários
Ação alternativa ou complementar. Bordas de 4px, fundo branco/preto, menos destaque que primário.
→ Estilo: Fundo sólido, borda 4px
→ Uso: Ações alternativas
→ Exemplo: "Ver Mais Detalhes"
→ Estilo: Apenas borda 4px
→ Uso: Ações secundárias, links externos
→ Exemplo: "Saiba Mais"
CTAs Terciários
Ação sutil ou navegação. Estilo minimalista com hover discreto, sem bordas pesadas.
→ Estilo: Borda 2px, hover sutil
→ Uso: Ações terciárias
→ Exemplo: "Mais Informações"
→ Estilo: Sem borda, hover com fundo
→ Uso: Navegação, ações sutis
→ Exemplo: "Ajuda"
→ Estilo: Texto com underline
→ Uso: Links inline, navegação
→ Exemplo: "Leia mais"
Diretrizes de Uso
✓ Faça
- ✓ Use apenas 1 CTA primário por seção
- ✓ Combine primário + secundário para oferecer escolha
- ✓ Use cores semânticas (verde para ecologia, azul para conteúdo)
- ✓ Mantenha textos curtos e acionáveis (2-4 palavras)
- ✓ Adicione ícones para reforçar a ação
- ✓ Use tamanho XL apenas para conversões críticas
✗ Evite
- ✗ Múltiplos CTAs primários competindo por atenção
- ✗ Cores aleatórias sem significado semântico
- ✗ Textos longos ou vagos ("Clique aqui")
- ✗ CTAs sem contexto ou propósito claro
- ✗ Tamanhos inconsistentes na mesma página
- ✗ Sobrecarga de CTAs (máximo 3 por seção)
Componentes Customizados
Navigation
Menu principal com submenus e detecção de colisão
Footer
Rodapé com links, redes sociais e informações
PageLayout
Layout padrão com breadcrumbs e título
Breadcrumb
Navegação hierárquica com ícones
SectionHeader
Cabeçalho de seção com título e subtítulo
AnimatedTitle
Título com animação de marcador colorido
HeroKeywords
Palavras-chave com cores e animações
BookShelf
Estante de livros 3D interativa
PageSidebarNav
Navegação lateral com scroll spy
VideoGallery
Galeria de vídeos com grid responsivo
MasonryGallery
Galeria de imagens em mosaico
MediaCard
Card de mídia com hover effects
ParticleBackground
Fundo animado com partículas
WordParticleBackground
Partículas com palavras flutuantes
DecorativeShapes
Formas geométricas decorativas
CustomIcons
Ícones SVG customizados do projeto
Sistema de Ícones
O projeto utiliza 80+ ícones da biblioteca Lucide React organizados por categorias semânticas.
Navegação (8 ícones)
Conteúdo (10 ícones)
Redes Sociais (7 ícones)
Pessoas (5 ícones)
Acessibilidade (7 ícones)
Interface (10 ícones)
Natureza & Ecologia (4 ícones)
Formas & Símbolos (8 ícones)
Design & Criação (6 ícones)
Profissional & Educação (5 ícones)
Segurança & Privacidade (3 ícones)
Princípios de Design
Brutalist
- ✓ Bordas grossas e afiadas (4px, 8px, 12px)
- ✓ Sombras duras sem blur
- ✓ Contraste máximo (preto/branco)
- ✓ Tipografia bold e uppercase
- ✓ Formas geométricas puras
- ✓ Sem gradientes suaves
Semiótico
- ✓ Cores com significado (amarelo = atenção)
- ✓ Formas com propósito (círculo = ciclo)
- ✓ Ícones contextuais
- ✓ Hierarquia visual clara
- ✓ Símbolos universais
- ✓ Comunicação intuitiva
Matemático
- ✓ Proporção áurea (1:1.618)
- ✓ Sequência Fibonacci
- ✓ Grid de 8px
- ✓ Escala tipográfica harmônica
- ✓ Espaçamentos proporcionais
- ✓ Simetria e equilíbrio
Animado
- ✓ Transições suaves (300ms)
- ✓ Hover states expressivos
- ✓ Partículas em movimento
- ✓ Scroll animations
- ✓ 3D transforms
- ✓ Micro-interações significativas
Acessibilidade
Padrões WCAG 2.2 AA
- ✓ Contraste mínimo 4.5:1 para texto
- ✓ Contraste mínimo 3:1 para UI
- ✓ Navegação por teclado
- ✓ Focus indicators visíveis
- ✓ Alt text em todas as imagens
- ✓ ARIA labels apropriados
Recursos Inclusivos
- ✓ Modo escuro/claro
- ✓ Texto escalável
- ✓ Legendas em vídeos
- ✓ Transcrições de áudio
- ✓ Navegação simplificada
- ✓ Linguagem clara
Este projeto é realizado com recursos do Fundo de Apoio à Cultura do Distrito Federal
