THE BOLT / DESIGN SYSTEM
Font & Styles
Variables globales, tipografía y elementos reutilizables del sitio.
Referencia: TheBolt-v2_1 · Figma desktop 1440 px. H1: Boldstrom Italic; H2: Boldstrom Regular; precios: Boldstrom Italic. H4–H6, párrafo grande/pequeño, responsive y estados de interacción adicionales son extensiones propuestas del sistema.
01-COLORS
Colores globales
bolt-blue
#007BFF
bolt-blue-light
#73B6FD
bolt-black
#000000
bolt-white
#FFFFFF
bolt-gray-dark
#3E3E3E
bolt-gray
#616161
bolt-gray-light
#EBEBEB
bolt-overlay
rgba(62,62,62,0.6)
02-TYPE
Tipografía · H1–H6
Escala desktop / tablet / móvil. H1: Boldstrom Italic. H2: Boldstrom Regular. H3: Figtree Black. H4–H6: Figtree Bold · escala propuesta.
H1 · 60 / 48 / 36 px · .bolt-h1
Marketing that moves it forward.
H2 · 45 / 38 / 30 px · .bolt-h2
The right marketing plan.
H3 · 30 / 28 / 24 px · .bolt-h3
Digital marketing
H4 · 24 / 22 / 21 px · .bolt-h4
Solutions that fit
H5 · 20 / 20 / 18 px · .bolt-h5
Supporting heading
H6 · 18 / 18 / 17 px · .bolt-h6
Small heading
03-TEXT
Párrafos, etiquetas y enlaces
Párrafo grande · 18 px · propuesta para introducciones
We help businesses build a stronger presence and connect with more customers.
Párrafo · Figtree Regular · 16 px · .bolt-body
From branding and websites to social media and digital advertising, we help businesses build a stronger presence.
Texto pequeño · 14 px · propuesta para notas y ayudas.
Digital Marketing Agency
Most Popular
Enlace de texto — prueba hover y foco
$1,750
Precio · 51 px · Boldstrom Italic
04-BUTTONS
Botones · variantes y estados
Los estados normales siguen el mockup. Hover, foco, activo y deshabilitado son propuestas pendientes de comparar con los componentes de Figma. Usa Tab para ver el foco y mantén pulsado un botón para ver el estado activo.
.bolt-btn-primary
Normal · interactivo
Hover · muestra fija
Foco · muestra fija
.bolt-btn-secondary
Normal · interactivo
Hover · muestra fija
Foco · muestra fija
.bolt-btn-nav
Normal · interactivo
Hover · muestra fija
Foco · muestra fija
.bolt-btn-nav-cta
Normal · interactivo
Hover · muestra fija
Foco · muestra fija
.bolt-btn-footer
Normal · interactivo
Hover · muestra fija
Foco · muestra fija
05-CARDS
Tarjetas y superficies
STANDARD
Digital Marketing
Superficie blanca · radio 21 px · sombra del mockup.
$1,750
Most Popular
Full-Service Marketing
Superficie negra · borde azul 3 px.
$2,000
06-FIELDS
Campos de formulario
Muestras de estilo sin envío. Campo normal y foco al hacer clic o usar Tab.
07-SPACING
Espaciados, radios y tamaños
Valores en rem; equivalencia visual basada en 16 px. Los espaciados vienen del mockup.
bolt-radius-card · 1.3125rem · 21 px
bolt-radius-badge · 0.5625rem · 9 px
bolt-radius-nav · 1.6875rem · 27 px
bolt-radius-small · 0.1875rem · 3 px
bolt-content · 82.5rem · 1320 px
bolt-space-1 · 0.375rem · 6 px
bolt-space-2 · 0.5625rem · 9 px
bolt-space-3 · 0.9375rem · 15 px
bolt-space-4 · 1.125rem · 18 px
bolt-space-5 · 1.3125rem · 21 px
bolt-space-6 · 1.6875rem · 27 px
bolt-space-7 · 1.875rem · 30 px
bolt-space-8 · 2.8125rem · 45 px
bolt-space-9 · 3.75rem · 60 px
bolt-space-10 · 4.6875rem · 75 px
bolt-space-11 · 5.625rem · 90 px
bolt-space-12 · 9.375rem · 150 px
Fuentes: bolt-font-body = Figtree; bolt-font-display = Boldstrom. Boldstrom Regular e Italic se alojan en el sitio y se aplican globalmente a H1, H2 y .bolt-price desde el CSS personalizado del kit de Elementor. La variable bolt-font-heading-fallback conserva Figtree como referencia provisional.