Subframe
Isang grapikong drowing sa mainit na pergamino. Ang papel na pangdisenyo, kung saan ang bawat hagod ay grapayt o pambura, ay hindi kailanman pinipinta—ang lalim ay nakakamit sa pamamagitan ng kapal ng linya at kalat-kalat na mga serif.
Ang subframe ay isang espasyong pang-trabaho ng isang monochrome designer: isang mainit, kremang canvas, tinta na kulay graphite-black, at ganap na kawalan ng mga chromatic accents. Ang buong interface ay nakikita bilang isang materyal—papel, lapis, at anino—na may isang matapang na tipograpiya: isang pinong serif (Instrument Serif) na nakaharap sa isang sistematikong sans-serif (Inter), na nagbibigay ng editoryal na gravity sa mga headline. Ang mga ibabaw ay patag at naka-frame sa halip na nakataas; ang lalim ay nakakamit sa pamamagitan ng manipis na mga divider sa #e5e7eb at mga inset na highlight sa madilim na mga kontrol sa halip na mga anino. Malawak ang densidad: isang malawak na patayong ritmo (48–64px ng mga puwang sa pagitan ng mga seksyon), nakasentro, full-width na mga layout, at malawak na whitespace sa paligid ng teksto. Ang tanging kulay ay ang contrast sa pagitan ng halos puti at halos itim, na ginagawang ang madilim na buton ang pinakakapansin-pansing elemento sa bawat pahina, at ang strip ng mga logo ng partner brand sa mga kulay abong tono ang tanging pandekorasyon na visual na elemento.
Mga layout na nakasentro at buong lapad (1200px) na may malawak na patayong ritmo. Ang pangunahing elemento ay isang bloke na nakasentro: isang madilim at segmented na kontrol sa itaas, isang malaking heading na "Inter", isang subheading na may iisang linya, at dalawang katabing buton (puno + translucent)—walang larawan sa gilid, walang paghihiwalay ng layout. Sa ibaba ng pangunahing elemento ay isang nakasentrong grayscale na guhit ng logo. Ang bawat kasunod na seksyon ay sumusunod sa parehong pattern: isang bloke ng pamagat at subheading na nakahanay sa kaliwa, pagkatapos ay isang full-width na frame ng showcase ng produkto na may 48–64px na gutter space sa pagitan ng mga seksyon. Minimal lang ang nabigasyon: isang top bar na may mga nakasentrong link at mga aksyon na nakahanay sa kanan, walang sidebar, walang mega-menu. Ang pahina ay binabasa mula itaas hanggang ibaba bilang isang serye ng mga nakasentrong pahayag, bawat isa ay binibigyan ng sapat na espasyo—ang layout ay parang isang editorial portfolio kaysa sa isang abalang pahina ng produkto.
Minimalist at praktikal ang biswal na disenyo. Gumagamit ang sistema ng dalawang biswal na paraan: (1) mga naka-frame na screenshot ng produkto at mga UI mockup na nakapaloob sa mga frame na may 24px-radius—ipinapakita ng mga ito ang mga aktwal na bahagi ng interface (mga talahanayan, mga buton, mga form) na ni-render sa parehong monochrome palette, na ginagawang mukhang maayos na isinama ang mga screenshot sa pahina; (2) ang isang strip ng grayscale partner logo ay nagsisilbing social proof, ni-render nang patag, walang kulay o mga lalagyan. Walang mga larawan sa lifestyle, abstract gradients, o 3D render. Ang tanging elementong naglalarawan ay isang madilim na "tile" ng produkto, na nakasentro sa isang mainit na kulay abong background na may icon ng brand—ito ay nakikita bilang isang demonstrasyon ng produkto, hindi dekorasyon. Ang lahat ng mga imahe ay sumasakop sa isang layout na nakabatay sa teksto, kung saan ang biswal na bigat ay dinadala ng teksto.
Paleta
Neutral
- Page Canvas
#fafafa— Ang background ng pahina, ang postcard sa canvas, ang mapusyaw na teksto sa madilim na mga ibabaw – isang mainit na puting kulay na siyang pinagbabatayan ng buong sistema ng monochrome. - Hairline Border
#e5e7eb— Ang mga divider, card border, image frame, icon outline - ang pinakamadalas na ginagamit na uri ng outline sa sistema, ang tumutukoy sa spatial structure. - Card Surface
#ededed— Nakataas na background para sa mga kard, isang karagdagang ibabaw - ay matatagpuan isang hakbang sa itaas ng canvas, na lumilikha ng isang pangkat na walang mga anino. - Divider Mid
#dadada— Mga divider ng midtone at mga transisyon sa pagitan ng mga seksyon - Graphite
#242424— High-contrast neutral fill para sa mga pangunahing butones sa mga mapusyaw na ibabaw. - Ink Black
#171717— Body text, mga heading, mga balangkas ng icon - medyo mas maganda kaysa sa Graphite, ginagamit para sa tipograpiya kaysa sa mga surface.
Tipograpiya
mula 12 hanggang 128px · 7 hakbang
- Inter — kapalit: Inter (Google Fonts) · mga balangkas 500, 600, 700 · Isang sans-serif na interface ng sistema—nabigasyon, katawan ng teksto, mga buton, mga subheading, at mga heading ng seksyon. Timbang: 500 para sa katawan ng teksto at mga kontrol, 600 para sa mga subheading at mga accent ng nabigasyon, at 700 para sa mga heading ng seksyon. Ang malakas na espasyo sa mga negatibong letra ay nagpipiga sa mga geometric na hugis sa anumang laki, na nagbibigay sa interface ng isang pinaikling at teknikal na hitsura.
- Instrument Serif — kapalit: Playfair Display · mga balangkas 400 · Isang serif typeface na idinisenyo eksklusibo para sa mga headline at nilalamang editoryal. Ang bigat nito na 400 at ang pagitan ng mga letra na -0.025em ay lumilikha ng isang elegante at italikong hitsura na kabaligtaran ng industrial geometry ng Inter—isang signature technique: isang serif na salita o parirala sa loob ng isang sans-serif na pahina, na nagsisilbing visual na bantas sa halip na isang istilo ng headline.
- Fragment Mono — kapalit: JetBrains Mono · mga balangkas 400 · Mono na accent para sa mga inline na elementong parang code, mga label ng tag, at mga teknikal na callout. Madalang gamitin, lumalabas ito sa mga listahan ng function at mga inline na anotasyon kung saan gustong ipahiwatig ng design tool na "ito ang output ng makina."
Mga pagitan at anyo
| Layunin | Kahulugan |
|---|---|
| Densidad | karaniwan |
| Pangunahing hakbang | 8px |
| Radius ng buton | 16px |
| Radius ng card | 24px |
| Mga anino | walang - mga hangganan sa halip na mga anino |
| Sa pagitan ng mga seksyon | 64px |
| Lapad ng pahina | 1200px |
Gagawa ang AI ng website mo sa estilong Subframe 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
- monopo saigon — Isang likido at matingkad na liwanag sa likod ng katahimikan ng editoryal—isang monochrome editorial gallery na lumulutang sa tinunaw na liwanag
- Hyer Aviation — Takipsilim sa cockpit sa ibabaw ng pergamino. Ang maputlang kalangitan ng bukang-liwayway ay nagtatagpo sa logo na kasinglaki ng fuselage na may serif, at isang mainit na accent na luwad ang pumuputol sa monochrome na pagpipigil.
- OFF+BRAND. — Iridescent sphere sa mainit na pergamino
- Seed — isang buhay na organismo sa ilalim ng salamin sa laboratoryo
- Eindhoven Design District — Ang brutalismo ng editoryal sa puting papel ay isang manipesto ng disenyo ng munisipyo, na isinulat sa malaking letra, na may kaunting potograpiya at ganap na pagpipigil.
- Miranda — Klasikong malawak na format na tipo sa light cream na background—isang editoryal sa pahayagan para sa digital na panahon
- Monocle — Isang de-kalidad at malawak na format na pahayagan sa kulay kremang papel. Isang maingat na piniling editoryal, kung saan ang bawat kolum ay nararapat sa kani-kanilang lugar, at iisang makabuluhang kulay lamang ang lumilitaw sa pahina.
- Agencja brandingowa — Isang galeriya ng editoryal na may puting kulay at tipograpiyang gawa sa itim na tinta
- Websmith Studio — Liwanag ng umaga sa kremang papel
- Aspelin Reitan — Arkibong Arkitektura ng Candlelight - Ang pahina ay mukhang isang portfolio ng mga itinayong espasyo, na nakadikit sa isang mainit na kremang pader, na may isang linya ng puting teksto na lumulutang sa itaas ng bawat larawan sa buong lapad ng pahina.
- Public — Isang monochrome editorial sa malamig na marmol—halos isang monochrome canvas, na may 300-point serif font at isang lilang accent ang gumagawa ng lahat ng gawaing pangkulay.
- Motto — Isang monolitong tipograpiko sa papel – isang nag-iisang, may kumpiyansang tinig na nagpapahayag ng sarili sa puting-niyebe na papel