Vercel
Terminal impreso en papel blanco
El sistema de diseño Vercel es un ejercicio de monocromo disciplinado: un lienzo casi blanco (#fafafa), tipografía negra, bordes finos y una ausencia total de color decorativo. El lenguaje visual evoca la terminal de un desarrollador impresa: Geist Sans es apenas legible a escala "heroica" con un grosor de 400-450 y un espaciado entre letras de -0,06em, mientras que Geist Mono aplica etiquetas, metadatos y ejemplos de código en mayúsculas de 11-13px. Los botones son radios nítidos de 6px o rectángulos de negro puro sobre blanco o blanco sobre negro. El sistema se basa en el contraste y la jerarquía tipográfica en lugar del color, utilizando el signo triangular (▲) y un logotipo de dos líneas como únicos elementos de marca. Las superficies se apilan unas sobre otras en el orden #fafafa → #ebebeb → #171717, creando profundidad mediante cambios de valores tonales en lugar de sombras o colores. Cada elemento se construye sobre una cuadrícula de 4 píxeles con una densidad compacta, lo que da como resultado una interfaz que recuerda al cuaderno de un ingeniero: precisa, funcional y sin miedo a los espacios en blanco.
El contenedor tiene 1280 px de ancho, centrado, con un generoso relleno horizontal (24-48 px). El bloque principal utiliza una composición asimétrica de tres zonas: un gran titular a la izquierda, un glifo de marca centrado y un bloque de "ceja" a la derecha. Debajo del bloque principal, el contenido se organiza en franjas alternas: una franja de ancho completo con el logotipo del cliente, seguida de una sección de dos columnas "Agent Creators" con el titular a la izquierda y un diseño de producto a la derecha, seguida de una cuadrícula de tres tarjetas con características. Las secciones están separadas por márgenes verticales de 96-128 px sin divisores ni desplazamientos de fondo. La navegación es un único panel fijo de 64 px con un fondo difuminado. Las cuadrículas de tarjetas utilizan consistentemente un diseño de dos o tres columnas con márgenes de 16-24 px. La densidad general es compacta: el texto es fácil de leer, hay amplio espacio en blanco, pero el tamaño de la fuente y los tamaños de los componentes impiden que la página se sienta espaciosa.
Las imágenes son escasas y siempre funcionales. El elemento visual principal es el triángulo negro (▲), un símbolo geométrico que aparece como una silueta flotante a escala de mayúsculas. Los logotipos de los clientes en la tira de prueba de concepto utilizan los nombres de marca reales en escala de grises. Las maquetas de productos (la interfaz de chat de Notion, la salida del terminal CLI, la tarjeta de pasaporte) están integradas como capturas de pantalla en modo claro dentro de tarjetas enmarcadas. No hay fotografías, ilustraciones ni elementos 3D; el sistema se basa en pura tipografía y formas geométricas sobre papel blanco.
Paleta
Neutral
- Obsidian
#171717— Los títulos principales, los bordes de navegación, el relleno oscuro de los botones y los marcadores de lista son prácticamente negros, evitando así la dureza y la saturación estridente. - Paper White
#fafafa— El lienzo de la página, las superficies de las tarjetas, los detalles de luz de los botones: este es el fondo estándar sobre el que se ubica todo lo demás. - Pure White
#ffffff— Superficies de tarjetas en relieve, inserciones, campos de entrada. - Hairline
#ebebeb— Los bordes de 1 píxel en botones, enlaces y tarjetas son visibles con niveles de zoom altos, pero invisibles con niveles de zoom bajos. - Ash
#c9c9c9— Texto deshabilitado, etiquetas silenciadas, marcas de agua con el nombre de la marca en los logotipos del cliente. - Smoke
#a8a8a8— Texto secundario, texto de marcador de posición, relleno sutil de iconos.
Tipografía
De 11 a 64 píxeles · 6 pasos
- Geist Sans — reemplazo: Inter · esquemas 400, 450, 500 · La tipografía principal para la interfaz y los títulos es una sans-serif geométrica de diseño personalizado de Vercel, con un espaciado entre letras ajustado en tamaños grandes (-0,06em a 56-64px, -0,05em a 30px). Para los títulos de la parte superior de la página, se eligió un grosor de 450: más grueso que Light pero más ligero que Semi-Bold, lo que crea un tono seguro, pero no excesivo.
- Geist Mono — reemplazo: JetBrains Mono · esquemas 400, 500, 600 · Una fuente secundaria monoespaciada para subtítulos, bloques de código, paneles de salida de la interfaz de línea de comandos, metadatos y texto en mayúsculas. La combinación de 8 px/600 px/mayúsculas permite una colocación precisa de pequeños logotipos. El amplio espaciado entre letras (0,071 em) en la versión monoespaciada proporciona espacio suficiente para el texto en mayúsculas.
Intervalos y forma
| Objetivo | Significado |
|---|---|
| Densidad | denso |
| Paso básico | 12px |
| Radio del botón | 6px |
| Radio de la tarjeta | 6px |
| Oscuridad | no - bordes en lugar de sombras |
| Entre secciones | 96-128px |
| Ancho de página | 1280px |
La IA construirá tu sitio web al estilo de Vercel y lo rellenará.
- Rellena con productos y publicaciones a través del enlace - Instagram, TikTok, Facebook.
- Transfiere el contenido de tu antiguo sitio web; solo tienes que especificar la dirección.
- Diseño moderno sobre el mejor motor: React ( Next.js) con renderizado del lado del servidor y optimización SEO integrada.
- Optimización SEO totalmente automatizada para resultados de búsqueda y recomendaciones mediante redes neuronales.
Estilos similares
- Headspace — Un rincón de bienestar soleado sobre papel cálido
- WHOOP — Laboratorio de rendimiento a medianoche: mesas blancas de laboratorio clínico bajo un vacío teatral negro, un único pulso púrpura de electricidad.
- Together AI — Consola de investigación sobre papel glacial
- v0 by Vercel — Dibujo de torno. La precisión y la funcionalidad son primordiales, y cada elemento cumple una función clara sobre una superficie limpia y técnicamente perfecta.
- Dovetail — Un plano bajo una luna negra: líneas gráficas apenas visibles, fuente blanca, un destello púrpura.
- Glideapps — Mesa de dibujo monocromática con un destello turquesa eléctrico.
- Timescale — Dibujo técnico sobre papel cuadriculado en caliente
- UGLYCASH — Un cuaderno cubierto de pegatinas y con papel color crema desprende el ambiente de una empresa fintech audaz y maximalista que exhibe con orgullo su caos.
- Sprout Social — Un brote verde sobre pizarra negra. Un toque de color brillante sobre un lienzo monocromático estricto, cuyo color se utiliza únicamente para indicar la acción, con una tipografía geométrica segura que sirve de guía.
- Krea — galería noir a medianoche
- Evergreen — Invernadero solar sobre papel de lino
- Factory — La terminal de la "sala de guerra" a medianoche. La "fábrica" es un panel de control de un negro austero donde una sola tarjeta blanca aterriza como un despacho iluminado por una linterna; el único objeto en la sala es el trabajo en sí.