Fuentes del sistema
Tipografía
Aa Gg Ñ · 0123
Aa Gg Ñ · 0123
Aa Gg Ñ · 0123
Paleta · clic para copiar
Colores del sistema
Configuración · Astra
Paleta global de Astra
| Muestra | Variable | Rol | Hex |
|---|---|---|---|
| –ast-global-color-0 | Primario | #3f9bc4 | |
| –ast-global-color-1 | Hover / primario claro | #e0a888 | |
| –ast-global-color-2 | Títulos | #2b2733 | |
| –ast-global-color-3 | Texto | #4a4552 | |
| –ast-global-color-4 | Fondo del sitio | #90c5e4 | |
| –ast-global-color-5 | Fondo de contenido | #5bb8b0 | |
| –ast-global-color-6 | Borde | #f2c9af | |
| –ast-global-color-7 | Borde 2 | #f7ede2 | |
| –ast-global-color-8 | Acento / enlaces | #fdfaf6 |
Configuración · Elementor
Colores globales de Elementor
| Muestra | Variable | Nombre | Hex |
|---|---|---|---|
| –e-global-color-primary | Primary | #3f9bc4 | |
| –e-global-color-secondary | Secondary | #e0a888 | |
| –e-global-color-text | Text | #4a4552 | |
| –e-global-color-accent | Accent | #5bb8b0 | |
| –e-global-color-av_azul_claro | Azul claro | #90c5e4 | |
| –e-global-color-av_salmon | Salmón | #f2c9af | |
| –e-global-color-av_tinta | Tinta | #2b2733 | |
| –e-global-color-av_texto_sec | Texto secundario | #7a7580 | |
| –e-global-color-av_arena | Arena | #f7ede2 | |
| –e-global-color-av_crema | Crema | #fdfaf6 | |
| –e-global-color-av_borde | Borde | #ece3d8 |
Espaciados y anchos
Anchos y espaciado
| Breakpoint | Padding lateral | Ancho |
|---|---|---|
| Móvil · 0–767px | 15px | 100% |
| Tablet · 768–1024px | 50px | 100% |
| PC · 1025–1299px | 50px | 100% |
| PC · ≥1300px | — | 1200px (centrado) |
Escala de espaciado (referencia)
4
8
12
16
24
32
48
64
96
Componentes base
Cita · lista · tabla · formulario
«Ejemplo de cita destacada del sistema de diseño.»
- Elemento de lista uno
- Elemento de lista dos
- Elemento de lista tres
| Columna A | Columna B | Columna C |
|---|---|---|
| Dato | Dato | Dato |
| Dato | Dato | Dato |
VERIFICACIÓN DE HERENCIA · lo de abajo NO lleva estilo inline: renderiza con lo que Astra aplicó por API. Compara con el «objetivo».
H1 · Souvenirs de Calpe con corazón
objetivo → Baloo 2 · 600 · 52px · títulos #2b2733
H2 · Nuestras categorías
objetivo → Baloo 2 · 600 · 34px
H3 · Novedades del mar
objetivo → Baloo 2 · 600 · 20px
H4 · Detalle de producto
objetivo → Baloo 2 · 600 · 16px
Cuerpo (hereda): un recuerdo bien elegido guarda un trozo de mar. enlace de prueba. negrita.
objetivo → cuerpo Nunito · 400 · texto #4a4552 · enlace #3f9bc4
objetivo → primario fondo #e0a888 · texto #ffffff