Superlist
Un spaziu di travagliu notturnu cù braci di corallo - una superficia tranquilla di melanzane induve una sola scintilla aranciu calda signaleghja ogni azzione
Superlist usa un linguaghju di produttività in toni viola di mezzanotte: melanzana scura, corallo caldu cum'è unicu culore primariu, è grandi tituli sans-serif chì catturanu tutta l'atmosfera. L'interfaccia evoca a sensazione di un travagliu focalizatu à tarda notte - tranquillu, stratificatu è fiduciosu, cù u culore adupratu solu cum'è puntuazione funzionale nantu à e chjame à l'azzione, i stati attivi è i punti chjave. E superfici sò stratificate in toni scuri suttili cù un sottotono viola (#181824 → #26253b), evitendu u neru puru per assicurà chì a prufundità si senti calda piuttostu chè sterile. I cumpunenti presentanu forme arrotondate generose (carte 20px, buttoni di pillole), ombre morbide è "respiranu" attraversu spazii comodi di 10-16px piuttostu chè griglie strette. A voce di u titulu hè tuttu: un pesu di 600 punti à 70-88px cù una spaziatura stretta di e lettere di -0.02em tratta u testu cum'è tipograficu piuttostu chè UI - hè più vicinu à a copia editoriale chè à SaaS.
E sezzioni scure si estendenu per tutta a larghezza di a pagina, cù cuntenitori di cuntenutu centrati, di larghezza massima. A sezzione principale hè centrata verticalmente è cuntene un titulu, un sottutestu è una chjama à l'azzione (CTA), seguitata da una grande screenshot di u pruduttu chì si sovrappone à a sezzione dopu. E sezzioni successive alternanu trà blocchi di testu centrati è griglie di carte. A sezzione di recensioni usa una griglia à trè colonne cù carte di recensione è 16 grondaie. A navigazione hè una sola barra superiore cù un logò à manca, ligami centrati è azzioni di login à diritta - senza barra laterale fissa o mega-menu. E grondaie trà e sezzioni sò generose (16 grondaie), creendu un ritmu editoriale spaziosu piuttostu chè una griglia di pruduttu densa.
U spaziu visuale hè duminatu da e screenshots di u pruduttu - una grande cornice cù anguli arrotondati, chì mostra l'interfaccia vera di l'app, riempie e sezioni principali è secundarie. E foto sò minime, aduprate solu cum'è avatar di l'utilizatori o anteprime di media in-app (per esempiu, l'imagine di u cuncertu in u pannellu di diritta di u mockup di u pruduttu). I loghi nantu à a barra di fiducia sò simbuli di testu biancu piatti è tenui. Ùn ci sò illustrazioni decorative, nè grafica astratta, nè rendering 3D. A strategia visuale hè di mette in mostra u pruduttu à scala, lascià chì a tipografia faci u travagliu emotivu è aduprà u corallu cum'è unicu culore d'accentu.
Paletta
Marca
- Coral Ember
#ff4a36— L'aranciu hè adupratu cum'è accentu secundariu per i dettagli decorativi è per mette in risaltu i segni pocu frequenti. Ùn deve esse adupratu cum'è culore primariu per e chjame à l'azzione.
Neutru
- Aubergine Canvas
#181824— U fondu di a pagina, a tela principale, hè una tonalità calda è scura chì rimpiazza u neru puru, facendu chì l'interfaccia utente pare stratificata piuttostu chè piatta. - Elevated Plum
#26253b— Superficie di carte, campi di input, cuntenitori di navigazione - un passu più faciule chè a tela per creà prufundità senza un cunfine visibile. - Pure White
#ffffff— Titoli principali, testu di i buttoni è contorni di l'icone - cuntrastu massimu nantu à una tela scura. - Fog Text
#696f81— U testu principale, i tituli secundarii è i bordi smorzati presentanu tutti un rapportu di cuntrastu 7: 1 per una lettura comoda contr'à un sfondate di culore melanzana. - Ash Text
#8e8da0— Un culore neutru hè supportatu per l'elementi secundarii di l'interfaccia utente, i divisori è l'etichette silenziate. Ùn deve esse adupratu cum'è culore primariu per e chjame à l'azzione. - Mist Highlight
#a3a3a7— I bordi suttili, i divisori è l'elementi di navigazione inattivi creanu un tonu neutru suttile chì si distingue sempre contr'à a tela.
Tipografia
da 12 à 88px · 9 passi
- sans-serif — rimpiazzamentu: Inter · contorni 400 · sans-serif - truvatu in i dati estratti ma micca discrittu da l'IA.
- Haffer XH SemiBold — rimpiazzamentu: Inter Tight · contorni 400, 600 · U caratteru principale per a visualizazione è i tituli. Hè adupratu à una dimensione di 70–88px per i tituli principali cù una spaziatura di e lettere di -0.02em è un pesu di 600. A spaziatura stretta di e lettere è a grande altezza di e lettere danu à i tituli un pesu editoriale, facendu chì l'interfaccia scura s'assumiglia più à una copertina di rivista chè à un dashboard. Rimpiazzate cù Inter Tight o General Sans in un pesu grassu.
- Jersey 10 — rimpiazzamentu: Anybody · contorni 400 · Una grande fonte decorativa per i numeri d'accentu è i punti culminanti. Aduprata cù parsimonia in dimensioni assai grande per creà accenti tipografici. Pò esse rimpiazzata da Anybody o Cabinet Grotesk.
Intervalli è forma
| Scopu | Significatu |
|---|---|
| Densità | mediu |
| Passu basicu | 10-16px |
| Raggiu di u buttone | 100px |
| Raggiu di a carta | 20px |
| Ombre | ombre morbide |
| Trà e sezioni | 80px |
| Larghezza di a pagina | 1200px |
L'IA custruisce u vostru situ web in stile Superlist è u riempirà
- Riempite cù prudutti è publicazioni via u ligame - Instagram, TikTok, Facebook.
- Trasferisce u cuntenutu da u vostru vechju situ - basta à specificà l'indirizzu.
- Design mudernu nant'à u megliu mutore: React ( Next.js) cù rendering di u servitore è ottimizazione SEO pronta per l'usu.
- Ottimizazione SEO cumpletamente automatizata per i risultati di ricerca è e raccomandazioni di rete neurale.
Stili simili
- DNA — L'Osservatoriu di Mezanotte vistu à traversu una lente di particelle
- Abetterlou — Scintille nantu à u cuoio di sella - una fonte cremosa calda chì brilla nantu à un fondu neru caffè prufondu, cù buttoni ambra-oru chì si sentenu cum'è metallu caldu pressatu in a pagina.
- Galileo-ft — Un ponte di cummandu di u spaziu prufondu cù signali blu elettrichi
- Decide AI — Osservatoriu à mezanotte - signale di zecca
- Redis Agency — L'attellu editoriale, apertu dopu l'ore di travagliu, hè un locu bughju induve tuttu u travagliu di branding hè fattu da caratteri serif è un solu ravanellu rossu.
- Spellbook — Un tribunale di mezzanotte illuminatu cù inchiostru di corallo - una superficia editoriale scura induve l'unicu sonu hè u caldu trattu di penna aranciu
- Linear — strumentu di precisione di mezzanotte
- Origin Financial — Una galeria di mezzanotte di opulenza tranquilla. Una stanza tranquilla, guasi scura, induve grandi caratteri serif è uni pochi di pannelli culuriti illuminati creanu a sensazione chì a finanza hè un'opera d'arte attentamente curata.
- Hyperstudio — U disignu hè grattatu in ossidiana. U testu è e linee fini incornicianu un spaziu biancu di neru puru, cù qualchì volta segni di bussula d'oru chì indicanu a strada.
- Air — scultura "Cielo di mezzanotte à traversu u vetru"
- Raycast — Centru di Cummandu di Mezanotte, Coral Neon
- dope.security — Terminal di mezzanotte cù fari viola