inconnect inconnect UI Kit · v2027.1
tokens.css ↓

— SISTEMA DE INTERFACE · PROJETOS, SITES E SISTEMAS DE CLIENTE

A marca, aplicável.

Tudo que um projeto Inconnect precisa pra nascer coerente: tokens, tipografia, componentes e regras de aplicação. Dark e light, prontos pra produção.

3 FUNDAMENTOS8 FAMÍLIAS DE COMPONENTES2 TEMAS1 ARQUIVO DE TOKENS
00LOGO

Uma marca, quatro respostas.

A variante é decidida pelo fundo, nunca pelo gosto. Ícone 1:1 para avatar, favicon e app; horizontal 9:1 para todo o resto.

Roxo + Branco

Roxo + Branco

Padrão em fundo dark. Ícone indigo, texto branco.

Roxo + Preto

Roxo + Preto

Padrão em fundo claro. Docs, apresentações light.

Monocromática

Monocromática

Toda branca (ou toda preta) sobre cor, foto ou marca de cliente.

Ícone 1:1

Ícone 1:1

Avatar, favicon, app icon. Nunca como logo principal de página.

01COR

Cor é decisão. Não decoração.

Regra 60-30-10: neutro domina, indigo constrói presença, laranja marca atenção — nunca mais que 10%.

{{ c.hex }}

{{ c.name }}

{{ c.role }}

{{ c.token }}

ESCALA INDIGO

ESCALA ORANGE
60% NEUTRO
30% INDIGO
10%
02TIPOGRAFIA

Uma família. Do hero ao rodapé.

Gutón faz toda a voz — do display ao label de formulário, pesos modulados. Geist Mono só onde a máquina fala: código, IDs, timestamps, dados.

{{ t.label }} {{ t.text }} {{ t.spec }}
03MOTION

A curva é assinatura.

{{ m.name }}

{{ m.value }}

{{ m.use }}
04BOTÕES

HIERARQUIA

TAMANHOS · ESTADOS

05FORMULÁRIOS

SELEÇÃO · ESTADOS

Atualização automática
E-mail inválido — confira o formato.
Enviado. Retornamos em 1 dia útil.
06CARDS · BADGES

CARD PADRÃO

Superfície neutra

Conteúdo geral, listas, painéis. Hover eleva 4px com borda indigo.

CARD DESTAQUE

Presença de marca

Feature principal, plano recomendado, resultado que importa.

CARD PREMIUM

Indigo Flow

Máximo um por tela. Hero de produto, CTA final, momento de decisão.

{{ b.label }}
07NAVEGAÇÃO · TABELA
inconnect inconnect
Campanha Vertical CPL Leads Status
{{ r.name }} {{ r.vertical }} {{ r.cpl }} {{ r.leads }} {{ r.status }}
08DASHBOARD

{{ s.label }}

{{ s.value }}

{{ s.delta }}

LEADS · ÚLTIMOS 12 MESES

METAS DO TRIMESTRE

{{ p.label }} {{ p.pct }}%
09MODAIS · TOASTS
10APLICAÇÃO · PORTAIS DE CLIENTE

O cliente na frente. A Inconnect na assinatura.

Em portais tipo SeuVW e VouDeYamaha, a marca do cliente domina a tela. A Inconnect aparece uma vez, discreta e consistente: a assinatura "Operado por" no rodapé. UI, tipografia de labels e componentes seguem este kit.

{{ rule.tag }}

{{ rule.title }}

{{ rule.body }}

ASSINATURA PADRÃO · RODAPÉ DE PORTAL

Operado por inconnect

CONFIRMAÇÃO

Publicar campanha?

O MARS vai comparar com campanhas semelhantes rodando agora antes de ativar a mídia.
{{ t.msg }}