--- title: "services/design-system" description: "GHWD agent markdown twin" canonical: https://ghwd.com.br/services/design-system/ last-updated: 2026-09-10 --- # Design System, UI/UX e Identidade Visual Obsidian Design tokens, componentes React modulares, protótipos Figma e sistemas visuais premium que constroem autoridade de marca e experiências digitais memoráveis. **Tag:** / Design & Experiência **Author:** Gustavo Hipólito (Lead Software Architect) **Updated:** Setembro de 2026 ## TL;DR Criamos design systems completos com tokens semânticos, bibliotecas de componentes React tipados, protótipos interativos em Figma e identidade visual Obsidian UI. Cada interface é projetada do zero para transmitir confiança, premium e diferenciação — nunca templates genéricos ou temas prontos. ## Meta - Title: Design System & UI/UX | Obsidian UI | GHWD - Description: Design system premium com tokens, componentes React, Figma e identidade Obsidian UI. UI/UX sob medida que constrói autoridade de marca — sem templates genéricos. ## Design como Vantagem Competiva: Autoridade Visual que Converte Em mercados saturados, a primeira impressão digital define se um visitante confia na sua marca ou clica no botão voltar em menos de três segundos. Interfaces genéricas — templates de ThemeForest, temas WordPress ou construtores no-code — transmitem amadorismo e indiferenciação. O usuário subconscientemente associa layout padronizado a empresa sem identidade própria. A GHWD projeta experiências digitais premium através do design system **Obsidian UI**: uma linguagem visual que combina tipografia bold de alto impacto, paletas de contraste refinado, micro-interações fluidas e arquitetura de componentes modular. Cada pixel é intencional, cada interação reforça autoridade de marca e cada componente escala sem perder coerência visual. ## Design Tokens: A Fundação Semântica do Sistema Visual Design tokens são a camada de abstração que conecta decisões de marca a implementação técnica. Em vez de hardcodar #10b981 em dezenas de arquivos CSS, definimos tokens semânticos centralizados: - **Cores:** --color-brand, --color-surface, --color-text-primary — mapeados para paletas OKLCH de alto contraste e acessibilidade WCAG AA. - **Tipografia:** --font-heading (sans-serif bold italic), --font-body (sans-serif light), --font-mono (monospace para dados) — com escalas responsivas e line-height otimizado para leitura. - **Espaçamento e layout:** --spacing-xs até --spacing-3xl, --radius-sm/lg/full — garantindo ritmo visual consistente em cards, modais, grids e formulários. - **Motion:** --duration-fast (150ms), --ease-spring — curvas de animação padronizadas para hover, transições de página e feedback de interação. Tokens vivem simultaneamente no Figma (via Variables), no código (CSS custom properties + Tailwind theme) e na documentação (Storybook). Uma alteração de marca propaga instantaneamente por todo o ecossistema — web, emails transacionais, dashboards internos e materiais de apresentação. ## Componentes React Modulares e Biblioteca Obsidian O design system Obsidian materializa-se em uma biblioteca de componentes React tipados com TypeScript, estilizados com Tailwind CSS v4 e documentados no Storybook: - **Primitivos:** Button, Input, Badge, Card, Modal, Tooltip — cada um com variantes (primary, ghost, destructive) e estados (loading, disabled, error). - **Compostos:** Navbar, Hero, ServiceCard, FAQAccordion, ContactForm — blocos de página prontos que mantêm coerência visual e aceleram desenvolvimento. - **Patterns:** Bento Grid, Marquee, Text Reveal, Scramble Hyperlink — micro-interações signature que diferenciam visualmente a marca da concorrência. Cada componente consome exclusivamente design tokens — nunca valores hardcoded. Isso garante que extensões futuras (novas páginas, features, white-label) herdem automaticamente a identidade visual sem retrabalho de CSS. ## Protótipos Figma e Handoff Design-to-Dev Sem Fricção Todo projeto GHWD inicia com fase de discovery visual estruturada em Figma: - **Wireframes de baixa fidelidade:** Mapeamento de fluxos de navegação, hierarquia de informação e pontos de conversão antes de investir em visual refinado. - **Protótipos interativos de alta fidelidade:** Micro-animações, transições de hover, estados de formulário e responsividade simulada — validados pelo cliente antes do desenvolvimento. - **Design tokens linkados:** Variables do Figma sincronizadas com o repositório de código, eliminando discrepâncias entre o que o designer aprovou e o que o desenvolvedor implementou. O handoff inclui especificações técnicas completas: medidas, tokens utilizados, comportamento responsivo e notas de acessibilidade. O desenvolvedor não interpreta screenshots — implementa componentes já mapeados 1:1 entre Figma e React. ## UI/UX Orientado a Conversão e Acessibilidade WCAG Design premium não é apenas estética — é engenharia de conversão. Cada decisão visual na GHWD é fundamentada em princípios de UX comprovados: hierarquia visual clara que guia o olhar para CTAs, contraste suficiente para legibilidade em qualquer dispositivo, formulários com validação inline que reduzem abandono e feedback visual imediato em cada interação. Simultaneamente, garantimos conformidade WCAG 2.1 AA: navegação por teclado completa, labels ARIA em componentes interativos, ratios de contraste verificados por tokens de cor e testes com leitores de tela. Acessibilidade não é feature opcional — é requisito arquitetural do Obsidian UI. ## Por que Templates e Temas Prontos Limitam sua Marca Templates de mercado compartilham a mesma estrutura visual entre milhares de sites. Mesmo com customizações superficiais de cor e logo, a arquitetura de layout permanece reconhecível — transmitindo falta de investimento e identidade. Além disso, templates acumulam CSS conflitante, componentes inflexíveis e dependências de plugins que degradam performance e dificultam manutenção. O design system Obsidian da GHWD é projetado exclusivamente para cada cliente: tokens de marca, componentes sob medida, protótipos Figma únicos e biblioteca React escalável. O resultado é uma presença digital que nenhum concorrente pode replicar copiando um tema — porque a identidade visual é engenharia proprietária, não configuração de template. ## Comparison — Template/Tema pronto vs Design System GHWD Obsidian | Critério | Template ou Tema Pronto | Design System Obsidian (GHWD) | | --- | --- | --- | | Originalidade visual | Layout genérico compartilhado por milhares de sites | Identidade única projetada do zero para a marca | | Componentes | Blocos inflexíveis com CSS sobrescrito e conflitos | Biblioteca React modular com design tokens tipados | | Consistência cross-platform | Variações visuais entre páginas e breakpoints | Tokens semânticos garantem paridade em web, app e email | | Handoff design-dev | Exportação PNG/PDF sem especificação técnica | Figma com tokens linkados + Storybook documentado | | Escalabilidade | Quebra ao adicionar features ou páginas novas | Sistema extensível: novos componentes herdam tokens e padrões | ## FAQ ### O que é o Obsidian UI e como difere de um template pronto? Obsidian UI é o design system proprietário da GHWD — uma linguagem visual premium baseada em tipografia bold, paletas de alto contraste, micro-interações fluidas e componentes modulares. Diferente de templates ThemeForest ou temas WordPress, cada projeto Obsidian é construído do zero com design tokens, componentes React tipados e protótipos Figma exclusivos para a marca do cliente. ### Como funcionam os design tokens na prática? Design tokens são variáveis semânticas (cor primária, espaçamento md, raio de borda lg, fonte heading) definidas uma vez e propagadas por todo o sistema — CSS, React, Figma e documentação. Alterar o token --color-brand atualiza instantaneamente botões, links, badges e gráficos em todas as plataformas, eliminando inconsistências visuais e acelerando iterações de marca. ### Vocês entregam protótipos interativos antes do desenvolvimento? Sim. Todo projeto inicia com fase de discovery visual: wireframes de baixa fidelidade, protótipos interativos em Figma com micro-animações e fluxos de navegação completos. O cliente valida a experiência antes de uma linha de código ser escrita, reduzindo retrabalho e garantindo alinhamento entre expectativa de marca e implementação técnica. ### O design system funciona com a stack Next.js e Tailwind da GHWD? Absolutamente. Os componentes Obsidian são implementados nativamente em React + Tailwind CSS v4 com TypeScript, exportados como biblioteca interna reutilizável. Tokens são mapeados para variáveis CSS e classes utilitárias Tailwind, garantindo performance (zero CSS não utilizado) e manutenibilidade tipada em todo o ecossistema web. --- ## Agent navigation - Canonical HTML: https://ghwd.com.br/services/design-system/ - Agent instructions: https://ghwd.com.br/agent-instructions.md - llms.txt: https://ghwd.com.br/llms.txt - AI index: https://ghwd.com.br/ai-index.md - Developers: https://ghwd.com.br/developers/ - Sitemap: https://ghwd.com.br/sitemap.xml Prefer `Accept: text/markdown` (or AI bot User-Agent) to receive this text variant.