Electronic Materials Office
Isang nagbabagang baga sa isang galeriya na pinalamutian ng uling
Ang Electronic Materials Office ay isang workshop na panggabi: isang matte jet-black na canvas, isang kumikinang na orange na baga, at isang typeface na bumubulong sa halip na nagpapahayag. Tinatrato ng interface ang bawat screen na parang isang madilim na studio—ang mga litrato ng keyboard ang tanging tunay na pinagmumulan ng liwanag, at sinusunod ito ng UI. Ang mga headline, na nakalagay sa 200-weight GT-Flexa, ay lumulutang sa malawak na negatibong espasyo; ang body copy ay sadyang maliit at makatao (Times). Sinusukat ang kulay: purong puti para sa type, muted purple (#9e9eff) para sa mga link, at isang orange (#f45500) na call to action sa pahina na kumikinang na may sarili nitong 30px glow. Ang mga component ay magkakasya nang mahigpit sa loob ng 20px radius, ang mga border ay halos hindi mapapansin sa #9d9d9d, at ang tanging mga anino sa system ay dalawang kulay na halo sa paligid ng pangunahing aksyon.
Isang full-width, charcoal canvas na may nakasentro, maximum-width na nilalaman (~1200px). Ang pangunahing screen ay nagsisimula sa isang 20px-radius media card na naglalaman ng isang product video, na sumasakop sa humigit-kumulang 80% ng lapad ng viewport, na agad na sinusundan ng isang multi-line na GT-Flexa 200 headline na bumabalot sa halos buong lapad ng nilalaman. Ritmo ng seksyon: isang seksyon ng paglalarawan ng produkto sa Tobias-style na all-caps, na sinusundan ng isang 2x2 grid (sa desktop) ng mga product description card. Gumagamit ang mga card ng 1px #9d9d9d na mga border at 24px na mga gutter sa pagitan ng mga ito. Malawak na patayong paghinga—ang mga seksyon ay pinaghihiwalay ng 48–128px na charcoal negative space sa halip na mga divider. Ang nabigasyon ay isang solong, transparent na panel na naka-angkla sa itaas, na may isang kumpol ng mga nakatagong link at isang Ember call-to-action. Walang sidebar, walang mega-menu, walang pangalawang nabigasyon.
Ang mga larawan ay para lamang sa mga layunin ng demonstrasyon ng produkto—isang close-up macro shot ng Altar I keyboard laban sa isang ganap na itim na background, na may backlight mula sa itaas, na nagiging sanhi ng pagkislap ng case at pag-reflect ng liwanag sa mga gilid ng keycaps. Walang lifestyle, walang mga kamay ng tao, walang konteksto sa kapaligiran. Ang imahe ay high-contrast at madilim; ang tanging kulay sa labas ng monochrome palette ay ang orange power switch sa keyboard mismo, na sumasalamin sa Ember Orange call-to-action. Ang mga larawan ay parisukat o 16:9, palaging inilalagay sa mga card na may 20px radius at lumalagpas sa mga gilid ng card (walang padding sa paligid ng larawan, at ang teksto ay nasa ibaba ng gilid). Estilo ng icon: ang tanging iconography ay isang maliit na puno na bilog (●) bago ang logo—isang orange na tuldok, ~6px ang kapal.
Paleta
Tatak
- Ember Orange
#f45500— Ang pangunahing buton ng aksyon na may fill ang tanging kromatikong ibabaw sa UI, na laging may kasamang 30px na orange na halo, na ginagawa itong kumikinang na parang filament; ang 30px na panlabas na glow sa pangunahing buton ng pagtawag ay dinoble ang simbolo ng Ember Orange hexagon, ngunit umiiral bilang isang anino sa halip na isang fill, na ginagawang mukhang naiilawan ang buton mula sa loob.
Neutral
- Studio Charcoal
#202020— Ang mga ibabaw ng kanbas at karton ay parang sahig ng isang madilim na galeriya, hindi kailanman ganap na itim, kaya't ang mata ay maaaring magpahinga sa malalambot na gilid. - Bone White
#ffffff— Pangunahing teksto, manipis na mga hangganan sa mga imahe, at isang bihirang nakabaligtad na ibabaw. Ang buong hirarkiya ng font ay pinapanatili nang hiwalay. - Ash Gray
#9d9d9d— Ang naka-mute na teksto, mga banayad na hangganan ng card, at mga hindi aktibong caption ang tanging mid-grey sa scheme ng kulay, na ginagamit kapag masyadong maingay ang puti. - Mid Felt
#eaeaea— Isang magaan na panghugas sa ibabaw para sa mga inverted panel o modal grid - isang lilim ng puti na nasa pagitan ng beige at maitim na canvas. - Carbon
#000000— Ang pinakakapansin-pansing diin ay para sa mga icon stroke at mga contrasting frame kung saan ang charcoal canvas ay masyadong magaan para mapanatili nang maayos ang hugis nito. - Lavender Link
#9e9eff— Ang kulay ng naka-embed na link at ang balangkas ng karagdagang action frame ay isang mahina at malamig na contrast sa mainit na orange, na tinitiyak na ang mga aksyon ay nababasa laban sa background na uling.
Tipograpiya
mula 16 hanggang 86px · 8 hakbang
- GT-Flexa — kapalit: Inter (200/400) or Manrope (200/400) · mga balangkas 200, 400 · Ang pangunahing font para sa mga heading at pandekorasyon na elemento. Ang bigat na 200 ay nagbibigay-daan para sa bawat heading na higit sa 24px—ito ay isang signature style: sa 68px at 86px, ang mga letra ay tila natutunaw sa atmospera sa halip na sumisigaw. Ang bigat na 400 ay angkop para sa mga subheading at caption ng card, kung saan ang mga ito ay halos hindi marinig. Ang pagitan ng mga linya ay binabawasan sa 1.0 sa pinakamalalaking laki, kaya ang pandekorasyon na font ay nakasalansan sa ibabaw ng isa't isa na parang isang haligi ng hangin.
- Tobias-light — kapalit: Söhne Buch or Inter Tight · mga balangkas 400 · Isang pangalawang istilo ng tipograpiya para sa mga heading ng seksyon at logo ng footer. Ginagamit ito nang isang hakbang sa ibaba ng GT-Flexa 200 upang lumikha ng isang tonal contrast—ang Tobias ay may mas arkitektura at ekspresyong pakiramdam, habang ang GT-Flexa ay mas atmospheric. Ang negative letter spacing ay nagpapaliit sa malawak na proporsyon ng Tobias Light.
- Times — kapalit: Source Serif 4 or PT Serif · mga balangkas 400 · Ang katawan ng teksto at mga talata ng pamagat ay sadyang kontrapunto sa heometriko at pandekorasyon na mga font, gamit ang mga serif. Ang mga serif ay nagdaragdag ng init at awtoridad sa editoryal sa mga deskripsyon ng produkto nang hindi lumalagpas sa laki ng katawan ng teksto.
Mga pagitan at anyo
| Layunin | Kahulugan |
|---|---|
| Densidad | siksik |
| Pangunahing hakbang | 4-8px |
| Radius ng buton | 20px |
| Radius ng card | 20px |
| Mga anino | walang - mga hangganan sa halip na mga anino |
| Sa pagitan ng mga seksyon | 48-128px |
| Lapad ng pahina | 1200px |
Gagawa ang AI ng website mo sa estilong Electronic Materials Office 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
- OFFFICE : — isang noir gallery na nababalot ng monolitikong font
- Bibliothèque — Isang itim na hugis-kubo na galeriya sa ilalim ng spotlight – isang nag-iisang maliwanag na plato sa isang malawak at madilim na bulwagan
- 21 TSI — Isang pulang kawalan, isang nag-iisang silweta – isang editoryal na may mataas na istilo kung saan ang user interface ay natutunaw sa kapaligiran
- Structured — Galeriya ng Renaissance sa papel na parang plasticine
- CHAIBOY — Isang itim na gallery wall na may iisang litratong may backlit
- Holiday 100 — Isang galeriya ng mga regalo sa hatinggabi—isang serif na headline ang nagsisilbing spotlight, isang madilim na canvas ang nagsisilbing velvet na dingding, at ang bawat larawan ng produkto ay nakasabit na parang isang maingat na piniling frame.
- Apple (España) — Ang galeriya ng museo, sa banayad na liwanag ng araw, ay isang nag-iisa, nakakabighani, at magaan na puting espasyo, kung saan ang bawat eksibit ay naliliwanagan ng isang spotlight na nakasandal sa isang dingding na may bahagyang kulay.
- Analogue — Itim na display case ng gallery – mga paninda na nakapatong sa kawalan
- Apple (España) — Ang eksibisyon ng Obsidian Gallery ay isang madilim na bulwagan kung saan ang isang bagay na gawa sa titan ay kumikinang laban sa isang madilim na kapaligiran.
- Studio Oker — Isang madilim na galeriya na may mga iskarlatang palamuti—isang silid para sa mga portfolio na may mga itim na dingding, kung saan tila lumulutang ang mga puting letra at isang pulang bulong ang pumuputol sa katahimikan.
- 099 SUPPLY — Isang gallery wall na puno ng mga itim at puting bagay
- Retool — Isang mainit na pagawaan ng obsidian - isang ibabaw para sa mga kagamitang may katumpakan, na nililiwanagan ng mga nagbabagang baga, kung saan nalilikha ang lahat