Mercury
Orillas alpinas al atardecer
Mercury se inspira en la estética bancaria alpina: un lienzo casi negro (#171721) crea una atmósfera cinematográfica, similar a la de un observatorio, donde el contenido se presenta como tarjetas de grafito ligeramente más claras. La interfaz es predominantemente monocromática: texto marfil sobre ónix, con un único elemento azul cobalto vibrante (#5266eb) utilizado exclusivamente para la operación principal de "Abrir cuenta". La tipografía aporta la máxima expresividad: una fuente de visualización personalizada de 480 (ni negrita ni clara) combinada con una fuente de cuerpo sutil de 400 crea un estilo seguro pero nunca estridente. Los componentes son planos y sin marco, y se basan en un radio de tarjeta de grafito de 12 px y controles en forma de cápsula para definir la estructura en lugar de las sombras. El elemento fotográfico principal, que ocupa toda la superficie de la página (montañas brumosas contra una mesa solitaria), establece el tono antes de que se active la interfaz de usuario, y cada elemento posterior mantiene esa oscuridad tranquila y elegante.
Todo el contenido está diseñado en un estilo oscuro de ancho completo. La pantalla principal es una foto de 100 px de ancho completo con un título centrado, subtítulo y un bloque de formulario para recopilar información de contacto por correo electrónico (ancho máximo ~640 px). Debajo de la pantalla principal, el contenido está organizado en secciones de un ancho máximo de 1200 px con márgenes verticales de 72 px, alternando entre un diseño de dos columnas de texto a la izquierda y una imagen a la derecha, y tarjetas de descripción de productos de tres columnas. La navegación es una barra superior transparente superpuesta a la pantalla principal, que, al desplazarse, se transforma en un relleno oscuro sólido que recuerda al vidrio esmerilado (fondo desenfocado). El pie de página es oscuro con texto de notas. El ritmo vertical es generoso: densidad espaciosa con mucho espacio entre secciones. No hay navegación lateral; toda la navegación se encuentra en la barra superior.
La sección principal está dominada por fotografías cinematográficas a pantalla completa: paisajes atmosféricos e inspiradores (montañas brumosas, espacios de trabajo aislados en la naturaleza) que presentan la banca como una experiencia contemplativa y sublime. Las fotografías son de alta calidad, ligeramente desaturadas, con tonos fríos y una sutil superposición oscura para preservar la legibilidad del texto. Debajo de la sección principal, las imágenes se alternan con capturas de pantalla de la interfaz de usuario del producto y fondos abstractos y atmosféricos. No hay ilustraciones ni iconos que se asemejen a obras de arte; los elementos visuales son fotográficos o puramente funcionales. El estilo de los iconos en toda la interfaz de usuario es minimalista, con líneas y glifos de color marfil, utilizados en la navegación, los botones y los formularios.
Paleta
Marca
- Cobalt
#5266eb— El color púrpura se utiliza para los botones rellenos, los estados de navegación seleccionados y los momentos de conversión que requieren enfoque.
Neutral
- Onyx Canvas
#171721— Fondo de la página principal, superposición básica para la pantalla de inicio, lienzos para el pie de página y las secciones. - Graphite Card
#1e1e2a— Las superficies en relieve del cartón y las secciones son un tono más claras que el lienzo, lo que crea una separación uniforme. - Obsidian Button
#272735— Botones adicionales, fondos de formulario integrados, superficies interactivas discretas. - Slate Border
#70707d— Separadores de espesor medio y límites estructurales entre los bloques de contenido. - Mist Border
#e2e3ed— Bordes finos, casi imperceptibles, contornos de botones apenas perceptibles, bordes de campos de entrada: un borde claro sobre un fondo oscuro. - Ash Text
#c3c3cc— Texto principal, texto auxiliar, etiquetas adicionales: jerarquía simplificada sin pérdida de legibilidad.
Tipografía
De 12 a 65 píxeles · 9 pasos
- arcadia — reemplazo: Inter · esquemas 360, 400, 420, 480 · Interfaz principal y de usuario: una fuente para navegación, texto principal, botones, campos de entrada, etiquetas y texto auxiliar, con un grosor de 400 para el texto principal y 480 para el texto de énfasis. La escala de grosor intermedio (360, 420, 480) en lugar de la estándar (300/400/600) le da al texto Mercury una apariencia claramente equilibrada: nunca en negrita, nunca delgada, siempre mesurada.
- arcadiaDisplay — reemplazo: Söhne Breit · esquemas 360, 480, 530 · La tipografía para los títulos y elementos decorativos se utiliza en un grosor de 480 para todos los tamaños de título, desde 28 px hasta 65 px, mientras que el grosor de 530 se reserva para los elementos decorativos de mayor tamaño. El interlineado bajo (1,1–1,2) y el espaciado positivo entre letras (0,01–0,02 em) confieren al texto decorativo un aspecto amplio y arquitectónico, en contraposición a la estructura comprimida propia del texto editorial.
Intervalos y forma
| Objetivo | Significado |
|---|---|
| Densidad | promedio |
| Paso básico | 12px |
| Radio del botón | 32px |
| Radio de la tarjeta | 12px |
| Oscuridad | no - bordes en lugar de sombras |
| Entre secciones | 72px |
| Ancho de página | 1200px |
La IA construirá tu sitio web al estilo de Mercury 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
- Origin Financial — Una galería nocturna de opulencia discreta. Una sala silenciosa, casi oscura, donde grandes tipografías con serifa y unos pocos paneles de colores iluminados crean la sensación de que las finanzas son una obra de arte cuidadosamente seleccionada.
- Air — Escultura "Cielo de medianoche a través del cristal"
- Slash — Bóveda de medianoche con libros de contabilidad dorados
- dope.security — Terminal de medianoche con balizas moradas
- Modal — Un terminal fosforescente en una sala de servidores a oscuras: la única fuente de luz es de un color verde brillante.
- Giga — Horizonte de medianoche sobre obsidiana escarchada
- Dovetail — Centro de control de planos a medianoche
- Dovetail — Un plano bajo una luna negra: líneas gráficas apenas visibles, fuente blanca, un destello púrpura.
- AgentQL — Auroras boreales sobre la terminal por la noche.
- Supabase — Un editor de código a medianoche con un punto verde fosforescente: un único pulso cromático sobre un mar de polvo de carbón.
- Changelog — La consola del observatorio tras un cristal oscuro
- 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.