01 · Princípios e Diretrizes

Este documento é a base do Design System web do Connected Innovation Center (CIC). Ele define o porquê das decisões de design — antes de qualquer token, componente ou padrão de página.

---

1. O que é o CIC Design System

O CIC Design System é o conjunto de diretrizes, tokens, componentes e padrões que orienta a criação de aplicações web para o Connected Innovation Center.

Ele existe para garantir que qualquer ferramenta construída pelo time — seja de gestão de visitas, coleta de insights ou qualquer outra — compartilhe a mesma identidade visual, linguagem de interface e qualidade de experiência, sem que cada projeto precise reinventar essas decisões do zero.

Para quem é este documento:

• Desenvolvedores construindo aplicações web para o CIC
• Designers criando interfaces ou novos componentes
• Qualquer pessoa que precise entender as decisões de design do CIC

---

2. Identidade do CIC

O Connected Innovation Center é um ambiente físico de inovação — um espaço para receber clientes, rodar experiências e demonstrar tecnologia de ponta. Suas aplicações web existem para suportar e ampliar essa experiência.

A identidade visual do CIC já existe e é consistente globalmente. É tech editorial minimalista: sofisticada, densa de informação, com personalidade forte. Não é um SaaS genérico. Não é um dashboard corporativo padrão.

As aplicações web do CIC devem refletir essa mesma personalidade — uma interface que parece parte do ecossistema CIC, não uma ferramenta avulsa.

Palavras que definem a estética CIC

---

3. Princípios de Design

Estes princípios guiam todas as decisões — de layout a componente, de escolha de cor a escolha de palavras. Quando houver dúvida, volte aqui.

3.1 Cor é exceção, não regra

A paleta do CIC tem cores fortes e vibrantes. Justamente por isso, elas devem ser usadas com parcimônia. Uma cor tem impacto porque o entorno dela é neutro.

Na prática: fundos escuros ou claros, tipografia e bordas em neutros, cor aparecendo em pontos específicos de ação, estado ou ênfase — nunca em decoração.

3.2 Tipografia faz o trabalho pesado

Hierarquia de informação é criada principalmente por tamanho e peso tipográfico, não por cor de fundo, cards coloridos ou bordas chamativas. Um H1 grande ao lado de um body pequeno já é uma composição visual suficiente.

Graphik é a fonte universal do CIC. Usada em headings, body text, labels, botões, navegação — toda a interface. Chivo tem um papel específico e restrito: valores numéricos (métricas, contagens, dados quantitativos). Essa separação cria uma distinção visual clara entre informação de interface e informação de dado.

3.3 Grid e linhas são linguagem visual

O sistema de grid do CIC não é só funcional — é parte da identidade visual. Linhas finas de 1px, separadores, bordas e o próprio grid de fundo são elementos estéticos intencionais, não decoração genérica.

Na prática isso significa: preferir linhas e bordas a sombras ou gradientes para separar áreas; usar o grid de fundo como textura em seções de destaque; manter tudo ortogonal — sem diagonais, sem formas orgânicas na UI. A sensação deve ser a de uma ferramenta técnica precisa, não de um produto de consumo.

3.4 Espaço vazio é parte do design

Generosidade de espaço não é desperdício — é o que dá respiro e faz a informação respirar. Resistir à tentação de preencher todo espaço disponível.

3.5 Sombras e bordas finas, não grossas

Elevação e separação de elementos são comunicadas por bordas de 1px (ou menos) e espaço, não por sombras pesadas, gradientes ou bordas largas. A interface deve parecer plana e precisa.

3.6 Estados são explícitos

Cada elemento interativo tem estados claros e documentados: default, hover, active/focus, disabled. O usuário nunca deve ficar em dúvida sobre o que pode ou não interagir.

---

4. Tom de Voz

As aplicações do CIC têm uma audiência específica: colaboradores internos, clientes visitando o espaço e equipes de inovação. A linguagem deve refletir isso.

Diretrizes gerais

• Direto e claro. Sem jargão desnecessário, sem texto corporativo vazio.
• Sentence case sempre. Títulos, botões, labels — tudo em letra minúscula, exceto nomes próprios. "Gerenciar visitas", não "Gerenciar Visitas".
• Verbos no imperativo para ações. "Adicionar visita", "Exportar relatório", "Confirmar presença".
• Sem exclamações em mensagens de sistema. "Visita registrada." — não "Visita registrada com sucesso!".
• Erros explicam o que fazer, não só o que deu errado. "Não foi possível salvar. Verifique sua conexão e tente novamente." — não "Erro 500".

O que evitar

---

5. Acessibilidade

Acessibilidade é requisito, não opcional.

Mínimo obrigatório (WCAG 2.1 AA)

• Contraste de texto: mínimo 4.5:1 para texto normal, 3:1 para texto grande (18px+ regular ou 14px+ bold)
• Contraste de componentes interativos: mínimo 3:1 entre o componente e o fundo
• Focus visível: todos os elementos interativos devem ter estado de foco visível (outline), especialmente em navegação por teclado
• Textos alternativos: imagens que carregam informação precisam de alt descritivo; imagens decorativas usam alt=""
• Hierarquia de headings: nunca pular níveis (h1 → h2 → h3), um único h1 por página
• Formulários: todo campo tem um <label> associado; mensagens de erro são associadas ao campo via aria-describedby

Movimento e animação

Respeitar prefers-reduced-motion. Qualquer animação deve ser envolta em:

@media (prefers-reduced-motion: no-preference) {
  /* animação aqui */
}

---

6. Responsividade

As aplicações web do CIC suportam dois contextos de uso: mobile e desktop. Não há breakpoints intermediários — o layout se adapta entre esses dois estados.

Breakpoints

Abordagem

• Mobile-first: o estilo base é sempre para mobile. Variações de desktop são adicionadas com o prefixo md: — alinhado com o comportamento padrão do Tailwind.
• A sidebar de navegação em mobile vira bottom nav ou menu hamburguer; em desktop exibe a sidebar completa.
• Tabelas de dados em mobile: scroll horizontal no container, nunca quebrar ou esconder colunas arbitrariamente.
• Tipografia não escala com viewport — os tamanhos definidos nos tokens são fixos para cada breakpoint.

---

7. Temas

O Design System suporta dois temas:

O tema dark é a identidade primária do CIC. O light é uma alternativa funcional, não uma identidade diferente — os mesmos tokens, invertidos.

A implementação de troca de tema é feita via atributo no elemento raiz (data-theme="dark" / data-theme="light"), e todos os tokens de cor respondem a isso.

---

8. O que vem a seguir

Este documento é a Camada 1 do CIC Design System. As próximas camadas constroem sobre estes princípios:

---

CIC Design System · Versão 0.1 · Em construção