Framer
galería de neón no baleiro
Framer funciona como unha escuridade case total: unha lona negra onde o contido paira coma un letreiro de neón nunha inauguración dunha galería. Os titulares, colocados en GT Walsheim Medium cun espazado entre liñas axustado de 0,8–1,1 e un espazado negativo agresivo entre letras (-0,04 em a 54 px), crean unha tipografía condensada e decorativa que avanza en lugar de asentarse perfectamente na páxina. Un único azul eléctrico (#0099ff) proporciona todos os acentos funcionais (bordos, brillo, iconas, estados activos) mentres que o resto da interface permanece acromática, baseándose en sutís transicións de gris (#111, #171717, #242424) para crear profundidade a partir do negro puro. Os compoñentes parecen considerados en lugar de decorativos: radios redondeados de 8–25 px, bordos finos de 1 px, sombras paralelas mínimas e superficies translúcidas que permiten que o baleiro brille a través deles.
As seccións de ancho completo esténdense máis alá da lona negra, cun contido limitado a un ancho máximo de ~1200 px e centrado no interior. A sección principal presenta unha cabeceira aliñada á esquerda e un único botón de chamada á acción (CTA), co lado dereito deixado intencionadamente en branco, de forma asimetrica, non centrado. As seccións alternan entre deseños só de texto (cabeceira grande + subtexto) e capturas de pantalla de produtos. A sección "Vén cun marco" utiliza un muro de logotipo nunha grella de 4 columnas. Na sección da comunidade, unha captura de pantalla do produto colócase dentro dun contedor centrado de ancho completo con esquinas redondeadas. A navegación é mínima: unha barra superior fina co logotipo á esquerda e ligazóns aliñadas á dereita, sen controis visibles. Ritmo da sección: espazos verticais significativos de 80 px entre as seccións, creando illas de contido distintas flotando no baleiro.
Predominan as capturas de pantalla da interface de usuario do produto: enmarcadas por unha xanela tipo cromo con puntos de semáforo, as capturas de pantalla incrustadas da aplicación convértense na imaxe principal. Os logotipos, que serven como proba de calidade, preséntanse en letras brancas sobre un fondo negro con espazos amplos. Non se empregan fotografías, ilustracións nin gráficos abstractos: a linguaxe visual é o propio produto, mostrado como unha interface viva. Estilo das iconas: minimalista, contorneado, monocromo e branco en tamaños pequenos. Densidade do texto: predominantemente texto, con fragmentos grandes ocasionais en forma de capturas de pantalla do produto. O equilibrio visual do espazo favorece claramente a tipografía sobre as imaxes.
Paleta
Marca
- Vivid Violet
#0066ff— O botón de acción principal é o único lugar da interface onde se mostra un fondo de botón de cor sólida.
Neutro
- Bone
#ffffff— Títulos principais, texto principal sobre fondo escuro, o fondo dos botóns é a única fonte de luz. - Void
#000000— O lenzo da páxina, o fondo de navegación, as superficies das tarxetas e o recheo das iconas: todo é dunha cor negra infinita que absorbe todo o contido non esencial. - Graphite
#111111— As superficies elevadas das tarxetas están un chanzo por riba do baleiro: tarxetas grandes e funcionais e contedores modais. - Obsidian
#171717— Superficie intermedia para botóns, tarxetas adicionais e recheos da interface de usuario: separa os elementos interactivos do lenzo. - Slate
#242424— Ao pasar o cursor polo cursor, os campos de entrada e os paneis con sangría mostran a cor neutra máis brillante antes de cambiar ao formato de texto. - Ash
#333333— Recheo profundo para imaxes de fondo e elementos estruturais inactivos.
Tipografía
de 12 a 68 px · 8 pasos
- sans-serif — substitución: Inter · contornos 400 · sans-serif: atópase nos datos extraídos pero non está descrita pola IA.
- GT Walsheim — substitución: Inter Tight · contornos 500 · A fonte para títulos e cabeceiras é a fonte da marca. É agresivamente condensada, cun espazamento entre liñas de 0,8–1,1 e un espazamento entre letras de -0,04 em a -0,05 em no rango de 44–68 px. Non é un elemento decorativo; a calidez xeométrica de GT Walsheim, combinada con métricas estritas, crea a voz do sistema: segura, compacta e lixeiramente futurista. Para unha expresión xeométrica similar, considere Inter Tight ou Space Grotesk Bold.
- Inter Variable — substitución: Inter · contornos 400 · O texto principal, a navegación e os títulos secundarios son a peza clave. O eixo Inter Variable permite unha interpolación suave dos pesos. O seguimento estreita a medida que aumenta o tamaño: de -0,001 em a 18 px e de -0,027 em a 22 px. A versión variable permite microanimacións suaves do sitio. Substituto: Inter ( Google): unha alternativa practicamente idéntica.
Intervalos e forma
| Propósito | Significado |
|---|---|
| Densidade | media |
| Paso básico | 10px |
| Radio do botón | 9999px |
| Radio da tarxeta | 20px |
| Sombras | sen bordos en vez de sombras |
| Entre seccións | 80px |
| Largura da páxina | 1200px |
A IA creará o teu sitio web ao estilo de Framer 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
- Auros — Terminal abisal con bólas de datos bioluminescentes
- Origin Financial — Unha galería de opulencia silenciosa, de medianoite. Unha sala tranquila, case escura, onde grandes fontes con serifas e uns poucos paneis de cores iluminados crean a sensación de que as finanzas son unha obra de arte coidadosamente comisariada.
- Raycast — Centro de Comando de Medianoite, Coral Neon
- Dimension — unha estación de traballo iluminada ao anoitecer con paneis de vidro esmerilado
- Reflect Notes — O espazo estrelado violeta é un observatorio escuro onde as notas flotan coma constelacións contra un pano de fondo dun baleiro índigo case negro.
- Ameba — A sala de control á medianoite: un pulso azul eléctrico dentro de paneis de vidro esmerilado
- Branding — Muro de galería negro, detalles vermello sangue: grandes fontes brancas flotan sobre un lenzo escuro que semella un baleiro, interrompido por un único detalle vermello brillante e rechamantes elementos decorativos que semellan máis a sinalización dunha galería que a unha interface web.
- Harness — Control da Misión á medianoite con detalles en verde fosforescente
- Koto — A Galería Obsidiana á medianoite. Un escenario case escuro como a carne, onde a única fonte de luz cálida é un marcador amarelo, e a letra condensada flota no vasto espazo negativo coma carteis de exposicións.
- Ohzi — Un cubo brillante suspendido nunha galería escura
- Depot — Un terminal de servidor escuro. Unha consola de desenvolvedor case negra, cun único LED verde que sinala o inicio do traballo e o resto da interface de usuario mostrada en grafito.
- Maciej Zadykowicz — A Midnight Gallery, co seu mural caleidoscópico, é unha parede de estudio case negra onde unha peza de arte tipográfica vibrante e colorida chama a atención mentres todo o demais permanece tranquilo e deliberado.