Electronic Materials Office
Una brasa incandescente en una galería decorada con carbón.
La Oficina de Materiales Electrónicos es un taller nocturno: un lienzo negro mate, una única brasa naranja brillante y una tipografía que susurra en lugar de declarar. La interfaz trata cada pantalla como un estudio a oscuras: las fotografías del teclado son la única fuente de luz real, y la interfaz de usuario la obedece. Los titulares, compuestos en GT-Flexa de 200 puntos, flotan en un vasto espacio negativo; el texto principal es intencionalmente pequeño y humanista (Times). El color se mide: blanco puro para el texto, morado apagado (#9e9eff) para los enlaces y una única llamada a la acción naranja (#f45500) en la página que brilla con su propio resplandor de 30 píxeles. Los componentes se ajustan con precisión dentro de un radio de 20 píxeles, los bordes son apenas perceptibles en #9d9d9d, y las únicas sombras en el sistema son dos halos de color alrededor de la acción principal.
Un lienzo de ancho completo, color carbón, con contenido centrado de ancho máximo (~1200px). La pantalla principal comienza con una tarjeta multimedia de 20px de radio que contiene un video del producto, ocupando aproximadamente el 80% del ancho de la ventana gráfica, seguido inmediatamente por un titular multilinea GT-Flexa 200 que se ajusta a casi todo el ancho del contenido. Ritmo de la sección: una única sección de descripción del producto en mayúsculas estilo Tobias, seguida de una cuadrícula de 2x2 (en escritorio) de tarjetas de descripción del producto. Las tarjetas usan bordes #9d9d9d de 1px y márgenes de 24px entre ellas. Respiración vertical generosa: las secciones están separadas por 48–128px de espacio negativo color carbón en lugar de divisores. La navegación es un único panel transparente anclado en la parte superior, con un grupo de enlaces ocultos y una única llamada a la acción Ember. Sin barra lateral, sin mega-menú, sin navegación secundaria.
Las imágenes son solo para fines de demostración del producto: una toma macro en primer plano del teclado Altar I sobre un fondo completamente negro, con una luz de fondo desde arriba, que hace que la carcasa brille y las teclas reflejen la luz alrededor de los bordes. Sin estilo de vida, sin manos humanas, sin contexto ambiental. Las imágenes son de alto contraste y oscuras; el único color fuera de la paleta monocromática es el interruptor de encendido naranja en el propio teclado, que hace eco de la llamada a la acción Ember Orange. Las imágenes son cuadradas o 16:9, siempre colocadas en tarjetas con un radio de 20 px y extendiéndose más allá de los bordes de la tarjeta (no hay relleno alrededor de la foto, y el texto está debajo del borde). Estilo del icono: la única iconografía es un pequeño círculo relleno (●) antes del logotipo: un solo punto naranja, ~6 px de grosor.
Paleta
Marca
- Ember Orange
#f45500— El botón de acción principal con relleno es la única superficie cromática en la interfaz de usuario, siempre acompañado de un halo naranja de 30 píxeles, lo que le da un brillo similar al de un filamento; el brillo exterior de 30 píxeles en el botón de llamada principal duplica el símbolo hexagonal de color naranja brillante, pero existe como una sombra en lugar de un relleno, lo que hace que el botón parezca iluminado desde el interior.
Neutral
- Studio Charcoal
#202020— Las superficies de lienzo y cartón son como el suelo de una galería oscura, nunca completamente negras, para que la vista pueda posarse en los bordes suaves. - Bone White
#ffffff— Texto principal, bordes finos en las imágenes y una superficie invertida poco frecuente. Toda la jerarquía tipográfica se mantiene de forma independiente. - Ash Gray
#9d9d9d— El texto atenuado, los bordes sutiles de las tarjetas y los subtítulos inactivos son los únicos tonos de gris medio en la paleta de colores, que se utilizan cuando el blanco resulta demasiado llamativo. - Mid Felt
#eaeaea— Un ligero lavado superficial para paneles invertidos o rejillas modales: un tono de blanco que se sitúa entre el beige y el lienzo oscuro. - Carbon
#000000— El acento más llamativo se aprecia en los trazos de los iconos y en los marcos contrastantes, donde el lienzo de carbón es demasiado claro para mantener bien su forma. - Lavender Link
#9e9eff— El color del enlace incrustado y el contorno del marco de acción adicional crean un contraste sobrio y frío con el naranja cálido, lo que garantiza que las acciones sean legibles sobre el fondo gris oscuro.
Tipografía
De 16 a 86 píxeles · 8 pasos
- GT-Flexa — reemplazo: Inter (200/400) or Manrope (200/400) · esquemas 200, 400 · La fuente principal para títulos y elementos decorativos. El grosor de 200 permite que todos los títulos superen los 24 px; este es un estilo distintivo: a 68 px y 86 px, las letras parecen fundirse con el ambiente en lugar de destacar. El grosor de 400 es adecuado para subtítulos y leyendas de tarjetas, donde apenas se distinguen. El interlineado se reduce a 1,0 en los tamaños más grandes, por lo que la fuente decorativa se superpone como una columna de aire.
- Tobias-light — reemplazo: Söhne Buch or Inter Tight · esquemas 400 · Un estilo tipográfico secundario para los títulos de sección y el logotipo del pie de página. Se utiliza un nivel por debajo de GT-Flexa 200 para crear un contraste tonal: Tobias tiene un aire más arquitectónico y expresivo, mientras que GT-Flexa es más atmosférico. El espaciado negativo entre letras reduce las amplias proporciones de Tobias Light.
- Times — reemplazo: Source Serif 4 or PT Serif · esquemas 400 · El cuerpo del texto y los párrafos de encabezado constituyen un contrapunto deliberado a las tipografías geométricas y decorativas, mediante el uso de serifas. Las serifas aportan calidez y autoridad editorial a las descripciones de los productos sin exceder el tamaño del texto principal.
Intervalos y forma
| Objetivo | Significado |
|---|---|
| Densidad | denso |
| Paso básico | 4-8px |
| Radio del botón | 20px |
| Radio de la tarjeta | 20px |
| Oscuridad | no - bordes en lugar de sombras |
| Entre secciones | 48-128px |
| Ancho de página | 1200px |
La IA construirá tu sitio web al estilo de Electronic Materials Office y lo rellenará.
- Rellena con productos y publicaciones a través del enlace - Instagram, TikTok, Facebook.
- Transfiere el contenido de tu antiguo sitio web; solo tienes que especificar la dirección.
- Diseño moderno sobre el mejor motor: React ( Next.js) con renderizado del lado del servidor y optimización SEO integrada.
- Optimización SEO totalmente automatizada para resultados de búsqueda y recomendaciones mediante redes neuronales.
Estilos similares
- OFFFICE : — una galería noir envuelta en una tipografía monolítica
- Bibliothèque — Una galería negra con forma de cubo bajo un foco: un plato iluminado solitario en un vasto y oscuro salón.
- 21 TSI — Un vacío carmesí, una silueta única: un editorial de alta costura donde la interfaz de usuario se disuelve en la atmósfera.
- Structured — Galería renacentista en papel con textura similar a la plastilina.
- CHAIBOY — Una pared de galería negra con una sola fotografía retroiluminada.
- Holiday 100 — Una galería de regalos a medianoche: un titular con serifa sirve de foco, un lienzo oscuro de pared de terciopelo y cada imagen de producto cuelga como un marco cuidadosamente seleccionado.
- Apple (España) — La galería del museo, bañada por una suave luz natural, es un único espacio blanco, cautivador y etéreo, donde cada pieza está iluminada por un foco contra una pared ligeramente tintada.
- Analogue — Vitrina negra para galería: los objetos flotan en el vacío.
- Apple (España) — La vitrina de la Galería Obsidiana es una sala de exposiciones oscura donde un único objeto de titanio brilla contra un fondo completamente negro.
- Studio Oker — Una galería oscura con detalles escarlata; una sala de exposiciones con paredes negras, donde las letras blancas parecen flotar y un único susurro rojo rompe el silencio.
- 099 SUPPLY — Una pared de galería llena de objetos en blanco y negro.
- Retool — Un cálido taller de obsidiana, una superficie para herramientas de precisión, iluminada por brasas humeantes, donde todo se crea.