Nook para Mac · Guia da marca · Beta público 0.1
Um cantinho, poucas regras.
Tudo o que faz o Nook parecer, se mover e falar como o Nook. Escolha uma cor de destaque no topo — o guia inteiro veste a cor, como o app faz no seu Mac.
01 · A marca
A marca é o produto.
Desenhada a partir das camadas do próprio ícone do app. Ela conta uma pequena história ao aparecer: o arco sobe, um notch desce e se alarga até virar a ilha, e então o ponto e as barras acendem.
Área de respiro
Deixe a altura de uma ilha de espaço em volta — cerca de um oitavo da marca.
Tamanho mínimo
Até 24 px a marca completa funciona. Abaixo disso, na barra de menus, use o símbolo de uma cor.
Não faça
Recolorir o arco, contornar a base, colocar sobre uma foto carregada ou girar. A cor de destaque é a única coisa que muda.
O logotipo
“nook”, em que o duplo O é a ilha — com o mesmo ponto e a mesma onda da marca. Animado, os dois O se juntam, se esticam até virar a ilha e acendem.
02 · Cor
Um destaque. O resto é da Apple.
O Nook vem em Mel e deixa escolher entre outras dez — ou seguir o Mac. Cada destaque tem três tons. Clique em qualquer hex para copiar.
Os destaques
Texto na cor de destaque usa o tom escuro em fundos claros e o tom claro em fundos escuros, para sempre ser legível. Destaques claros levam tinta escura. Escolha um para vestir o guia.
03 · Tipografia
Arredondada no notch, justa na página.
O app fala em SF Pro Rounded, para que uma forma preta no notch ainda pareça amigável. O site e este guia usam Geist com títulos justos.
App · SF Pro Rounded
Tudo livre por hoje
Solte arquivos aqui para deixá-los à mão
24:12
Semibold para o que se bate o olho, regular para o resto. Números tabulares para os timers não tremerem.
Site · Geist
Seu notch.
Agora um cantinho.
Títulos em bold com cerca de −4% de espaçamento; texto a 17 px com espaço para respirar.
Geist Mono — 295 KB → 22 KB · −92%
04 · A ilha
Um olhar, uma coisa.
A ilha ganha orelhas para o que importa agora, por prioridade: aberta vence tudo, uma tecla vence um aviso, uma gravação vence a música. Estes são snapshots do próprio app, na cor que você escolheu; o resto está na landing page.
A capa à esquerda, a onda à direita, na sua cor.
Os tamanhos vêm do próprio notch (185 × 32 pt num MacBook Pro de 14 polegadas); toda troca usa o token quick, abrir leva 220 ms.
05 · Movimento
Quanto mais se vê, menos se move.
Toda animação usa um de cinco tokens, todos abaixo de 300 ms exceto delight. O que aparece cem vezes por dia não quica, não desfoca, não escalona, não amassa. Reduzir Movimento troca tudo por um fade de 120 ms, e parado o Nook fica em cerca de 0% de CPU.
micro
100 ms · Constante
Hovers, barras de nível, sliders
quick
160 ms · 100+ por dia
Fechar, trocas na ilha fechada, abas
standard
200 ms · Ocasional
Avisos, a bolha Duo, Shelf, botões
open
220 ms · O dia todo
Abrir a ilha — sem quique
delight
400 ms · Raro
Momentos raros ou de primeira vez, como as boas-vindas
06 · Voz
Curto, gentil, simples.
O Nook fala como um amigo que entende de computador: diz o que aconteceu e o que dá para fazer em seguida, com o mínimo de palavras. Os números são reais — medidos, nunca prometidos.
07 · Arquivos
Leve a marca com você.
Os originais, das camadas do próprio ícone do app. Use como estão; a cor de destaque é a única coisa que pode mudar.
nook-mark.svg1.2 KBSVGA marca colorida. Qualquer tamanho a partir de 24 px.Baixar ↓
nook-wordmark.svg1.3 KBSVGO logotipo em creme com a ilha violeta, para fundos escuros.Baixar ↓
app-icon-1024.png239 KBPNG · 1024 pxO ícone do app para macOS, para lojas, imprensa e apresentações.Baixar ↓
menu-bar-glyph.svg394 BSVG · templateUma cor, para a barra de menus e tudo abaixo de 24 px.Baixar ↓
icon-layer-front.svg437 BSVG · camadaCamada da frente: a ilha, o ponto e a onda. Para o ícone Liquid Glass do Icon Composer.Baixar ↓
icon-layer-back.svg172 BSVG · camadaCamada de trás: o arco branco. O Icon Composer preenche a base com a cor de destaque.Baixar ↓