Calendly
Tinta azul oscuro sobre mármol frío
Calendly transmite una sensación de calma y confianza en el espacio de planificación: un lienzo casi blanco con amplio espacio para respirar, tarjetas de producto blancas nítidas que flotan sobre un fondo gris frío, y toda la tipografía en tinta azul oscuro en lugar de negro puro. El elemento definitorio es el color azul oscuro (#0b3558), utilizado en todas partes donde aparece texto (encabezados, botones, iconos, enlaces), lo que suaviza toda la interfaz, haciéndola más cálida y elegante que la típica página de inicio de SaaS. Un único azul brillante (#006bff) se utiliza para todas las acciones principales, y toques decorativos de rosa y azul que se extienden más allá de los diseños de producto añaden calidez sin crear desorden. Los componentes se mantienen discretos: bordes finos de 1 px, sutiles sombras con tinte azul, radios de tarjeta grandes de 24 px y esquinas de botón de 8 px que se sienten intencionados en lugar de insulsos.
Ancho máximo de 1200 px, centrado, con amplios márgenes en escritorio. La pantalla principal está dividida en dos columnas: la columna izquierda contiene un encabezado de 80 px + texto del cuerpo + botones de inicio de sesión apilados, mientras que la columna derecha contiene una tarjeta de widget de reserva con elementos decorativos en el fondo. Debajo de la pantalla principal hay una única franja de ancho completo con el logotipo de Trust. Las secciones subsiguientes alternan entre bloques de encabezado centrados (H2 + subtexto + llamada a la acción opcional), seguidos de bloques de dos columnas que describen características (texto a la izquierda/producto a la derecha o producto a la izquierda/texto a la derecha) con elementos decorativos de acento detrás de cada imagen de producto. Las cuadrículas de tarjetas se usan raramente: el diseño favorece las secciones emparejadas colocadas una al lado de la otra en lugar de cuadrículas de varias columnas. El espaciado entre secciones varía de 48 a 64 px. La navegación es una barra superior fija de 64 px con el logotipo a la izquierda, un menú centrado y un grupo de llamadas a la acción a la derecha.
El elemento visual principal son las capturas de pantalla del producto: maquetas sencillas de la interfaz de usuario del calendario de reservas, presentadas en tarjetas blancas nítidas con esquinas anchas y redondeadas. Diseño decorativo: cada tarjeta de producto está rodeada por una suave mancha de color púrpura coral (#e55cff) o azul celeste (#0099ff), ligeramente desplazada y desenfocada, creando un efecto de collage en lugar de una captura de pantalla plana. No hay fotografías ni imágenes de estilo de vida: todos los elementos visuales representan la interfaz de usuario del producto, formas abstractas de acento o logotipos monocromáticos de socios en la barra de confianza. Los iconos son lineales con un grosor de línea de 1,5 a 2 píxeles, monocromáticos, en azul oscuro (Ink Navy) o azul (Signal Blue).
Paleta
Marca
- Ink Navy
#0b3558— Texto principal, encabezados, iconos, fondo oscuro para llamadas a la acción, enlaces de navegación. - Signal Blue
#006bff— Llamada a la acción principal (CTA), navegación activa, énfasis en los enlaces, estados seleccionados
Neutral
- Carbon
#0a0a0a— Texto en negro puro (opción alternativa), glifo del logotipo, relleno de iconos. - Slate Gray
#476788— Texto principal adicional, texto de apoyo, etiquetas atenuadas. - Mist Gray
#a6bbd1— Texto deshabilitado, etiquetas de funciones inactivas, contornos de iconos claros. - Cloud
#f8f9fb— Lienzo de página, fondo del pie de página, superficie adicional - Paper
#ffffff— Superficies de tarjetas, paneles en relieve, texto de botones sobre fondo oscuro. - Pebble
#f0f3f8— Imágenes de fondo para iconos, sombreado de campos de entrada, separadores sutiles, efectos al pasar el cursor.
Tipografía
De 12 a 80 píxeles · 10 pasos
- Gilroy — reemplazo: Manrope · esquemas 400, 500, 600, 700 · Todo el texto de la interfaz. Gilroy es una tipografía sans-serif humanista geométrica con aberturas amplias y contraste de trazo uniforme; sus variantes en negrita (700) se utilizan para los títulos, mientras que las variantes de 500 a 600 se utilizan para los botones y subtítulos. Reemplazar con Manrope o Inter.
- Gilroy — reemplazo: Inter · esquemas 400 · Texto principal y etiquetas de interfaz de usuario de uso general: el grosor de fuente de 400 puntos garantiza que los textos largos sean legibles sin que resulten pesados.
- Gilroy — reemplazo: Inter · esquemas 500 · Encabezados secundarios y texto del cuerpo resaltado: la fuente 14/500 es la herramienta principal para los encabezados de las tarjetas y las etiquetas en línea.
Intervalos y forma
| Objetivo | Significado |
|---|---|
| Densidad | denso |
| Paso básico | 8-16px |
| Radio del botón | 8px |
| Radio de la tarjeta | 24px |
| Oscuridad | no - bordes en lugar de sombras |
| Entre secciones | 48-64px |
| Ancho de página | 1200px |
La IA construirá tu sitio web al estilo de Calendly 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
- Mollie — Un mostrador de cachemir, un libro de contabilidad oscuro. Deja amplio espacio en blanco para el diseño editorial alrededor del texto negro y refuerza los puntos relacionados con el producto con cremas cálidas, marrones espresso y fotos táctiles de métodos de pago reales.
- Kagi — Una sala de lectura independiente. Crea un espacio blanco abierto alrededor de un texto en grafito llamativo, utilizando sutiles toques de color púrpura y superficies en tonos pastel cálidos para romper la tranquilidad.
- Milanote — Milanote es un estudio creativo especializado. Crea páginas editoriales con estilo de galería utilizando paneles visuales flotantes: paredes con marcos oscuros, espacio de visualización en blanco y capturas de pantalla que parecen objetos reales con una sutil profundidad.
- Co2 — Un atlas climático a la luz del invierno. Crea páginas que evocan un paisaje aéreo, donde los títulos con serifa, los datos codificados por categorías y las imágenes heladas resaltan los amplios márgenes blancos.
- GitButler — El color turquesa se aprecia al final del texto. Una combinación de titulares con serifa de alto contraste, sutiles cuadrículas técnicas, superficies de grafito cálido y un discreto toque turquesa.
- ElevenLabs — Un reportaje fotográfico en tonos crema cálidos con titulares sutiles. Un cuaderno de estilo Bauhaus: papel color blanco hueso, tinta negra y un único detalle en morado y naranja para la presentación del producto.
- Awesomic — Malla de zinc editorial con signos de puntuación naranjas que recuerdan al confeti.
- Monad — Revista técnica editorial en pergamino cálido
- Dub — Panel de control de papel de arroz mate de Link
- Seline Analytics — Una mesa analítica tranquila sobre papel tibio
- Notion — Un cuaderno de papel caliente bajo el sol del mediodía.
- Anthropic — Una revista científica de campo impresa en papel vitela de tonos cálidos: superficies de marfil sereno, encabezados editoriales con serifa y un único detalle en color arcilla que aparece solo cuando se requiere acción.