Connected Innovation Center
CIC Design System
Diretrizes, tokens, componentes e padrões das aplicações web do CIC.
Dark é a identidade primária.
Cor é exceção. Tipografia faz o trabalho. Espaço vazio é parte do design.
O que é o CIC
Um ambiente físico de inovação — espaço para receber clientes, rodar experiências e demonstrar tecnologia de ponta.
A identidade dele já existe e é consistente globalmente. É tech editorial minimalista: sofisticada, densa de informação, com personalidade forte. Não é um SaaS genérico, nem um dashboard corporativo padrão.
| Sim | Não |
|---|---|
| Editorial | Genérico |
| Técnico | Decorativo |
| Preciso | Poluído |
| Contido | Exuberante |
| Sofisticado | Corporativo padrão |
| Quadrado | Arredondado |
| Linear | Orgânico |
| Monocromático | Colorido |
A paleta
Cores fortes, usadas com parcimônia. Nas aplicações elas aparecem em ponto de ação, estado ou ênfase — nunca em área.
A escala tipográfica
Oito degraus, sem meio-termo. A tipografia não escala com o viewport: no mobile, o degrau maior pareia com o de baixo.
A malha
As formas são calculadas e projetadas em SVG, não são imagem — mantêm a nitidez em qualquer tamanho e a cor vem dos tokens.
Os componentes
Visita registrada.
A confirmação foi enviada para o visitante.
Próxima visita
- Workshop de cocriação
- 24/08 · 14h00
- Sala Imersiva
O que já está pronto
14átomos
15moléculas
7peças de layout
6padrões de página
Os seis princípios
Cor é exceção, não regra
Uma cor tem impacto porque o entorno dela é neutro. Cor aparece em ponto de ação, estado ou ênfase — nunca em decoração.
Tipografia faz o trabalho pesado
Hierarquia vem de tamanho e peso, não de fundo colorido. Um H1 grande ao lado de um body pequeno já é composição suficiente.
Grid é estrutura e estética
O grid não é só funcional — ele aparece como elemento visual, em backgrounds e separadores.
Espaço vazio é parte do design
Generosidade de espaço não é desperdício: é o que faz a informação respirar.
Sombras e bordas finas, não grossas
Elevação vem de borda de 1px e espaço. A interface deve parecer plana e precisa.
Estados são explícitos
O usuário nunca deve ficar em dúvida sobre o que pode interagir.
Por onde começar
- PrincípiosO porquê das decisões — identidade, tom de voz, acessibilidade.
- TokensCor, tipografia, espaçamento e raio. Tudo que a UI consome.
- ComponentesOs átomos e moléculas em uso, com o código de cada um.
- PadrõesTelas inteiras prontas para servir de ponto de partida.
- LayoutA estrutura ao redor do conteúdo — casca, grid, head e footer.
- LandingsPeças de marca compostas com o vocabulário do CIC.
- AplicaçõesSistemas do CIC rodando com o design system aplicado.
Connected Innovation Center
A especificação completa vive em docs/ — é ela que vale em caso de divergência.