Electronic Materials Office
Een gloeiende kool in een galerij versierd met houtskool.
Het Electronic Materials Office is een nachtelijke werkplaats: een matzwart canvas, een enkele gloeiende oranje gloed en een lettertype dat fluistert in plaats van luid verkondigt. De interface behandelt elk scherm als een verduisterde studio – foto's van het toetsenbord zijn de enige echte lichtbron en de gebruikersinterface gehoorzaamt deze. Kopteksten, gezet in GT-Flexa met een dikte van 200, zweven in een enorme negatieve ruimte; de hoofdtekst is opzettelijk klein en menselijk (Times). Kleur is afgemeten: puur wit voor tekst, gedempt paars (#9e9eff) voor links en een enkele oranje (#f45500) call-to-action op de pagina die gloeit met een eigen gloed van 30px. Componenten passen strak binnen een straal van 20px, randen zijn nauwelijks zichtbaar met #9d9d9d en de enige schaduwen in het systeem zijn twee gekleurde halo's rond de primaire actie.
Een volledig breed, antracietkleurig canvas met gecentreerde content over de maximale breedte (~1200px). Het hoofdscherm begint met een mediakaart met een straal van 20px, die een productvideo bevat en ongeveer 80% van de breedte van het scherm inneemt. Direct gevolgd door een GT-Flexa 200 koptekst van meerdere regels die bijna de volledige breedte van de content beslaat. Sectieritme: een enkele productbeschrijving in Tobias-stijl, volledig in hoofdletters, gevolgd door een 2x2 raster (op desktop) van productbeschrijvingskaarten. De kaarten hebben randen van 1px #9d9d9d en tussenruimtes van 24px. Ruime verticale ruimte: secties worden gescheiden door 48-128px aan antracietkleurige negatieve ruimte in plaats van scheidingslijnen. De navigatie bestaat uit een enkel, transparant paneel bovenaan, met een aantal verborgen links en een enkele Ember call-to-action. Geen zijbalk, geen megamenu, geen secundaire navigatie.
De afbeeldingen dienen uitsluitend ter demonstratie van het product: een close-up macrofoto van het Altar I-toetsenbord tegen een volledig zwarte achtergrond, met een achtergrondverlichting van bovenaf waardoor de behuizing oplicht en de toetsen aan de randen licht reflecteren. Geen lifestyle, geen menselijke handen, geen omgevingscontext. De beelden zijn contrastrijk en donker; de enige kleur buiten het monochrome kleurenpalet is de oranje aan/uit-schakelaar op het toetsenbord zelf, die de Ember Orange call-to-action weerspiegelt. Afbeeldingen zijn vierkant of 16:9, altijd geplaatst in kaarten met een straal van 20px en die buiten de randen van de kaart uitsteken (er is geen opvulling rond de foto en de tekst staat onder de rand). Iconenstijl: de enige iconografie is een kleine gevulde cirkel (●) vóór het logo – een enkele oranje stip, ongeveer 6px dik.
Palet
Merk
- Ember Orange
#f45500— De primaire actieknop met vulling is het enige chromatische oppervlak in de gebruikersinterface en wordt altijd vergezeld door een oranje halo van 30px, waardoor deze gloeit als een gloeidraad; de buitenste gloed van 30px op de primaire belknop is een kopie van het Ember Orange zeshoekige symbool, maar is een schaduw in plaats van een vulling, waardoor de knop van binnenuit verlicht lijkt.
Neutrale
- Studio Charcoal
#202020— De oppervlakken van canvas en karton zijn als de vloer van een donkere galerie, nooit helemaal zwart, zodat het oog kan rusten op de zachte randen. - Bone White
#ffffff— Hoofdtekst, dunne randen rond afbeeldingen en een zeldzaam omgekeerd oppervlak. De volledige lettertypehiërarchie wordt onafhankelijk beheerd. - Ash Gray
#9d9d9d— Gedempte tekst, subtiele kaartranden en inactieve bijschriften zijn de enige middengrijstinten in het kleurenschema, die worden gebruikt wanneer wit te opvallend is. - Mid Felt
#eaeaea— Een lichte, egale verf voor omgekeerde panelen of modale rasters - een tint wit die tussen beige en donker canvas in ligt. - Carbon
#000000— Het meest opvallende accent wordt gevormd door iconische lijnen en contrasterende kaders, waar het houtskoolkleurige canvas te licht is om zijn vorm goed te behouden. - Lavender Link
#9e9eff— De kleur van de ingebedde link en de omlijning van het extra actiekader vormen een gedempt, koel contrast met het warme oranje, waardoor de acties leesbaar blijven tegen de antracietkleurige achtergrond.
Typografie
van 16 tot 86px · 8 stappen
- GT-Flexa — vervanging: Inter (200/400) or Manrope (200/400) · overzichten 200, 400 · Het primaire lettertype voor koppen en decoratieve elementen. De dikte 200 maakt elke kop groter dan 24px mogelijk – dit is een kenmerkende stijl: bij 68px en 86px lijken de letters in de ruimte op te gaan in plaats van op te vallen. De dikte 400 is geschikt voor subkoppen en bijschriften op kaarten, waar ze nauwelijks hoorbaar zijn. De regelafstand is bij de grootste formaten teruggebracht tot 1,0, waardoor de decoratieve letters zich als een luchtkolom op elkaar stapelen.
- Tobias-light — vervanging: Söhne Buch or Inter Tight · overzichten 400 · Een secundaire typografische stijl voor sectiekoppen en het logo in de voettekst. Deze stijl is een tint lichter dan GT-Flexa 200 om een contrast te creëren: Tobias heeft een meer architectonische, expressieve uitstraling, terwijl GT-Flexa een meer atmosferische sfeer heeft. De negatieve letterafstand versmalt de brede proporties van Tobias Light.
- Times — vervanging: Source Serif 4 or PT Serif · overzichten 400 · De hoofdtekst en de kopteksten vormen een bewust contrast met de geometrische, decoratieve lettertypen, door het gebruik van schreefletters. De schreefletters geven de productbeschrijvingen een warme uitstraling en een gezaghebbende redactionele uitstraling, zonder de grootte van de hoofdtekst te overschrijden.
Intervallen en vorm
| Doel | Betekenis |
|---|---|
| Dikte | gespannen |
| Basisstap | 4-8px |
| Knopradius | 20px |
| Kaartradius | 20px |
| Schaduwen | geen randen in plaats van schaduwen |
| Tussen secties | 48-128px |
| Paginabreedte | 1200px |
AI bouwt je website in de stijl Electronic Materials Office en vult deze in.
- Vul het account aan met producten en berichten via de link - Instagram, TikTok, Facebook.
- Neem de inhoud van je oude website over; geef gewoon het adres op.
- Modern design op de beste engine: React ( Next.js) met server-side rendering en SEO-optimalisatie direct uit de doos.
- Volledig geautomatiseerde SEO-optimalisatie voor zoekresultaten en aanbevelingen op basis van neurale netwerken.
Vergelijkbare stijlen
- OFFFICE : — een noir-galerie gehuld in een monolithisch lettertype
- Bibliothèque — Een zwarte, kubusvormige galerij in het licht van een spot – een eenzame, verlichte plaat in een immense, donkere hal.
- 21 TSI — Een karmozijnrode leegte, een enkel silhouet – een high fashion-editorial waarin de gebruikersinterface opgaat in de atmosfeer.
- Structured — Renaissance-galerij op plasticine-achtig papier
- CHAIBOY — Een zwarte galeriewand met één enkele, van achteren verlichte foto.
- Holiday 100 — Een galerij van geschenken om middernacht – een kop in schreeflettertype dient als spotlight, een donker canvas als fluwelen muur, en elke productafbeelding hangt als een zorgvuldig uitgekozen lijst.
- Apple (España) — De museumgalerie, badend in zacht daglicht, is één grote, fascinerende, gewichtloze witte ruimte, waarbij elk object wordt verlicht door een spotlicht tegen een licht getinte muur.
- Analogue — Zwarte vitrinekast – goederen zweven in de leegte.
- Apple (España) — De Obsidian Gallery is een donkere tentoonstellingsruimte waar een enkel titanium object oplicht tegen een pikzwarte achtergrond.
- Studio Oker — Een verduisterde galerij met scharlakenrode accenten – een portfolioruimte met zwarte muren, waar witte letters lijken te zweven en een enkel rood gefluister de stilte doorbreekt.
- 099 SUPPLY — Een galeriewand gevuld met zwart-witte objecten.
- Retool — Een warme obsidiaanwerkplaats - een oppervlak voor precisiegereedschap, verlicht door smeulende kolen, waar alles wordt gecreëerd.