Ir para o conteúdo
Ir para utu.wtf

Design system v4.0.2 · mobile-first

We are UTU

Where humansbuild humans.

Breu, concreto e grão. Títulos largos em caixa alta, texto que conversa e um sinal de cor por composição. Desenhado a 360 px, cresce até 1440.

Ler os princípios Fazer download da marca

01 — Princípios

Cinco regras

Decidem quando o caso não está no guia. Se uma peça respeita as cinco, é UTU.

  1. Mobile primeiro

    Desenhamos a 360 px e crescemos até 1440. O desktop ganha espaço e ritmo, não conteúdo novo.

  2. Um sinal por composição

    Lima, Brasa ou Quartzo, nunca dois juntos. A cor rara é a cor que se vê.

  3. Peso, não enfeite

    A hierarquia vem da escala e do contraste de peso. Sem sombras, gradientes ou caixas decorativas.

  4. Uma textura só

    O grão é a única textura e vive sob o conteúdo. Nenhum padrão atrás de texto, ícone ou formulário.

  5. Humano em cada pixel

    Alvos de 48 px, contraste AA no mínimo, foco sempre visível e movimento que respeita quem pede menos.

02 — Cores

Fundos, não temas

Cada bloco declara o seu fundo com data-utu-ground, e texto, linha, ação e foco ajustam-se sozinhos. Nenhum componente usa um hex.

Breu #151413

Fundo digital principal. Ação e foco em Lima.

Texto secundário em Concreto · 7,8:1

Ação

Concreto #A9A9A9

Fundo-assinatura. Só Breu e Grafite como texto.

Sinais aqui só como grafismo

Ação

Osso #F1F0EB

Papel. Fundo calmo para leitura, método e ícones.

Texto secundário em Chumbo · 5,9:1

Ação

Lima 200 #F0FA52

A energia em área grande: manifesto, Collective.

Texto secundário em Chumbo · 5,9:1

Ação

Quartzo #F9CDCD

As pessoas: Collective, H2H, o “Vamos co-criar?”.

Nunca junto da Brasa · 2,8:1

Ação

Neutros 50 → 950

50Osso
200Névoa
400Concreto
500Cinza
600Chumbo
700Ardósia
800Grafite
900Carvão
950Breu

Sinais — um por composição

Lima 400#E4FA00 · energia
Lima 200#F0FA52 · fundo
Brasa 500#EC3C20 · método
Brasa 700#C42A10 · texto
Quartzo 200#F9CDCD · pessoas
Quartzo 600#9C8080 · texto

03 — Tipografia

Escala fluida

Clash Display nos títulos, Satoshi no texto. A escala cresce de 360 a 1440 px (base 16 → 18, razão 1,2 → 1,333). Light só do H1 para cima; abaixo, 400 com 600.

hero · 117 → 224
display · 48 → 101

Vamos co-criar?

h1 · 33 → 57

O Fluxo otimizado

h2 · 28 → 43

Livre é o verbo

h3 · 23 → 32

Aura · Forja · Sinal

lead · 19 → 24

A sua marca precisa de uma alma, de um propósito claro e de uma forma autêntica de se ligar às pessoas.

body · 16 → 18

Ligamos criativos livres a marcas com propósito. Texto corrido nunca abaixo de 16 px no mobile, com 45 a 75 caracteres por linha.

micro · 11 → 12

Coletivo co-criativo global

04 — Grid

4 · 8 · 12

Redimensione a janela: o grid abaixo é o real. A base é o mobile; tablet e desktop entram com min-width. Posicione cada filho com --col-md e --col-lg.

Mobile · base4 colunasmargem 16calha 16
Tablet · 37.5em8 colunasmargem 32calha 24
Desktop · 64em12 colunasmargem 64calha 24
Largo · 90emconteúdo até 1440alvo de toque 48cabeçalho 56 / 64 / 72

05 — Textura

Uma textura só

Grão de película em SVG (0,6 KB), sempre por baixo do conteúdo. Cada fundo tem a sua intensidade, e --subtle e --strong ajustam-na. O grão só se mexe no desktop, e nunca para quem pede menos movimento.

Breu · 0,48

Texto de 14 px continua nítido.

Concreto · 0,48

Texto de 14 px continua nítido.

Osso · 0,32

Texto de 14 px continua nítido.

Lima 200 · 0,32

Texto de 14 px continua nítido.

Quartzo · 0,32

Texto de 14 px continua nítido.

Breu forte · 0,7

O máximo. Texto de 14 px ainda nítido.

06 — Movimento

Um só traço

Firme e caloroso: chega a meio do caminho a um terço do tempo e assenta devagar, sem ressalto. A chegada e a partida são as duas metades do traço; o passo é dos sinais pixel.

Traço · forma e lugar

--utu-ease-tracocubic-bezier(.5, 0, .1, 1)

O logo e o layout. 320–640 ms.

Chegada · entradas e estados

--utu-ease-chegadacubic-bezier(.12, .5, .31, 1)

Hover, foco, menu. 120–480 ms.

Partida · saídas

--utu-ease-partidacubic-bezier(.71, 0, .79, .5)

O que sai. 120–320 ms.

Passo · sinais pixel

--utu-ease-passosteps(2, end)

As setas avançam 2 pixels do ícone.

Percurso — o que muda de lugar nos dois eixos faz um meandro

Evitar · diagonal

UTU · primeiro x, depois y, pernas sobrepostas 30%

Aplicado ao logo — assinatura e ícone

Da assinatura
Do ícone

Para o ícone, primeiro x e depois y; para a assinatura, o inverso; pernas sobrepostas 30% e o ícone ao centro. No cabeçalho parte da assinatura; onde o ícone está em repouso (selo, avatar), parte dele, com data-utu-from="icon".

Durações — saídas mais rápidas do que entradas

Rápido · hover, toque--utu-dur-fast · 120 ms
Base · filtros, setas--utu-dur-base · 200 ms
Lento · menu, painéis--utu-dur-slow · 320 ms
Entrada · revelar blocos--utu-dur-enter · 480 ms
Longo · o logo, o layout--utu-dur-long · 640 ms

07 — Marca

O meandro

Um único traço que dobra sobre si mesmo e forma U-T-U. Tem duas formas: a assinatura, horizontal, abre a página; o ícone, quadrado, cabe onde ela não cabe e fecha a página. Nunca as duas lado a lado.

Assinatura · utu-logo.svg

Cabeçalho, capa, posts, stories, documentos e e-mail. Mínimo de 20 px de altura; área livre de 2x, com x = 1/8 da altura.

Ícone · utu-icon.svg

Favicon, app, avatar e selo de rodapé. Grid de 11 × 12 módulos; mínimo de 24 px (12 px no favicon); área livre de 2x, com x = 1 módulo.

Ícone — sempre em cor chapada

Osso sobre Breu
Breu sobre Osso
Lima sobre Breu
Breu sobre Lima 200
Breu sobre Quartzo
Breu sobre Concreto

Não tire a moldura, não feche os vãos, não gire, não use Brasa.

Tamanhos — alturas múltiplas de 12 px; até 48 px, versão de grid

96
48
36 · selo
24 · mínimo
12 · favicon

Favicons e app — na raiz do site

Tema claro
Tema escuro
Ícone de app UTU, Lima sobre Breu Ícone UTU de 512 px, Lima sobre Breu 
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

08 — Ícones

O Fluxo

Grid de 96, módulo de 8, diagonais a 45°. Brasa sobre fundo calmo, Osso ou Breu; nunca sobre Névoa, Concreto, padrão ou fotografia. Sempre com o nome da fase ao lado.

Fase 01 · Aura

Fase 02 · Forja

Fase 03 · Sinal

Fase 04 · Pulso

Fase 05 · Alva

Sinais pixel — só em escala inteira (unidade de 2, 3 ou 4 px)

Seguir
Link externo
Seguinte
Avançar
H2H
Easter egg

Grafismos — o meandro em linha e as marcas de anotação

Degrau

O meandro do logo em linha. Brasa, traço de 8 px, que sai sempre do quadro. Um por composição. .utu-degrau

Asterisco e mais

Marcas de anotação. Puxam o olho para uma frase; nunca ficam sobre o texto.

09 — Voz

Empatia no código-fonte. Human to Human em cada pixel.
UTU · Brand Playbook
DizemosEvitamos
Somos a UTUUTU Agency, Studio, Hub
Sistemas de significadoLogos e peças isoladas
Co-criação com o CollectiveCriativos isolados
Parceria contínuaProjetos avulsos
Falar sobre a AuraClique aqui

Tom direto, caloroso e afirmativo: frases curtas, primeira pessoa do plural, inglês só nas assinaturas. Botões dizem o que acontece; erros dizem como resolver.

10 — Componentes

Ações

O botão primário usa a cor de ação do fundo. Brasa nunca é botão: lê-se como alerta. Hover só com ponteiro; no toque, a resposta é o estado ativo.

Sobre Breu

Começar a jornada Ver o Fluxo Ler o manifesto

Sobre Osso

Falar sobre a Aura Ver o Fluxo Ler o manifesto

Sobre Lima 200

Entrar no Collective Saber mais

Filtros .utu-chips — uma linha com scroll no mobile

Campos .utu-field — 18 px, sublinhado, erro com forma e texto

Falta o domínio. Ex.: ana@estudio.pt

Duas ou três frases bastam.

Cabeçalho e menu .utu-header .utu-menu

São os deste guia. No mobile, o cabeçalho mostra o logo e Menu em texto, que abre o menu fullscreen; a partir de 600 px junta o botão de ação; a partir de 1024 px, a navegação fica em linha e o menu deixa de ser preciso. Com o ponteiro ou o foco no logo, a assinatura reconstrói-se no ícone (.utu-reconstruct). O rótulo vertical no topo da página (.utu-side-label) só aparece no desktop.

Pilares .utu-pillars

Lista no mobile, pílulas no tablet

  • A colaboração é a nossa arte.
  • A empatia é a nossa filosofia.
  • A criatividade é a nossa liderança.

Passos do Fluxo .utu-steps

Vertical → horizontal

Vertical no mobile e no tablet, horizontal a partir de 1024 px. Marcador cheio e linha contínua: fases do projeto. Vazado e tracejado: fases sob acordo.

  1. Fase 01

    Aura

    Desvendamos a essência e o propósito da marca.

  2. Fase 02

    Forja

    Forjamos a identidade: logo, cores, tipografia e tom de voz.

  3. Fase 03

    Sinal

    Apresentamos a marca completa, pronta para usar.

  4. Fase 04 · sob acordo

    Pulso

    Damos pulso à marca no mundo: site, redes, comunicação.

  5. Fase 05 · sob acordo

    Alva

    Parceria contínua para a marca crescer e evoluir.

Cartão de fase .utu-phase-card — responde ao espaço que ocupa, não à janela

Fase 1:
Aura

É onde desvendamos a essência e o propósito da sua marca.

O que acontece: investigamos a alma do negócio: valores, público e mercado.

O resultado: uma direção clara antes de começarmos a criar.

Fase 1:
Aura

É onde desvendamos a essência e o propósito da sua marca.

O que acontece: a partir da conversa inicial e do seu briefing, investigamos a alma do negócio (valores, público e mercado) para definir a direção estratégica e criativa.

O resultado: uma direção clara antes de começarmos a criar.

11 — Downloads

Leve a marca

Os originais em SVG, prontos para qualquer tamanho. As fontes são gratuitas na Fontshare: cada pessoa faz o download da sua cópia.

Para criar

Assinatura · SVG Ícone · SVG Ícone até 48 px · SVG Ícone de app · PNG Degrau · SVG Clash Display · Fontshare Satoshi · Fontshare

Para desenvolver

<link rel="stylesheet" href="css/utu.css">
<script src="js/utu.js" defer></script>

<section class="utu-section" data-utu-ground="breu">
  <div class="utu-container">…</div>
</section>
Tokens · JSON Ícones · sprite SVG