Letters
Una cita matutina en una clínica al aire libre: una mesa blanca estéril bajo un techo azul claro, repleta de instrumentos quirúrgicos azules.
Letters es una herramienta para escribir cartas médicas que comienza con un encabezado degradado de cielo abierto —una suave franja azul atmosférica que crea una atmósfera tranquila y clínica— antes de pasar a un espacio de trabajo blanco y limpio. El sistema está diseñado en un estilo monocromático: un lienzo blanco limpio, texto casi negro (#070709), llamadas a la acción oscuras en forma de píldora y tarjetas redondeadas que flotan sobre sutiles sombras. Un único azul brillante (#2597d0) está reservado para la puntuación funcional —iconos, micrográficos, reproductores de formas de onda— nunca se usa para botones o rellenos grandes. La tipografía utiliza Open Runde, una sans-serif humanista geométrica con un espaciado de letras negativo agresivo en tamaños de pantalla grandes (-0.04em a 80px), que comprime los encabezados en bloques seguros. Los componentes se sienten ligeros, como un instrumento médico: biseles delgados, espaciado generoso entre tarjetas, botones en forma de píldora y un uso discreto de la elevación que permite que el encabezado en forma de cielo haga el trabajo emocional.
Una página de inicio con degradado azul cielo abarca todo el ancho de la página, con un título y subtítulo centrados, y un botón de llamada a la acción debajo. Transiciona suavemente a un área de contenido blanca con un amplio espacio entre secciones (80-120 px). Las secciones destacadas utilizan una cuadrícula de dos columnas con tarjetas grandes y redondeadas (radio de 18-32 px) de proporciones iguales. Los encabezados de sección siempre están centrados, en una sola columna, encima de la cuadrícula de tarjetas. La navegación es una barra superior blanca fija con un grupo de enlaces centrados y acciones de inicio de sesión alineadas a la derecha. El ritmo general es una única franja principal atmosférica, seguida de secciones blancas y #f5f5f5 alternadas con un espacio vertical constante. No hay barra lateral, ni megamenú, ni diseños asimétricos: la página se siente como una columna tranquila y simétrica.
El diseño visual se centra casi por completo en la interfaz de usuario del producto: no hay fotos de estilo de vida ni renders 3D abstractos. El lenguaje visual se basa en tarjetas de producto que muestran la interfaz nativa de la aplicación: una comparación de documentos "Antes" y "Después", un área de carga con un borde punteado y un reproductor de audio en forma de onda. El único elemento visual atmosférico es el degradado del cielo en la imagen principal. Los iconos son planos, monocromáticos (sobre, micrófono, marca de verificación) con grosores de línea uniformes y sin variaciones rellenas. El estilo de ilustración es sobrio: las maquetas del producto se muestran sobre un fondo blanco, ligeramente rotadas para crear profundidad, sin inclinación pronunciada. Una fuente manuscrita (The Doctor) es el único elemento orgánico/artesanal, utilizado únicamente para evocar la escritura clínica de la tarjeta "Antes".
Paleta
Marca
- Surgical Blue
#2597d0— Los iconos, un icono de micrófono, un reproductor de ondas sonoras y pequeños detalles funcionales crean una única nota cromática en toda la interfaz.
Neutral
- Obsidian
#070709— El texto principal, los botones de llamada a la acción rellenos y los elementos oscuros de la interfaz de usuario (se elige un tono casi negro en lugar del color #000 puro para suavizar el contraste con el fondo blanco). - Paper White
#ffffff— El fondo de la página, las superficies de las tarjetas y el texto de los botones constituyen el lienzo principal para todas las secciones que se encuentran debajo del elemento principal. - Cloud Gray
#f5f5f5— Las superficies adicionales para las tarjetas y los fondos de las secciones separan los bloques funcionales del lienzo principal. - Sky Tint
#d7e6f5— El tono del marco de cartón y el sutil matiz azul de la superficie crean una sensación de ambiente, en lugar de monotonía. - Charcoal
#60606c— Texto principal, texto secundario y bordes atenuados: un color neutro dominante para el contenido que no sea un encabezado. - Slate
#8b8b8b— Texto secundario y estados fronterizos inactivos: se utilizan para indicar ubicaciones y garantizar la accesibilidad para personas con discapacidad.
Tipografía
De 12 a 80 píxeles · 8 pasos
- sans-serif — reemplazo: Inter · esquemas 400, 700 · sans-serif: se encuentra en los datos extraídos, pero no ha sido descrito por la IA.
- Open Runde — reemplazo: Inter Tight · esquemas 400, 500, 600, 700, 900 · La tipografía principal para títulos y navegación es una humanista geométrica, con un espaciado entre letras ajustado en tamaños grandes; -0,04em a 80px comprime el título en un único bloque de gran impacto. Úsela para todos los títulos, navegación y textos grandes.
- Inter — reemplazo: system-ui · esquemas 400, 500 · Texto secundario del cuerpo y de la interfaz de usuario: se utiliza para títulos pequeños, elementos de navegación y enlaces en línea donde se busca un ritmo de lectura más neutro. Se combina con Open Runde para crear un contraste jerárquico.
Intervalos y forma
| Objetivo | Significado |
|---|---|
| Densidad | denso |
| Paso básico | 12-16px |
| Radio del botón | 100px |
| Radio de la tarjeta | 18px |
| Oscuridad | no - bordes en lugar de sombras |
| Entre secciones | 80-120px |
| Ancho de página | 1200px |
La IA construirá tu sitio web al estilo de Letters 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
- Integrated Biosciences — Laboratorio de bioluminiscencia a medianoche
- Mintlify — Un jardín de nubes sobre una mesa de cristal. El cielo dibujado a mano y el documental se entrelazan: el único punto donde el color y el concepto colisionan antes de que la página se desvanezca en un blanco monástico.
- Gleap — Un espacio de trabajo decorado en cálidos tonos crema con detalles en grafito: un estudio donde los puntos de tinta negra mate parecen flotar sobre la arquitectura de lino.
- Render — El diseño está realizado en aluminio cepillado. La interfaz tiene la apariencia de un documento de ingeniería limpio y geométrico: espacios en blanco, líneas finas y una única línea púrpura que resalta la acción.
- Grafbase — Dibujo técnico sobre mármol frío
- Slash — Bóveda de medianoche con libros de contabilidad dorados
- Modal — Un terminal fosforescente en una sala de servidores a oscuras: la única fuente de luz es de un color verde brillante.
- Whimsical — Tinta color ciruela intenso sobre fondo lavanda: un cuaderno de estudio creativo que también sirve como pizarra técnica.
- AgentQL — Auroras boreales sobre la terminal por la noche.
- Alveos One — Un refugio acogedor hecho de piedras de río: una tranquila sala de meditación con luz cremosa donde un único objeto de grafito reposa en un suave resplandor ámbar.
- GitHub — Un panel de control espacial con puntos de control bioluminiscentes: un espacio de trabajo oscuro y atmosférico donde un único resplandor verde señala el camino a seguir.
- Buddy — Dibujo técnico sobre papel cuadriculado. La superficie blanca del dibujo está marcada con una cuadrícula apenas visible, aplicada con tinta casi negra, con marcas de color verde lima fluorescente y trazos iridiscentes con degradado.