Sistema de diseño inspirado en Webflow

Category: Diseño y creatividad Constructor web visual. Estética de sitio de marketing pulida con acento azul.

1. Tema visual y atmósfera

El sitio web de Webflow es una plataforma visualmente rica y orientada a herramientas que comunica el “diseño sin código” a través de superficies blancas limpias, el característico azul Webflow（#146ef5）y una rica paleta de colores secundarios（violeta, rosa, verde, naranja, amarillo, rojo）. La fuente personalizada WF Visual Sans Variable crea un sistema tipográfico seguro y preciso con peso 600 para el display y 500 para el cuerpo.

Características clave：

• Lienzo blanco con texto casi negro（#080808）
• Azul Webflow（#146ef5）como color de marca principal e interactivo
• WF Visual Sans Variable — fuente variable personalizada con peso 500–600
• Paleta secundaria rica：violeta #7a3dff, rosa #ed52cb, verde #00d722, naranja #ff6b00, amarillo #ffae13, rojo #ee1d36
• Radio de borde conservador de 4px–8px — nítido, no redondeado
• Apilamientos de sombra multicapa（sombras en cascada de 5 capas）
• Etiquetas en mayúsculas：10px–15px, peso 500–600, espaciado amplio（0,6px–1,5px）
• Animación translate(6px) al pasar el cursor sobre los botones

2. Paleta de colores y roles

Primario

• Casi Negro（#080808）：Texto principal
• Azul Webflow（#146ef5）：--_color---primary--webflow-blue, CTA principal y enlaces
• Azul 400（#3b89ff）：--_color---primary--blue-400, azul interactivo más claro
• Azul 300（#006acc）：--_color---blue-300, variante de azul más oscuro
• Azul hover del botón（#0055d4）：--mkto-embed-color-button-hover

Acentos secundarios

• Violeta（#7a3dff）：--_color---secondary--purple
• Rosa（#ed52cb）：--_color---secondary--pink
• Verde（#00d722）：--_color---secondary--green
• Naranja（#ff6b00）：--_color---secondary--orange
• Amarillo（#ffae13）：--_color---secondary--yellow
• Rojo（#ee1d36）：--_color---secondary--red

Neutro

• Gris 800（#222222）：Texto secundario oscuro
• Gris 700（#363636）：Texto medio
• Gris 300（#ababab）：Texto atenuado, marcador de posición
• Gris medio（#5a5a5a）：Texto de enlace
• Gris borde（#d8d8d8）：Bordes, divisores
• Borde hover（#898989）：Borde al pasar el cursor

Sombras

• Cascada de 5 capas：rgba(0,0,0,0) 0px 84px 24px, rgba(0,0,0,0.01) 0px 54px 22px, rgba(0,0,0,0.04) 0px 30px 18px, rgba(0,0,0,0.08) 0px 13px 13px, rgba(0,0,0,0.09) 0px 3px 7px

3. Reglas tipográficas

Fuente：WF Visual Sans Variable, alternativa：Arial

4. Estilos de componentes

Botones

• Transparente：texto #080808, translate(6px) al pasar el cursor
• Círculo blanco：radio 50%, fondo blanco
• Badge azul：fondo #146ef5, radio 4px, peso 550

Tarjetas：1px solid #d8d8d8, radio 4px–8px

Badges：fondo con tinte azul al 10% de opacidad, radio 4px

5. Maquetación

• Espaciado：escala fraccionaria（1px, 2,4px, 3,2px, 4px, 5,6px, 6px, 7,2px, 8px, 9,6px, 12px, 16px, 24px）
• Radio：2px, 4px, 8px, 50% — conservador, nítido
• Puntos de quiebre：479px, 768px, 992px

6. Profundidad：sistema de sombras en cascada de 5 capas

7. Lo que se debe y no se debe hacer

• Hacer：Usar WF Visual Sans Variable con peso 500–600. Azul（#146ef5）para los CTA. Radio 4px. translate(6px) al pasar el cursor.
• No hacer：Redondear elementos funcionales más de 8px. Usar colores secundarios en CTA primarios.

8. Responsive：479px, 768px, 992px

9. Guía de prompt para Agent

• Texto：Casi Negro（#080808）
• CTA：Azul Webflow（#146ef5）
• Fondo：Blanco（#ffffff）
• Borde：#d8d8d8
• Secundario：Violeta #7a3dff, Rosa #ed52cb, Verde #00d722