Fundamentos
O que sustenta o sistema
Marca, tokens e voz. Tudo aqui é fonte de verdade — leia antes de produzir qualquer artefato.
Manual de marca
Posicionamento, voz, valores, três pilares e arquétipo — fundamentos editoriais do sistema.
README.md →Design tokens
Cores, gradientes, tipografia, espaçamento, raios, sombras e tokens de glass. Drop-in CSS.
tokens/tokens.css →Tipografia
Inter (variável, licenciada — local) para texto. Saira (Google Fonts) para display e numerais.
fonts/ →Skill manifest
Como reutilizar este sistema dentro do Claude Code e demais agentes — manifesto pronto.
SKILL.md →Especímenes
Cada peça do vocabulário visual
Cartões em formato uniforme, agrupados por intenção. Clique para abrir o specimen completo.
Tipografia
Tokens de forma
Componentes
UI Kits
Kits prontos para produção
Três kits, três contextos. Componentes em JSX e HTML, alinhados aos tokens do sistema.
Marketing site
Header, Hero, Pillars, ValueRow, PhotoStrip, CTA e Footer. Reconstrução on-brand do semog.com.br.
Abrir kit →Mobile do morador
Login, Dashboard, Boleto, Notices e BottomTab — o aplicativo do condômino em React Native style.
Abrir kit →Tahoe shell
Padrão único do backoffice Semog. tahoe.css + esqueleto shell.html pronto pra forkar.
App Shells
Shells de produto em alta fidelidade
HTML autocontido para apresentação executiva. Reflete a direção Tahoe — glass, gradientes, hairlines especulares.
Admin Shell · Tahoe
Backoffice unificado para a operação Semog. Janela glass, sidebar com hierarquia clara e dashboards numéricos.
Abrir shell →Síndico Shell · Tahoe
Painel do síndico — visão executiva sobre o condomínio. Tom mais quente, foco em informação acionável.
Abrir shell →Atualização Luma
Documento de atualização sobre a direção Luma / liquid-glass — painéis comparativos lado a lado.
Abrir documento →Fontes
De onde isso saiu
Material-fonte da marca preservado para auditoria e referência. Mantenha — sem ele a história se perde.
Manual de marca (uploads/)
Páginas digitalizadas do Manual original: capa, paleta, tipo, grid, arquétipo, citação da Vinci, três pilares, papelaria.
Abrir pasta →Assets renderizados
Logos, gradientes-capa, fotografias-referência, mockups (cartões, totem, billboard, social grid, App Store).
Abrir pasta →Leia o README
Documentação canônica completa — voz, valores, símbolos, ícones, exemplo de copy e regras de aplicação.
README.md →