95 lines
4.7 KiB
Markdown
95 lines
4.7 KiB
Markdown
|
# 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`
|
|||
|
|
|
|||
|
|
| Rol | Tamaño | Peso | Altura de línea | Espaciado de letras | Notas |
|
|||
|
|
|------|------|--------|-------------|----------------|-------|
|
|||
|
|
| Hero de display | 80px | 600 | 1,04 | -0,8px | |
|
|||
|
|
| Encabezado de sección | 56px | 600 | 1,04 | normal | |
|
|||
|
|
| Subencabezado | 32px | 500 | 1,30 | normal | |
|
|||
|
|
| Título de función | 24px | 500–600 | 1,30 | normal | |
|
|||
|
|
| Cuerpo | 20px | 400–500 | 1,40–1,50 | normal | |
|
|||
|
|
| Cuerpo estándar | 16px | 400–500 | 1,60 | -0,16px | |
|
|||
|
|
| Botón | 16px | 500 | 1,60 | -0,16px | |
|
|||
|
|
| Etiqueta en mayúsculas | 15px | 500 | 1,30 | 1,5px | uppercase |
|
|||
|
|
| Leyenda | 14px | 400–500 | 1,40–1,60 | normal | |
|
|||
|
|
| Badge en mayúsculas | 12,8px | 550 | 1,20 | normal | uppercase |
|
|||
|
|
| Micro en mayúsculas | 10px | 500–600 | 1,30 | 1px | uppercase |
|
|||
|
|
| Código：Inconsolata（fuente monoespaciada complementaria）
|
|||
|
|
|
|||
|
|
## 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`
|