inovaccio ← voltar ao início
sistema de design

a linguagem visual
por trás deste site.

Não escondemos o processo. Esta página é o mesmo sistema de cores, tipografia, ícones e componentes usado em cada pixel do site, publicado como prova pública de como pensamos design de produto, não só design de página.

01 · cores

paleta

Uma cor de destaque usada com intenção, um par de neutros quentes e uma escala de cinzas com leve viés para o vermelho da marca.

vermelho de marca #CC0601 · --red
ink / dark #111113 · --ink
paper #F7F6F3 · --paper
paper dim #EFECE4 · --paper-dim
texto suave #5C5C62 · --ink-soft
texto sutil #8A8A90 · --ink-softer
02 · tipografia

Ubuntu Sans + Ubuntu

Ubuntu Sans para títulos (peso 700–800, tracking negativo), Ubuntu para corpo de texto e rótulos: a mesma dupla usada em todo o site, do H1 da home ao rodapé.

display / 800sites que parecem produto.
título / 700método, não sorte.
corpo / 300Estratégia, design e engenharia num só time, para marcas que preferem competir pela percepção, não pelo preço.
rótulo / 500eyebrow · uppercase · tracking .2em
03 · ícones

17 ícones animados, hiper-minimalistas

SVG + CSS, sem GIF: escaláveis, leves e recolorizáveis. Cada um com um micro-movimento contínuo e sutil, respeitando prefers-reduced-motion.

website
landing
system
dashboard
saas
uiux
branding
strategy
client
api
database
cloud
architecture
performance
scale
security
growth
04 · componentes

botões, tags e cards

Os mesmos elementos reaproveitados em toda a navegação: cantos arredondados generosos, hover com transição de cor, nunca de layout.

botão sólido botão outline tag / pill status · concluído

card de exemplo

Sombra suave, borda de baixo contraste, ícone animado no topo: o mesmo padrão usado nos cards de serviço e pilares de tecnologia.

quer um sistema assim para a sua marca?

iniciar projeto