Cursor
Uma oficina de pergaminho aconchegante, iluminada por brasas fumegantes.
Cursor utiliza uma tipografia quente, semelhante a pergaminho: uma base cremosa, texto preto intenso e um único detalhe em laranja vibrante que ativa links e seleções em vez de preencher botões. Os títulos, em CursorGothic com peso 400, têm espaçamento entre letras que diminui gradualmente à medida que aumentam de tamanho — a autoridade é alcançada por meio da sobriedade e de letras finas, em vez de negrito. As superfícies são mantidas planas e com aspecto de papel, com bordas finas e sombras suaves em tons de cinza quente; os cantos permanecem nítidos com peso de 4px em todo o texto. A fonte EB Garamond é usada seletivamente para subtítulos e prosa, enquanto a berkeleyMono lida com código, tags e metadados, conferindo ao sistema uma personalidade tipográfica que se assemelha mais a uma revista literária do que a um painel de controle de SaaS.
Largura máxima: 1300px centralizado, margem de 24px. Navegação superior: cabeçalho transparente de 52px de altura com logotipo e marca de texto à esquerda, 4 links de navegação centralizados, agrupamento "Login / Contato / Download" alinhado à direita. Destaque: cabeçalho alinhado à esquerda + bloco duplo de chamada à ação com texto a partir do canto superior esquerdo, seguido por um mockup de produto em tela cheia que ocupa toda a largura da página. Faixa de confiança: uma linha horizontal com 8 logotipos em uma única linha ao longo da largura da seção. As seções de recursos alternam texto à esquerda e uma captura de tela à direita em um layout de duas colunas, cada uma com proporção 50/50, com um ritmo vertical de 64-96px entre as seções. Todas as capturas de tela dos recursos são mockups de janelas com estilo macOS idêntico. Rodapé: grade de quatro colunas com links e a marca à esquerda. As seções são separadas por amplo espaço em branco, em vez de divisores - o próprio fundo creme proporciona a separação.
As capturas de tela do produto são o destaque: grandes maquetes de janelas do macOS mostrando o Cursor IDE em ação: abas de arquivos, visualizações de diferenças, planos de agentes, painéis de terminal e integração com Slack/chat. Cada maquete de janela é emoldurada por um cartão #f2f1ed com um contraste suave e quente. Uma foto de paisagem discreta (montanhas/horizonte desértico) se estende além da seção principal, adicionando aconchego sem competir com a interface do usuário. Os logotipos dos clientes ( Stripe, OpenAI, Linear, Datadog, NVIDIA, Figma, Ramp, Adobe) são apresentados como letras monocromáticas dentro de blocos Linen em formato de pílula. Não há fotografias de pessoas, ilustrações ou elementos gráficos decorativos abstratos — todo o foco visual está na interface do usuário e na identidade visual do produto. Os ícones são glifos finos e monolíneos preenchidos com #7a7974 Ash, nunca cromáticos.
Paleta
Neutro
- Ink
#26251e— Texto principal, fundo do botão de ação principal, texto de navegação - um tom quente, quase preto, nunca o #000 puro. - Parchment
#f7f7f4— O fundo da página, a tela principal, tem um tom creme quente que suaviza o contraste e cria a sensação de impressão a tinta em vez de impressão digital. - Bone
#f2f1ed— Superfícies de papelão e recipientes em relevo, um tom mais escuro que a tela, criam um efeito de "papel sobre papel" em camadas e sem bordas. - Linen
#e6e5e0— Preenchimento neutro claro para botões em superfícies escuras. - Stone
#cdcdc9— Bordas finas, divisores, partições sutis – linhas de 1px em tons quentes. - Mist
#a1a19f— Texto auxiliar de terceiro nível, legendas - entre o texto silenciado e o texto secundário.
Tipografia
de 12 a 72px · 6 etapas
- CursorGothic — substituição: Inter · esboços 400, 500 · A fonte principal para a interface do usuário, títulos, navegação, corpo do texto e design do produto. Títulos com peso de 400 pontos e espaçamento entre letras gradualmente decrescente (-0,005em a 22px → -0,03em a 72px) são uma característica distintiva da fonte: os títulos nunca são em negrito. As funções de fonte ss08, ss09 e tnum ativam alternativas estilísticas e números tabulares.
- EB Garamond — substituição: Iowan Old Style · esboços 400, 500 · CursorGothic é uma fonte serifada editorial para subtítulos individuais, corpo do texto e dados tabulares, que adiciona um toque literário à interface.
- berkeleyMono — substituição: ui-monospace · esboços 400, 500 · Monospace — usado para blocos de código, trechos de linha de comando, metadados, caminhos de arquivos e rótulos de desenvolvedor — é uma linguagem técnica.
Intervalos e forma
| Propósito | Significado |
|---|---|
| Densidade | denso |
| Passo básico | 8px |
| Raio do botão | 4px |
| Raio do cartão | 4px |
| Sombras | não - bordas em vez de sombras |
| Entre seções | 64-96px |
| Largura da página | 1300px |
A IA criará seu site no estilo Cursor e o preencherá.
- Compartilhe produtos e publicações através dos links - Instagram, TikTok, Facebook.
- Transfira o conteúdo do seu site antigo — basta especificar o endereço.
- Design moderno na melhor engine: React ( Next.js) com renderização no servidor e otimização de SEO integradas.
- Otimização de SEO totalmente automatizada para resultados de pesquisa e recomendações de redes neurais.
Estilos semelhantes
- Amplemarket — Um local de trabalho banhado de sol e coberto de confetes.
- Getharvest — Uma escrivaninha na hora dourada – uma tela em tons creme quentes, cartões-postais brancos pendurados na tela e uma única chama laranja brilhante.
- Drive Capital — Pôster retrô de viagem de carro em papel quente.
- Wealthsimple — Armazém forrado com caxemira e iluminação de galeria.
- Huddle — Fichas de inventário em tons pastel sobre papel creme.
- Fuser — Polaroids espalhadas na parede de trabalho de um designer.
- Campsite — Uma estação de trabalho de editor iluminada pelo sol - papel creme em tom quente com um único carimbo laranja indicando intenção.
- Redis Agency — A oficina editorial, aberta após o expediente, é um lugar completamente escuro onde todo o trabalho de identidade visual é feito com fontes serifadas e um único rabanete vermelho.
- AI Product Generation — Estúdio de fotografia editorial em papel branco - título como capa, cor laranja para destaque editorial.
- Getanchor — Tonalidade terracota quente sobre um fundo creme desbotado pelo sol.
- Flatfile — Um diário de dados silencioso em pergaminho quente.
- Inthememory — Um desenho arquitetônico em mármore branco com uma única luz quente. Uma sala de dados editorial silenciosa, onde tinta turquesa profunda e controles em formato de pílula flutuam sobre superfícies brancas e nítidas, interrompidas apenas por um único toque de laranja.