Electronic Materials Office
Usa ka nagdilaab nga baga sa usa ka galeriya nga gidekorasyonan og uling
Ang Electronic Materials Office usa ka workshop nga ginabuhat sa kagabhion: usa ka matte jet-black nga canvas, usa ka naggilakgilak nga orange nga baga, ug usa ka typeface nga naghunghong imbes nga nagpahayag. Gitratar sa interface ang matag screen sama sa usa ka ngitngit nga studio—ang mga litrato sa keyboard mao lamang ang tinuod nga tinubdan sa kahayag, ug ang UI nagsunod niini. Ang mga headline, nga gibutang sa 200-weight GT-Flexa, naglutaw sa halapad nga negatibo nga wanang; ang body copy gituyo nga gamay ug humanistiko (Times). Ang kolor gisukod: puro nga puti para sa type, muted purple (#9e9eff) para sa mga link, ug usa ka orange (#f45500) nga call to action sa panid nga nagdan-ag sa kaugalingon nga 30px nga kahayag. Ang mga component hugot nga mohaom sulod sa 20px radius, ang mga border halos dili mamatikdan sa #9d9d9d, ug ang bugtong mga anino sa sistema mao ang duha ka kolor nga halo sa palibot sa pangunang aksyon.
Usa ka full-width, charcoal canvas nga adunay nakasentro, maximum-width nga content (~1200px). Ang main screen magsugod sa usa ka 20px-radius media card nga adunay sulod nga product video, nga nag-okupar og halos 80% sa viewport width, gisundan dayon sa usa ka multi-line GT-Flexa 200 headline nga hapit mokabat sa tibuok content width. Section rhythm: usa ka product description section sa Tobias-style all-caps, gisundan sa 2x2 grid (sa desktop) sa product description cards. Ang mga card mogamit og 1px #9d9d9d borders ug 24px gutters taliwala niini. Daghang vertical breathing—ang mga seksyon gibulag sa 48–128px nga charcoal negative space imbes nga mga divider. Ang navigation usa ka single, transparent nga panel nga naka-angkla sa ibabaw, nga adunay pungpong sa mga tinago nga link ug usa ka Ember call-to-action. Walay sidebar, walay mega-menu, walay secondary navigation.
Ang mga imahe alang lamang sa katuyoan sa demonstrasyon sa produkto—usa ka close-up macro shot sa Altar I keyboard batok sa hingpit nga itom nga background, nga adunay backlight gikan sa ibabaw, nga hinungdan nga ang case mosiga ug ang mga keycaps mo-reflect sa kahayag sa palibot sa mga ngilit. Walay estilo sa kinabuhi, walay mga kamot sa tawo, walay konteksto sa palibot. Ang mga imahe taas og contrast ug ngitngit; ang bugtong kolor sa gawas sa monochrome palette mao ang orange nga power switch sa keyboard mismo, nga nag-echo sa Ember Orange call-to-action. Ang mga imahe kuwadrado o 16:9, kanunay nga gibutang sa mga kard nga adunay 20px radius ug molapas sa mga ngilit sa kard (walay padding sa palibot sa litrato, ug ang teksto naa sa ubos sa ngilit). Estilo sa icon: ang bugtong iconography usa ka gamay nga puno nga lingin (●) sa wala pa ang logo—usa ka orange nga tuldok, ~6px ang gibag-on.
Paleta
Brand
- Ember Orange
#f45500— Ang pangunang buton sa aksyon nga adunay fill mao lamang ang chromatic surface sa UI, kanunay nga giubanan sa usa ka 30px nga orange nga halo, nga naghimo niini nga modan-ag sama sa usa ka filament; ang 30px nga gawas nga glow sa pangunang buton sa pagtawag nagdoble sa simbolo sa Ember Orange hexagon, apan naglungtad isip usa ka anino imbes nga usa ka fill, nga naghimo sa buton nga daw nalamdagan gikan sa sulod.
Neutral
- Studio Charcoal
#202020— Ang mga nawong sa kanbas ug karton sama sa salog sa usa ka ngitngit nga galeriya, dili gyud hingpit nga itom, mao nga ang mata makapahulay sa humok nga mga ngilit. - Bone White
#ffffff— Pangunang teksto, nipis nga mga border sa mga imahe, ug usa ka talagsaon nga baliktad nga nawong. Ang tibuok nga hirarkiya sa font gimentinar nga independente. - Ash Gray
#9d9d9d— Ang muted nga teksto, dili kaayo klaro nga mga border sa kard, ug dili aktibo nga mga caption mao lamang ang tunga-tunga nga abohon sa color scheme, nga gigamit kung ang puti kusog ra kaayo. - Mid Felt
#eaeaea— Usa ka nipis nga surface wash para sa inverted panels o modal grids - usa ka landong sa puti nga nahimutang taliwala sa beige ug itom nga canvas. - Carbon
#000000— Ang labing talagsaong accent mao ang mga icon stroke ug contrasting frames diin ang charcoal canvas gaan ra kaayo aron dili makontrol ang porma niini. - Lavender Link
#9e9eff— Ang kolor sa gisulod nga sumpay ug ang outline sa dugang nga action frame usa ka hinay ug bugnaw nga kontraste sa init nga kahel, nga nagsiguro nga ang mga aksyon mabasa batok sa uling nga background.
Tipograpiya
gikan sa 16 ngadto sa 86px · 8 ka lakang
- GT-Flexa — kapuli: Inter (200/400) or Manrope (200/400) · mga balangkas 200, 400 · Ang pangunang font para sa mga ulohan ug mga pangdekorasyon nga elemento. Ang 200 nga gibug-aton nagtugot sa matag ulohan nga labaw sa 24px—kini usa ka signature style: sa 68px ug 86px, ang mga letra daw matunaw sa atmospera imbes nga mosinggit. Ang 400 nga gibug-aton angay para sa mga subheading ug mga caption sa kard, diin halos dili kini madungog. Ang gilay-on sa linya gipamub-an ngadto sa 1.0 sa pinakadako nga gidak-on, mao nga ang pangdekorasyon nga font nag-ipon-ipon sama sa usa ka kolum sa hangin.
- Tobias-light — kapuli: Söhne Buch or Inter Tight · mga balangkas 400 · Usa ka ikaduhang estilo sa tipograpiya para sa mga ulohan sa seksyon ug sa logo sa footer. Gigamit kini usa ka lakang ubos sa GT-Flexa 200 aron makahimo og tonal contrast—ang Tobias adunay mas arkitektura ug ekspresyon nga pagbati, samtang ang GT-Flexa mas atmospheric. Ang negative letter spacing nagpamenos sa lapad nga proporsyon sa Tobias Light.
- Times — kapuli: Source Serif 4 or PT Serif · mga balangkas 400 · Ang body text ug mga heading paragraph usa ka tinuyo nga kontrapunto sa geometric, decorative nga mga font, gamit ang mga serif. Ang mga serif nagdugang og kainit ug awtoridad sa editoryal sa mga deskripsyon sa produkto nga dili molapas sa gidak-on sa body text.
Mga interval ug porma
| Katuyoan | Kahulugan |
|---|---|
| Densidad | dasok |
| Batakang lakang | 4-8px |
| Radius sa butones | 20px |
| Radius sa kard | 20px |
| Mga anino | walay - mga utlanan imbes nga mga anino |
| Taliwala sa mga seksyon | 48-128px |
| Lapad sa panid | 1200px |
Ang AI motukod sa imong website sa estilo sa Electronic Materials Office ug mopuno niini
- Pun-a og mga produkto ug mga post pinaagi sa link - Instagram, TikTok, Facebook.
- Ibalhin ang sulod gikan sa imong daang site—ipiho lang ang adres.
- Modernong disenyo sa pinakamaayong makina: React ( Next.js) nga adunay server rendering ug SEO optimization nga andam na gamiton.
- Bug-os nga awtomatik nga pag-optimize sa SEO para sa mga resulta sa pagpangita ug mga rekomendasyon sa neural network.
Parehas nga mga estilo
- OFFFICE : — usa ka noir gallery nga natabunan sa monolithic font
- Bibliothèque — Usa ka itom nga kubo nga galeriya ubos sa spotlight – usa ka nag-inusarang nagsiga nga plato sa usa ka lapad ug ngitngit nga hawanan
- 21 TSI — Usa ka mapula nga haw-ang, usa ka nag-inusarang silweta – usa ka editoryal nga taas og uso diin ang user interface natunaw ngadto sa atmospera
- Structured — Galeriya sa Renaissance sa papel nga sama sa plasticine
- CHAIBOY — Usa ka itom nga bungbong sa gallery nga adunay usa ka litrato nga gidayandayanan og backlit
- Holiday 100 — Usa ka galeriya sa mga regalo sa tungang gabii—usa ka serif nga ulohan ang nagsilbing spotlight, usa ka itom nga canvas isip velvet nga bungbong, ug ang matag imahe sa produkto nagbitay sama sa usa ka maampingong gipili nga bayanan.
- Apple (España) — Ang galeriya sa museyo, sa hilom nga kahayag sa adlaw, usa ka makabibihag, gaan nga puti nga luna, diin ang matag eksibit gidan-agan sa usa ka spotlight batok sa usa ka gamay nga kolor nga bungbong.
- Analogue — Itom nga display case sa gallery – ang mga produkto naglutaw-lutaw sa kawang
- Apple (España) — Ang Obsidian Gallery showcase usa ka ngitngit nga exhibition hall diin ang usa ka butang nga hinimo sa titanium nagdan-ag batok sa ngitngit kaayong background.
- Studio Oker — Usa ka ngitngit nga galeriya nga may mga kolor nga eskarlata—usa ka lawak sa portfolio nga gilibutan og itom nga mga bungbong, diin ang mga puti nga letra daw naglutaw ug usa ka pula nga hunghong ang miputol sa kahilom.
- 099 SUPPLY — Usa ka bungbong sa gallery nga puno sa itom ug puti nga mga butang
- Retool — Usa ka mainit nga obsidian workshop - usa ka nawong para sa mga himan nga tukma, nga gidan-agan sa nagbaga nga mga baga, diin ang tanan gibuhat