Subframe
Un dibujo gráfico sobre pergamino cálido. Papel de diseño, donde cada trazo es de grafito o goma de borrar, nunca de pintura; la profundidad se logra mediante el grosor de la línea y las escasas serifas.
Subframe es un espacio de trabajo monocromático para diseñadores: un lienzo cálido y cremoso, tinta negra grafito y una ausencia total de acentos cromáticos. Toda la interfaz se percibe como un solo material —papel, lápiz y sombra— con un toque tipográfico audaz: una serif refinada (Instrument Serif) contrastando con una sans-serif sistemática (Inter), lo que otorga gravedad editorial a los titulares. Las superficies son planas y enmarcadas en lugar de elevadas; la profundidad se logra mediante divisores delgados en #e5e7eb y reflejos incrustados en controles oscuros en lugar de sombras. La densidad es generosa: un ritmo vertical amplio (espacios de 48 a 64 px entre secciones), diseños centrados de ancho completo y un amplio espacio en blanco alrededor del texto. El único color es el contraste entre el blanco casi puro y el negro casi puro, lo que convierte al botón oscuro en el elemento más llamativo de cada página, y la tira de logotipos de marcas asociadas en tonos grises en el único elemento visual decorativo.
Diseños centrados de ancho completo (1200 px) con un generoso ritmo vertical. El elemento principal es un único bloque centrado: un control oscuro y segmentado en la parte superior, un gran encabezado "Inter", un subtítulo de una sola línea y dos botones adyacentes (relleno y translúcido); sin imagen lateral ni división del diseño. Debajo del elemento principal hay una franja de logotipo en escala de grises centrada. Cada sección subsiguiente sigue el mismo patrón: un bloque de título y subtítulo alineado a la izquierda, seguido de un marco de presentación de productos de ancho completo con un espacio entre secciones de 48 a 64 px. La navegación es mínima: una barra superior con enlaces centrados y acciones alineadas a la derecha, sin barra lateral ni megamenú. La página se lee de arriba abajo como una serie de declaraciones centradas, cada una con amplio espacio; el diseño se asemeja más a un portafolio editorial que a una página de producto recargada.
El diseño visual es minimalista y funcional. El sistema utiliza dos modos visuales: (1) capturas de pantalla de productos y maquetas de interfaz de usuario enmarcadas en marcos de 24 píxeles de radio; muestran componentes reales de la interfaz (tablas, botones, formularios) renderizados en la misma paleta monocromática, lo que hace que las capturas de pantalla parezcan perfectamente integradas en la página; (2) una única tira de logotipos de socios en escala de grises sirve como prueba social, renderizada plana, sin color ni contenedores. No hay fotos de estilo de vida, degradados abstractos ni renderizados 3D. El único elemento ilustrativo es una "mosaico" de producto oscura, centrada sobre un fondo gris cálido con un icono de marca; se percibe como una demostración del producto, no como decoración. Todas las imágenes ocupan un diseño basado en texto, donde el peso visual recae en el texto.
Paleta
Neutral
- Page Canvas
#fafafa— El fondo de la página, la postal sobre lienzo, el texto claro sobre superficies oscuras: un color blanco cálido que subyace a todo el sistema monocromático. - Hairline Border
#e5e7eb— Los separadores, los bordes de las tarjetas, los marcos de las imágenes y los contornos de los iconos, el tipo de contorno más utilizado en el sistema, definen la estructura espacial. - Card Surface
#ededed— El fondo elevado para las tarjetas, una superficie adicional, se sitúa un escalón por encima del lienzo, creando una agrupación sin sombras. - Divider Mid
#dadada— Divisores de tono medio y transiciones entre secciones - Graphite
#242424— Relleno neutro de alto contraste para botones principales en superficies claras. - Ink Black
#171717— Texto principal, encabezados, contornos de iconos: un poco más frío que Graphite, utilizado para tipografía en lugar de superficies.
Tipografía
De 12 a 128 píxeles · 7 pasos
- Inter — reemplazo: Inter (Google Fonts) · esquemas 500, 600, 700 · Interfaz de sistema sans-serif para navegación, texto principal, botones, subtítulos y encabezados de sección. Grosor: 500 para texto principal y controles, 600 para subtítulos y acentos de navegación, y 700 para encabezados de sección. El espaciado negativo pronunciado entre letras comprime las formas geométricas de cualquier tamaño, lo que confiere a la interfaz un aspecto técnico y conciso.
- Instrument Serif — reemplazo: Playfair Display · esquemas 400 · Una tipografía con serifa diseñada exclusivamente para titulares y contenido editorial. Su grosor de 400 y el espaciado entre letras de -0,025em crean una apariencia elegante y cursiva que contrasta con la geometría industrial de Inter, una técnica distintiva: una sola palabra o frase con serifa dentro de una página sin serifa, que funciona como puntuación visual en lugar de como estilo de titular.
- Fragment Mono — reemplazo: JetBrains Mono · esquemas 400 · Utilice el color mono para resaltar elementos en línea similares a código, etiquetas y anotaciones técnicas. Se usa con moderación y aparece en listas de funciones y anotaciones en línea donde la herramienta de diseño quiere indicar "esto es un resultado de la máquina".
Intervalos y forma
| Objetivo | Significado |
|---|---|
| Densidad | promedio |
| Paso básico | 8px |
| Radio del botón | 16px |
| Radio de la tarjeta | 24px |
| Oscuridad | no - bordes en lugar de sombras |
| Entre secciones | 64px |
| Ancho de página | 1200px |
La IA construirá tu sitio web al estilo de Subframe 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
- monopo saigon — Un brillo líquido e iridiscente tras el silencio editorial: una galería editorial monocromática flotando sobre luz fundida.
- Hyer Aviation — El crepúsculo en la cabina sobre un pergamino. El pálido cielo del amanecer se encuentra con el logotipo con serifa del tamaño del fuselaje, y un único toque de color arcilla cálida rompe la sobriedad monocromática.
- OFF+BRAND. — Esfera iridiscente sobre pergamino tibio
- Seed — un organismo vivo bajo un cristal de laboratorio
- Eindhoven Design District — El brutalismo editorial sobre papel blanco es un manifiesto de diseño municipal, ejecutado en tipografía grande, con una fotografía mínima y una sobriedad absoluta.
- Miranda — Tipografía clásica de gran formato sobre un fondo crema claro: un editorial de periódico para la era digital.
- Monocle — Un periódico de gran formato y alta calidad, impreso en papel color crema. Un editorial cuidadosamente elaborado, donde cada columna merece su lugar y solo un color significativo aparece en la página.
- Agencja brandingowa — Una galería editorial en tonos blancos con tipografía en tinta negra.
- Websmith Studio — Luz de la mañana sobre papel color crema
- Aspelin Reitan — Archivo arquitectónico a la luz de las velas: la página parece un portafolio de espacios construidos, fijado a una pared de color crema cálido, con una sola línea de texto blanco flotando sobre cada imagen a lo largo de todo el ancho de la página.
- Public — Un editorial monocromático sobre mármol frío, casi un lienzo monocromático, con una fuente serif de 300 puntos y un único acento púrpura que hace todo el trabajo de color.
- Motto — Un monolito tipográfico sobre papel: una voz única y segura que se manifiesta en papel blanco como la nieve.