UI Kit · Admin Webapp
Camada de marca aplicada sobre shadcn/ui com preset
radix-luma.
Sem novos componentes — só cores, tipografia e gradientes Semog mapeados nas variáveis CSS que o shadcn já espera.
As variáveis CSS do shadcn (esquerda em mono) recebem os valores da paleta Semog.
Primary
--primary → blue-600
Secondary
--secondary → sky-200
Accent
--accent → sky-100
Muted
--muted → gray-100
Destructive
--destructive → #B33A3A
Sidebar
--sidebar → blue-700
Saira para display, Inter pra corpo. Inputs e botões usam Inter por padrão.
Heading display
Inter Body — texto corrido, listas, descrições. Tamanho 14 px, line-height 1.5, cor --muted-foreground para meta-info.
Variantes shadcn Button — Primary / Secondary / Outline / Ghost — pintadas pelos tokens.
Card, Input e Label do shadcn na paleta Semog. Sem mudanças estruturais.
Cadastro básico de condomínio.
Destructive variant usa --destructive.
No webapp, os gradientes ficam sutis — só tom de azul claro sobre branco, pra dar leve volume sem comprometer leitura.
Headings e textos seguem no azul Semog escuro. Class .bg-admin-soft.
Bem-vindo de volta
Você tem 12 boletos para revisar e 3 propostas aguardando envio.
Pra overlays, dropdowns e popovers sobre conteúdo. Frost sutil que deixa o fundo aparecer levemente, sem virar protagonista.
Class .surface-glass sobre fundo .bg-admin-sky.
Vencimento em 8 dias · R$ 2.180,00 · 521 condôminos
O --grad-cover da marca aparece só em momentos especiais dentro do admin:
tela de login, onboarding, empty states celebratórios (ex: "tudo em dia").
Não usar em cards de uso diário — fica pesado e prejudica leitura.
Tudo em dia
Você está em dia com todos os boletos do mês. Bom trabalho.