Semog Design System

Preocupe-se apenas em morar.

Kit de marca, design tokens e UI kits do ecossistema Semog — 35 anos administrando condomínios no Nordeste. Tudo o que você precisa pra construir interfaces, materiais e experiências no padrão da marca.

Camada base · usada por todos os kits

Fundamentos da marca

Cores, tipografia, logo, voz, iconografia e primitivas visuais. Tudo que define a identidade da Semog e é compartilhado pelos três produtos abaixo.

Identidade

Logos

Cores

Tipografia

Primitivas visuais

Imagem e ícones

Componentes-base

Kit 1 de 3

Site Institucional

Para a página principal semog.com.br e materiais de marketing — apresentações, banners, decks, redes sociais. Linguagem editorial, hero gradientes, fotografia institucional.

UI Kit Institucional

Pronto

Composição em React + HTML pra reconstruir o site institucional alinhado à marca. Layout de marketing clássico — hero, pilares, valores, banda de fotos, CTA, footer.

    Componentes incluídos
  • Header (transparente sobre hero, sticky variant)
  • Hero gradiente com tagline + monograma III
  • Pillars (Condomínios · Métricas · Organização)
  • ValueRow (Transparência · Retidão · Dinâmica)
  • PhotoStrip · CTA "Peça uma proposta" · Footer
  • Formulários de lead, área do cliente
Abrir kit institucional →
.com.br

Kit 2 de 3

Admin Webapp

Para o webapp administrativo (semogapp) — sistema interno usado pela equipe Semog. Base é shadcn/ui com preset radix-luma; a Semog entra só como camada de marca por cima.

Admin Webapp Tokens

Em construção

Em vez de criar componentes novos, mapeamos as variáveis CSS que o shadcn já espera (--primary, --card, --sidebar…) para a paleta Semog. Resultado: componentes shadcn saem com a cara da Semog automaticamente — sem reescrever nada.

    O que entrega
  • tokens.css com mapeamento Semog → shadcn (light + dark)
  • Helper .bg-semog-gradient pra hero/banners
  • Helper .surface-glass pra Luma · liquid glass
  • Sidebar slab navy pronta
  • Specimens de componentes específicos (tabelas, dashboards)
  • Snippets de layout (sidebar + header + content)
Abrir kit admin →
webapp

Kit 3 de 3

App do Condômino

Aplicativo mobile usado pelos moradores — boleto, comunicados, dashboard. Em fase de prototipação, com telas-base em React + HTML.

UI Kit Condômino Mobile

Protótipo

Telas-âncora pro mobile do condômino, navegáveis no browser (state fake). Serve como referência visual enquanto o app real não é construído.

    Telas incluídas
  • Phone shell (frame de celular)
  • Login
  • Dashboard
  • Boleto
  • Notices (comunicados)
  • BottomTab
  • Telas reais em React Native / SwiftUI
Abrir protótipo →
app