Subframe
Um desenho gráfico em pergaminho de cor morna. Papel de design exclusivo, onde cada traço é feito com grafite ou borracha, nunca com tinta — a profundidade é alcançada através da espessura da linha e dos poucos serifs.
Subframe é um espaço de trabalho monocromático para designers: uma tela quente e cremosa, tinta preta grafite e ausência total de detalhes cromáticos. Toda a interface é percebida como um único material — papel, lápis e sombra — com um toque tipográfico marcante: uma serifada refinada (Instrument Serif) sobreposta a uma fonte sem serifa sistemática (Inter), conferindo seriedade editorial aos títulos. As superfícies são planas e emolduradas, em vez de elevadas; a profundidade é alcançada por meio de divisores finos em #e5e7eb e destaques embutidos em controles escuros, em vez de sombras. A densidade é generosa: um ritmo vertical amplo (espaçamento de 48 a 64 pixels entre as seções), layouts centralizados em largura total e amplo espaço em branco ao redor do texto. A única cor é o contraste entre o quase branco e o quase preto, tornando o botão escuro o elemento mais marcante em cada página, e a faixa com os logotipos das marcas parceiras em tons de cinza o único elemento visual decorativo.
Layouts centralizados em largura total (1200px) com um ritmo vertical generoso. O elemento principal é um único bloco centralizado: um controle segmentado escuro no topo, um grande título "Inter", um subtítulo de uma linha e dois botões adjacentes (preenchido e translúcido) — sem imagem lateral, sem quebra de layout. Abaixo do elemento principal, há uma faixa centralizada com o logotipo em tons de cinza. Cada seção subsequente segue o mesmo padrão: um bloco de título e subtítulo alinhado à esquerda, seguido por um quadro de apresentação do produto em largura total com espaçamento entre as seções de 48 a 64px. A navegação é minimalista: uma barra superior com links centralizados e ações alinhadas à direita, sem barra lateral, sem megamenu. A página é lida de cima para baixo como uma série de afirmações centralizadas, cada uma com amplo espaço — o layout se assemelha mais a um portfólio editorial do que a uma página de produto complexa.
O design visual é minimalista e funcional. O sistema utiliza dois modos visuais: (1) capturas de tela de produtos e protótipos de interface do usuário emoldurados em molduras de 24px de raio — eles exibem componentes reais da interface (tabelas, botões, formulários) renderizados na mesma paleta monocromática, fazendo com que as capturas de tela pareçam perfeitamente integradas à página; (2) uma única faixa de logotipos de parceiros em tons de cinza serve como prova social, renderizada de forma plana, sem cor ou elementos que a enquadrem. Não há fotos de estilo de vida, gradientes abstratos ou renderizações 3D. O único elemento ilustrativo é um "bloco" escuro do produto, centralizado em um fundo cinza quente com um ícone da marca — ele é percebido como uma demonstração do produto, não como decoração. Todas as imagens ocupam um layout baseado em texto, onde o peso visual é suportado pelo texto.
Paleta
Neutro
- Page Canvas
#fafafa— O fundo da página, o postal sobre tela, o texto claro em superfícies escuras – uma cor branca quente que permeia todo o sistema monocromático. - Hairline Border
#e5e7eb— Divisores, bordas de cartões, molduras de imagens, contornos de ícones - o tipo de contorno mais frequentemente usado no sistema, define a estrutura espacial. - Card Surface
#ededed— Fundo elevado para cartões, uma superfície adicional - localizado um degrau acima da tela, criando um agrupamento sem sombras. - Divider Mid
#dadada— Divisores de tons médios e transições entre seções - Graphite
#242424— Preenchimento neutro de alto contraste para botões principais em superfícies claras. - Ink Black
#171717— Corpo do texto, títulos, contornos de ícones - um pouco mais frio que o Graphite, usado para tipografia em vez de superfícies.
Tipografia
de 12 a 128px · 7 etapas
- Inter — substituição: Inter (Google Fonts) · esboços 500, 600, 700 · Interface do sistema em fonte sem serifa — navegação, texto principal, botões, subtítulos e títulos de seção. Peso: 500 para texto principal e controles, 600 para subtítulos e destaques de navegação e 700 para títulos de seção. O espaçamento negativo acentuado entre letras comprime formas geométricas em qualquer tamanho, conferindo à interface uma aparência concisa e técnica.
- Instrument Serif — substituição: Playfair Display · esboços 400 · Uma tipografia serifada projetada exclusivamente para títulos e conteúdo editorial. Sua espessura de 400 e espaçamento entre letras de -0,025em criam uma aparência elegante e itálica que contrasta com a geometria industrial da Inter — uma técnica exclusiva: uma única palavra ou frase serifada em uma página sem serifa, servindo como pontuação visual em vez de estilo de título.
- Fragment Mono — substituição: JetBrains Mono · esboços 400 · Acentuar o mono para elementos semelhantes a código embutido, rótulos de tags e chamadas técnicas. Usado com moderação, aparece em listas de funções e anotações embutidas onde a ferramenta de design deseja indicar "esta é uma saída de máquina".
Intervalos e forma
| Propósito | Significado |
|---|---|
| Densidade | média |
| Passo básico | 8px |
| Raio do botão | 16px |
| Raio do cartão | 24px |
| Sombras | não - bordas em vez de sombras |
| Entre seções | 64px |
| Largura da página | 1200px |
A IA criará seu site no estilo Subframe 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
- monopo saigon — Um brilho líquido e iridescente por trás do silêncio editorial — uma galeria editorial monocromática flutuando em luz incandescente.
- Hyer Aviation — Crepúsculo na cabine de pilotagem sobre pergaminho. O céu pálido da aurora encontra o logotipo serifado do tamanho da fuselagem, e um único detalhe em tom de barro quente quebra a sobriedade monocromática.
- OFF+BRAND. — Esfera iridescente sobre pergaminho quente
- Seed — um organismo vivo sob vidro de laboratório
- Eindhoven Design District — O brutalismo editorial em papel branco é um manifesto de design municipal, executado em letras grandes, com fotografia minimalista e absoluta sobriedade.
- Miranda — Tipografia clássica em formato amplo sobre um fundo creme claro — um editorial de jornal para a era digital.
- Monocle — Um jornal de alta qualidade, em formato grande, impresso em papel creme. Um editorial cuidadosamente selecionado, onde cada coluna merece seu espaço e apenas uma cor significativa aparece na página.
- Agencja brandingowa — Uma galeria editorial em tons brancos com tipografia em tinta preta.
- Websmith Studio — Luz da manhã sobre papel creme
- Aspelin Reitan — Arquivo Arquitetônico à Luz de Velas - A página se assemelha a um portfólio de espaços construídos, fixados em uma parede de tom creme quente, com uma única linha de texto branco flutuando acima de cada imagem ao longo de toda a largura da página.
- Public — Um editorial monocromático sobre mármore frio — quase uma tela monocromática, com uma fonte serifada de 300 pontos e um único detalhe em roxo que dá todo o toque de cor.
- Motto — Um monolito tipográfico no papel – uma voz única e confiante que se declara em papel branco como a neve.