EXPENSAS PAGAS
Sistema de Diseño
Variables y presets nativos de Divi 5 que reproducen el DS de Expensas Pagas. Cada pieza es un módulo editable en el Visual Builder. Fuente de verdad: el hi-fi de Figma.
FUNDAMENTOS
Color
Paleta de marca como Design Variables --gcid-*. El azul oscuro es la acción primaria; el naranja, el acento.
Azul · Marca
Blue / Lightest
#E5F1FD
Blue / Lighter
#CBE2FC
Blue / Light
#98C5F8
Blue / Base
#1D88F1
Blue / Dark
#2351AE
Blue / Darker
#1A3D8A
Blue / Darkest
#172E6B
Naranja · Acento
Orange / Light
#FDE8C0
Orange / Base
#FF9E1B
Orange / Dark
#A65700
Superficies
BG / Page
#FFFFFF
Warm / 20
#F7F6F5
Warm / 40
#EFEDEA
Warm / Surface
#D7D2CB
Texto
Text / Primary
#1A1A1A
Text / Secondary
#53565A
Text / Muted
#56585C
Feedback (solo estados)
Green / Base
#22A85C
Green / Dark
#1A8040
Red / Base
#E53030
Red / Dark
#B41C1C
Grises · Bordes
Gray / 100
#F6F7F7
Gray / 300
#BABBBD
Gray / 500
#75787B
Gray / 900
#1E2B2F
Border / Default
#D7D2CB
Border / Subtle
#EBEBEB
FUNDAMENTOS
Tipografía
Open Sans con escala fluida clamp() en variables --gvid-fs-*. Títulos = módulo Heading (H1–H5); cuerpo = Text.
Display · Expensas simples
H1 · Cobranza sin fricción
H2 · Transparencia total
H3 · Para tu consorcio
H4 · Un panel claro
H5 · Detalle de expensa
Body Large — plataforma de cobro de expensas líder en Argentina.
Body — texto de cuerpo estándar para el contenido de las páginas.
Caption — nota al pie o dato secundario.
+500K
FUNDAMENTOS
Radios
Variables --gvid-radius-*. field (24) para inputs; full para chips.
sm · 8
md · 12
lg · 16
xl · 20
2xl · 24
3xl · 32
field · 24
FUNDAMENTOS
Spacing
Escala base-4 en --gvid-space-* + contenedor fluido --gvid-container-x y --gvid-section-y.
- space/1 · 4px
- space/2 · 8px
- space/3 · 12px
- space/4 · 16px
- space/5 · 20px
- space/6 · 24px
- space/8 · 32px
- space/10 · 40px
- space/12 · 48px
- space/16 · 64px
- space/20 · 80px
FUNDAMENTOS
Sombras
Tres niveles de elevación tintados en azul marca. Se aplican vía preset del componente (ej. Card / Feature).
shadow / sm
shadow / md
shadow / lg
FUNDAMENTOS
Gradientes
Fondos suaves de marca — variables --gvid-gradient-*.
gradient / blue-lightest
gradient / warm
FUNDAMENTOS
Iconografía
El set de íconos de marca de EXP es el del hi-fi: íconos liner-bicolor (línea azul de dos tonos, 57 en total). SVG escalables y coloreables. Divi/FontAwesome quedan como apoyo secundario.
DIVI / FONTAWESOME · SECUNDARIOS
COMPONENTES
Botones
Presets aplicados con modulePreset — 3 tipos × 3 medidas (L/M/S), con hover, active y focus. Valores exactos del DS de Figma.
MEDIDA L
MEDIDA M
MEDIDA S
COMPONENTES
Enlaces
Preset Enlace / Link: texto en azul de marca, hover a azul oscuro.
Ver todos los beneficios →
COMPONENTES
Card & Chips
Preset Card / Feature (blurb con sombra) y Chip / Tag (texto en píldora).
Cobranza automática
Descripción breve del beneficio para el consorcio.
Beneficio
Nuevo
Para administradores
COMPONENTES
CTA Banner
Fiel al hi-fi: banner celeste, título en azul de marca, bajada y botón sólido. Armado con heading + text + button (presets) sobre una columna con variables.
¿Hablemos?
Contactanos para recibir asesoramiento personalizado.