Sistema de Diseño Inspirado en Vercel

Category: Herramientas para Desarrolladores Despliegue frontend. Precisión en blanco y negro, fuente Geist.

1. Tema Visual y Atmósfera

El sitio web de Vercel es la tesis visual de la infraestructura para desarrolladores hecha invisible: un sistema de diseño tan contenido que roza lo filosófico. La página es abrumadoramente blanca (#ffffff) con texto casi negro (#171717), creando un vacío de galería donde cada elemento justifica su píxel. Esto no es minimalismo como decoración; es minimalismo como principio de ingeniería. El sistema de diseño Geist trata la interfaz como un compilador trata el código: cada token innecesario se elimina hasta que solo queda la estructura.

La familia tipográfica Geist personalizada es la joya de la corona. Geist Sans utiliza un interletraje negativo agresivo (-2,4 px a -2,88 px en tamaños de visualización), creando titulares que se sienten comprimidos, urgentes e ingeniados, como código minificado para producción. En tamaños de cuerpo, el espaciado se relaja, pero la precisión geométrica persiste. Geist Mono completa el sistema como compañero monoespaciado para código, salida de terminal y etiquetas técnicas. Ambas fuentes habilitan "liga" de OpenType (ligaduras) globalmente, añadiendo una capa de sofisticación tipográfica que recompensa la lectura atenta.

Lo que distingue a Vercel de otros sistemas de diseño monocromáticos es su filosofía de sombra como borde. En lugar de los bordes CSS tradicionales, Vercel usa box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.08): una sombra de desplazamiento cero, desenfoque cero y dispersión de 1 px que crea una línea similar a un borde sin las implicaciones del modelo de caja. Esta técnica permite que los bordes existan en la capa de sombra, lo que posibilita transiciones más suaves, esquinas redondeadas sin recorte y un peso visual más sutil que los bordes tradicionales. Todo el sistema de profundidad se construye sobre pilas de sombras multicapa donde cada capa tiene un propósito específico: una para el borde, otra para la elevación suave y otra para la profundidad ambiental.

Características Clave:

• Geist Sans con interletraje negativo extremo (-2,4 px a -2,88 px en visualización) — el texto como infraestructura comprimida
• Geist Mono para código y etiquetas técnicas con "liga" de OpenType globalmente
• Técnica de sombra como borde: box-shadow 0px 0px 0px 1px reemplaza los bordes tradicionales en toda la interfaz
• Pilas de sombras multicapa para profundidad matizada (borde + elevación + ambiente en declaraciones únicas)
• Lienzo casi blanco puro con texto #171717 — no del todo negro, creando una suavidad de microcontraste
• Colores de acento específicos para flujos de trabajo: Rojo Ship (#ff5b4f), Rosa Preview (#de1d8d), Azul Develop (#0a72ef)
• Sistema de anillo de enfoque usando hsla(212, 100%, 48%, 1) — un azul saturado para accesibilidad
• Insignias en forma de píldora (9999 px) con fondos teñidos como indicadores de estado

2. Paleta de Colores y Roles

Primarios

• Negro Vercel (#171717): Texto principal, encabezados, fondos de superficie oscura. No es negro puro: la ligera calidez evita la dureza.
• Blanco Puro (#ffffff): Fondo de página, superficies de tarjeta, texto de botón sobre oscuro.
• Negro Verdadero (#000000): Uso secundario, --geist-console-text-color-default, utilizado en contextos específicos de consola/código.

Colores de Acento para Flujos de Trabajo

• Rojo Ship (#ff5b4f): --ship-text, el paso de flujo “enviar a producción” — coral-rojo cálido y urgente.
• Rosa Preview (#de1d8d): --preview-text, el flujo de despliegue de vista previa — magenta-rosa vibrante.
• Azul Develop (#0a72ef): --develop-text, el flujo de desarrollo — azul brillante y enfocado.

Colores de Consola / Código

• Azul Consola (#0070f3): --geist-console-text-color-blue, azul para resaltado de sintaxis.
• Púrpura Consola (#7928ca): --geist-console-text-color-purple, púrpura para resaltado de sintaxis.
• Rosa Consola (#eb367f): --geist-console-text-color-pink, rosa para resaltado de sintaxis.

Interactivos

• Azul de Enlace (#0072f5): Color de enlace principal con decoración de subrayado.
• Azul de Enfoque (hsla(212, 100%, 48%, 1)): --ds-focus-color, anillo de enfoque en elementos interactivos.
• Azul de Anillo (rgba(147, 197, 253, 0.5)): --tw-ring-color, utilidad de anillo de Tailwind.

Escala de Neutros

• Gris 900 (#171717): Texto principal, encabezados, texto de navegación.
• Gris 600 (#4d4d4d): Texto secundario, copia descriptiva.
• Gris 500 (#666666): Texto terciario, enlaces silenciados.
• Gris 400 (#808080): Texto de marcador de posición, estados deshabilitados.
• Gris 100 (#ebebeb): Bordes, contornos de tarjeta, separadores.
• Gris 50 (#fafafa): Tinte de superficie sutil, resaltado de sombra interior.

Superficie y Superposición

• Telón de Superposición (hsla(0, 0%, 98%, 1)): --ds-overlay-backdrop-color, telón de modal/diálogo.
• Texto de Selección (hsla(0, 0%, 95%, 1)): --geist-selection-text-color, resaltado de selección de texto.
• Fondo Insignia Azul (#ebf5ff): Fondo de insignia en píldora, superficie azul teñida.
• Texto Insignia Azul (#0068d6): Texto de insignia en píldora, azul más oscuro para legibilidad.

Sombras y Profundidad

• Sombra de Borde (rgba(0, 0, 0, 0.08) 0px 0px 0px 1px): La firma — reemplaza los bordes tradicionales.
• Elevación Sutil (rgba(0, 0, 0, 0.04) 0px 2px 2px): Elevación mínima para tarjetas.
• Pila de Tarjeta (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 tarjeta multicapa completa.
• Borde de Anillo (rgb(235, 235, 235) 0px 0px 0px 1px): Borde de anillo gris claro para pestañas e imágenes.

3. Reglas Tipográficas

Familia Tipográfica

• Primaria: Geist, con alternativas: Arial, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol
• Monoespaciada: Geist Mono, con alternativas: ui-monospace, SFMono-Regular, Roboto Mono, Menlo, Monaco, Liberation Mono, DejaVu Sans Mono, Courier New
• Características OpenType: "liga" habilitado globalmente en todo el texto Geist; "tnum" para números tabulares en epígrafes específicos.

Jerarquía

Principios

• La compresión como identidad: Geist Sans en tamaños de visualización usa de -2,4 px a -2,88 px de interletraje — el espaciado negativo más agresivo de cualquier sistema de diseño importante. Esto crea texto que se siente minificado, como código optimizado para producción. El espaciado se relaja progresivamente a medida que el tamaño disminuye: -1,28 px a 32 px, -0,96 px a 24 px, -0,32 px a 16 px y normal a 14 px.
• Ligaduras en todas partes: Todo elemento de texto Geist habilita "liga" de OpenType. Las ligaduras no son decorativas: son estructurales, creando combinaciones de glifos más compactas y eficientes.
• Tres grosores, roles estrictos: 400 (cuerpo/lectura), 500 (interfaz/interactivo), 600 (encabezados/énfasis). Sin negrita (700) excepto para micro-insignias diminutas. Este rango estrecho de grosores crea jerarquía a través del tamaño y el espaciado, no del grosor.
• Mono para la identidad: Geist Mono en mayúsculas con "tnum" o "liga" sirve como la voz de “consola para desarrolladores” — etiquetas técnicas compactas que conectan el sitio de marketing con el producto.

4. Estilos de Componentes

Botones

Blanco Primario (con borde de sombra)

• Fondo: #ffffff
• Texto: #171717
• Relleno: 0px 6px (mínimo — ancho determinado por el contenido)
• Radio: 6px (suavemente redondeado)
• Sombra: rgb(235, 235, 235) 0px 0px 0px 1px (borde de anillo)
• Al pasar el cursor: el fondo cambia a var(--ds-gray-1000) (oscuro)
• Enfoque: contorno 2px solid var(--ds-focus-color) + sombra var(--ds-focus-ring)
• Uso: Botón secundario estándar

Oscuro Primario (deducido del sistema Geist)

• Fondo: #171717
• Texto: #ffffff
• Relleno: 8px 16px
• Radio: 6px
• Uso: CTA principal (“Start Deploying”, “Get Started”)

Botón Píldora / Insignia

• Fondo: #ebf5ff (azul teñido)
• Texto: #0068d6
• Relleno: 0px 10px
• Radio: 9999px (píldora completa)
• Fuente: 12px grosor 500
• Uso: Insignias de estado, etiquetas, etiquetas de características

Píldora Grande (Navegación)

• Fondo: transparente o #171717
• Radio: 64px–100px
• Uso: Navegación por pestañas, selectores de sección

Tarjetas y Contenedores

• Fondo: #ffffff
• Borde: mediante sombra — rgba(0, 0, 0, 0.08) 0px 0px 0px 1px
• Radio: 8px (estándar), 12px (tarjetas destacadas/de imagen)
• Pila de sombra: rgba(0,0,0,0.08) 0px 0px 0px 1px, rgba(0,0,0,0.04) 0px 2px 2px, #fafafa 0px 0px 0px 1px
• Tarjetas de imagen: 1px solid #ebebeb con radio superior de 12px
• Al pasar el cursor: intensificación sutil de la sombra

Entradas y Formularios

• Radio: estilo estándar con fondo var(--ds-gray-200) al enfocar
• Sombra de enfoque: 1px 0 0 0 var(--ds-gray-alpha-600)
• Contorno de enfoque: 2px solid var(--ds-focus-color) — anillo de enfoque azul consistente
• Borde: mediante técnica de sombra, no borde tradicional

Navegación

• Navegación horizontal limpia sobre blanco, fija
• Logotipo de Vercel alineado a la izquierda, 262x52px
• Enlaces: Geist 14px grosor 500, texto #171717
• Activo: grosor 600 o subrayado
• CTA: botones oscuros en píldora (“Start Deploying”, “Contact Sales”)
• Móvil: colapso con menú hamburguesa
• Menús desplegables de producto con menús multinivel

Tratamiento de Imágenes

• Capturas de pantalla del producto con borde 1px solid #ebebeb
• Imágenes redondeadas en la parte superior: radio 12px 12px 0px 0px
• Las capturas de pantalla de paneles de control/vista previa de código dominan las secciones de características
• Fondos de gradiente suave detrás de las imágenes hero (pastel multicolor)

Componentes Distintivos

Flujo de Trabajo en Cadena

• Cadena horizontal de tres pasos: Develop → Preview → Ship
• Cada paso tiene su propio color de acento: Azul → Rosa → Rojo
• Conectados con líneas/flechas
• La metáfora visual de la propuesta de valor central de Vercel

Barra de Confianza / Cuadrícula de Logos

• Logos de empresas (Perplexity, ChatGPT, Cursor, etc.) en escala de grises
• Desplazamiento horizontal o diseño en cuadrícula
• Separación sutil con borde #ebebeb

Tarjetas de Métricas

• Visualización de número grande (p. ej., “10x faster”)
• Geist 48px grosor 600 para la métrica
• Descripción a continuación en texto de cuerpo gris
• Contenedor de tarjeta con borde de sombra

5. Principios de Diseño

Sistema de Espaciado

• Unidad base: 8px
• Escala: 1px, 2px, 3px, 4px, 5px, 6px, 8px, 10px, 12px, 14px, 16px, 32px, 36px, 40px
• Salto notable: de 16px a 32px — sin 20px ni 24px en la escala primaria

Cuadrícula y Contenedor

• Ancho máximo de contenido: aproximadamente 1200px
• Hero: columna única centrada con generoso relleno superior
• Secciones de características: cuadrículas de 2 a 3 columnas para tarjetas
• Separadores de ancho completo usando border-bottom: 1px solid #171717
• Capturas de pantalla de código/panel de control a ancho completo o contenidas con borde

Filosofía del Espacio en Blanco

• Vacío de galería: Enorme relleno vertical entre secciones (80px–120px+). El espacio en blanco ES el diseño — comunica que Vercel no tiene nada que demostrar ni nada que ocultar.
• Texto comprimido, espacio expandido: El agresivo interletraje negativo en los titulares se contrarresta con generoso espacio en blanco circundante. El texto es denso; el espacio a su alrededor es vasto.
• Ritmo de sección: Las secciones blancas se alternan con secciones blancas — no hay variación de color entre secciones. La separación proviene únicamente de los bordes (bordes de sombra) y el espaciado.

Escala de Radio de Borde

• Micro (2px): Fragmentos de código en línea, tramos pequeños
• Sutil (4px): Contenedores pequeños
• Estándar (6px): Botones, enlaces, elementos funcionales
• Cómodo (8px): Tarjetas, elementos de lista
• Imagen (12px): Tarjetas destacadas, contenedores de imagen (redondeados arriba)
• Grande (64px): Píldoras de navegación por pestañas
• XL (100px): Enlaces de navegación grandes
• Píldora Completa (9999px): Insignias, píldoras de estado, etiquetas
• Círculo (50%): Botón de alternancia de menú, contenedores de avatar

6. Profundidad y Elevación

Filosofía de las Sombras: Vercel tiene posiblemente el sistema de sombras más sofisticado en el diseño web moderno. En lugar de usar sombras para la elevación en el sentido tradicional del Material Design, Vercel usa pilas de sombras multicapa donde cada capa tiene un propósito arquitectónico distinto: una crea el “borde” (0px dispersión, 1px), otra añade suavidad ambiental (2px desenfoque), otra maneja la profundidad a distancia (8px desenfoque con dispersión negativa), y un anillo interior (#fafafa) crea el resaltado sutil que hace que la tarjeta “brille” desde adentro. Este enfoque en capas hace que las tarjetas se sientan construidas, no flotantes.

Profundidad Decorativa

• Gradiente hero: lavado de gradiente multicolor suave y pastel detrás del contenido hero (apenas visible, atmosférico)
• Bordes de sección: 1px solid #171717 (línea oscura completa) entre las secciones principales
• Sin variación de color de fondo — la profundidad proviene enteramente del apilamiento de sombras y el contraste de bordes

7. Lo que se debe y no se debe hacer

Hacer

• Usar Geist Sans con interletraje negativo agresivo en tamaños de visualización (-2,4 px a -2,88 px a 48 px)
• Usar sombra como borde (0px 0px 0px 1px rgba(0,0,0,0.08)) en lugar de bordes CSS tradicionales
• Habilitar "liga" en todo el texto Geist — las ligaduras son estructurales, no opcionales
• Usar el sistema de tres grosores: 400 (cuerpo), 500 (interfaz), 600 (encabezados)
• Aplicar los colores de acento de flujo de trabajo (Rojo/Rosa/Azul) solo en su contexto de flujo de trabajo
• Usar pilas de sombras multicapa para tarjetas (borde + elevación + ambiente + resaltado interior)
• Mantener la paleta de colores acromática — los grises de #171717 a #ffffff son el sistema
• Usar #171717 en lugar de #000000 para el texto principal — el microcalidez importa

No hacer

• No usar interletraje positivo en Geist Sans — siempre es negativo o cero
• No usar grosor 700 (negrita) en el texto de cuerpo — 600 es el máximo, usado solo para encabezados
• No usar border CSS tradicional en las tarjetas — usar la técnica de borde de sombra
• No introducir colores cálidos (naranjas, amarillos, verdes) en el cromo de la interfaz
• No aplicar los colores de acento de flujo de trabajo (Rojo Ship, Rosa Preview, Azul Develop) de forma decorativa
• No usar sombras pesadas (opacidad > 0,1) — el sistema de sombras es de nivel susurro
• No aumentar el interletraje del texto de cuerpo — Geist está diseñado para ejecutarse de forma ajustada
• No usar radio de píldora (9999 px) en botones de acción principal — las píldoras son solo para insignias/etiquetas
• No omitir el anillo interior #fafafa en las sombras de tarjeta — es el brillo que hace que el sistema funcione

8. Comportamiento Responsivo

Puntos de Interrupción

Objetivos Táctiles

• Los botones usan relleno cómodo (8px–16px vertical)
• Los enlaces de navegación de 14px con espaciado adecuado
• Las insignias en píldora tienen 10px de relleno horizontal para objetivos táctiles
• El botón de alternancia del menú móvil usa un botón circular de radio 50%

Estrategia de Colapso

• Hero: 48 px de visualización → se escala hacia abajo, manteniendo el espaciado negativo proporcionalmente
• Navegación: enlaces horizontales + CTA → menú hamburguesa
• Tarjetas de características: 3 columnas → 2 columnas → columna única apilada
• Capturas de pantalla de código: mantener la relación de aspecto, puede desplazarse horizontalmente
• Logos de barra de confianza: cuadrícula → desplazamiento horizontal
• Pie de página: multicolumna → columna única apilada
• Espaciado de sección: 80px+ → 48px en móvil

Comportamiento de Imágenes

• Las capturas de pantalla del panel de control mantienen el tratamiento de borde en todos los tamaños
• El gradiente hero se suaviza/simplifica en móvil
• Las capturas de pantalla del producto usan imágenes responsivas con radio de borde consistente
• Las secciones de ancho completo mantienen el tratamiento de borde a borde

9. Guía de Prompts para Agentes

Referencia Rápida de Colores

• CTA principal: Negro Vercel (#171717)
• Fondo: Blanco Puro (#ffffff)
• Texto de encabezado: Negro Vercel (#171717)
• Texto de cuerpo: Gris 600 (#4d4d4d)
• Borde (sombra): rgba(0, 0, 0, 0.08) 0px 0px 0px 1px
• Enlace: Azul de Enlace (#0072f5)
• Anillo de enfoque: Azul de Enfoque (hsla(212, 100%, 48%, 1))

Ejemplos de Prompts de Componentes

• “Crea una sección hero sobre fondo blanco. Titular a 48px Geist grosor 600, line-height 1.00, letter-spacing -2.4px, color #171717. Subtítulo a 20px Geist grosor 400, line-height 1.80, color #4d4d4d. Botón CTA oscuro (#171717, radio 6px, relleno 8px 16px) y botón fantasma (blanco, borde de sombra rgba(0,0,0,0.08) 0px 0px 0px 1px, radio 6px).”
• “Diseña una tarjeta: fondo blanco, sin borde CSS. Usa pila de sombra: rgba(0,0,0,0.08) 0px 0px 0px 1px, rgba(0,0,0,0.04) 0px 2px 2px, #fafafa 0px 0px 0px 1px. Radio 8px. Título a 24px Geist grosor 600, letter-spacing -0.96px. Cuerpo a 16px grosor 400, #4d4d4d.”
• “Construye una insignia en píldora: fondo #ebf5ff, texto #0068d6, radio 9999px, relleno 0px 10px, 12px Geist grosor 500.”
• “Crea navegación: encabezado blanco fijo. Geist 14px grosor 500 para enlaces, texto #171717. CTA oscuro en píldora ‘Start Deploying’ alineado a la derecha. Borde de sombra inferior: rgba(0,0,0,0.08) 0px 0px 0px 1px.”
• “Diseña una sección de flujo de trabajo mostrando tres pasos: Develop (color de texto #0a72ef), Preview (#de1d8d), Ship (#ff5b4f). Cada paso: etiqueta Geist Mono 14px en mayúsculas + título Geist 24px grosor 600 + descripción 16px grosor 400 en #4d4d4d.”

Guía de Iteración

1. Usar siempre sombra como borde en lugar de border CSS — 0px 0px 0px 1px rgba(0,0,0,0.08) es la base
2. El interletraje escala con el tamaño de fuente: -2,4 px a 48 px, -1,28 px a 32 px, -0,96 px a 24 px, normal a 14 px
3. Solo tres grosores: 400 (leer), 500 (interactuar), 600 (anunciar)
4. El color es funcional, nunca decorativo — los colores de flujo de trabajo (Rojo/Rosa/Azul) marcan solo las etapas de la cadena
5. El anillo interior #fafafa en las sombras de tarjeta es lo que da a las tarjetas de Vercel su sutil brillo interior
6. Geist Mono en mayúsculas para etiquetas técnicas, Geist Sans para todo lo demás