Superlist
Isang lugar ng trabaho sa gabi na may mga baga ng korales—isang tahimik na ibabaw ng talong kung saan ang isang mainit na kulay kahel na kislap ay hudyat ng bawat kilos
Gumagamit ang Superlist ng wikang produktibo sa mga kulay-ube sa hatinggabi: malalim na talong, mainit na korales bilang tanging pangunahing kulay, at malalaking sans-serif na mga headline na kumukuha sa buong kapaligiran. Pinapaalala ng interface ang pakiramdam ng trabahong nakatuon sa hatinggabi—tahimik, may patong-patong, at may kumpiyansa, na ang kulay ay ginagamit lamang bilang functional na bantas sa mga panawagan para sa aksyon, mga aktibong estado, at mga pangunahing punto. Ang mga ibabaw ay may patong-patong na banayad na madilim na kulay na may kulay-ube na undertone (#181824 → #26253b), iniiwasan ang purong itim upang matiyak na ang lalim ay mainit sa halip na baog. Nagtatampok ang mga bahagi ng malalaking bilog na hugis (20px card, pill button), malalambot na anino, at "huminga" sa pamamagitan ng komportableng 10-16px na mga puwang sa halip na masikip na grid. Ang tinig ng headline ang lahat: ang 600-point na bigat sa 70-88px na may masikip na espasyo ng mga letra na -0.02em ay tinatrato ang teksto bilang typographic sa halip na UI—mas malapit ito sa editoryal na kopya kaysa sa SaaS.
Ang mga maitim na seksyon ay sumasaklaw sa buong lapad ng pahina, na may mga nakasentro at pinakamataas na lapad na lalagyan ng nilalaman. Ang pangunahing seksyon ay patayo sa gitna at naglalaman ng headline, subtext, at call to action (CTA), na sinusundan ng isang malaking screenshot ng produkto na nagpapatong-patong sa susunod na seksyon. Ang mga kasunod na seksyon ay nagpapalitan sa pagitan ng mga nakasentrong bloke ng teksto at mga grid ng card. Ang seksyon ng mga review ay gumagamit ng grid na may tatlong hanay na may mga review card at 16 na gutter. Ang nabigasyon ay isang iisang bar sa itaas na may logo sa kaliwa, mga nakasentrong link, at mga aksyon sa pag-login sa kanan—walang nakapirming sidebar o mega-menu. Ang mga gutter sa pagitan ng mga seksyon ay malawak (16 na gutter), na lumilikha ng isang maluwang at editoryal na ritmo sa halip na isang siksik na grid ng produkto.
Ang espasyong biswal ay pinangungunahan ng mga screenshot ng produkto—isang malaking frame na may mga bilugan na sulok, na nagpapakita ng aktwal na interface ng app, ang pumupuno sa pangunahin at pangalawang mga seksyon. Minimal lamang ang mga larawan, ginagamit lamang bilang mga avatar ng user o mga preview ng in-app media (halimbawa, ang larawan ng konsiyerto sa kanang panel ng mockup ng produkto). Ang mga logo sa trust bar ay patag, naka-mute na puting simbolo ng teksto. Walang mga pandekorasyon na ilustrasyon, walang abstract graphics, walang 3D render. Ang biswal na estratehiya ay ipakita ang produkto nang malawakan, hayaan ang tipograpiya na gawin ang emosyonal na gawain, at gamitin ang coral bilang tanging kulay ng accent.
Paleta
Tatak
- Coral Ember
#ff4a36— Ginagamit ang kulay kahel bilang pangalawang kulay para sa mga detalyeng pandekorasyon at upang i-highlight ang mga bihirang pahiwatig. Hindi ito dapat gamitin bilang pangunahing kulay para sa mga panawagan para sa aksyon.
Neutral
- Aubergine Canvas
#181824— Ang background ng pahina, ang pangunahing canvas, ay isang mainit at madilim na kulay na pumapalit sa purong itim, na ginagawang magmukhang patong-patong ang user interface sa halip na patag. - Elevated Plum
#26253b— Mga ibabaw ng card, mga input field, mga navigation container—isang hakbang na mas madali kaysa sa canvas upang lumikha ng lalim nang walang nakikitang hangganan. - Pure White
#ffffff— Mga pangunahing heading, teksto ng button, at mga balangkas ng icon—pinakamataas na contrast sa isang madilim na canvas. - Fog Text
#696f81— Ang pangunahing teksto, mga pangalawang heading, at mga naka-mute na border ay pawang nagtatampok ng 7:1 contrast ratio para sa komportableng pagbabasa laban sa kulay-talong na background. - Ash Text
#8e8da0— Sinusuportahan ang neutral na kulay para sa mga pangalawang elemento ng UI, mga divider, at mga naka-mute na label. Hindi ito dapat gamitin bilang pangunahing kulay para sa mga panawagan para sa aksyon. - Mist Highlight
#a3a3a7— Ang mga banayad na hangganan, divider, at mga hindi aktibong elemento ng nabigasyon ay lumilikha ng isang banayad na neutral na tono na namumukod-tangi pa rin laban sa canvas.
Tipograpiya
mula 12 hanggang 88px · 9 na hakbang
- sans-serif — kapalit: Inter · mga balangkas 400 · sans-serif - matatagpuan sa nakuha na datos ngunit hindi inilarawan ng AI.
- Haffer XH SemiBold — kapalit: Inter Tight · mga balangkas 400, 600 · Ang pangunahing font para sa display at mga heading. Ginagamit ito sa laki na 70–88px para sa mga hero heading na may pagitan ng mga letra na -0.02em at bigat na 600. Ang makitid na pagitan ng mga letra at malaking taas ng mga letra ay nagbibigay sa mga heading ng editoryal na bigat, na ginagawang mas mukhang pabalat ng magasin ang madilim na interface kaysa sa isang dashboard. Palitan ng Inter Tight o General Sans na naka-bold.
- Jersey 10 — kapalit: Anybody · mga balangkas 400 · Isang malaki at pandekorasyon na font para sa mga numero at highlight na may accent. Ginagamit nang matipid sa napakalaking sukat upang lumikha ng mga typographic accent. Maaaring palitan ng Anybody o Cabinet Grotesk.
Mga pagitan at anyo
| Layunin | Kahulugan |
|---|---|
| Densidad | karaniwan |
| Pangunahing hakbang | 10-16px |
| Radius ng buton | 100px |
| Radius ng card | 20px |
| Mga anino | malambot na anino |
| Sa pagitan ng mga seksyon | 80px |
| Lapad ng pahina | 1200px |
Gagawa ang AI ng website mo sa estilong Superlist at pupunuin ito
- Punuin ng mga produkto at post gamit ang link - Instagram, TikTok, Facebook.
- Maglipat ng nilalaman mula sa iyong lumang site—tukuyin lamang ang address.
- Modernong disenyo gamit ang pinakamahusay na engine: React ( Next.js) na may kasamang server rendering at SEO optimization na agad-agad.
- Ganap na awtomatikong pag-optimize ng SEO para sa mga resulta ng paghahanap at mga rekomendasyon sa neural network.
Mga katulad na estilo
- DNA — Obserbatoryo ng Hatinggabi na nakikita sa pamamagitan ng lente ng partikulo
- Abetterlou — Mga Kislap sa Katad na Kulay Saddle - isang mainit at kremang font na kumikinang laban sa malalim na itim na background, na may mga butones na kulay amber-ginto na parang mainit na metal na nakadiin sa pahina.
- Galileo-ft — Isang deep-space command deck na may mga electric blue signal
- Decide AI — Obserbatoryo sa hatinggabi - mint signal
- Redis Agency — Ang workshop sa editoryal, na bukas pagkatapos ng oras ng trabaho, ay isang madilim na lugar kung saan ang lahat ng gawaing branding ay ginagawa gamit ang mga serif font at isang pulang labanos.
- Spellbook — Isang hukuman sa hatinggabi na naliliwanagan ng tinta ng korales—isang madilim na ibabaw ng editoryal kung saan ang tanging tunog ay ang mainit na kulay kahel na hagod ng panulat
- Linear — instrumentong may katumpakan sa hatinggabi
- Origin Financial — Isang hatinggabi na galeriya ng tahimik na karangyaan. Isang tahimik, halos madilim na silid kung saan ang malalaking serif font at ilang maliwanag na kulay na mga panel ay lumilikha ng pakiramdam na ang pananalapi ay isang maingat na inayos na likhang sining.
- Hyperstudio — Ang disenyo ay nakaukit sa obsidian. Ang teksto at mga pinong linya ay nakabalangkas sa isang puting espasyo ng purong itim, na may paminsan-minsang ginintuang marka ng compass na nagpapahiwatig ng daan.
- Air — eskultura na "Hatinggabing Langit sa Pamamagitan ng Salamin"
- Raycast — Sentro ng Pamumuno sa Hatinggabi, Coral Neon
- dope.security — Terminal ng hatinggabi na may mga lilang beacon