Superlist
Un espazo de traballo nocturno con brasas de coral: unha superficie de aplicación de berenxena tranquila onde unha única faísca laranxa cálida sinala cada acción.
Superlist emprega unha linguaxe de produtividade en tons púrpura medianoite: berenxena intensa, coral cálido como única cor primaria e grandes titulares sans-serif que capturan toda a atmosfera. A interface evoca a sensación de traballo centrado a altas horas da noite: tranquilo, en capas e seguro, coa cor utilizada só como puntuación funcional en chamadas á acción, estados activos e puntos clave. As superficies están superpostas en tons escuros sutís cun matiz púrpura (#181824 → #26253b), evitando o negro puro para garantir que a profundidade se sinta cálida en lugar de estéril. Os compoñentes presentan formas redondeadas xenerosas (tarxetas de 20 px, botóns de pílula), sombras suaves e "respiran" a través de cómodos espazos de 10-16 px en lugar de cuadrículas axustadas. A voz do titular é todo: un peso de 600 puntos a 70-88 px cun espazado entre letras axustado de -0,02 em trata o texto como tipográfico en lugar de interface de usuario; está máis preto dunha copia editorial que dun SaaS.
As seccións escuras abarcan todo o ancho da páxina, con contedores de contido centrados de ancho máximo. A sección principal está centrada verticalmente e contén un título, un subtexto e unha chamada á acción (CTA), seguidos dunha captura de pantalla grande do produto que se superpón á seguinte sección. As seccións posteriores alternan entre bloques de texto centrados e grellas de tarxetas. A sección de reseñas usa unha grella de tres columnas con tarxetas de reseñas e 16 canles. A navegación é unha única barra superior cun logotipo á esquerda, ligazóns centradas e accións de inicio de sesión á dereita, sen barra lateral fixa nin megamenú. As canles entre as seccións son xenerosas (16 canles), creando un ritmo editorial espazoso en lugar dunha grella densa de produtos.
O espazo visual está dominado polas capturas de pantalla dos produtos: un gran marco con esquinas redondeadas que mostra a interface real da aplicación enche as seccións principal e secundaria. As fotos son minimalistas e úsanse só como avatares de usuario ou vistas previas de contidos multimedia da aplicación (por exemplo, a imaxe do concerto no panel dereito da maqueta do produto). Os logotipos da barra de confianza son símbolos de texto branco planos e apagados. Non hai ilustracións decorativas, nin gráficos abstractos, nin renderizacións en 3D. A estratexia visual é mostrar o produto a escala, deixar que a tipografía faga o traballo emocional e usar o coral como única cor de acento.
Paleta
Marca
- Coral Ember
#ff4a36— O laranxa úsase como acento secundario para detalles decorativos e para resaltar indicios pouco frecuentes. Non se debe usar como cor principal para chamadas á acción.
Neutro
- Aubergine Canvas
#181824— O fondo da páxina, o lenzo principal, é unha cor cálida e escura que substitúe o negro puro, facendo que a interface de usuario pareza en capas en lugar de plana. - Elevated Plum
#26253b— Superficies de tarxetas, campos de entrada, contedores de navegación: un paso máis sinxelo que usar o lenzo para crear profundidade sen un límite visible. - Pure White
#ffffff— Títulos principais, texto dos botóns e contornos das iconas: contraste máximo nun lenzo escuro. - Fog Text
#696f81— O texto principal, os títulos secundarios e os bordos apagados presentan unha relación de contraste de 7:1 para unha lectura cómoda sobre un fondo cor berenxena. - Ash Text
#8e8da0— Admítese unha cor neutra para elementos secundarios da interface de usuario, divisores e etiquetas silenciadas. Non se debe usar como cor principal para chamadas á acción. - Mist Highlight
#a3a3a7— Os bordos sutís, os divisores e os elementos de navegación inactivos crean un ton neutro sutil que aínda destaca sobre o lenzo.
Tipografía
de 12 a 88 px · 9 pasos
- sans-serif — substitución: Inter · contornos 400 · sans-serif: atópase nos datos extraídos pero non está descrita pola IA.
- Haffer XH SemiBold — substitución: Inter Tight · contornos 400, 600 · A fonte principal para a visualización e os títulos. Úsase cun tamaño de 70–88 px para os títulos principais cun espazado entre letras de -0,02 em e un grosor de 600. O espazado estreito entre letras e a gran altura das letras danlles aos títulos un peso editorial, facendo que a interface escura pareza máis a portada dunha revista que a un panel. Substitúa por Inter Tight ou General Sans cun grosor en negra.
- Jersey 10 — substitución: Anybody · contornos 400 · Unha fonte grande e decorativa para números de acento e resaltados. Úsase con moderación en tamaños moi grandes para crear acentos tipográficos. Pódese substituír por Anybody ou Cabinet Grotesk.
Intervalos e forma
| Propósito | Significado |
|---|---|
| Densidade | media |
| Paso básico | 10-16px |
| Radio do botón | 100px |
| Radio da tarxeta | 20px |
| Sombras | sombras suaves |
| Entre seccións | 80px |
| Largura da páxina | 1200px |
A IA creará o teu sitio web ao estilo de Superlist e o encherá
- Enche con produtos e publicacións a través da ligazón: Instagram, TikTok, Facebook.
- Transfire contido do teu sitio antigo: só tes que especificar o enderezo.
- Deseño moderno no mellor motor: React ( Next.js) con renderización de servidor e optimización SEO listas para usar.
- Optimización SEO totalmente automatizada para resultados de busca e recomendacións de redes neuronais.
Estilos semellantes
- DNA — Observatorio de Medianoite visto a través dunha lente de partículas
- Abetterlou — Sparks on Saddle Leather: unha fonte cremosa e cálida que brilla sobre un fondo negro café intenso, con botóns dourados e ámbar que parecen metal quente presionado contra a páxina.
- Galileo-ft — Unha plataforma de mando do espazo profundo con sinais azuis eléctricos
- Decide AI — Observatorio á medianoite - sinal de menta
- Redis Agency — O obradoiro editorial, aberto fóra de horario, é un lugar a escuras onde todo o traballo de imaxe corporativa se realiza con fontes serif e un único rabanete vermello.
- Spellbook — Unha sala de xustiza de medianoite iluminada con tinta coral: unha superficie editorial escura onde o único son é o cálido trazo laranxa da pluma
- Linear — instrumento de precisión de medianoite
- Origin Financial — Unha galería de opulencia silenciosa, de medianoite. Unha sala tranquila, case escura, onde grandes fontes con serifas e uns poucos paneis de cores iluminados crean a sensación de que as finanzas son unha obra de arte coidadosamente comisariada.
- Hyperstudio — O deseño está gravado en obsidiana. Texto e liñas finas enmarcan un espazo branco de negro puro, con ocasionais marcas douradas de compás que indican o camiño.
- Air — escultura "Ceo de medianoite a través do vidro"
- Raycast — Centro de Comando de Medianoite, Coral Neon
- dope.security — Terminal de medianoite con balizas moradas