Vercel
Terminal impreso en papel branco
O sistema de deseño de Vercel é un exercicio de monocromía disciplinada: unha lona case branca (#fafafa), letra negra, bordos finos e unha ausencia completa de cor decorativa. A linguaxe visual evoca o terminal dun desenvolvedor representado en formato impreso: Geist Sans é apenas lexible na escala "heroica" cun peso de 400-450 e un espazado entre letras de -0,06 em, mentres que Geist Mono aplica etiquetas, metadatos e mostras de código en maiúsculas de 11-13 px. Os botóns son radios nítidos de 6 px ou rectángulos de negro puro sobre branco ou branco sobre negro. O sistema baséase no contraste e na xerarquía tipográfica en lugar da cor, utilizando o signo triangular (▲) e unha marca denominativa de dúas liñas como únicos elementos de marca. As superficies están apiladas unhas enriba das outras na orde #fafafa → #ebebeb → #171717, creando profundidade a través do cambio de valores tonais en lugar de sombras ou cor. Cada elemento está construído sobre unha grella de 4 px cunha densidade compacta, o que resulta nunha interface que lembra o caderno dun enxeñeiro: precisa, funcional e sen medo aos espazos en branco.
O contedor ten 1280 px de ancho, está centrado e ten un recheo horizontal xeneroso (24-48 px). O bloque principal usa unha composición asimétrica de tres zonas: un título grande á esquerda, un glifo da marca centrado e un bloque de "cella" á dereita. Debaixo do bloque principal, o contido está disposto en franxas alternas: unha franxa de ancho completo co logotipo do cliente, seguida dunha sección de dúas columnas "Creadores de axentes" co título á esquerda e un deseño de produto á dereita, seguida dunha grella de tres tarxetas con características. As seccións están separadas por medianías verticais de 96-128 px sen divisores nin desprazamentos de fondo. A navegación é un único panel fixo de 64 px cun fondo borroso. As grellas das tarxetas usan constantemente un deseño de dúas ou tres columnas con medianías de 16-24 px. A densidade xeral é compacta: o texto é doado de ler, hai amplo espazo en branco, pero o tamaño da fonte e os tamaños dos compoñentes impiden que a páxina pareza lixeira.
As imaxes son escasas e sempre funcionais. O elemento visual principal é o triángulo negro (▲), unha marca xeométrica que aparece como unha silueta flotante na escala de "maiuscula". Os logotipos dos clientes na tira de proba de concepto usan as marcas denominativas reais de cada marca en escala de grises. As maquetas de produtos (interface de chat de Notion, saída do terminal CLI, tarxeta pasaporte) están incrustadas como capturas de pantalla en modo claro dentro de tarxetas enmarcadas. Non hai fotografías, ilustracións nin elementos 3D: o sistema é tipografía pura e formas xeométricas sobre papel branco.
Paleta
Neutro
- Obsidian
#171717— Os títulos principais, os bordos de navegación, o recheo de botóns escuros e os marcadores de lista son case negros, evitando a dureza e a saturación rechamante. - Paper White
#fafafa— O lenzo da páxina, as superficies das tarxetas, os recheos de luz dos botóns: este é o fondo estándar sobre o que se atopa todo o demais. - Pure White
#ffffff— Superficies de tarxetas en relevo, insercións, campos de entrada. - Hairline
#ebebeb— Os bordos de 1 px en botóns, ligazóns e tarxetas son visibles con niveis de zoom altos, pero invisibles con niveis de zoom baixos. - Ash
#c9c9c9— Texto desactivado, etiquetas silenciadas, marcas de auga de nomes de marcas nos logotipos dos clientes. - Smoke
#a8a8a8— Texto secundario, texto de marcador de posición, recheo sutil de iconas.
Tipografía
de 11 a 64 px · 6 pasos
- Geist Sans — substitución: Inter · contornos 400, 450, 500 · A fonte principal para a interface e os títulos é unha sans-serif xeométrica deseñada a medida por Vercel con espazado entre letras axustado en tamaños grandes (-0,06 em a 56-64 px, -0,05 em a 30 px). Para os títulos da parte superior da páxina, escolleuse un grosor 450: máis groso que Light pero máis lixeiro que Semi-Bold, creando un ton seguro, pero non dominante.
- Geist Mono — substitución: JetBrains Mono · contornos 400, 500, 600 · Unha fonte secundaria monoespaciada para subtítulos, bloques de código, paneis de saída da CLI, metadatos e texto en maiúsculas. A combinación de 8 px/600 px/maíúsculas permite a colocación precisa de marcas de palabras pequenas. O amplo espazado entre letras (0,071 em) na versión monoespaciada proporciona espazo dabondo para texto en maiúsculas.
Intervalos e forma
| Propósito | Significado |
|---|---|
| Densidade | denso |
| Paso básico | 12px |
| Radio do botón | 6px |
| Radio da tarxeta | 6px |
| Sombras | sen bordos en vez de sombras |
| Entre seccións | 96-128px |
| Largura da páxina | 1280px |
A IA creará o teu sitio web ao estilo de Vercel e o encherá
- Enche con produtos e publicacións a través da ligazón: Instagram, TikTok, Facebook.
- Transfire contido do teu sitio antigo: só tes que especificar o enderezo.
- Deseño moderno no mellor motor: React ( Next.js) con renderización de servidor e optimización SEO listas para usar.
- Optimización SEO totalmente automatizada para resultados de busca e recomendacións de redes neuronais.
Estilos semellantes
- Headspace — Un recuncho de benestar soleado sobre papel cálido
- WHOOP — Laboratorio de actuación á medianoite: mesas brancas de laboratorio clínico baixo un baleiro teatral negro, un único pulso púrpura de electricidade
- Together AI — Consola de investigación en papel glacial
- v0 by Vercel — Debuxo ao torno. A precisión e a funcionalidade son primordiais, e cada elemento cumpre un propósito claro sobre unha superficie limpa e tecnicamente perfecta.
- Dovetail — Un plano baixo unha lúa negra: liñas gráficas apenas visibles, fonte branca, un brillo púrpura
- Glideapps — mesa de deseño monocromática cun brillo turquesa eléctrico
- Timescale — Debuxo de enxeñaría en papel milimetrado quente
- UGLYCASH — Un caderno cuberto con adhesivos en papel cor crema irradia o ambiente dunha fintech atrevida e maximalista que amosa con orgullo o seu caos.
- Sprout Social — Un brote verde sobre lousa negra. Un acento brillante sobre un lenzo monocromático estrito, cuxa cor se usa só para a acción, cunha fonte xeométrica segura que serve de sinalización.
- Krea — galería noir á medianoite
- Evergreen — Invernadoiro solar sobre papel de liño
- Factory — O terminal da "sala de guerra" á medianoite. A "fábrica" é un panel de control negro e impoluto onde aterra unha única tarxeta branca coma un despacho iluminado por unha lanterna; o único obxecto na sala é a propia obra.