Electronic Materials Office
Una brasa brillant en una galeria decorada amb carbó vegetal
L'Oficina de Materials Electrònics és un taller nocturn: un llenç negre mat, una única brasa taronja brillant i una tipografia que xiuxiueja en lloc de declarar. La interfície tracta cada pantalla com un estudi a les fosques: les fotografies del teclat són l'única font de llum real, i la interfície d'usuari l'obeeix. Els titulars, fixats en GT-Flexa de 200 gramatges, suren en un vast espai negatiu; el text del cos és intencionadament petit i humanístic (Times). El color es mesura: blanc pur per a la lletra, porpra apagat (#9e9eff) per als enllaços i una única crida a l'acció taronja (#f45500) a la pàgina que brilla amb la seva pròpia resplendor de 30 px. Els components encaixen perfectament dins d'un radi de 20 px, les vores gairebé no es perceben a #9d9d9d, i les úniques ombres del sistema són dos halos de colors al voltant de l'acció principal.
Un llenç de color carbó d'amplada completa amb contingut centrat d'amplada màxima (~1200 px). La pantalla principal comença amb una targeta multimèdia de 20 px de radi que conté un vídeo de producte, que ocupa aproximadament el 80% de l'amplada de la finestra gràfica, seguida immediatament d'un titular GT-Flexa 200 de diverses línies que abasta gairebé tota l'amplada del contingut. Ritme de la secció: una única secció de descripció del producte en majúscules a l'estil Tobias, seguida d'una quadrícula de 2x2 (a l'escriptori) de targetes de descripció del producte. Les targetes utilitzen vores #9d9d9d d'1 px i marges de 24 px entre elles. Respiració vertical generosa: les seccions estan separades per 48–128 px d'espai negatiu de color carbó en lloc de divisors. La navegació és un únic panell transparent ancorat a la part superior, amb un grup d'enllaços ocults i una única crida a l'acció d'Ember. Sense barra lateral, sense megamenú, sense navegació secundària.
Les imatges són només per a demostracions del producte: una macrofotografia de primer pla del teclat Altar I sobre un fons completament negre, amb retroiluminació des de dalt, que fa que la carcassa brilli i les tecles reflecteixin la llum a les vores. Sense estil de vida, sense mans humanes, sense context ambiental. Les imatges tenen un contrast alt i són fosques; l'únic color fora de la paleta monocromàtica és l'interruptor d'engegada taronja del teclat, que recorda la crida a l'acció Ember Orange. Les imatges són quadrades o 16:9, sempre col·locades en targetes amb un radi de 20 px i que s'estenen més enllà de les vores de la targeta (no hi ha farciment al voltant de la foto i el text està per sota de la vora). Estil d'icona: l'única iconografia és un petit cercle omplert (●) abans del logotip, un únic punt taronja, d'uns 6 px de gruix.
Paleta
Marca
- Ember Orange
#f45500— El botó d'acció principal amb un farciment és l'única superfície cromàtica de la interfície d'usuari, sempre acompanyat d'un halo taronja de 30 px, que el fa brillar com un filament; la brillantor exterior de 30 px del botó de trucada principal duplica el símbol de l'hexàgon Ember Orange, però existeix com una ombra en lloc d'un farciment, fent que el botó sembli il·luminat des de dins.
Neutral
- Studio Charcoal
#202020— Les superfícies de tela i cartró són com el terra d'una galeria fosca, mai completament negra, de manera que la vista pot descansar sobre les vores suaus. - Bone White
#ffffff— Text principal, vores primes a les imatges i una superfície invertida poc freqüent. Tota la jerarquia de fonts es manté de manera independent. - Ash Gray
#9d9d9d— El text silenciat, les vores subtils de les targetes i els subtítols inactius són els únics grisos mitjans de l'esquema de colors, que s'utilitzen quan el blanc és massa fort. - Mid Felt
#eaeaea— Un rentat de superfície lleuger per a panells invertits o quadrícules modals: un to de blanc que es troba entre el beix i el llenç fosc. - Carbon
#000000— L'accent més cridaner és per als traços d'icona i els marcs contrastats on el llenç de carbó és massa clar per mantenir bé la seva forma. - Lavender Link
#9e9eff— El color de l'enllaç incrustat i el contorn del marc d'acció addicional contrasten suaument i fred amb el taronja càlid, cosa que garanteix que les accions siguin llegibles sobre el fons carbó vegetal.
Tipografia
de 16 a 86 px · 8 passos
- GT-Flexa — reemplaçament: Inter (200/400) or Manrope (200/400) · esquemes 200, 400 · La font principal per a encapçalaments i elements decoratius. El gruix de 200 permet tots els encapçalaments superiors a 24 px; aquest és un estil característic: amb 68 px i 86 px, les lletres semblen dissoldre's a l'atmosfera en lloc de cridar. El gruix de 400 és adequat per a subtítols i peus de foto de targetes, on amb prou feines se senten. L'interlineat es redueix a 1.0 en les mides més grans, de manera que la font decorativa s'apila una sobre l'altra com una columna d'aire.
- Tobias-light — reemplaçament: Söhne Buch or Inter Tight · esquemes 400 · Un estil tipogràfic secundari per als encapçalaments de secció i el logotip del peu de pàgina. S'utilitza un pas per sota de GT-Flexa 200 per crear un contrast tonal: Tobias té un toc més arquitectònic i expressiu, mentre que GT-Flexa és més atmosfèric. L'espaiat negatiu entre lletres redueix les àmplies proporcions de Tobias Light.
- Times — reemplaçament: Source Serif 4 or PT Serif · esquemes 400 · El text del cos i els paràgrafs d'encapçalament són un contrapunt deliberat a les fonts geomètriques i decoratives, que utilitzen serifs. Els serifs afegeixen calidesa i autoritat editorial a les descripcions dels productes sense excedir la mida del text del cos.
Intervals i forma
| Propòsit | Significat |
|---|---|
| Densitat | dens |
| Pas bàsic | 4-8px |
| Radi del botó | 20px |
| Radi de la targeta | 20px |
| Ombres | sense vores en comptes d'ombres |
| Entre seccions | 48-128px |
| Amplada de la pàgina | 1200px |
La IA crearà el vostre lloc web a l'estil Electronic Materials Office i l'omplirà.
- Omple amb productes i publicacions a través de l'enllaç: Instagram, TikTok, Facebook.
- Transfereix contingut del teu lloc web antic; només cal que especifiquis l'adreça.
- Disseny modern en el millor motor: React ( Next.js) amb renderització de servidor i optimització SEO des del primer moment.
- Optimització SEO totalment automatitzada per a resultats de cerca i recomanacions de xarxes neuronals.
Estils similars
- OFFFICE : — una galeria noir engolida per una font monolítica
- Bibliothèque — Una galeria negra en forma de cub sota un focus: una placa il·luminada solitària en una sala vasta i fosca
- 21 TSI — Un buit carmesí, una sola silueta: un editorial d'alta costura on la interfície d'usuari es dissol en l'atmosfera.
- Structured — Galeria renaixentista sobre paper semblant a la plastilina
- CHAIBOY — Una paret de galeria negra amb una única fotografia retroil·luminada
- Holiday 100 — Una galeria de regals a mitjanit: un titular amb serifa fa de focus, un llenç fosc fa de paret de vellut i cada imatge de producte penja com un marc acuradament seleccionat.
- Apple (España) — La galeria del museu, a la llum suau del dia, és un espai blanc únic, captivador i sense pes, amb cada exposició il·luminada per un focus contra una paret lleugerament tintada.
- Analogue — Vitrina de galeria negra: les mercaderies suspenen en el buit
- Apple (España) — La vitrina de la Galeria Obsidian és una sala d'exposicions fosca on un únic objecte de titani brilla sobre un fons negre com la nit.
- Studio Oker — Una galeria fosca amb detalls escarlata: una sala de portfoli folrada amb parets negres, on les lletres blanques semblen surar i un únic xiuxiueig vermell talla el silenci.
- 099 SUPPLY — Una paret de galeria plena d'objectes en blanc i negre
- Retool — Un taller d'obsidiana càlid: una superfície per a eines de precisió, il·luminada per brases fumejants, on tot es crea