Electronic Materials Office
Unha brasa brillante nunha galería decorada con carbón vexetal
A Oficina de Materiais Electrónicos é un obradoiro nocturno: unha lona negra mate, unha única brasa laranxa brillante e un tipo de letra que susurra en vez de declarar. A interface trata cada pantalla coma un estudo escuro: as fotografías do teclado son a única fonte de luz real e a IU obedécea. Os titulares, feitos con GT-Flexa de peso 200, flotan nun vasto espazo negativo; o corpo da páxina é intencionadamente pequeno e humanista (Times). A cor mídese: branco puro para o tipo, púrpura apagado (#9e9eff) para as ligazóns e unha única chamada á acción laranxa (#f45500) na páxina que brilla co seu propio brillo de 30 px. Os compoñentes encaixan perfectamente nun radio de 20 px, os bordos apenas se perciben en #9d9d9d e as únicas sombras do sistema son dous halos de cores arredor da acción principal.
Un lenzo cor carbón de ancho completo con contido centrado de ancho máximo (~1200 px). A pantalla principal comeza cunha tarxeta multimedia de 20 px de radio que contén un vídeo do produto, ocupando aproximadamente o 80 % do ancho da ventá gráfica, seguida inmediatamente por un título GT-Flexa 200 de varias liñas que abrangue case todo o ancho do contido. Ritmo da sección: unha única sección de descrición do produto en maiúsculas ao estilo de Tobias, seguida dunha cuadrícula de 2x2 (no escritorio) de tarxetas de descrición do produto. As tarxetas usan bordos #9d9d9d de 1 px e separacións de 24 px entre elas. Xenerosa respiración vertical: as seccións están separadas por 48–128 px de espazo negativo cor carbón en lugar de divisores. A navegación é un único panel transparente ancorado na parte superior, cun grupo de ligazóns ocultas e unha única chamada á acción de Ember. Sen barra lateral, sen megamenú, sen navegación secundaria.
As imaxes son só para fins de demostración do produto: unha macro en primeiro plano do teclado Altar I sobre un fondo completamente negro, cunha retroiluminación desde arriba, que fai que a carcasa brille e as teclas reflictan a luz polos bordos. Sen estilo de vida, sen mans humanas, sen contexto ambiental. As imaxes teñen un alto contraste e son escuras; a única cor fóra da paleta monocromática é o interruptor de acendido laranxa do propio teclado, que fai eco da chamada á acción Ember Orange. As imaxes son cadradas ou 16:9, sempre colocadas en tarxetas cun radio de 20 px e que se estenden máis alá dos bordos da tarxeta (non hai recheo arredor da foto e o texto está debaixo do bordo). Estilo da icona: a única iconografía é un pequeno círculo cheo (●) antes do logotipo, un único punto laranxa, duns 6 px de grosor.
Paleta
Marca
- Ember Orange
#f45500— O botón de acción principal cun recheo é a única superficie cromática da interface de usuario, sempre acompañado dun halo laranxa de 30 px, o que o fai brillar como un filamento; o brillo exterior de 30 px no botón de chamada principal duplica o símbolo hexagonal laranxa brasa, pero existe como unha sombra en lugar de un recheo, facendo que o botón pareza iluminado desde dentro.
Neutro
- Studio Charcoal
#202020— As superficies de lenzo e cartón son coma o chan dunha galería escura, nunca completamente negra, para que a vista poida pousarse nos bordos suaves. - Bone White
#ffffff— Texto principal, bordos finos nas imaxes e unha superficie invertida pouco común. Toda a xerarquía de fontes mantense de forma independente. - Ash Gray
#9d9d9d— O texto silenciado, os bordos sutís das tarxetas e as lendas inactivas son as únicas cores grises medias da combinación de cores, que se usan cando o branco é demasiado forte. - Mid Felt
#eaeaea— Un lavado de superficie claro para paneis invertidos ou grellas modais: un ton branco que se sitúa entre o beixe e o lenzo escuro. - Carbon
#000000— O acento máis rechamante son os trazos de iconas e os marcos contrastantes onde a lona de carbón vexetal é demasiado clara para manter ben a súa forma. - Lavender Link
#9e9eff— A cor da ligazón incrustada e o contorno do marco de acción adicional contrastan suavemente e de forma fría co laranxa cálido, o que garante que as accións sexan lexibles sobre o fondo carbón vexetal.
Tipografía
de 16 a 86 px · 8 pasos
- GT-Flexa — substitución: Inter (200/400) or Manrope (200/400) · contornos 200, 400 · A fonte principal para títulos e elementos decorativos. O grosor de 200 permite todos os títulos por riba dos 24 px; este é un estilo característico: con 68 e 86 px, as letras parecen disolverse na atmosfera en lugar de berrar. O grosor de 400 é axeitado para subtítulos e lendas de tarxetas, onde apenas se oen. O espazamento entre liñas redúcese a 1,0 nos tamaños máis grandes, polo que a fonte decorativa se apila unha enriba da outra como unha columna de aire.
- Tobias-light — substitución: Söhne Buch or Inter Tight · contornos 400 · Un estilo de tipografía secundario para os títulos das seccións e o logotipo do pé de páxina. Úsase un chanzo por debaixo de GT-Flexa 200 para crear un contraste tonal: Tobias ten un aspecto máis arquitectónico e expresivo, mentres que GT-Flexa é máis atmosférico. O espazado negativo entre letras reduce as amplas proporcións de Tobias Light.
- Times — substitución: Source Serif 4 or PT Serif · contornos 400 · O corpo do texto e os parágrafos de título son un contrapunto deliberado ás fontes xeométricas e decorativas, que usan serifas. As serifas engaden calidez e autoridade editorial ás descricións dos produtos sen exceder o tamaño do corpo do texto.
Intervalos e forma
| Propósito | Significado |
|---|---|
| Densidade | denso |
| Paso básico | 4-8px |
| Radio do botón | 20px |
| Radio da tarxeta | 20px |
| Sombras | sen bordos en vez de sombras |
| Entre seccións | 48-128px |
| Largura da páxina | 1200px |
A IA creará o teu sitio web ao estilo de Electronic Materials Office e o encherá
- Enche con produtos e publicacións a través da ligazón: Instagram, TikTok, Facebook.
- Transfire contido do teu sitio antigo: só tes que especificar o enderezo.
- Deseño moderno no mellor motor: React ( Next.js) con renderización de servidor e optimización SEO listas para usar.
- Optimización SEO totalmente automatizada para resultados de busca e recomendacións de redes neuronais.
Estilos semellantes
- OFFFICE : — unha galería noir envolvida nunha fonte monolítica
- Bibliothèque — Unha galería negra en forma de cubo baixo un foco: unha placa solitaria iluminada nun corredor vasto e escuro
- 21 TSI — Un baleiro carmesí, unha única silueta: un editorial de alta costura onde a interface de usuario se disolve na atmosfera.
- Structured — Galería renacentista en papel tipo plastilina
- CHAIBOY — Unha parede de galería negra cunha única fotografía retroiluminada
- Holiday 100 — Unha galería de agasallos á medianoite: un titular con serifa serve de foco, un lenzo escuro como parede de veludo e cada imaxe de produto pendura coma un marco coidadosamente seleccionado.
- Apple (España) — A galería do museo, á suave luz do día, é un espazo branco único, cativador e ingrávido, con cada exposición iluminada por un foco contra unha parede lixeiramente tintada.
- Analogue — Vitrina negra da galería: as mercadorías pairan no baleiro
- Apple (España) — A vitrina da Galería Obsidian é unha sala de exposicións escura onde un único obxecto de titanio brilla sobre un fondo escuro como a carne.
- Studio Oker — Unha galería escura con detalles escarlata: unha sala de portfolios con paredes negras, onde as letras brancas parecen flotar e un único susurro vermello corta o silencio.
- 099 SUPPLY — Unha parede de galería chea de obxectos en branco e negro
- Retool — Un cálido taller de obsidiana: unha superficie para ferramentas de precisión, iluminada por brasas fumegantes, onde todo se crea