Velocity BPOP

Brand Story

Verbal

Logo

Color

Typography

Art Direction

Download

Contact

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

Button

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

Button

No hacer

No hacer: Usar espaciados con escalas de números impares e inconsistentes en sus dimensiones

Librería de Átomos →

Librería de Moléculas →

Librería de átomos →

Librería de Moléculas →

ÁTOMOS

Logo

Color

Tipografía

Espaciados

Iconografía

MOLÉCULAS

Botones

Campos de texto

Controles de selección

Dropdowns

Modales

Notification (Toast)

Badges

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

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

Button

Hacer

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

Button

No hacer

No hacer: Usar espaciados con escalas de números impares e inconsistentes en sus dimensiones

Back

Header

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

CTA secondary

CTA Primary

552

Librería de Átomos →

Librería de Moléculas →

ÁTOMOS

Logo

Color

Tipografía

Espaciados

Iconografía

MOLÉCULAS

Botones

Campos de texto

Controles de selección

Dropdowns

Modales

Notification (Toast)

Badges

Librería de Átomos →

Librería de Moléculas →

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

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

Button

Hacer

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

Button

No hacer

No hacer: Usar espaciados con escalas de números impares e inconsistentes en sus dimensiones

Back

Header

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

CTA secondary

CTA Primary

552