Estilo Notion
Inspirado no NotionO caderno de papel quente: fundo creme, cartões brancos com fio fino e cores vivas só em pílulas e blocos de destaque.
O Notion parece um caderno bem usado sob a luz da tarde: o fundo é um branco quente, quase creme, e os cartões brancos ficam por cima com um fio fino, sem sombra. Os títulos são grandes, sem serifa e com as letras bem juntas, e uma serifa aparece de vez em quando numa frase de abertura, com voz de revista. A cor entra como pontuação: um azul só no botão principal, uma pílula pêssego ou amarela em volta de uma palavra do título e blocos inteiros pintados de amarelo, coral, azul-céu ou azul-noite, como post-its.
A ProfitizeBuild não tem relação com as marcas citadas. Os nomes e os logos só identificam a inspiração.
Fundos
Cada seção do site num destes, com o texto e o acento que vão sobre ele.
Acentos e detalhes
- Azul Notion
#0075deO único botão cheio de cada tela - Azul clarinho
#e6f3feO fundo do botão secundário, com o texto em azul - Pêssego
#f6d5b8A pílula em volta de uma palavra do título - Coral
#f64932Blocos de destaque e enfeites, revezando com o amarelo - Azul-céu
#62aef0Blocos claros e os enfeites desenhados à mão
Tipografia
O Notion usa a NotionInter, uma versão própria da Inter, e a Lyon Text nas frases de abertura, que é paga. Aqui e no arquivo vão a Inter e a Source Serif 4, as gratuitas mais parecidas.
- Título do topoInter · 700Seu caderno pensa junto.
- Título de seçãoInter · 600A equipe toda numa página só.
- Frase de aberturaSource Serif 4 · 400Notas, tarefas e decisões no mesmo lugar, escritas como num caderno.
- Título do cartãoInter · 700Tarefas da semana
- CorpoInter · 400Arraste um bloco para mudar a ordem. Tudo se salva sozinho.
- LegendaInter · 500Atualizado há 2 minutos
Componentes
Os botões, o campo e um cartão, desenhados no estilo da marca.
Regras
- Faça
- Fundo de papel quente na página e cartões brancos por cima, nunca o contrário.
- Um azul só, no botão principal de cada tela; o resto em texto ou no azul clarinho.
- Títulos grandes com as letras bem juntas; o texto corrido no espaçamento normal.
- Cartões com um fio fino e cantos de 12 px; botões com cantos de 8 px.
- Uma palavra do título dentro de uma pílula colorida, para chamar o olho.
- Blocos de destaque pintados de amarelo, coral, azul-céu ou azul-noite, um de cada vez.
- Evite
- Nada de fundo branco puro na página: o creme é a marca do estilo.
- Nada de sombra nos cartões de conteúdo.
- Nenhum segundo botão colorido na mesma tela.
- Nada de gradiente: só cores chapadas.
- A serifa só nas frases de abertura, nunca em menus ou botões.
Movimento
- O passar do mouse muda as coisas em 200 ms, suave.
- Os bonequinhos e enfeites do topo entram com um pulinho de mola.