Vercel
Terminal impresso em papel branco
O sistema de design Vercel é um exercício de monocromia disciplinada: uma tela quase branca (#fafafa), tipografia preta, bordas finas e ausência completa de cores decorativas. A linguagem visual evoca um terminal de desenvolvedor impresso — a fonte Geist Sans é quase ilegível na escala "heroica", com peso entre 400 e 450 e espaçamento entre letras de -0,06em, enquanto a Geist Mono aplica rótulos, metadados e exemplos de código em maiúsculas de 11 a 13px. Os botões são retângulos ou círculos concêntricos de 6px de raio, em preto puro sobre branco ou branco sobre preto. O sistema se baseia no contraste e na hierarquia tipográfica em vez da cor, utilizando o símbolo triangular (▲) e uma marca denominativa de duas linhas como os únicos elementos de identidade visual. As superfícies são empilhadas umas sobre as outras na ordem #fafafa → #ebebeb → #171717, criando profundidade por meio da variação de valores tonais, em vez de sombras ou cores. Cada elemento é construído em uma grade de 4px com densidade compacta, resultando em uma interface que lembra o caderno de um engenheiro — precisa, funcional e sem medo do espaço em branco.
O contêiner tem 1280px de largura, está centralizado e possui um espaçamento horizontal generoso (24-48px). O bloco principal utiliza uma composição assimétrica de três zonas: um título grande à esquerda, um logotipo da marca centralizado e um bloco em formato de "sobrancelha" à direita. Abaixo do bloco principal, o conteúdo é organizado em faixas alternadas: uma faixa de largura total com o logotipo do cliente, seguida por uma seção de duas colunas "Criadores de Agentes" com o título à esquerda e um layout de produto à direita, e, por fim, uma grade de três cards com recursos. As seções são separadas por espaçamento vertical de 96-128px, sem divisores ou deslocamentos de fundo. A navegação consiste em um único painel fixo de 64px com fundo desfocado. As grades de cards utilizam consistentemente um layout de duas ou três colunas com espaçamento de 16-24px. A densidade geral é compacta — o texto é fácil de ler, há bastante espaço em branco, mas o tamanho da fonte e dos componentes impede que a página pareça arejada.
As imagens são esparsas e sempre funcionais. O principal elemento visual é o triângulo preto (▲) — uma marca geométrica que aparece como uma silhueta flutuante na escala "maiúscula". Os logotipos dos clientes na faixa de prova de conceito usam as marcas nominativas reais de cada marca em tons de cinza. Maquetes de produtos (interface de chat do Notion, saída do terminal CLI, cartão de passaporte) são incorporadas como capturas de tela em modo claro dentro de cartões emoldurados. Não há fotografias, ilustrações ou elementos 3D — o sistema é puramente tipografia e formas geométricas em papel branco.
Paleta
Neutro
- Obsidian
#171717— Os títulos principais, as bordas de navegação, o preenchimento escuro dos botões e os marcadores de lista são quase todos pretos, evitando aspereza e saturação excessiva. - Paper White
#fafafa— A tela da página, as superfícies dos cartões, o preenchimento de luz dos botões — este é o plano de fundo padrão sobre o qual tudo o mais está localizado. - Pure White
#ffffff— Superfícies de cartão em relevo, inserções, campos de entrada. - Hairline
#ebebeb— Bordas de 1px em botões, links e cartões são visíveis em níveis de zoom altos, mas invisíveis em níveis de zoom baixos. - Ash
#c9c9c9— Texto desativado, rótulos silenciados, marcas d'água com o nome da marca nos logotipos dos clientes. - Smoke
#a8a8a8— Texto secundário, texto de exemplo, preenchimento sutil de ícones.
Tipografia
de 11 a 64px · 6 etapas
- Geist Sans — substituição: Inter · esboços 400, 450, 500 · A fonte principal para a interface e os títulos é uma sans-serif geométrica personalizada da Vercel, com espaçamento entre letras reduzido em tamanhos grandes (-0,06em em 56-64px, -0,05em em 30px). Para os títulos no topo da página, foi escolhida uma espessura de 450: mais espessa que a Light, mas mais leve que a Semi-Bold, criando um tom confiante, porém não opressivo.
- Geist Mono — substituição: JetBrains Mono · esboços 400, 500, 600 · Uma fonte secundária monoespaçada para legendas, blocos de código, painéis de saída da CLI, metadados e texto em maiúsculas. A combinação de 8px/600px/maiúsculas permite o posicionamento preciso de pequenas marcas de texto. O espaçamento amplo entre letras (0,071em) na versão monoespaçada oferece amplo espaço para texto em maiúsculas.
Intervalos e forma
| Propósito | Significado |
|---|---|
| Densidade | denso |
| Passo básico | 12px |
| Raio do botão | 6px |
| Raio do cartão | 6px |
| Sombras | não - bordas em vez de sombras |
| Entre seções | 96-128px |
| Largura da página | 1280px |
A IA criará seu site no estilo Vercel 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
- Headspace — Um cantinho ensolarado de bem-estar em papel aconchegante.
- WHOOP — Laboratório de performance à meia-noite - mesas brancas de laboratório clínico sob um vazio teatral negro, um único pulso púrpura de eletricidade.
- Together AI — Console de pesquisa em papel glacial
- v0 by Vercel — Desenho em torno. Precisão e funcionalidade são primordiais, com cada elemento servindo a um propósito claro em uma superfície limpa e tecnicamente perfeita.
- Dovetail — Uma planta sob uma lua negra — linhas do gráfico quase invisíveis, fonte branca, um brilho roxo.
- Glideapps — Mesa de desenho monocromática com um toque de brilho turquesa elétrico.
- Timescale — Desenho técnico em papel quadriculado aquecido
- UGLYCASH — Um caderno coberto de adesivos, com papel cor creme, exala a atmosfera de uma fintech ousada e maximalista que exibe com orgulho seu caos.
- Sprout Social — Um broto verde sobre ardósia preta. Um único ponto de luz em uma tela monocromática rigorosa, cuja cor é usada apenas para indicar ação, com uma fonte geométrica marcante servindo como guia.
- Krea — galeria noir à meia-noite
- Evergreen — Estufa solar em papel linho
- Factory — O terminal da "sala de guerra" à meia-noite. A "fábrica" é um painel de controle totalmente preto, onde um único cartão branco aterrissa como um despacho iluminado por uma lanterna — o único objeto na sala é a própria obra.