Superhuman
panel ng editoryal ng ginintuang oras
Ang Superhuman ay sumasaklaw sa sangandaan ng editorial photography at software UI—isang mainit, mala-pergamino na canvas (hindi kailanman purong puti) ang nagbabalot sa mga elemento ng branding na maroon at matingkad na lilang mga accent. Ang mga headline, na nakalagay sa 460 font, ay bumubulong sa halip na sumisigaw, na nagpapahintulot sa buong pahinang cinematic photography na gawin ang mabigat na trabaho, habang ang mga translucent na UI card ng produkto ay lumulutang na parang salamin sa ibabaw ng imahe. Ang palette ay nananatiling kalmado at editoryal sa halos lahat ng oras: mga ibabaw na krema, tekstong uling, banayad na mainit-abo na mga hangganan, at malawak na espasyo sa pagitan ng mga elemento, na may kulay na nakalaan para sa sinasadyang bantas ng brand—isang panawagan para sa aksyon na maroon, mga lilang link, isang mapusyaw na lilang add-on button. Sadyang iniiwasan ng system ang malalakas na anino at gradient sa mga ibabaw ng UI; Ang lalim ay nakakamit sa pamamagitan ng layered photography at banayad na blur sa background sa pamagat, sa halip na sa pamamagitan ng stacking effect.
Ang pangunahing elemento ay isang full-width na litrato na may nakasentrong headline (48-64px/460) at isang call to action na puno ng larawan ng alak, na may lumulutang na translucent na product UI card na nakapatong sa kaliwa at kanang gilid. Sa ibaba ng pangunahing elemento ay isang puting guhit na logo strip (6 na cell bawat hilera, limitado ang maximum na lapad), pagkatapos ay isang seksyon ng tab na may mga puting card surface sa parchment canvas. Isang maitim na turquoise na guhit ang pumipigil sa ritmo sa halos dalawang-katlo ng pahina—full-width, dalawang column (larawan sa kaliwa, teksto sa kanan)—na lumilikha ng tanging tonal contrast habang nag-i-scroll ka. Sumusunod ang isang gradient atmospheric stripe. Ang patayong pagitan sa pagitan ng mga seksyon ay 64-96px. Ang maximum na lapad ng nilalaman ay ~1200px na nakasentro, kung saan ang pangunahing elemento at maitim na guhit ay sumasaklaw sa buong lapad ng viewport. Ang nabigasyon ay isang nakapirming header na may malabong background; walang sidebar, walang mega menu. Ang footer ay isang full-width na burgundy na pahina na may multi-column na layout ng mga link. Ang pangkalahatang ritmo ay: pangunahing balangkas → kalmadong puti/kremang nilalaman → maitim na guhit na may pangunahing larawan → gradient na atmospera → burgundy footer, salit-salit na mapusyaw at maitim na guhit upang lumikha ng tempo ng editoryal.
Ang pangunahing elementong biswal ay ang cinematic photography: isang full-width portrait laban sa bukas na kalangitan ang nagsisilbing focal point, na may pangalawang atmospheric stripe na nakaposisyon sa ibaba ng pahina. Ang imahe ay may mainit na tono, banayad na naka-mute, at kinunan nang profile, na nakapagpapaalaala sa isang ginintuang oras, na lumilikha ng mas editoryal kaysa sa corporate feel. Isang madilim na guhit na may translucent geometric rectangles at sulat-kamay na mga inskripsiyon ang nakapatong sa isang litrato ng isang lalaking nawawala sa pag-iisip—isang collage ng mga ibabaw sa halip na isang imahe. Ang user interface ay ipinapakita bilang mga lumulutang na glass card na direktang nakapatong sa litrato, sa halip na bilang magkakahiwalay na mga screenshot. Walang mga stock illustration, walang 3D renders, at walang abstract decorative forms, maliban sa gradient atmospheric stripe. Ang mga icon ay minimalist monochrome line icons, ~16-20px ang lapad, na may iisang lapad na katumbas ng 460 point text weight.
Paleta
Tatak
- Midnight Wine
#421d24— Ang mga pangunahing action button, ad banner, at footer ay mainit, halos itim na burgundy na mas parang tinta kaysa pula, na umaangkop sa paleta ng kulay nang hindi masyadong matingkad. - Royal Violet
#714cb6— Ginagamit ang lila upang i-highlight ang mga link, tag, at maiikling parirala. Hindi ito dapat gamitin bilang pangunahing kulay para sa mga panawagan para sa aksyon.
Neutral
- Lilac Mist
#d4c7ff— Ang secondary surface fill, mga light icon, at ghost button background ay pawang nagtatampok ng muted purple na kulay na nagpapahiwatig ng istilo ng brand nang hindi nakakakuha ng labis na atensyon sa sarili nito. - Deep Lagoon
#0c4243— Ang madilim na background para sa strip, na ginamit bilang pangunahing elemento ng naratibo, ang tanging madilim na ibabaw sa sistema, na sinamahan ng isang nakapatong na geometric pattern. - Warm Parchment
#f2f0eb— Ang gumaganang ibabaw ng pahina ang nangingibabaw na elemento; ang mainit na kulay krema ang pumapalit sa puti bilang base, na nagbibigay sa buong sistema ng init ng editoryal. - Soft Mist
#e3e3e2— Pinong mga hangganan, mga balangkas ng kard, mga linyang naghahati—isang mainit at mapusyaw na kulay abo na humahalo sa pergamino ngunit malinaw na tumutukoy sa mga gilid. - Ink Charcoal
#292827— Teksto ng katawan, mga heading, mga balangkas ng icon - isang mainit, halos itim na kulay na may sapat na kayumanggi na parang tinta sa papel, hindi kailanman malamig #000 - Stone Gray
#666666— Pangalawang katawan ng teksto, mga sumusuportang teksto, mga maingat na paglalarawan - isang katamtamang kulay abo, ginamit nang matipid upang hindi kailanman makipagkumpitensya sa pangunahing teksto.
Tipograpiya
mula 12 hanggang 64px · 8 hakbang
- Super Sans VF — kapalit: Inter (closest open equivalent for variable weight range) · mga balangkas 460, 500, 540, 600, 700 · Isang font sa buong sistema. Ang mga variable ng axis ay sumasaklaw mula 460 (isang signature, bahagyang naka-crop na font para sa lahat ng malalaking teksto ng heading) hanggang 540 (binibigyang-diin na body text) at 700 (maliliit, naka-bold na mga caption). Ang isang espesyal na idinisenyong VF ay ginagawang mas maingat ang mga heading na may 460-weight kaysa sa hindi sinasadya—sa 48-64px na may masikip na espasyo ng mga letra, ang epektong "bahagyang naka-crop" ay nakikitang may kumpiyansa sa halip na manipis.
Mga pagitan at anyo
| Layunin | Kahulugan |
|---|---|
| Densidad | siksik |
| Pangunahing hakbang | 8px |
| Radius ng buton | 16px |
| Radius ng card | 16px |
| Mga anino | walang - mga hangganan sa halip na mga anino |
| Sa pagitan ng mga seksyon | 64-96px |
| Lapad ng pahina | 1200px |
Gagawa ang AI ng website mo sa estilong Superhuman 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
- AI for Business — Brutalist na palabas ng editoryal sa mainit na kulay abo
- Jeton — Isang editoryal tungkol sa fintech sa mainit na marmol
- Airtable — Isang maginhawang seminar na may mga kabanatang minarkahan ng iba't ibang kulay
- Osmo — Ang Museo ng mga Developer sa Gray Concrete
- Linktr — Ang mga poster ng editoryal ay nakasalansan na parang kendi. Ang website ay dinisenyo sa mga bloke ng kulay, na may matingkad na berdeng mga headline na nakadikit sa mga dingding na kulay kobalt-asul, at mga puting hugis-pildang elemento ng nabigasyon na lumulutang sa ibabaw ng mga burgundy na parang.
- Outsource Consultants — Isang malaking-format na arkitektural na papel sa butong papel. Isang monograpikong estetika, kung saan ang isang maliwanag na bahagi ng indigo ay pumuputol sa mainit, tipograpiyang maximalist na grid.
- Streamtime — Tactile Creative Mood Board - Mesa para sa Scrapbooking na Disenyo
- Switch-Lit — Grid ng editoryal na nakalimbag gamit ang tinta sa kremang papel
- HubSpot — Isang mainit na kulay kremang papel na may iisang kulay kahel na accent. Ang HubSpot ay kahawig ng isang magasin na pang-disenyo na nakalimbag sa mabibigat na papel—mga serif na headline, mainit na kulay kremang mga pahina, at isang nag-iisang maalab na kulay kahel na accent na nagtatampok lamang sa pinakamahalagang mga punto.
- Granola — Mga field note sa mainit na vellum—Ang Granola ay parang isang lumang Moleskine notebook na nakabukas sa isang naliliwanagan ng araw na mesa: ang mga serif heading ay nagbibigay ng pakiramdam ng katatagan, mga organikong berdeng accent tulad ng tinta na nakabase sa halaman, at mga pinong linya sa mga gilid ng mga kard na kahawig ng mga sulat-kamay na tala.
- Secure — Ang isang pag-uusap sa isang European cafe sa mahinang liwanag ng araw ay isang mainit at naka-istilong paraan ng video calling, kung saan ang mga serif na headline ay parang isang maalalahaning artikulo sa magasin sa halip na isang pahina ng produktong tech.
- Mockups made easy — Studio ng disenyo ng editoryal sa puting papel