Superlist
Un espacio de trabajo nocturno con brasas de coral: una tranquila superficie de aplicación color berenjena donde una sola chispa naranja cálida señala cada acción.
Superlist utiliza un lenguaje de productividad en tonos morados medianoche: berenjena profunda, coral cálido como único color primario y grandes titulares sans-serif que capturan toda la atmósfera. La interfaz evoca la sensación de trabajo concentrado hasta altas horas de la noche: silencioso, estratificado y seguro, con el color utilizado solo como puntuación funcional en llamadas a la acción, estados activos y puntos clave. Las superficies están estratificadas en sutiles tonos oscuros con un matiz morado (#181824 → #26253b), evitando el negro puro para asegurar que la profundidad se sienta cálida en lugar de estéril. Los componentes presentan generosas formas redondeadas (tarjetas de 20px, botones de píldora), sombras suaves y "respiran" a través de cómodos espacios de 10-16px en lugar de cuadrículas ajustadas. La voz del titular lo es todo: un peso de 600 puntos a 70-88px con un espaciado de letras ajustado de -0.02em trata el texto como tipográfico en lugar de interfaz de usuario; está más cerca de un texto editorial que de un SaaS.
Las secciones oscuras abarcan todo el ancho de la página, con contenedores de contenido centrados y de ancho máximo. La sección principal está centrada verticalmente y contiene un título, un subtítulo y una llamada a la acción (CTA), seguida de una gran captura de pantalla del producto que se superpone a la siguiente sección. Las secciones subsiguientes alternan entre bloques de texto centrados y cuadrículas de tarjetas. La sección de reseñas utiliza una cuadrícula de tres columnas con tarjetas de reseñas y 16 márgenes. La navegación es una única barra superior con un logotipo a la izquierda, enlaces centrados y acciones de inicio de sesión a la derecha; no hay barra lateral fija ni megamenú. Los márgenes entre secciones son amplios (16 márgenes), lo que crea un ritmo editorial espacioso en lugar de una cuadrícula de producto densa.
El espacio visual está dominado por capturas de pantalla del producto: un marco grande con esquinas redondeadas, que muestra la interfaz real de la aplicación, llena las secciones principal y secundaria. Las fotos son mínimas y se usan solo como avatares de usuario o vistas previas de contenido multimedia dentro de la aplicación (por ejemplo, la imagen del concierto en el panel derecho de la maqueta del producto). Los logotipos en la barra de confianza son símbolos de texto blancos planos y discretos. No hay ilustraciones decorativas, ni gráficos abstractos, ni renderizaciones 3D. La estrategia visual consiste en mostrar el producto a escala, dejar que la tipografía transmita la emoción y usar el coral como único color de acento.
Paleta
Marca
- Coral Ember
#ff4a36— El naranja se utiliza como color de acento secundario para detalles decorativos y para resaltar señales poco frecuentes. No debe utilizarse como color principal para llamadas a la acción.
Neutral
- Aubergine Canvas
#181824— El fondo de la página, el lienzo principal, es de un tono cálido y oscuro que sustituye al negro puro, lo que hace que la interfaz de usuario parezca tener capas en lugar de ser plana. - Elevated Plum
#26253b— Superficies de tarjetas, campos de entrada, contenedores de navegación: un paso más fácil que con Canvas para crear profundidad sin un límite visible. - Pure White
#ffffff— Encabezados principales, texto de botones y contornos de iconos: máximo contraste sobre un fondo oscuro. - Fog Text
#696f81— El texto principal, los títulos secundarios y los bordes atenuados presentan una relación de contraste de 7:1 para una lectura cómoda sobre un fondo color berenjena. - Ash Text
#8e8da0— Se admite un color neutro para los elementos secundarios de la interfaz de usuario, los divisores y las etiquetas atenuadas. No debe utilizarse como color principal para las llamadas a la acción. - Mist Highlight
#a3a3a7— Los sutiles bordes, divisores y elementos de navegación inactivos crean un tono neutro discreto que, sin embargo, destaca sobre el lienzo.
Tipografía
de 12 a 88 píxeles · 9 pasos
- sans-serif — reemplazo: Inter · esquemas 400 · sans-serif: se encuentra en los datos extraídos, pero no ha sido descrito por la IA.
- Haffer XH SemiBold — reemplazo: Inter Tight · esquemas 400, 600 · Fuente principal para títulos y encabezados. Se utiliza con un tamaño de 70–88 px para los encabezados principales, con un espaciado entre letras de -0,02 em y un grosor de 600. El espaciado reducido y la gran altura de las letras confieren a los encabezados un aspecto editorial, haciendo que la interfaz oscura se asemeje más a la portada de una revista que a un panel de control. Sustituir por Inter Tight o General Sans en negrita.
- Jersey 10 — reemplazo: Anybody · esquemas 400 · Una fuente grande y decorativa para resaltar números y textos. Se usa con moderación en tamaños muy grandes para crear acentos tipográficos. Puede reemplazarse por Anybody o Cabinet Grotesk.
Intervalos y forma
| Objetivo | Significado |
|---|---|
| Densidad | promedio |
| Paso básico | 10-16px |
| Radio del botón | 100px |
| Radio de la tarjeta | 20px |
| Oscuridad | sombras suaves |
| Entre secciones | 80px |
| Ancho de página | 1200px |
La IA construirá tu sitio web al estilo de Superlist 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
- DNA — Observatorio de Medianoche visto a través de una lente de partículas
- Abetterlou — Sparks on Saddle Leather: una tipografía cálida y cremosa que brilla sobre un fondo negro café intenso, con botones de color ámbar dorado que dan la sensación de metal caliente presionado contra la página.
- Galileo-ft — Una cabina de mando en el espacio profundo con señales de color azul eléctrico.
- Decide AI — Observatorio a medianoche - señal de la casa de la moneda
- 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.
- Spellbook — Una sala de audiencias a medianoche iluminada con tinta color coral: una superficie editorial oscura donde el único sonido es el cálido trazo de la pluma naranja.
- Linear — instrumento de precisión de medianoche
- 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.
- Hyperstudio — El diseño está grabado en obsidiana. Texto y finas líneas enmarcan un espacio blanco de color negro puro, con ocasionales marcas doradas en forma de brújula que indican el camino.
- Air — Escultura "Cielo de medianoche a través del cristal"
- Raycast — Centro de mando de medianoche, neón coral
- dope.security — Terminal de medianoche con balizas moradas