Electronic Materials Office
Bara api yang menyala di galeri yang didekorasi dengan arang.
Kantor Material Elektronik bagaikan bengkel kerja larut malam: kanvas hitam pekat matte, satu bara api oranye yang menyala, dan jenis huruf yang berbisik daripada menyatakan. Antarmuka memperlakukan setiap layar seperti studio yang gelap—foto keyboard adalah satu-satunya sumber cahaya nyata, dan UI mematuhinya. Judul, yang menggunakan GT-Flexa dengan bobot 200, mengambang di ruang negatif yang luas; teks isi sengaja dibuat kecil dan humanistik (Times). Warna diukur: putih murni untuk teks, ungu lembut (#9e9eff) untuk tautan, dan satu ajakan bertindak oranye (#f45500) di halaman yang bersinar dengan cahaya 30px-nya sendiri. Komponen pas dengan rapat dalam radius 20px, batas hampir tidak terlihat pada #9d9d9d, dan satu-satunya bayangan dalam sistem adalah dua lingkaran warna di sekitar aksi utama.
Kanvas berwarna abu-abu gelap dengan lebar penuh dan konten dengan lebar maksimum (~1200px) yang terpusat. Layar utama dimulai dengan kartu media berradius 20px yang berisi video produk, menempati sekitar 80% lebar viewport, segera diikuti oleh headline multi-baris GT-Flexa 200 yang membungkus hampir seluruh lebar konten. Ritme bagian: satu bagian deskripsi produk dalam gaya Tobias dengan huruf kapital semua, diikuti oleh grid 2x2 (pada desktop) kartu deskripsi produk. Kartu menggunakan border #9d9d9d 1px dan jarak antar kartu 24px. Ruang vertikal yang lapang—bagian dipisahkan oleh ruang negatif abu-abu gelap 48–128px, bukan pembatas. Navigasi berupa panel transparan tunggal yang berlabuh di bagian atas, dengan kumpulan tautan tersembunyi dan satu ajakan bertindak Ember. Tidak ada sidebar, tidak ada mega-menu, tidak ada navigasi sekunder.
Gambar-gambar tersebut hanya untuk tujuan demonstrasi produk—foto makro jarak dekat keyboard Altar I dengan latar belakang hitam pekat, dengan cahaya latar dari atas, menyebabkan casing bersinar dan tuts memantulkan cahaya di sekitar tepinya. Tidak ada gaya hidup, tidak ada tangan manusia, tidak ada konteks lingkungan. Gambar memiliki kontras tinggi dan gelap; satu-satunya warna di luar palet monokrom adalah sakelar daya oranye pada keyboard itu sendiri, yang menggemakan ajakan bertindak Ember Orange. Gambar berbentuk persegi atau 16:9, selalu ditempatkan dalam kartu dengan radius 20px dan meluas melampaui tepi kartu (tidak ada padding di sekitar foto, dan teks berada di bawah tepi). Gaya ikon: satu-satunya ikonografi adalah lingkaran kecil yang terisi (●) sebelum logo—titik oranye tunggal, setebal ~6px.
Palet
Merek
- Ember Orange
#f45500— Tombol aksi utama dengan isian adalah satu-satunya permukaan kromatik di UI, selalu disertai dengan lingkaran cahaya oranye 30px, membuatnya bersinar seperti filamen; cahaya luar 30px pada tombol panggilan utama menduplikasi simbol heksagon Ember Orange, tetapi ada sebagai bayangan dan bukan isian, membuat tombol tampak bercahaya dari dalam.
Netral
- Studio Charcoal
#202020— Permukaan kanvas dan karton itu seperti lantai galeri yang gelap, tidak pernah sepenuhnya hitam, sehingga mata dapat beristirahat pada tepian yang lembut. - Bone White
#ffffff— Teks utama, batas tipis pada gambar, dan permukaan terbalik yang jarang ditemukan. Seluruh hierarki font dipertahankan secara independen. - Ash Gray
#9d9d9d— Teks yang redup, batas kartu yang halus, dan keterangan yang tidak aktif adalah satu-satunya warna abu-abu tengah dalam skema warna, yang digunakan ketika warna putih terlalu mencolok. - Mid Felt
#eaeaea— Lapisan tipis untuk panel terbalik atau grid modal - warna putih yang berada di antara krem dan kanvas gelap. - Carbon
#000000— Aksen yang paling mencolok adalah pada goresan ikon dan bingkai yang kontras di mana kanvas arang terlalu terang untuk mempertahankan bentuknya dengan baik. - Lavender Link
#9e9eff— Warna tautan yang disematkan dan garis luar bingkai aksi tambahan memiliki kontras yang lembut dan sejuk terhadap warna oranye yang hangat, memastikan aksi-aksi tersebut mudah dibaca di atas latar belakang abu-abu gelap.
Tipografi
dari 16 hingga 86px · 8 langkah
- GT-Flexa — penggantian: Inter (200/400) or Manrope (200/400) · garis besar 200, 400 · Font utama untuk judul dan elemen dekoratif. Bobot 200 memungkinkan setiap judul di atas 24px—ini adalah gaya khas: pada 68px dan 86px, huruf-huruf tampak menyatu dengan lingkungan daripada menonjol. Bobot 400 cocok untuk subjudul dan keterangan kartu, di mana huruf-huruf tersebut hampir tidak terdengar. Jarak antar baris dikurangi menjadi 1,0 pada ukuran terbesar, sehingga font dekoratif tersusun di atas satu sama lain seperti kolom udara.
- Tobias-light — penggantian: Söhne Buch or Inter Tight · garis besar 400 · Gaya tipografi sekunder untuk judul bagian dan logo footer. Gaya ini digunakan satu tingkat di bawah GT-Flexa 200 untuk menciptakan kontras tonal—Tobias memiliki nuansa yang lebih arsitektural dan ekspresif, sementara GT-Flexa lebih atmosferik. Spasi huruf negatif mempersempit proporsi lebar Tobias Light.
- Times — penggantian: Source Serif 4 or PT Serif · garis besar 400 · Teks isi dan paragraf judul sengaja dibuat kontras dengan font geometris dan dekoratif, menggunakan serif. Serif menambahkan kehangatan dan otoritas editorial pada deskripsi produk tanpa melebihi ukuran teks isi.
Interval dan bentuk
| Tujuan | Arti |
|---|---|
| Kepadatan | padat |
| Langkah dasar | 4-8px |
| Radius tombol | 20px |
| Radius kartu | 20px |
| Bayangan | tidak - batas, bukan bayangan |
| Di antara bagian-bagiannya | 48-128px |
| Lebar halaman | 1200px |
AI akan membangun situs web Anda dengan gaya Electronic Materials Office dan mengisinya.
- Isi dengan produk dan postingan melalui tautan - Instagram, TikTok, Facebook.
- Pindahkan konten dari situs lama Anda—cukup tentukan alamatnya.
- Desain modern pada mesin terbaik: React ( Next.js) dengan rendering sisi server dan optimasi SEO langsung dari awal.
- Optimasi SEO otomatis sepenuhnya untuk hasil pencarian dan rekomendasi jaringan saraf.
Gaya serupa
- OFFFICE : — sebuah galeri noir yang diselimuti font monolitik
- Bibliothèque — Sebuah galeri berbentuk kubus hitam di bawah sorotan lampu – sebuah piring bercahaya tunggal di aula yang luas dan gelap.
- 21 TSI — Kekosongan merah tua, siluet tunggal – sebuah editorial fesyen kelas atas di mana antarmuka pengguna larut ke dalam atmosfer.
- Structured — Galeri Renaissance di atas kertas mirip plastisin
- CHAIBOY — Dinding galeri hitam dengan satu foto yang diberi pencahayaan dari belakang.
- Holiday 100 — Sebuah galeri hadiah di tengah malam—judul dengan huruf serif berfungsi sebagai sorotan, kanvas gelap sebagai dinding beludru, dan setiap gambar produk tergantung seperti bingkai yang dipilih dengan cermat.
- Apple (España) — Galeri museum, dalam cahaya siang yang lembut, merupakan ruang putih tunggal yang memikat dan terasa ringan, dengan setiap pameran diterangi oleh lampu sorot pada dinding yang sedikit berwarna.
- Analogue — Lemari pajangan galeri hitam – barang-barang melayang di kehampaan.
- Apple (España) — Ruang pamer Obsidian Gallery adalah aula pameran yang gelap di mana sebuah objek titanium tunggal bersinar di tengah latar belakang yang hitam pekat.
- Studio Oker — Sebuah galeri remang-remang dengan aksen merah tua—ruangan portofolio berdinding hitam, di mana huruf-huruf putih tampak melayang dan bisikan merah tunggal memecah keheningan.
- 099 SUPPLY — Dinding galeri yang dipenuhi dengan benda-benda hitam dan putih.
- Retool — Bengkel obsidian yang hangat - permukaan untuk peralatan presisi, diterangi oleh bara api yang menyala, tempat segala sesuatu diciptakan.