Estilo Cursor
Inspirado no CursorUm ateliê em papel creme: títulos leves, tinta quase preta, cantos de 4 px e uma brasa laranja só nos links.
O Cursor parece um caderno editorial, não um painel de software. O fundo é um creme quente, o texto é uma tinta quase preta, e os títulos falam baixo: peso normal, nunca negrito, com as letras se apertando conforme crescem. Uma serifa clássica aparece nos subtítulos e nos textos longos, e uma fonte de código marca os nomes de arquivo, os comandos e as etiquetas. As superfícies são planas como papel, separadas por fios finos e sombras quentes e suaves; os cantos são quase retos, de 4 px, em tudo. Um laranja-brasa acende só os links e as palavras em destaque.
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
- Brasa
#f54e00Só nos links e nas palavras em destaque; nunca como fundo - Tinta
#26251eO texto e o fundo do botão principal, no lugar do preto puro - Âmbar
#c08532Os botões de ação dentro das telas do produto - Floresta
#34785cOs botões de confirmar dentro das telas do produto - Pedra
#cdcdc9Os fios de 1 px e as divisórias
Tipografia
O Cursor usa a CursorGothic e a Berkeley Mono, que são pagas. Aqui e no arquivo vão a Inter no peso 400 nos títulos e no texto e a JetBrains Mono no código; a EB Garamond é a mesma do site deles.
- TítuloInter · 400Feito para criar.
- Título de seçãoInter · 400O agente termina a tarefa
- Subtítulo editorialEB Garamond · 400Escreva a ideia, revise o resultado.
- CorpoInter · 400Ele lê o projeto inteiro antes de mudar uma linha.
- Código e etiquetasJetBrains Mono · 400src/app/page.tsx · 2 min atrás
Componentes
Os botões, o campo e um cartão, desenhados no estilo da marca.
Regras
- Faça
- Cantos de 4 px em todos os botões, cartões e campos.
- Títulos sempre no peso normal, com as letras mais juntas quanto maior o tamanho.
- Fundo creme e cartões um tom mais escuro, separados por fios finos.
- A serifa só nos subtítulos e nos textos longos, nunca nos botões.
- A fonte de código nos comandos, nos nomes de arquivo e nas etiquetas.
- O botão escuro ao lado de um botão claro no mesmo grupo.
- Evite
- Nada de branco puro nem de preto puro: tudo é creme e tinta quente.
- Nada de negrito nos títulos.
- Nada de pílula: os cantos ficam em 4 px.
- Nada de gradiente, brilho ou sombra azulada.
- Nunca o laranja como fundo de botão ou de seção.
Movimento
- Trocas de cor curtas, de 150 ms, sem movimento chamativo.
- O sublinhado aparece no link só ao passar o mouse.