---
title: "products/obsidian-ui"
description: "GHWD agent markdown twin"
canonical: https://ghwd.com.br/products/obsidian-ui/
last-updated: 2026-09-10
---

# Obsidian UI

Design system proprietário GHWD — React, Tailwind e tokens Figma.

**Version:** v3.0.0  
**Pricing band:** R$ 4.000 – R$ 8.000

## TL;DR

Obsidian UI é a biblioteca de componentes da GHWD usada em sites, dashboards e portais B2B. Entrega botões, formulários, tabelas, modais e layouts responsivos com tokens de cor, tipografia e espaçamento sincronizados ao Figma. Garante consistência pixel-perfect entre design e código. Acelera handoff e reduz dívida visual em projetos multi-squad.

## For whom

- Produtos digitais que precisam de identidade visual coesa em dezenas de telas
- Times com designers no Figma e devs no React/Tailwind
- Projetos GHWD que querem velocidade sem sacrificar qualidade visual

## Not for

- Landing pages únicas sem reuso de componentes
- Equipes 100% no WordPress com page builders
- Marcas que exigem design system totalmente custom sem base compartilhada

## Stack

- React
- Tailwind CSS
- Figma
- TypeScript
- Storybook

## Design system como ativo, não como obstáculo

            Obsidian UI consolidou anos de projetos premium da GHWD em um único vocabulário visual: tipografia condensada, contrastes zinc/emerald, micro-interações discretas e grids responsivos que funcionam em marketing sites, apps logados e portais B2B. Em vez de cada projeto reinventar botões e formulários, o time parte de componentes auditados em produção.

            O sistema cobre primitives (input, select, checkbox), composições (cards, data tables, modals, navigation) e patterns (hero, FAQ, pricing table). Cada peça documenta estados hover, focus, disabled e erro — essenciais para WCAG 2.2 e para reduzir bugs de UI em QA.

            
## Tokens e Figma

            Cores semânticas (background, foreground, accent, destructive), escala tipográfica e spacing seguem convention Tailwind estendida. Designers trabalham em Figma com styles espelhados nos tokens CSS; export JSON alimenta tailwind.config quando necessário. Isso elimina o clássico “no Figma está 16px, no site ficou 14px”.

            
## Developer experience

            Componentes são TypeScript-first com props explícitas e variantes via class-variance-authority ou padrão equivalente. Imports tree-shakeable; sem dependência de CSS-in-JS pesado. Integração natural com Velocity Core e Wholesale OS — mesma linguagem visual do site público ao portal logado.

            
## Acessibilidade e performance

            Revisamos contraste, foco visível, labels em formulários e roles ARIA em widgets interativos. Bundle impact é monitorado: preferimos SVG inline e CSS utilitário a ícones font-based. Obsidian UI contribui para notas Lighthouse Accessibility 95+ nos projetos que o adotam integralmente.

            
## Adoção no seu projeto

            Instalamos o pacote no monorepo, aplicamos tema de marca e entregamos guia de composição para o time interno. Novos componentes solicitados passam por RFC leve e entram no catálogo se reutilizáveis — evitando fork silencioso que vira dívida técnica.

## Comparison — Obsidian UI vs. bibliotecas genéricas

| Critério | Obsidian UI (GHWD) | shadcn/ui genérico | Bootstrap / MUI padrão |
| --- | --- | --- | --- |
| Identidade GHWD | Tokens alinhados aos projetos premium | Neutro, exige theming pesado | Visual genérico reconhecível |
| Acessibilidade | WCAG 2.2 revisado em componentes críticos | Depende da implementação | Variável por componente |
| Performance | Sem CSS runtime pesado | Leve | Bundles maiores (MUI) |
| Figma ↔ código | Tokens exportados e documentados | Manual | Desalinhado |
| Suporte | Evolução contínua nos projetos GHWD | Comunidade | Comunidade |

## FAQ

### Obsidian UI é open source?

É IP proprietário licenciado nos projetos GHWD e parceiros selecionados. Componentes e tokens são entregues no repositório do cliente com documentação de uso.

### Posso adaptar cores e tipografia da minha marca?

Sim. Tokens CSS são sobrescritos no tema do projeto mantendo estrutura, acessibilidade e proporções. Figma libraries recebem branch de marca quando design GHWD participa.

### Funciona com Next.js App Router?

Sim. Componentes são React Server Components-friendly onde aplicável; interativos marcados com 'use client' apenas quando necessário.

### Há documentação interativa?

Entregamos Storybook ou página interna de catálogo com props, variantes e exemplos de composição — acelerando onboarding de devs e QA.

### Qual investimento?

Quando bundled em projeto GHWD, Obsidian UI está incluso na banda de desenvolvimento web (R$ 4.000 – R$ 8.000+). Licenciamento standalone para times externos é cotado à parte.


## Related services

- https://ghwd.com.br/services/desenvolvimento-web/
- https://ghwd.com.br/services/arquitetura-de-projetos/


---

## Agent navigation

- Canonical HTML: https://ghwd.com.br/products/obsidian-ui/
- 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.