Subframe
Un debuxo gráfico sobre pergamiño quente. Papel de deseño, onde cada trazo é de grafito ou goma, nunca pintura: a profundidade conséguese mediante o grosor da liña e as serifs dispersas.
Subframe é o espazo de traballo dun deseñador monocromático: unha lona cálida e cremosa, tinta negra grafito e unha ausencia completa de acentos cromáticos. Toda a interface percíbese como un único material (papel, lapis e sombra) cun toque tipográfico audaz: unha refinada serifa (Instrument Serif) contraposta a unha sistemática sans-serif (Inter), o que lle dá gravidade editorial aos titulares. As superficies son planas e están enmarcadas en lugar de elevadas; a profundidade conséguese mediante divisores finos en #e5e7eb e resaltados inseridos en controis escuros en lugar de sombras. A densidade é xenerosa: un amplo ritmo vertical (48–64 px de espazos entre seccións), deseños centrados de ancho completo e espazos en branco xenerosos arredor do texto. A única cor é o contraste entre o case branco e o case negro, o que fai que o botón escuro sexa o elemento máis rechamante de cada páxina, e a tira de logotipos de marcas asociadas en tons grises sexa o único elemento visual decorativo.
Maquetacións centradas de ancho completo (1200 px) cun ritmo vertical xeneroso. O elemento principal é un único bloque centrado: un control escuro e segmentado na parte superior, un título "Inter" grande, un subtítulo dunha soa liña e dous botóns adxacentes (cheos + translúcidos): sen imaxe lateral nin división da maquetación. Debaixo do elemento principal hai unha franxa de logotipo centrada en escala de grises. Cada sección posterior segue o mesmo patrón: un bloque de título e subtítulo aliñado á esquerda, e despois un marco de mostra de produto de ancho completo con 48–64 px de espazo entre as seccións. A navegación é mínima: unha barra superior con ligazóns centradas e accións aliñadas á dereita, sen barra lateral nin megamenú. A páxina lese de arriba a abaixo como unha serie de declaracións centradas, cada unha con amplo espazo; a maquetación parécese máis a un portafolio editorial que a unha páxina de produto chea de contido.
O deseño visual é minimalista e funcional. O sistema utiliza dous modos visuais: (1) capturas de pantalla de produtos enmarcadas e maquetas da interface de usuario incluídas en marcos dun radio de 24 px, que mostran compoñentes reais da interface (táboas, botóns, formularios) renderizados na mesma paleta monocromática, facendo que as capturas de pantalla parezan perfectamente integradas na páxina; (2) unha única tira de logotipos de socios en escala de grises serve como proba social, renderizada plana, sen cor nin contedores. Non hai fotos de estilo de vida, gradientes abstractos nin renderizacións en 3D. O único elemento ilustrativo é un "mosaico" escuro do produto, centrado nun fondo gris cálido cunha icona da marca; percíbese como unha demostración do produto, non como decoración. Todas as imaxes ocupan un deseño baseado en texto, onde o peso visual o leva o texto.
Paleta
Neutro
- Page Canvas
#fafafa— O fondo da páxina, a postal sobre lenzo, o texto claro sobre superficies escuras: unha cor branca cálida que subxace a todo o sistema monocromático. - Hairline Border
#e5e7eb— Divisores, bordos de tarxetas, marcos de imaxes, contornos de iconas: o tipo de contorno máis empregado no sistema, define a estrutura espacial. - Card Surface
#ededed— Fondo elevado para cartas, unha superficie adicional, está situado un chanzo por riba da lona, creando unha agrupación sen sombras. - Divider Mid
#dadada— Divisores de tons medios e transicións entre seccións - Graphite
#242424— Recheo neutro de alto contraste para botóns principais en superficies claras. - Ink Black
#171717— Corpo de texto, títulos, contornos de iconas: algo máis xenial que Graphite, usado para tipografía en lugar de superficies.
Tipografía
de 12 a 128 px · 7 pasos
- Inter — substitución: Inter (Google Fonts) · contornos 500, 600, 700 · Unha interface de sistema sans-serif: navegación, corpo de texto, botóns, subtítulos e títulos de sección. Peso: 500 para o corpo de texto e os controis, 600 para os subtítulos e os acentos de navegación e 700 para os títulos de sección. Un espazado negativo forte entre letras comprime as formas xeométricas de calquera tamaño, dándolle á interface un aspecto técnico e condensado.
- Instrument Serif — substitución: Playfair Display · contornos 400 · Un tipo de letra serif deseñado exclusivamente para titulares e contido editorial. O seu grosor de 400 e o seu espazado entre letras de -0,025 em crean un aspecto elegante e en cursiva que contrasta coa xeometría industrial de Inter, unha técnica característica: unha soa palabra ou frase serif dentro dunha páxina sans-serif, que serve como puntuación visual en lugar de como estilo de titular.
- Fragment Mono — substitución: JetBrains Mono · contornos 400 · Acento monofónico para elementos semellantes a código en liña, etiquetas e chamadas técnicas. Usado con moderación, aparece en listas de funcións e anotacións en liña onde a ferramenta de deseño quere indicar que "esta é a saída da máquina".
Intervalos e forma
| Propósito | Significado |
|---|---|
| Densidade | media |
| Paso básico | 8px |
| Radio do botón | 16px |
| Radio da tarxeta | 24px |
| Sombras | sen bordos en vez de sombras |
| Entre seccións | 64px |
| Largura da páxina | 1200px |
A IA creará o teu sitio web ao estilo de Subframe 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
- monopo saigon — Un brillo líquido e iridiscente tras o silencio editorial: unha galería editorial monocromática flotando sobre luz fundida
- Hyer Aviation — Anoitecer na cabina sobre pergamiño. O pálido ceo do amencer atópase co logotipo serif do tamaño da fuselaxe e un único detalle de arxila cálida rompe a moderación monocromática.
- OFF+BRAND. — Esfera iridescente sobre pergamiño quente
- Seed — un organismo vivo baixo vidro de laboratorio
- Eindhoven Design District — O brutalismo editorial sobre papel branco é un manifesto de deseño municipal, executado en letra grande, con fotografía mínima e absoluta moderación.
- Miranda — Tipo clásico de formato ancho sobre un fondo crema claro: un editorial de xornal para a era dixital
- Monocle — Un xornal de gran formato e alta calidade en papel cor crema. Un editorial coidadosamente seleccionado, onde cada columna merece o seu lugar e só aparece unha cor significativa na páxina.
- Agencja brandingowa — Unha galería editorial en tons brancos con tipografía feita con tinta negra
- Websmith Studio — Luz da mañá sobre papel crema
- Aspelin Reitan — Arquivo arquitectónico á luz das velas: a páxina semella un portafolio de espazos construídos, fixado nunha parede de cor crema, cunha soa liña de texto branco flotando sobre cada imaxe ao longo de todo o ancho da páxina.
- Public — Un editorial monocromático sobre mármore frío, case un lenzo monocromático, cunha fonte serif de 300 puntos e un único detalle morado encargado de todo o traballo de cor.
- Motto — Un monolito tipográfico sobre papel: unha voz única e segura que se declara sobre papel branco como a neve.