Design System Inspired by Vercel

Category: Ferramentas para Desenvolvedores Implantação de frontend. Precisão em preto e branco, fonte Geist.

1. Tema Visual & Atmosfera

O site da Vercel é a tese visual de infraestrutura para desenvolvedores tornada invisível — um design system tão contido que beira o filosófico. A página é predominantemente branca (#ffffff) com texto quase-preto (#171717), criando um vazio de galeria onde cada elemento merece seu pixel. Isso não é minimalismo como decoração; é minimalismo como princípio de engenharia. O design system Geist trata a interface como um compilador trata o código — cada token desnecessário é removido até restar apenas estrutura.

A família de fontes Geist personalizada é a joia da coroa. Geist Sans utiliza espaçamento entre letras negativamente agressivo (-2,4px a -2,88px em tamanhos de exibição), criando títulos que parecem comprimidos, urgentes e engenheirados — como código que foi minificado para produção. Em tamanhos de corpo, o espaçamento relaxa, mas a precisão geométrica persiste. Geist Mono completa o sistema como a fonte monoespaçada para código, saída de terminal e rótulos técnicos. Ambas as fontes habilitam OpenType "liga" (ligaduras) globalmente, adicionando uma camada de sofisticação tipográfica que recompensa uma leitura atenta.

O que distingue a Vercel de outros design systems monocromáticos é sua filosofia de sombra-como-borda. Em vez de bordas CSS tradicionais, a Vercel usa box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.08) — uma sombra de deslocamento zero, desfoque zero e espalhamento de 1px que cria uma linha semelhante a uma borda sem as implicações do modelo de caixa. Essa técnica permite que bordas existam na camada de sombra, possibilitando transições mais suaves, cantos arredondados sem recorte e um peso visual mais sutil do que bordas tradicionais. Todo o sistema de profundidade é construído sobre pilhas de sombras em múltiplas camadas, onde cada camada serve a um propósito específico: uma para a borda, outra para elevação suave e outra para profundidade ambiente.

Características Principais:

• Geist Sans com espaçamento entre letras extremamente negativo (-2,4px a -2,88px no tamanho de exibição) — texto como infraestrutura comprimida
• Geist Mono para código e rótulos técnicos com OpenType "liga" globalmente
• Técnica de sombra-como-borda: box-shadow 0px 0px 0px 1px substitui bordas tradicionais em todo o sistema
• Pilhas de sombras em múltiplas camadas para profundidade refinada (borda + elevação + ambiente em declarações únicas)
• Tela quase-branca pura com texto #171717 — não completamente preto, criando uma suavidade de micro-contraste
• Cores de destaque específicas para fluxo de trabalho: Vermelho Ship (#ff5b4f), Rosa Preview (#de1d8d), Azul Develop (#0a72ef)
• Sistema de anel de foco usando hsla(212, 100%, 48%, 1) — um azul saturado para acessibilidade
• Emblemas pílula (9999px) com fundos matizados para indicadores de status

2. Paleta de Cores & Funções

Primária

• Vercel Black (#171717): Texto primário, títulos, fundos de superfícies escuras. Não é preto puro — o leve calor previne a dureza.
• Branco Puro (#ffffff): Fundo da página, superfícies de cartões, texto de botões em escuro.
• Preto Verdadeiro (#000000): Uso secundário, --geist-console-text-color-default, usado em contextos específicos de console/código.

Cores de Destaque para Fluxo de Trabalho

• Vermelho Ship (#ff5b4f): --ship-text, a etapa de fluxo de trabalho “enviar para produção” — coral-vermelho quente e urgente.
• Rosa Preview (#de1d8d): --preview-text, o fluxo de trabalho de implantação em preview — magenta-rosa vívido.
• Azul Develop (#0a72ef): --develop-text, o fluxo de trabalho de desenvolvimento — azul brilhante e focado.

Cores do Console / Código

• Azul Console (#0070f3): --geist-console-text-color-blue, azul de realce de sintaxe.
• Roxo Console (#7928ca): --geist-console-text-color-purple, roxo de realce de sintaxe.
• Rosa Console (#eb367f): --geist-console-text-color-pink, rosa de realce de sintaxe.

Interativo

• Azul Link (#0072f5): Cor primária de link com decoração de sublinhado.
• Azul Foco (hsla(212, 100%, 48%, 1)): --ds-focus-color, anel de foco em elementos interativos.
• Azul Anel (rgba(147, 197, 253, 0.5)): --tw-ring-color, utilitário de anel do Tailwind.

Escala de Neutros

• Cinza 900 (#171717): Texto primário, títulos, texto de navegação.
• Cinza 600 (#4d4d4d): Texto secundário, texto descritivo.
• Cinza 500 (#666666): Texto terciário, links discretos.
• Cinza 400 (#808080): Texto de placeholder, estados desabilitados.
• Cinza 100 (#ebebeb): Bordas, contornos de cartões, divisores.
• Cinza 50 (#fafafa): Matiz sutil de superfície, destaque de sombra interna.

Superfície & Sobreposição

• Fundo de Sobreposição (hsla(0, 0%, 98%, 1)): --ds-overlay-backdrop-color, fundo de modal/diálogo.
• Texto de Seleção (hsla(0, 0%, 95%, 1)): --geist-selection-text-color, destaque de seleção de texto.
• Fundo Azul do Emblema (#ebf5ff): Fundo do emblema pílula, superfície azul matizada.
• Texto Azul do Emblema (#0068d6): Texto do emblema pílula, azul mais escuro para legibilidade.

Sombras & Profundidade

• Sombra de Borda (rgba(0, 0, 0, 0.08) 0px 0px 0px 1px): A assinatura — substitui bordas tradicionais.
• Elevação Sutil (rgba(0, 0, 0, 0.04) 0px 2px 2px): Elevação mínima para cartões.
• Pilha de Cartão (rgba(0,0,0,0.08) 0px 0px 0px 1px, rgba(0,0,0,0.04) 0px 2px 2px, rgba(0,0,0,0.04) 0px 8px 8px -8px, #fafafa 0px 0px 0px 1px): Sombra de cartão completa em múltiplas camadas.
• Borda de Anel (rgb(235, 235, 235) 0px 0px 0px 1px): Anel-borda cinza claro para abas e imagens.

3. Regras Tipográficas

Família de Fonte

• Primária: Geist, com fallbacks: Arial, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol
• Monoespaçada: Geist Mono, com fallbacks: ui-monospace, SFMono-Regular, Roboto Mono, Menlo, Monaco, Liberation Mono, DejaVu Sans Mono, Courier New
• Recursos OpenType: "liga" habilitado globalmente em todo texto Geist; "tnum" para números tabulares em legendas específicas.

Hierarquia

Princípios

• Compressão como identidade: Geist Sans em tamanhos de exibição usa espaçamento entre letras de -2,4px a -2,88px — o espaçamento negativo mais agressivo de qualquer design system importante. Isso cria um texto que parece minificado, como código otimizado para produção. O espaçamento relaxa progressivamente conforme o tamanho diminui: -1,28px em 32px, -0,96px em 24px, -0,32px em 16px, e normal em 14px.
• Ligaduras em toda parte: Cada elemento de texto Geist habilita OpenType "liga". Ligaduras não são decorativas — são estruturais, criando combinações de glifos mais compactas e eficientes.
• Três pesos, funções estritas: 400 (corpo/leitura), 500 (interface/interativo), 600 (títulos/ênfase). Sem negrito (700), exceto para micro-emblemas minúsculos. Essa faixa estreita de pesos cria hierarquia através de tamanho e espaçamento, não de peso.
• Mono como identidade: Geist Mono em maiúsculas com "tnum" ou "liga" serve como a voz do “console de desenvolvedor” — rótulos técnicos compactos que conectam o site de marketing ao produto.

4. Estilização de Componentes

Botões

Branco Primário (Com borda por sombra)

• Fundo: #ffffff
• Texto: #171717
• Padding: 0px 6px (mínimo — largura guiada pelo conteúdo)
• Raio: 6px (levemente arredondado)
• Sombra: rgb(235, 235, 235) 0px 0px 0px 1px (borda de anel)
• Hover: fundo muda para var(--ds-gray-1000) (escuro)
• Foco: contorno 2px solid var(--ds-focus-color) + sombra var(--ds-focus-ring)
• Uso: Botão secundário padrão

Escuro Primário (Inferido do sistema Geist)

• Fundo: #171717
• Texto: #ffffff
• Padding: 8px 16px
• Raio: 6px
• Uso: CTA principal (“Start Deploying”, “Get Started”)

Botão Pílula / Emblema

• Fundo: #ebf5ff (azul matizado)
• Texto: #0068d6
• Padding: 0px 10px
• Raio: 9999px (pílula completa)
• Fonte: 12px peso 500
• Uso: Emblemas de status, tags, rótulos de funcionalidades

Pílula Grande (Navegação)

• Fundo: transparente ou #171717
• Raio: 64px–100px
• Uso: Navegação por abas, seletores de seção

Cartões & Contêineres

• Fundo: #ffffff
• Borda: via sombra — rgba(0, 0, 0, 0.08) 0px 0px 0px 1px
• Raio: 8px (padrão), 12px (cartões em destaque/imagem)
• Pilha de sombras: rgba(0,0,0,0.08) 0px 0px 0px 1px, rgba(0,0,0,0.04) 0px 2px 2px, #fafafa 0px 0px 0px 1px
• Cartões de imagem: 1px solid #ebebeb com raio superior de 12px
• Hover: intensificação sutil da sombra

Entradas & Formulários

• Rádio: estilização padrão com fundo var(--ds-gray-200) no foco
• Sombra de foco: 1px 0 0 0 var(--ds-gray-alpha-600)
• Contorno de foco: 2px solid var(--ds-focus-color) — anel de foco azul consistente
• Borda: via técnica de sombra, não borda tradicional

Navegação

• Navegação horizontal limpa em branco, fixa
• Logotipo Vercel alinhado à esquerda, 262x52px
• Links: Geist 14px peso 500, texto #171717
• Ativo: peso 600 ou sublinhado
• CTA: botões pílula escuros (“Start Deploying”, “Contact Sales”)
• Mobile: menu hamburguer recolhível
• Dropdowns de produtos com menus de múltiplos níveis

Tratamento de Imagens

• Capturas de tela do produto com borda 1px solid #ebebeb
• Imagens com topo arredondado: raio 12px 12px 0px 0px
• Capturas de tela de painel/visualização de código dominam seções de funcionalidades
• Fundos com gradiente suave atrás de imagens de herói (multi-cor pastel)

Componentes Distintos

Pipeline de Fluxo de Trabalho

• Pipeline horizontal em três etapas: Develop → Preview → Ship
• Cada etapa tem sua própria cor de destaque: Azul → Rosa → Vermelho
• Conectados com linhas/setas
• A metáfora visual para a proposta de valor central da Vercel

Barra de Confiança / Grade de Logos

• Logos de empresas (Perplexity, ChatGPT, Cursor, etc.) em escala de cinza
• Rolagem horizontal ou layout em grade
• Separação sutil com borda #ebebeb

Cartões de Métricas

• Exibição de números grandes (ex.: “10x mais rápido”)
• Geist 48px peso 600 para a métrica
• Descrição abaixo em texto cinza de corpo
• Contêiner de cartão com borda de sombra

5. Princípios de Layout

Sistema de Espaçamento

• Unidade base: 8px
• Escala: 1px, 2px, 3px, 4px, 5px, 6px, 8px, 10px, 12px, 14px, 16px, 32px, 36px, 40px
• Salto notável: pula de 16px para 32px — sem 20px ou 24px na escala primária

Grade & Contêiner

• Largura máxima do conteúdo: aproximadamente 1200px
• Herói: coluna única centralizada com padding superior generoso
• Seções de funcionalidades: grades de 2–3 colunas para cartões
• Divisores de largura total usando border-bottom: 1px solid #171717
• Capturas de tela de código/painel em largura total ou contidas com borda

Filosofia de Espaçamento em Branco

• Vazio de galeria: Padding vertical massivo entre seções (80px–120px+). O espaço em branco É o design — ele comunica que a Vercel não tem nada a provar nem a esconder.
• Texto comprimido, espaço expandido: O espaçamento entre letras negativamente agressivo nos títulos é contrabalançado por espaçamento em branco generoso ao redor. O texto é denso; o espaço ao seu redor é vasto.
• Ritmo de seção: Seções brancas alternam com seções brancas — não há variação de cor entre as seções. A separação vem apenas de bordas (sombras-borda) e espaçamento.

Escala de Raio de Borda

• Micro (2px): Trechos de código inline, pequenos spans
• Sutil (4px): Pequenos contêineres
• Padrão (6px): Botões, links, elementos funcionais
• Confortável (8px): Cartões, itens de lista
• Imagem (12px): Cartões em destaque, contêineres de imagem (arredondados no topo)
• Grande (64px): Pílulas de navegação por abas
• XL (100px): Links de navegação grandes
• Pílula Completa (9999px): Emblemas, pílulas de status, tags
• Círculo (50%): Alternador de menu, contêineres de avatar

6. Profundidade & Elevação

Filosofia de Sombras: A Vercel tem indiscutivelmente o sistema de sombras mais sofisticado no design web moderno. Em vez de usar sombras para elevação no sentido tradicional do Material Design, a Vercel usa pilhas de sombras com múltiplos valores, onde cada camada tem um propósito arquitetônico distinto: uma cria a “borda” (0px de espalhamento, 1px), outra adiciona suavidade ambiente (2px de desfoque), outra cuida da profundidade à distância (8px de desfoque com espalhamento negativo) e um anel interno (#fafafa) cria o destaque sutil que faz o cartão “brilhar” por dentro. Essa abordagem em camadas faz com que os cartões pareçam construídos, não flutuando.

Profundidade Decorativa

• Gradiente do herói: lavagem de gradiente suave e multi-cor pastel atrás do conteúdo do herói (quase invisível, atmosférico)
• Bordas de seção: 1px solid #171717 (linha escura completa) entre seções principais
• Sem variação de cor de fundo — a profundidade vem inteiramente do empilhamento de sombras e do contraste de bordas

7. Faça e Não Faça

Faça

• Use Geist Sans com espaçamento entre letras negativamente agressivo em tamanhos de exibição (-2,4px a -2,88px em 48px)
• Use sombra-como-borda (0px 0px 0px 1px rgba(0,0,0,0.08)) em vez de bordas CSS tradicionais
• Habilite "liga" em todo o texto Geist — ligaduras são estruturais, não opcionais
• Use o sistema de três pesos: 400 (corpo), 500 (interface), 600 (títulos)
• Aplique cores de destaque de fluxo de trabalho (Vermelho/Rosa/Azul) apenas no contexto do respectivo fluxo
• Use pilhas de sombras em múltiplas camadas para cartões (borda + elevação + ambiente + destaque interno)
• Mantenha a paleta de cores acromática — os cinzas de #171717 a #ffffff são o sistema
• Use #171717 em vez de #000000 para texto primário — o micro-calor importa

Não Faça

• Não use espaçamento entre letras positivo no Geist Sans — ele é sempre negativo ou zero
• Não use peso 700 (negrito) em texto de corpo — 600 é o máximo, usado apenas para títulos
• Não use border CSS tradicional em cartões — use a técnica de sombra-borda
• Não introduza cores quentes (laranjas, amarelos, verdes) no cromo da interface
• Não aplique as cores de destaque de fluxo de trabalho (Vermelho Ship, Rosa Preview, Azul Develop) de forma decorativa
• Não use sombras pesadas (> 0,1 de opacidade) — o sistema de sombras é no nível de sussurro
• Não aumente o espaçamento entre letras do texto de corpo — Geist foi projetado para ser compacto
• Não use raio pílula (9999px) em botões de ação primários — pílulas são apenas para emblemas/tags
• Não omita o anel #fafafa interno nas sombras de cartão — é o brilho que faz o sistema funcionar

8. Comportamento Responsivo

Breakpoints

Alvos de Toque

• Botões usam padding confortável (8px–16px vertical)
• Links de navegação em 14px com espaçamento adequado
• Emblemas pílula têm 10px de padding horizontal para alvos de toque
• Alternador de menu mobile usa botão circular com raio de 50%

Estratégia de Colapso

• Herói: display 48px → escala para baixo, mantendo o espaçamento negativo proporcionalmente
• Navegação: links horizontais + CTAs → menu hamburguer
• Cartões de funcionalidades: 3 colunas → 2 colunas → coluna única empilhada
• Capturas de tela de código: mantêm proporção, podem rolar horizontalmente
• Logos da barra de confiança: grade → rolagem horizontal
• Rodapé: múltiplas colunas → coluna única empilhada
• Espaçamento de seção: 80px+ → 48px no mobile

Comportamento de Imagens

• Capturas de tela do painel mantêm tratamento de borda em todos os tamanhos
• Gradiente do herói suaviza/simplifica no mobile
• Capturas de tela do produto usam imagens responsivas com raio de borda consistente
• Seções de largura total mantêm tratamento de borda a borda

9. Guia de Prompt para Agente

Referência Rápida de Cores

• CTA Primário: Vercel Black (#171717)
• Fundo: Branco Puro (#ffffff)
• Texto de título: Vercel Black (#171717)
• Texto de corpo: Cinza 600 (#4d4d4d)
• Borda (sombra): rgba(0, 0, 0, 0.08) 0px 0px 0px 1px
• Link: Azul Link (#0072f5)
• Anel de foco: Azul Foco (hsla(212, 100%, 48%, 1))

Exemplos de Prompts de Componentes

• “Crie uma seção de herói em fundo branco. Título em 48px Geist peso 600, line-height 1,00, letter-spacing -2,4px, cor #171717. Subtítulo em 20px Geist peso 400, line-height 1,80, cor #4d4d4d. Botão CTA escuro (#171717, raio 6px, padding 8px 16px) e botão fantasma (branco, sombra-borda rgba(0,0,0,0.08) 0px 0px 0px 1px, raio 6px).”
• “Projete um cartão: fundo branco, sem borda CSS. Use pilha de sombras: rgba(0,0,0,0.08) 0px 0px 0px 1px, rgba(0,0,0,0.04) 0px 2px 2px, #fafafa 0px 0px 0px 1px. Raio 8px. Título em 24px Geist peso 600, letter-spacing -0,96px. Corpo em 16px peso 400, #4d4d4d.”
• “Construa um emblema pílula: fundo #ebf5ff, texto #0068d6, raio 9999px, padding 0px 10px, Geist 12px peso 500.”
• “Crie navegação: cabeçalho fixo branco. Geist 14px peso 500 para links, texto #171717. CTA pílula escuro ‘Start Deploying’ alinhado à direita. Sombra-borda na parte inferior: rgba(0,0,0,0.08) 0px 0px 0px 1px.”
• “Projete uma seção de fluxo de trabalho mostrando três etapas: Develop (cor de texto #0a72ef), Preview (#de1d8d), Ship (#ff5b4f). Cada etapa: rótulo Geist Mono 14px maiúsculas + título 24px Geist peso 600 + descrição 16px peso 400 em #4d4d4d.”

Guia de Iteração

1. Sempre use sombra-como-borda em vez de borda CSS — 0px 0px 0px 1px rgba(0,0,0,0.08) é a base
2. O espaçamento entre letras escala com o tamanho da fonte: -2,4px em 48px, -1,28px em 32px, -0,96px em 24px, normal em 14px
3. Apenas três pesos: 400 (leitura), 500 (interação), 600 (anúncio)
4. A cor é funcional, nunca decorativa — cores de fluxo de trabalho (Vermelho/Rosa/Azul) marcam apenas etapas do pipeline
5. O anel #fafafa interno nas sombras de cartão é o que dá aos cartões Vercel seu brilho interno sutil
6. Geist Mono maiúsculas para rótulos técnicos, Geist Sans para todo o resto