04
Espaciados
El sistema de spacing (espaciado) define las unidades de separación entre elementos para garantizar consistencia visual, alineación precisa y una experiencia clara para el usuario.
Usamos una escala base de 8px, con excepciones puntuales de 4px para elementos pequeños o ajustes finos.
Escala
Nuestra escala modular se construye sobre múltiplos de 4 y 8px, priorizando los múltiplos de 8. Cada token de spacing representa un valor fijo que puede aplicarse como padding, margin, gap o separación entre componentes.
4px [2XS]
#spacing-4
8px [S]
#spacing-8
12px [2S]
#spacing-12
16px [3S]
#spacing-16
24px [4S]
#spacing-24
32px [M]
#spacing-32
40px [2M]
#spacing-40
48px [3M]
#spacing-48
56px [L]
#spacing-56
64px [2L]
#spacing-64
72px [3L]
#spacing-72
80px [XL]
#spacing-80
Principios de uso
Consistencia:
Usa los mismos tokens de spacing en todos los componentes para mantener una experiencia coherente.
Dirección del espaciado:
Generalmente mayor, para separar bloques o secciones.
Más compacto, para alinear elementos dentro de un mismo bloque.
Componentes internos
vs externos:
• Usa padding con spacing internos (ej. dentro de una card).
• Usa margin para separar componentes entre sí.
Excepciones de 4px:
Se usa en elementos que requieren precisión visual fina: íconos, toggles, chips, radio buttons o tooltips.
Asi mismo para definir y complementar espaciados sumando escala de 8px; Ejem: 12px - 20px.
Buenas prácticas
✅ Usa valores definidos por la escala.
✅ Aplica spacing para reforzar jerarquías visuales.
✅ Usa gap en layouts con flex o grid para espaciar hijos de forma uniforme.
🚫 No mezcles valores arbitrarios o inconsistentes (como 13px, 22px).
🚫 Evita usar demasiados niveles de spacing en un mismo componente.
Header
Título
Título 2
Título
In the bustling city of Financia, the local bank, Prosperity Trust, offers a unique blend of services tailored to meet the needs of its diverse clientele.
Título input
Título input
Título input
Título input
Button
24
24
24
24
24
24
12
12
4
16
16
12
24
24
24
Hacer
Hacer: Mantener una jerarquía visual coherente en los espaciados entre elementos. Evitar el uso excesivo de múltiples valores de espaciado diferentes, ya que puede generar ruido visual y falta de consistencia.
Header
Título
Título 2
Título
In the bustling city of Financia, the local bank, Prosperity Trust, offers a unique blend of services tailored to meet the needs of its diverse clientele.
Título input
Título input
Título input
Título input
Button
23
23
23
15
15
15
11
15
23
23
23
11
23
15
7
No hacer
No hacer: Usar espaciados con escalas de números impares e inconsistentes en sus dimensiones
This is fine 🔥 | All Rights Reserved
04
Espaciados
El sistema de spacing (espaciado) define las unidades de separación entre elementos para garantizar consistencia visual, alineación precisa y una experiencia clara para el usuario.
Usamos una escala base de 8px, con excepciones puntuales de 4px para elementos pequeños o ajustes finos.
Escala
Nuestra escala modular se construye sobre múltiplos de 4 y 8px, priorizando los múltiplos de 8. Cada token de spacing representa un valor fijo que puede aplicarse como padding, margin, gap o separación entre componentes.
4px [2XS]
#spacing-4
8px [S]
#spacing-8
12px [2S]
#spacing-12
16px [3S]
#spacing-16
24px [4S]
#spacing-24
32px [M]
#spacing-32
40px [2M]
#spacing-40
48px [3M]
#spacing-48
56px [L]
#spacing-56
64px [2L]
#spacing-64
72px [3L]
#spacing-72
80px [XL]
#spacing-80
Principios de uso
Consistencia:
Usa los mismos tokens de spacing en todos los componentes para mantener una experiencia coherente.
Dirección del espaciado:
Generalmente mayor, para separar bloques o secciones.
Más compacto, para alinear elementos dentro de un mismo bloque.
Componentes internos vs externos:
• Usa padding con spacing internos (ej. dentro de una card).
• Usa margin para separar componentes entre sí.
Excepciones de 4px:
Se usa en elementos que requieren precisión visual fina: íconos, toggles, chips, radio buttons o tooltips.
Asi mismo para definir y complementar espaciados sumando escala de 8px; Ejem: 12px - 20px.
Buenas prácticas
✅ Usa valores definidos por la escala.
✅ Aplica spacing para reforzar jerarquías visuales.
✅ Usa gap en layouts con flex o grid para espaciar hijos de forma uniforme.
🚫 No mezcles valores arbitrarios o inconsistentes (como 13px, 22px).
🚫 Evita usar demasiados niveles de spacing en un mismo componente.
Header
Título
Título 2
Título
In the bustling city of Financia, the local bank, Prosperity Trust, offers a unique blend of services tailored to meet the needs of its diverse clientele.
Título input
Título input
Título input
Título input
Button
24
24
24
24
24
24
12
12
4
16
16
12
24
24
24
Hacer
Hacer: Mantener una jerarquía visual coherente en los espaciados entre elementos. Evitar el uso excesivo de múltiples valores de espaciado diferentes, ya que puede generar ruido visual y falta de consistencia.
Header
Título
Título 2
Título
In the bustling city of Financia, the local bank, Prosperity Trust, offers a unique blend of services tailored to meet the needs of its diverse clientele.
Título input
Título input
Título input
Título input
Button
23
23
23
15
15
15
11
15
23
23
23
11
23
15
7
No hacer
No hacer: Usar espaciados con escalas de números impares e inconsistentes en sus dimensiones
Back
Header
Close
Título
Título 2
Subtítulo
In the bustling city of Financia, the local bank, Prosperity Trust, offers a unique blend of services tailored to meet the needs of its diverse clientele.
Título input
Título input
Título input
Título input
CTA secondary
CTA Primary
552
40
552
24
12
4
40
24
This is fine 🔥 | All Rights Reserved
04
Espaciados
El sistema de spacing (espaciado) define las unidades de separación entre elementos para garantizar consistencia visual, alineación precisa y una experiencia clara para el usuario.
Usamos una escala base de 8px, con excepciones puntuales de 4px para elementos pequeños o ajustes finos.
Escala
Nuestra escala modular se construye sobre múltiplos de 4 y 8px, priorizando los múltiplos de 8. Cada token de spacing representa un valor fijo que puede aplicarse como padding, margin, gap o separación entre componentes.
4px [2XS]
#spacing-4
8px [S]
#spacing-8
12px [2S]
#spacing-12
16px [3S]
#spacing-16
24px [4S]
#spacing-24
32px [M]
#spacing-32
40px [2M]
#spacing-40
48px [3M]
#spacing-48
56px [L]
#spacing-56
64px [2L]
#spacing-64
72px [3L]
#spacing-72
80px [XL]
#spacing-80
Principios de uso
Consistencia:
Usa los mismos tokens de spacing en todos los componentes para mantener una experiencia coherente.
Dirección del espaciado:
Generalmente mayor, para separar bloques o secciones.
Más compacto, para alinear elementos dentro de un mismo bloque.
Componentes internos vs externos:
• Usa padding con spacing internos (ej. dentro de una card).
• Usa margin para separar componentes entre sí.
Excepciones de 4px:
Se usa en elementos que requieren precisión visual fina: íconos, toggles, chips, radio buttons o tooltips.
Asi mismo para definir y complementar espaciados sumando escala de 8px; Ejem: 12px - 20px.
Buenas prácticas
✅ Usa valores definidos por la escala.
✅ Aplica spacing para reforzar jerarquías visuales.
✅ Usa gap en layouts con flex o grid para espaciar hijos de forma uniforme.
🚫 No mezcles valores arbitrarios o inconsistentes (como 13px, 22px).
🚫 Evita usar demasiados niveles de spacing en un mismo componente.
Header
Título
Título 2
Título
In the bustling city of Financia, the local bank, Prosperity Trust, offers a unique blend of services tailored to meet the needs of its diverse clientele.
Título input
Título input
Título input
Título input
Button
24
24
24
24
24
24
12
12
4
16
16
12
24
24
24
Hacer
Hacer: Mantener una jerarquía visual coherente en los espaciados entre elementos. Evitar el uso excesivo de múltiples valores de espaciado diferentes, ya que puede generar ruido visual y falta de consistencia.
Header
Título
Título 2
Título
In the bustling city of Financia, the local bank, Prosperity Trust, offers a unique blend of services tailored to meet the needs of its diverse clientele.
Título input
Título input
Título input
Título input
Button
23
23
23
15
15
15
11
15
23
23
23
11
23
15
7
No hacer
No hacer: Usar espaciados con escalas de números impares e inconsistentes en sus dimensiones
Back
Header
Close
Título
Título 2
Subtítulo
In the bustling city of Financia, the local bank, Prosperity Trust, offers a unique blend of services tailored to meet the needs of its diverse clientele.
Título input
Título input
Título input
Título input
CTA secondary
CTA Primary
552
40
552
24
12
4
40
64
24
This is fine 🔥 | All Rights Reserved