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
- 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.
- Augen Pro — La presentación blanca de Apple presenta un azul eléctrico, aséptico y minimalista, como único acento en un espacio monocromático.
- Antimetal — Una crónica editorial en papel color crema: una mañana tranquila en una revista científica, donde la sobriedad transmite confianza y las serifas hacen el trabajo pesado.
- Perk — Lima eléctrica sobre papel pergamino tibio
- Ditto — Un taller bañado por el sol donde se crean muestras de flores silvestres. Superficies de color crema cálido, una base de color amarillo vibrante, tintas azul marino intenso, formas orgánicas de color que florecen tras la pieza.
- Officevibe — Una revista editorial impresa en papel de un cálido color crema. Imagínese un ensayo reflexivo sobre gestión de recursos humanos, presentado como un producto: una tipografía cursiva con serifa que susurra a través de una moderna interfaz azul.