Design System · Ibrowse

A base visual do Sislicit e do IB Documento.

Tokens de cor, tipografia Poppins, tema claro/escuro com auto-contraste e a biblioteca shadcn/ui pré-configurada com a identidade laranja da Ibrowse.

Tokens de cor

Todas as cores usam variáveis CSS. Nunca hardcode — utilize bg-primary, text-muted-foreground, etc.

backgroundFundo da página

cardCards e painéis

primaryBotões, links, destaques

primary-foregroundTexto sobre primary

secondaryBotões secundários

mutedÁreas neutras

muted-foregroundTexto secundário

accentRealce sutil

destructiveErros, exclusão

borderBordas e divisores

ringFoco (outline)

sidebarFundo do sidebar

Fonte sans-serif padrão: Poppins. Use font-heading para títulos com peso extra.

font-heading · 800 · 48px

Ibrowse Design

font-sans · 600 · 24px

Subtítulo descritivo do módulo

font-sans · 400 · 16px

Parágrafo padrão para conteúdo corrido. Usa text-muted-foreground para texto secundário.

font-mono · 14pxconst empresa = await EmpresaService.obterPerfil(id);

Componentes shadcn/ui com o tema IBrowse aplicado.

Botões e badges

Variantes de botão cobrem ações primárias, secundárias e destrutivas.

AbertoEm análiseRascunhoDescartado

Telas completas do shadcn/ui aplicadas ao tema IBrowse.

Dashboard

Sidebar colapsável, cards de métrica, gráfico e data table.

Branding laranja à esquerda e formulário à direita. Com botão Entrar com conta IBrowse (SSO).

Versão convencional em card centralizado, mesmo formulário e SSO IBrowse.