Cursor
Un acogedor taller de pergamino, iluminado por brasas humeantes.
Cursor utiliza una tipografía cálida, similar al pergamino: un lienzo cremoso, texto negro intenso y un único acento naranja brillante que activa enlaces y selecciones en lugar de rellenar botones. Los encabezados, configurados en CursorGothic con un grosor de 400, presentan un espaciado entre letras que disminuye gradualmente a medida que aumenta su tamaño; la autoridad se logra mediante la sobriedad y el grosor fino de las letras, en lugar de la negrita. Las superficies se mantienen planas y con apariencia de papel, con bordes delgados y suaves sombras grises cálidas; las esquinas conservan una nitidez de 4 píxeles en todo el texto. EB Garamond se utiliza selectivamente para subtítulos y prosa, mientras que berkeleyMono se encarga del código, las etiquetas y los metadatos, lo que le confiere al sistema una personalidad tipográfica que se asemeja más a una revista literaria que a un panel de control SaaS.
Ancho máximo: 1300px centrado, margen de 24px. Navegación superior: encabezado transparente de 52px de alto con logotipo y marca de texto a la izquierda, 4 enlaces de navegación centrados, grupo "Iniciar sesión / Contacto / Descargar" alineado a la derecha. Hero: encabezado alineado a la izquierda + bloque doble de llamada a la acción con texto que corre desde la parte superior izquierda, luego una tarjeta de maqueta de producto de ancho completo que abarca todo el ancho de la página. Franja de confianza: una fila horizontal de 8 mosaicos de logotipo en una sola línea a lo largo del ancho de la sección. Las secciones de características alternan texto a la izquierda y una captura de pantalla a la derecha en un diseño de dos columnas, cada una 50/50, con un ritmo vertical de 64-96px entre secciones. Todas las capturas de pantalla de características son maquetas de ventanas con el mismo estilo de macOS. Pie de página: cuadrícula de cuatro columnas de enlaces con la marca a la izquierda. Las secciones están separadas por un amplio espacio de respiración en lugar de divisores; el propio lienzo color crema proporciona la separación.
Las capturas de pantalla del producto son protagonistas: maquetas de ventanas grandes de macOS que muestran el IDE Cursor en acción: pestañas de archivos, vistas de diferencias, planes de agentes, paneles de terminal e integración con Slack/chat. Cada maqueta de ventana está enmarcada con una tarjeta #f2f1ed con un contraste suave y cálido. Una foto de paisaje tenue (montañas/horizonte desértico) se extiende más allá de la sección principal, añadiendo calidez sin competir con la interfaz de usuario. Los logotipos de los clientes ( Stripe, OpenAI, Linear, Datadog, NVIDIA, Figma, Ramp, Adobe) se presentan como letras monocromáticas dentro de mosaicos Linen con forma de píldora. No hay fotografías de personas, ilustraciones ni elementos gráficos decorativos abstractos; todo el peso visual se centra en la interfaz de usuario y la marca del producto. Los iconos son glifos delgados y monolineales rellenos con #7a7974 Ash, nunca cromáticos.
Paleta
Neutral
- Ink
#26251e— Texto principal, fondo del botón de acción principal, texto de navegación: un tono cálido, casi negro, nunca puro #000 - Parchment
#f7f7f4— El fondo de la página, el lienzo principal, es de un tono crema cálido que suaviza el contraste y crea la sensación de impresión con tinta en lugar de impresión digital. - Bone
#f2f1ed— Las superficies de cartón y los recipientes elevados, de un tono más oscuro que el lienzo, crean un efecto de "papel sobre papel" en capas y sin bordes. - Linen
#e6e5e0— Relleno neutro claro para botones sobre superficies oscuras. - Stone
#cdcdc9— Bordes finos, separadores, particiones sutiles: líneas de 1 píxel en tonos cálidos. - Mist
#a1a19f— Texto auxiliar de tercer nivel, subtítulos: entre el texto silenciado y el texto secundario.
Tipografía
De 12 a 72 píxeles · 6 pasos
- CursorGothic — reemplazo: Inter · esquemas 400, 500 · La fuente principal se utiliza en la interfaz de usuario, los encabezados, la navegación, el texto principal y el diseño del producto. Los encabezados, con un grosor de 400 puntos y un espaciado entre letras que disminuye gradualmente (de -0,005em a 22px a -0,03em a 72px), son una característica distintiva de la fuente: los encabezados nunca aparecen en negrita. Las funciones de fuente ss08, ss09 y tnum activan alternativas estilísticas y figuras tabulares.
- EB Garamond — reemplazo: Iowan Old Style · esquemas 400, 500 · CursorGothic, una tipografía editorial con serifa para subtítulos individuales, texto principal y datos tabulares, añade un toque literario a la interfaz.
- berkeleyMono — reemplazo: ui-monospace · esquemas 400, 500 · Monospace, utilizado para bloques de código, fragmentos de línea de comandos, metadatos, rutas de archivo y etiquetas de desarrollador, es un lenguaje técnico.
Intervalos y forma
| Objetivo | Significado |
|---|---|
| Densidad | denso |
| Paso básico | 8px |
| Radio del botón | 4px |
| Radio de la tarjeta | 4px |
| Oscuridad | no - bordes en lugar de sombras |
| Entre secciones | 64-96px |
| Ancho de página | 1300px |
La IA construirá tu sitio web al estilo de Cursor 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
- Amplemarket — Un lugar de trabajo bañado por el sol y cubierto de confeti.
- Getharvest — Un escritorio a la hora dorada: un lienzo de color crema cálido, postales blancas colgadas en el lienzo y una sola llama de color naranja brillante.
- Drive Capital — Póster retro de viaje por carretera en papel cálido
- Wealthsimple — Almacén revestido de cachemir con iluminación de galería
- Huddle — Fichas de inventario en tonos pastel sobre papel color crema.
- Fuser — Polaroids dispersas en la pared de trabajo de un diseñador.
- Campsite — Un puesto de trabajo de editor bañado por el sol: papel color crema cálido con un único sello de intención naranja.
- Redis Agency — El taller editorial, abierto fuera del horario habitual, es un lugar completamente a oscuras donde todo el trabajo de diseño de marca se realiza con fuentes con serifa y un único rábano rojo.
- AI Product Generation — Estudio fotográfico editorial sobre papel blanco: título como portada, color naranja para resaltar el contenido editorial.
- Getanchor — Tono terracota cálido sobre un fondo crema desteñido por el sol.
- Flatfile — Un diario de datos silencioso sobre pergamino tibio.
- Inthememory — Un dibujo arquitectónico sobre mármol blanco con una única luz cálida. Una tranquila sala de datos editorial donde la tinta turquesa intensa y los controles en forma de píldora flotan sobre superficies blancas nítidas, interrumpidas únicamente por un toque de naranja.