Electronic Materials Office
Uma brasa incandescente em uma galeria decorada com carvão.
O Escritório de Materiais Eletrônicos é uma oficina noturna: uma tela preta fosca, uma única brasa laranja brilhante e uma tipografia que sussurra em vez de declarar. A interface trata cada tela como um estúdio escuro — fotografias do teclado são a única fonte de luz real, e a interface do usuário obedece a isso. Títulos, em GT-Flexa de peso 200, flutuam em um vasto espaço negativo; o corpo do texto é intencionalmente pequeno e humanista (Times). A cor é medida: branco puro para o texto, roxo suave (#9e9eff) para links e uma única chamada para ação em laranja (#f45500) na página que brilha com seu próprio brilho de 30px. Os componentes se encaixam perfeitamente dentro de um raio de 20px, as bordas são quase imperceptíveis em #9d9d9d e as únicas sombras no sistema são dois halos coloridos ao redor da ação principal.
Uma tela em tom carvão, de largura total, com conteúdo centralizado e de largura máxima (aproximadamente 1200px). A tela principal começa com um cartão de mídia de 20px de raio contendo um vídeo do produto, ocupando cerca de 80% da largura da viewport, seguido imediatamente por um título GT-Flexa 200 de várias linhas que se estende por quase toda a largura do conteúdo. Ritmo das seções: uma única seção de descrição do produto em letras maiúsculas no estilo Tobias, seguida por uma grade 2x2 (na versão desktop) de cartões de descrição do produto. Os cartões usam bordas de 1px com a fonte #9d9d9d e espaçamento de 24px entre eles. Amplo espaço vertical — as seções são separadas por 48–128px de espaço negativo em tom carvão, em vez de divisores. A navegação consiste em um único painel transparente ancorado na parte superior, com um conjunto de links ocultos e uma única chamada para ação em Ember. Sem barra lateral, sem megamenu, sem navegação secundária.
As imagens são apenas para fins de demonstração do produto — uma foto macro em close-up do teclado Altar I contra um fundo completamente preto, com iluminação de fundo vinda de cima, fazendo com que a carcaça brilhe e as teclas reflitam a luz nas bordas. Sem contexto de uso, mãos humanas ou ambiente externo. As imagens são de alto contraste e escuras; a única cor fora da paleta monocromática é o botão liga/desliga laranja no próprio teclado, que remete ao apelo da cor Laranja Ember. As imagens são quadradas ou 16:9, sempre inseridas em cartões com raio de 20px e que se estendem além das bordas do cartão (não há margem ao redor da foto e o texto fica abaixo da borda). Estilo do ícone: a única iconografia é um pequeno círculo preenchido (●) antes do logotipo — um único ponto laranja, com cerca de 6px de espessura.
Paleta
Marca
- Ember Orange
#f45500— O botão de ação principal com preenchimento é a única superfície cromática na interface do usuário, sempre acompanhado por um halo laranja de 30px, fazendo-o brilhar como um filamento; o brilho externo de 30px no botão de chamada principal duplica o símbolo hexagonal do Laranja Brasa, mas existe como uma sombra em vez de um preenchimento, fazendo com que o botão pareça iluminado por dentro.
Neutro
- Studio Charcoal
#202020— As superfícies de tela e cartão lembram o chão de uma galeria escura, nunca completamente preto, permitindo que o olhar repouse nas bordas suaves. - Bone White
#ffffff— Texto principal, bordas finas nas imagens e uma superfície invertida rara. Toda a hierarquia de fontes é mantida de forma independente. - Ash Gray
#9d9d9d— Textos discretos, bordas sutis nos cartões e legendas inativas são os únicos tons de cinza médio no esquema de cores, usados quando o branco é muito chamativo. - Mid Felt
#eaeaea— Uma lavagem de superfície leve para painéis invertidos ou grades modais - um tom de branco que fica entre o bege e a tela escura. - Carbon
#000000— O detalhe mais marcante está nos traços dos ícones e nas molduras contrastantes, onde a tela de carvão é muito clara para manter bem a sua forma. - Lavender Link
#9e9eff— A cor do link incorporado e o contorno da moldura de ação adicional criam um contraste suave e frio com o laranja quente, garantindo que as ações sejam legíveis contra o fundo cinza-escuro.
Tipografia
de 16 a 86px · 8 etapas
- GT-Flexa — substituição: Inter (200/400) or Manrope (200/400) · esboços 200, 400 · A fonte principal para títulos e elementos decorativos. A versão 200 permite que todos os títulos tenham mais de 24px — este é um estilo característico: em 68px e 86px, as letras parecem se dissolver na atmosfera em vez de se destacarem. A versão 400 é adequada para subtítulos e legendas de cartões, onde são quase inaudíveis. O espaçamento entre linhas é reduzido para 1,0 nos tamanhos maiores, de modo que a fonte decorativa se empilha uma sobre a outra como uma coluna de ar.
- Tobias-light — substituição: Söhne Buch or Inter Tight · esboços 400 · Um estilo tipográfico secundário para títulos de seção e o logotipo do rodapé. Ele é usado um nível abaixo do GT-Flexa 200 para criar um contraste tonal — Tobias tem uma aparência mais arquitetônica e expressiva, enquanto GT-Flexa é mais atmosférico. O espaçamento negativo entre as letras estreita as proporções amplas do Tobias Light.
- Times — substituição: Source Serif 4 or PT Serif · esboços 400 · O corpo do texto e os parágrafos de título constituem um contraponto deliberado às fontes geométricas e decorativas, utilizando serifas. As serifas conferem um toque de calor e autoridade editorial às descrições dos produtos, sem exceder o tamanho do texto principal.
Intervalos e forma
| Propósito | Significado |
|---|---|
| Densidade | denso |
| Passo básico | 4-8px |
| Raio do botão | 20px |
| Raio do cartão | 20px |
| Sombras | não - bordas em vez de sombras |
| Entre seções | 48-128px |
| Largura da página | 1200px |
A IA criará seu site no estilo Electronic Materials Office e o preencherá.
- Compartilhe produtos e publicações através dos links - Instagram, TikTok, Facebook.
- Transfira o conteúdo do seu site antigo — basta especificar o endereço.
- Design moderno na melhor engine: React ( Next.js) com renderização no servidor e otimização de SEO integradas.
- Otimização de SEO totalmente automatizada para resultados de pesquisa e recomendações de redes neurais.
Estilos semelhantes
- OFFFICE : — uma galeria noir envolta em fonte monolítica
- Bibliothèque — Uma galeria preta em forma de cubo sob um holofote – uma placa iluminada solitária em um vasto salão escuro.
- 21 TSI — Um vazio carmesim, uma única silhueta – um editorial de alta moda onde a interface do usuário se dissolve na atmosfera.
- Structured — Galeria renascentista em papel semelhante à plasticina
- CHAIBOY — Uma parede de galeria preta com uma única fotografia retroiluminada.
- Holiday 100 — Uma galeria de presentes à meia-noite — um título em fonte serifada serve como holofote, uma tela escura como uma parede de veludo, e cada imagem do produto é exibida como uma moldura cuidadosamente selecionada.
- Apple (España) — A galeria do museu, sob uma suave luz natural, é um espaço único, cativante e etéreo, todo branco, com cada peça da exposição iluminada por um foco de luz contra uma parede levemente colorida.
- Analogue — Vitrine preta para galeria – os produtos flutuam no vazio.
- Apple (España) — A galeria Obsidian Gallery é um salão de exposições escuro onde um único objeto de titânio brilha contra um fundo completamente preto.
- Studio Oker — Uma galeria escura com detalhes em escarlate — uma sala de portfólios com paredes pretas, onde letras brancas parecem flutuar e um único sussurro vermelho corta o silêncio.
- 099 SUPPLY — Uma parede de galeria repleta de objetos em preto e branco.
- Retool — Uma oficina de obsidiana aconchegante — uma superfície para ferramentas de precisão, iluminada por brasas fumegantes, onde tudo é criado.