Framer
galería de neón en el vacío
Framer funciona como una oscuridad casi total: un lienzo negro donde el contenido flota como un letrero de neón en la inauguración de una galería. Los titulares, con la tipografía GT Walsheim Medium, un espaciado entre líneas ajustado de 0,8 a 1,1 y un espaciado entre letras negativo agresivo (-0,04em a 54px), crean una tipografía condensada y decorativa que se proyecta hacia adelante en lugar de simplemente asentarse en la página. Un único azul eléctrico (#0099ff) proporciona todos los acentos funcionales (bordes, brillo, iconos, estados activos), mientras que el resto de la interfaz permanece acromática, basándose en sutiles transiciones grises (#111, #171717, #242424) para crear profundidad a partir del negro puro. Los componentes se sienten pensados en lugar de decorativos: radios redondeados de 8 a 25px, bordes finos de 1px, sombras mínimas y superficies translúcidas que permiten que el vacío brille a través de ellas.
Las secciones de ancho completo se extienden más allá del lienzo negro, con contenido limitado a un ancho máximo de ~1200px y centrado dentro. La sección principal presenta un encabezado alineado a la izquierda y un único botón de llamada a la acción (CTA), con el lado derecho intencionalmente en blanco, asimétricamente, no centrado. Las secciones alternan entre diseños solo de texto (encabezado grande + subtexto) y capturas de pantalla de productos. La sección "Viene con Framer" utiliza una pared de logotipos en una cuadrícula de 4 columnas. En la sección de la comunidad, una captura de pantalla del producto se coloca dentro de un contenedor centrado de ancho completo con esquinas redondeadas. La navegación es mínima: una delgada barra superior con el logotipo a la izquierda y enlaces alineados a la derecha, sin controles visibles. Ritmo de la sección: espacios verticales significativos de 80px entre secciones, creando islas de contenido distintas que flotan en el vacío.
Las capturas de pantalla de la interfaz de usuario del producto son las protagonistas: enmarcadas por una ventana cromada con puntos de semáforo, las capturas de pantalla integradas de la aplicación se convierten en la imagen principal. Los logotipos, que sirven como prueba de calidad, se presentan en letras blancas sobre fondo negro con amplio espaciado. No se utilizan fotografías, ilustraciones ni gráficos abstractos; el lenguaje visual es el propio producto, mostrado como una interfaz dinámica. Estilo de los iconos: minimalista, delineado, monocromo y blanco en tamaños pequeños. Densidad del texto: predominantemente texto, con fragmentos grandes ocasionales en forma de capturas de pantalla del producto. El equilibrio visual del espacio favorece claramente la tipografía sobre las imágenes.
Paleta
Marca
- Vivid Violet
#0066ff— El botón de acción principal es el único lugar de la interfaz donde se muestra un fondo de botón de color sólido.
Neutral
- Bone
#ffffff— Encabezados principales, texto principal sobre fondo oscuro, el fondo del botón es la única fuente de luz. - Void
#000000— El lienzo de la página, el fondo de navegación, las superficies de las tarjetas, el relleno de los iconos: todo es de un color negro infinito que absorbe todo el contenido no esencial. - Graphite
#111111— Las superficies de tarjetas en relieve representan un paso más allá del vacío: tarjetas grandes y funcionales y contenedores modales. - Obsidian
#171717— Superficie intermedia para botones, tarjetas adicionales y rellenos de interfaz de usuario: separa los elementos interactivos del lienzo. - Slate
#242424— Al pasar el cursor por encima, los campos de entrada y los paneles con sangría presentan el tono neutro más brillante antes de cambiar al formato de texto. - Ash
#333333— Relleno profundo para imágenes de fondo inactivas y elementos estructurales.
Tipografía
De 12 a 68 píxeles · 8 pasos
- sans-serif — reemplazo: Inter · esquemas 400 · sans-serif: se encuentra en los datos extraídos, pero no ha sido descrito por la IA.
- GT Walsheim — reemplazo: Inter Tight · esquemas 500 · La tipografía para encabezados y títulos es la de la marca. Es agresivamente condensada, con un interlineado de 0,8–1,1 y un espaciado entre letras de -0,04em a -0,05em en el rango de 44–68px. No es un elemento decorativo; la calidez geométrica de GT Walsheim, combinada con una métrica estricta, crea la identidad del sistema: segura, compacta y ligeramente futurista. Para una expresión geométrica similar, considere Inter Tight o Space Grotesk Bold.
- Inter Variable — reemplazo: Inter · esquemas 400 · El texto principal, la navegación y los encabezados secundarios son fundamentales. El eje Inter Variable permite una interpolación fluida de los pesos. El espaciado se reduce a medida que aumenta el tamaño: de -0,001em a 18px y de -0,027em a 22px. La versión variable permite microanimaciones fluidas del sitio. Alternativa: Inter ( Google), una alternativa prácticamente idéntica.
Intervalos y forma
| Objetivo | Significado |
|---|---|
| Densidad | promedio |
| Paso básico | 10px |
| Radio del botón | 9999px |
| Radio de la tarjeta | 20px |
| Oscuridad | no - bordes en lugar de sombras |
| Entre secciones | 80px |
| Ancho de página | 1200px |
La IA construirá tu sitio web al estilo de Framer 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
- Auros — Terminal abisal con esferas de datos bioluminiscentes
- Origin Financial — Una galería nocturna de opulencia discreta. Una sala silenciosa, casi oscura, donde grandes tipografías con serifa y unos pocos paneles de colores iluminados crean la sensación de que las finanzas son una obra de arte cuidadosamente seleccionada.
- Raycast — Centro de mando de medianoche, neón coral
- Dimension — un puesto de trabajo iluminado al anochecer con paneles de vidrio esmerilado
- Reflect Notes — El espacio violeta estrellado es un observatorio oscuro donde las notas flotan como constelaciones contra un telón de fondo de un vacío índigo casi negro.
- Ameba — La sala de control a medianoche: un pulso azul eléctrico dentro de los paneles de vidrio esmerilado.
- Branding — Pared de galería negra con detalles en rojo sangre: grandes fuentes blancas flotan sobre un lienzo oscuro que se asemeja a un vacío, interrumpido por un único detalle en rojo brillante y llamativos elementos decorativos que parecen más letreros de galería que una interfaz web.
- Harness — Centro de control de misiones a medianoche con detalles en verde fosforescente.
- Koto — La Galería Obsidiana a medianoche. Un escenario casi completamente a oscuras, donde la única fuente de luz cálida es un único marcador amarillo, y la tipografía condensada flota en el vasto espacio negativo como carteles de exposiciones.
- Ohzi — Un cubo brillante suspendido en una galería oscura
- Depot — Una terminal de servidor oscura. Una consola de desarrollador casi negra, con un único LED verde que indica el inicio del trabajo, y el resto de la interfaz de usuario mostrada en grafito.
- Maciej Zadykowicz — La galería Midnight, con su mural caleidoscópico, es una pared de estudio casi negra donde una vibrante y colorida obra de arte tipográfica acapara la atención, mientras que todo lo demás permanece tranquilo y sereno.