Superlist
In nachtlike wurkromte mei koraalgloeden - in rêstich aubergine-app-oerflak dêr't in inkele waarme oranje fonk elke aksje sinjalearret
Superlist brûkt in produktiviteitstaal yn middernachtpearse toanen: djippe aubergine, waarm koraal as de ienige primêre kleur, en grutte sans-serif-koppen dy't de hiele sfear fêstlizze. De ynterface ropt it gefoel op fan lette nacht rjochte wurk - rêstich, laach-fol en selsbetrouwen, mei kleur allinich brûkt as funksjonele ynterpunksje op oprop ta aksje, aktive steaten en wichtige punten. Oerflakken binne laach-fol yn subtile donkere toanen mei in pearse ûndertoan (#181824 → #26253b), wêrby't suver swart foarkommen wurdt om te soargjen dat de djipte waarm fielt ynstee fan steryl. Komponinten hawwe royale rûne foarmen (20px-kaarten, pilknoppen), sêfte skaden, en "sykhelje" troch noflike gatten fan 10-16px ynstee fan strakke rasters. De stim fan 'e koptekst is alles: in gewicht fan 600 punten op 70-88px mei in strakke letterôfstân fan -0.02em behannelet de tekst as typografysk ynstee fan brûkersynterface - it is tichter by redaksjonele tekst dan SaaS.
Tsjustere seksjes beslaan de hiele breedte fan 'e pagina, mei sintraal ynhâldskonteners mei maksimale breedte. De haadseksje is fertikaal sintraal en befettet in koptekst, subtekst en oprop ta aksje (CTA), folge troch in grutte produktskermôfbylding dy't de folgjende seksje oerlaapt. Folgjende seksjes wikselje ôf tusken sintraal tekstblokken en kaartrasters. De resinsjeseksje brûkt in raster mei trije kolommen mei resinsjekaarten en 16 gutters. Navigaasje is ien boppeste balke mei in logo oan 'e lofterkant, sintraal keppelings en oanmeldaksjes oan' e rjochterkant - gjin fêste sydbalke of megamenu. De gutters tusken seksjes binne royaal (16 gutters), wêrtroch in rom, redaksjoneel ritme ûntstiet ynstee fan in ticht produkteraster.
De fisuele romte wurdt dominearre troch produkt-screenshots - in grut frame mei rûne hoeken, dat de eigentlike app-ynterface sjen lit, follet de haad- en sekundêre seksjes. Foto's binne minimaal en wurde allinich brûkt as brûkersavatars of foarbylden fan yn-app-media (bygelyks de konsertôfbylding yn it rjochterpaniel fan 'e produktmockup). Logo's op 'e fertrouwensbalke binne platte, gedempte wite tekstsymbolen. Der binne gjin dekorative yllustraasjes, gjin abstrakte grafiken, gjin 3D-renderings. De fisuele strategy is om it produkt op skaal te sjen litten, de typografy it emosjonele wurk dwaan te litten, en koraal te brûken as de ienige aksintkleur.
Palet
Merk
- Coral Ember
#ff4a36— Oranje wurdt brûkt as in sekundêr aksint foar dekorative details en om ûngewoane oanwizings te markearjen. It moat net brûkt wurde as de primêre kleur foar oprop ta aksje.
Neutraal
- Aubergine Canvas
#181824— De eftergrûn fan 'e side, it haaddoek, is in waarme, donkere skaad dy't suver swart ferfangt, wêrtroch't de brûkersynterface laachfoarmich liket ynstee fan flak. - Elevated Plum
#26253b— Kaartoerflakken, ynfierfjilden, navigaasjekonteners - ien stap makliker as kanvas om djipte te meitsjen sûnder in sichtbere grins. - Pure White
#ffffff— Haadkoppen, knoptekst en ikoanomtrekken - maksimaal kontrast op in tsjuster doek. - Fog Text
#696f81— De haadtekst, sekundêre kopteksten en gedempte rânen - in kontrastferhâlding fan 7:1 foar noflik lêzen tsjin in auberginekleurige eftergrûn. - Ash Text
#8e8da0— In neutrale kleur wurdt stipe foar sekundêre UI-eleminten, skiedingstekens en gedempte labels. It moat net brûkt wurde as de primêre kleur foar oprop ta aksje. - Mist Highlight
#a3a3a7— Subtile rânen, skieders en ynaktive navigaasje-eleminten meitsje in subtile neutrale toan dy't noch altyd opfalt tsjin it doek.
Typografy
fan 12 oant 88px · 9 stappen
- sans-serif — ferfanging: Inter · sketsen 400 · sans-serif - fûn yn 'e ekstrahearre gegevens, mar net beskreaun troch de AI.
- Haffer XH SemiBold — ferfanging: Inter Tight · sketsen 400, 600 · It primêre lettertype foar werjefte en kopteksten. It wurdt brûkt mei in grutte fan 70–88px foar haadkopteksten mei in letterôfstân fan -0.02em en in gewicht fan 600. De smelle letterôfstân en grutte letterhichte jouwe de kopteksten in redaksjoneel gewicht, wêrtroch't de tsjustere ynterface mear op in tydskriftomslach liket as op in dashboard. Ferfange mei Inter Tight of General Sans yn in fet gewicht.
- Jersey 10 — ferfanging: Anybody · sketsen 400 · In grut, dekoratyf lettertype foar aksintnûmers en markearrings. Sparsum brûkt by tige grutte maten om typografyske aksinten te meitsjen. Kin ferfongen wurde troch Anybody of Cabinet Grotesk.
Yntervallen en foarm
| Doel | Betsjutting |
|---|---|
| Dichtheid | trochsneed |
| Basisstap | 10-16px |
| Knopradius | 100px |
| Kaartradius | 20px |
| Skaden | sêfte skaden |
| Tusken seksjes | 80px |
| Sidebreedte | 1200px |
AI sil jo webside bouwe yn Superlist -styl en it folje
- Folje oan mei produkten en berjochten fia de link - Instagram, TikTok, Facebook.
- Oerdrage ynhâld fan jo âlde side - spesifisearje gewoan it adres.
- Modern ûntwerp op 'e bêste motor: React ( Next.js) mei serverrendering en SEO-optimalisaasje direkt út 'e doaze.
- Folslein automatisearre SEO-optimalisaasje foar sykresultaten en oanbefellings foar neurale netwurken.
Ferlykbere stilen
- DNA — Middernachtsobservatorium sjoen troch in dieltsjeslens
- Abetterlou — Sparks on Saddle Leather - in waarm romige lettertype dat gloeit tsjin in djip kofjeswarte eftergrûn, mei amber-gouden knoppen dy't fiele as hjit metaal dat yn 'e pagina drukt wurdt.
- Galileo-ft — In djippe-romte kommandodek mei elektryske blauwe sinjalen
- Decide AI — Observatoarium om middernacht - muntsinjaal
- Redis Agency — De redaksjewurkpleats, iepen nei kantoaroeren, is in piktsjustere plak dêr't al it brandingwurk dien wurdt mei serif-lettertypen en in inkele reade radys.
- Spellbook — In rjochtseal by middernacht ferljochte mei koraalinkt - in tsjuster redaksjoneel oerflak dêr't it ienige lûd de waarm oranje pinnestreek is
- Linear — middernacht presyzje-ynstrumint
- Origin Financial — In middernachtsgalery fan stille weelderigens. In stille, hast tsjustere keamer dêr't grutte serif-lettertypen en in pear ferljochte kleurige panielen it gefoel wekke dat finânsjes in soarchfâldich gearstald keunstwurk binne.
- Hyperstudio — It ûntwerp is yn obsidiaan krast. Tekst en tinne linen omlijstje in wite romte fan suver swart, mei sa no en dan gouden kompasmarkeringen dy't de wei oanjaan.
- Air — byldhouwurk "Middernachtshimmel troch glês"
- Raycast — Middernacht Kommando Sintrum, Coral Neon
- dope.security — Middernachtsterminal mei pearse beacons