Superlist
Un espai de treball nocturn amb brases de corall: una superfície d'albergínia tranquil·la on una sola espurna taronja càlida assenyala cada acció.
Superlist utilitza un llenguatge de productivitat en tons porpra de mitjanit: albergínia fosca, corall càlid com a únic color primari i grans titulars sans-serif que capturen tota l'atmosfera. La interfície evoca la sensació de treball concentrat a altes hores de la nit: tranquil, en capes i segur, amb el color utilitzat només com a puntuació funcional en crides a l'acció, estats actius i punts clau. Les superfícies estan superposades en tons foscos subtils amb un to porpra (#181824 → #26253b), evitant el negre pur per garantir que la profunditat se senti càlida en lloc d'estèril. Els components presenten formes arrodonides generoses (targetes de 20px, botons de píndola), ombres suaus i "respiren" a través de còmodes espais de 10-16px en lloc de quadrícules ajustades. La veu del titular ho és tot: un pes de 600 punts a 70-88px amb un espaiat entre lletres ajustat de -0.02em tracta el text com a tipogràfic en lloc d'interfície d'usuari; s'acosta més a un text editorial que a un SaaS.
Les seccions fosques abasten tota l'amplada de la pàgina, amb contenidors de contingut centrats i d'amplada màxima. La secció principal està centrada verticalment i conté un títol, un subtext i una crida a l'acció (CTA), seguits d'una captura de pantalla gran del producte que se superposa a la secció següent. Les seccions posteriors alternen entre blocs de text centrats i quadrícules de targetes. La secció de ressenyes utilitza una quadrícula de tres columnes amb targetes de ressenyes i 16 marges. La navegació és una única barra superior amb un logotip a l'esquerra, enllaços centrats i accions d'inici de sessió a la dreta, sense barra lateral fixa ni megamenú. Els marges entre seccions són generosos (16 marges), creant un ritme editorial espaiós en lloc d'una quadrícula de producte densa.
L'espai visual està dominat per les captures de pantalla dels productes: un marc gran amb cantonades arrodonides que mostra la interfície real de l'aplicació omple les seccions principal i secundària. Les fotos són mínimes i s'utilitzen només com a avatars d'usuari o previsualitzacions de contingut multimèdia dins de l'aplicació (per exemple, la imatge del concert al panell dret de la maqueta del producte). Els logotips de la barra de confiança són símbols de text blanc pla i apagat. No hi ha il·lustracions decoratives, ni gràfics abstractes, ni renders en 3D. L'estratègia visual és mostrar el producte a escala, deixar que la tipografia faci el treball emocional i utilitzar el corall com a únic color d'accent.
Paleta
Marca
- Coral Ember
#ff4a36— El taronja s'utilitza com a accent secundari per a detalls decoratius i per ressaltar senyals poc freqüents. No s'hauria d'utilitzar com a color principal per a crides a l'acció.
Neutral
- Aubergine Canvas
#181824— El fons de la pàgina, el llenç principal, és d'un to càlid i fosc que substitueix el negre pur, fent que la interfície d'usuari sembli en capes en lloc de plana. - Elevated Plum
#26253b— Superfícies de targetes, camps d'entrada, contenidors de navegació: un pas més fàcil que el llenç per crear profunditat sense un límit visible. - Pure White
#ffffff— Encapçalaments principals, text dels botons i contorns de les icones: contrast màxim en un llenç fosc. - Fog Text
#696f81— El text principal, els encapçalaments secundaris i les vores apagades presenten una relació de contrast de 7:1 per a una lectura còmoda sobre un fons de color albergínia. - Ash Text
#8e8da0— S'admet un color neutre per a elements secundaris de la interfície d'usuari, divisors i etiquetes apagades. No s'ha d'utilitzar com a color principal per a les crides a l'acció. - Mist Highlight
#a3a3a7— Les vores subtils, els divisors i els elements de navegació inactius creen un to neutre subtil que encara destaca sobre el llenç.
Tipografia
de 12 a 88 px · 9 passos
- sans-serif — reemplaçament: Inter · esquemes 400 · sans-serif: es troba a les dades extretes però no descrit per la IA.
- Haffer XH SemiBold — reemplaçament: Inter Tight · esquemes 400, 600 · La font principal per a la visualització i els encapçalaments. S'utilitza amb una mida de 70–88 px per als encapçalaments principals amb un espaiat entre lletres de -0.02em i un pes de 600. L'espaiat estret entre lletres i l'alçada gran de les lletres donen als encapçalaments un pes editorial, fent que la interfície fosca s'assembli més a la portada d'una revista que a un tauler de control. Substituïu-la per Inter Tight o General Sans amb un pes en negreta.
- Jersey 10 — reemplaçament: Anybody · esquemes 400 · Una font gran i decorativa per a números d'accent i ressalts. S'utilitza amb moderació en mides molt grans per crear accents tipogràfics. Es pot substituir per Anybody o Cabinet Grotesk.
Intervals i forma
| Propòsit | Significat |
|---|---|
| Densitat | mitjana |
| Pas bàsic | 10-16px |
| Radi del botó | 100px |
| Radi de la targeta | 20px |
| Ombres | ombres suaus |
| Entre seccions | 80px |
| Amplada de la pàgina | 1200px |
La IA crearà el vostre lloc web a l'estil Superlist i l'omplirà.
- Omple amb productes i publicacions a través de l'enllaç: Instagram, TikTok, Facebook.
- Transfereix contingut del teu lloc web antic; només cal que especifiquis l'adreça.
- Disseny modern en el millor motor: React ( Next.js) amb renderització de servidor i optimització SEO des del primer moment.
- Optimització SEO totalment automatitzada per a resultats de cerca i recomanacions de xarxes neuronals.
Estils similars
- DNA — Observatori de Mitjanit vist a través d'una lent de partícules
- Abetterlou — Sparks on Saddle Leather: una font càlida i cremosa que brilla sobre un fons negre cafè profund, amb botons daurats i ambre que semblen metall calent premut a la pàgina.
- Galileo-ft — Una plataforma de comandament de l'espai profund amb senyals blaus elèctrics
- Decide AI — Observatori a mitjanit - senyal de menta
- Redis Agency — El taller editorial, obert fora d'horari, és un lloc fosc on tota la feina de marca es fa amb fonts serif i un únic rave vermell.
- Spellbook — Una sala de tribunal de mitjanit il·luminada amb tinta coral·lina: una superfície editorial fosca on l'únic so és el càlid traç taronja de la ploma
- Linear — instrument de precisió de mitjanit
- Origin Financial — Una galeria de mitjanit d'opulència silenciosa. Una sala silenciosa, gairebé fosca, on grans fonts serif i uns quants panells de colors il·luminats creen la sensació que les finances són una obra d'art acuradament seleccionada.
- Hyperstudio — El disseny està ratllat en obsidiana. El text i les línies fines emmarquen un espai blanc de negre pur, amb marques daurades de compàs ocasionals que indiquen el camí.
- Air — escultura "Cel de mitjanit a través del vidre"
- Raycast — Centre de Comandament de Mitjanit, Coral Neon
- dope.security — Terminal de mitjanit amb balises morades