Electronic Materials Office
Un tizzone ardente in una galleria decorata con carbone
L'Electronic Materials Office è un laboratorio notturno: una tela nera opaca, un'unica brace arancione luminosa e un carattere tipografico che sussurra anziché proclamare. L'interfaccia tratta ogni schermata come uno studio oscurato: le fotografie della tastiera sono l'unica vera fonte di luce e l'interfaccia utente vi si adegua. I titoli, composti in GT-Flexa 200, fluttuano in un ampio spazio negativo; il testo del corpo è volutamente piccolo e umano (Times). Il colore è misurato: bianco puro per il testo, viola tenue (#9e9eff) per i link e un singolo invito all'azione arancione (#f45500) sulla pagina che brilla di un proprio bagliore di 30 pixel. I componenti si adattano perfettamente entro un raggio di 20 pixel, i bordi sono appena percettibili in #9d9d9d e le uniche ombre nel sistema sono due aloni colorati attorno all'azione principale.
Una tela color antracite a tutta larghezza con contenuto centrato e a larghezza massima (~1200px). La schermata principale inizia con una media card con raggio di 20px contenente un video del prodotto, che occupa circa l'80% della larghezza della viewport, immediatamente seguita da un titolo GT-Flexa 200 su più righe che si adatta quasi all'intera larghezza del contenuto. Ritmo delle sezioni: una singola sezione di descrizione del prodotto in maiuscolo in stile Tobias, seguita da una griglia 2x2 (su desktop) di schede di descrizione del prodotto. Le schede utilizzano bordi #9d9d9d da 1px e spaziature tra di esse di 24px. Ampia spaziatura verticale: le sezioni sono separate da uno spazio negativo color antracite di 48-128px anziché da divisori. La navigazione è costituita da un singolo pannello trasparente ancorato in alto, con un gruppo di link nascosti e una singola call-to-action di Ember. Nessuna barra laterale, nessun mega-menu, nessuna navigazione secondaria.
Le immagini sono a scopo puramente dimostrativo: una macro ravvicinata della tastiera Altar I su uno sfondo completamente nero, con retroilluminazione dall'alto che fa brillare la scocca e riflettere la luce sui tasti lungo i bordi. Nessun contesto di vita quotidiana, nessuna mano umana, nessun ambiente circostante. Le immagini sono ad alto contrasto e scure; l'unico colore al di fuori della palette monocromatica è l'interruttore di accensione arancione sulla tastiera stessa, che richiama la call-to-action Ember Orange. Le immagini sono quadrate o 16:9, sempre inserite in schede con un raggio di 20 pixel e che si estendono oltre i bordi della scheda (non c'è spaziatura intorno alla foto e il testo si trova sotto il bordo). Stile delle icone: l'unica iconografia è un piccolo cerchio pieno (●) prima del logo: un singolo punto arancione, spesso circa 6 pixel.
Tavolozza
Marca
- Ember Orange
#f45500— Il pulsante di azione principale con riempimento è l'unica superficie cromatica nell'interfaccia utente, sempre accompagnato da un alone arancione di 30px, che lo fa brillare come un filamento; il bagliore esterno di 30px sul pulsante di chiamata principale duplica il simbolo esagonale di Ember Orange, ma esiste come ombra anziché come riempimento, facendo apparire il pulsante illuminato dall'interno.
Neutro
- Studio Charcoal
#202020— Le superfici di tela e cartone sono come il pavimento di una galleria buia, mai completamente nere, in modo che l'occhio possa posarsi sui bordi sfumati. - Bone White
#ffffff— Testo principale, bordi sottili intorno alle immagini e una rara superficie invertita. L'intera gerarchia dei caratteri è gestita in modo indipendente. - Ash Gray
#9d9d9d— Il grigio medio, presente solo in alcuni punti della combinazione di colori, si attenua nei testi, nei bordi sottili delle carte e nelle didascalie non attive, risultando indispensabile quando il bianco è troppo acceso. - Mid Felt
#eaeaea— Una leggera velatura superficiale per pannelli invertiti o griglie modali: una tonalità di bianco che si colloca tra il beige e la tela scura. - Carbon
#000000— L'effetto più evidente si ottiene con i tratti delle icone e le cornici a contrasto, dove la tela a carboncino è troppo chiara per mantenere bene la sua forma. - Lavender Link
#9e9eff— Il colore del collegamento incorporato e il contorno della cornice di azione aggiuntiva creano un contrasto tenue e freddo con l'arancione caldo, garantendo che le azioni siano leggibili sullo sfondo color antracite.
Tipografia
da 16 a 86 pixel · 8 passaggi
- GT-Flexa — sostituzione: Inter (200/400) or Manrope (200/400) · contorni 200, 400 · Il carattere principale per titoli ed elementi decorativi. Il peso 200 consente di utilizzare qualsiasi titolo superiore a 24px: questo è uno stile distintivo; a 68px e 86px, le lettere sembrano dissolversi nell'atmosfera anziché risaltare. Il peso 400 è adatto per sottotitoli e didascalie delle schede, dove sono appena percettibili. L'interlinea è ridotta a 1.0 alle dimensioni maggiori, in modo che il carattere decorativo si sovrapponga come una colonna d'aria.
- Tobias-light — sostituzione: Söhne Buch or Inter Tight · contorni 400 · Uno stile tipografico secondario per le intestazioni di sezione e il logo a piè di pagina. Viene utilizzato un gradino sotto GT-Flexa 200 per creare un contrasto tonale: Tobias ha un aspetto più architettonico ed espressivo, mentre GT-Flexa è più atmosferico. La spaziatura negativa tra le lettere restringe le ampie proporzioni di Tobias Light.
- Times — sostituzione: Source Serif 4 or PT Serif · contorni 400 · Il corpo del testo e i titoli dei paragrafi creano un contrasto voluto con i caratteri geometrici e decorativi, utilizzando le grazie. Le grazie conferiscono calore e autorevolezza editoriale alle descrizioni dei prodotti senza superare le dimensioni del testo principale.
Intervalli e forma
| Scopo | Senso |
|---|---|
| Densità | denso |
| Passo base | 4-8px |
| Raggio del pulsante | 20px |
| Raggio della carta | 20px |
| Ombre | no - bordi invece di ombre |
| Tra le sezioni | 48-128px |
| Larghezza del pannello | 1200px |
L'IA creerà il tuo sito web nello stile Electronic Materials Office e lo riempirà
- Pubblica prodotti e contenuti tramite il link: Instagram, TikTok, Facebook.
- Trasferisci i contenuti dal tuo vecchio sito: basta specificare l'indirizzo.
- Design moderno sul miglior motore: React ( Next.js) con rendering lato server e ottimizzazione SEO integrata.
- Ottimizzazione SEO completamente automatizzata per i risultati di ricerca e raccomandazioni basate su reti neurali.
Stili simili
- OFFFICE : — una galleria noir inghiottita da un carattere monolitico
- Bibliothèque — Una galleria nera a forma di cubo illuminata da un riflettore: una lastra solitaria e luminosa in una vasta sala buia.
- 21 TSI — Un vuoto cremisi, una silhouette unica: un editoriale di alta moda in cui l'interfaccia utente si dissolve nell'atmosfera.
- Structured — Galleria rinascimentale su carta simile alla plastilina
- CHAIBOY — Una parete nera della galleria con un'unica fotografia retroilluminata.
- Holiday 100 — Una galleria di regali a mezzanotte: un titolo con grazie funge da riflettore, una tela scura da parete di velluto e ogni immagine di prodotto è appesa come una cornice accuratamente selezionata.
- Apple (España) — La galleria del museo, immersa in una tenue luce naturale, è un unico, affascinante spazio bianco e etereo, dove ogni opera è illuminata da un faretto proiettato su una parete leggermente colorata.
- Analogue — Vetrina nera da galleria: le merci fluttuano nel vuoto
- Apple (España) — La vetrina della Obsidian Gallery è una sala espositiva buia dove un singolo oggetto in titanio risplende su uno sfondo nero pece.
- Studio Oker — Una galleria in penombra con accenti scarlatti: una sala portfolio dalle pareti nere, dove le lettere bianche sembrano fluttuare e un singolo sussurro rosso squarcia il silenzio.
- 099 SUPPLY — Una parete della galleria piena di oggetti in bianco e nero
- Retool — Un'officina calda di ossidiana: una superficie per strumenti di precisione, illuminata da braci ardenti, dove tutto prende forma.