Brand Story

01

Verbal

02

Logo

03

Color

04

Typography

05

Art Direction

06

Icon
Download
Contact

11

Notificaciones

Principios

Las notificaciones son mensajes que comunican información al usuario. Se utilizan para informar a los usuarios sobre actualizaciones o cambios en el estado del sistema. Brindar retroalimentación inmediata y mantener una comunicación constante con los usuarios. Si bien las notificaciones son una herramienta eficaz para transmitir información, también pueden resultar intrusivas, por lo que deben usarse con moderación.

Tipos

Las notificaciones se presentan en dos tipos:

•

Informativas

Se ubican en el área más adecuada de la interfaz, según el contexto y la relevancia de la información que presentan.

Message!

Changes made to the symbol will affect height the card.

•

Temporales

Aparecen de forma momentánea y se cierran automáticamente sin necesidad de intervención por parte del usuario.

Message!

Changes made to the symbol will affect height the card.

Action

Anatomía

Los siguientes son elementos básicos que en conjunto conforman una “notificación”.

Message!

Changes made to the symbol will affect height the card.

1

2

3

4

  1. Título
  2. Texto descripción
  3. Border radius
  4. Background

Message!

Changes made to the symbol will affect height the card.

Action

1

2

4

3

7

9

5

6

8

10

  1. Icono de estado
  2. Título
  3. Descripción
  4. Botón de acción (opcional)
  5. Botón de cerrar (opcional)
  6. Contenedor
  7. Sombra
  8. Indicador de estado (stroke)
  9. Indicador de estado
  10. Border Radius

Estructura

La estructura de un “Input” se conforma a partir del espaciado que hay entre sus elementos básicos.

Informativa

Message!

Changes made to the symbol will affect height the card.

16

16

343

Temporal

Message!

Changes made to the symbol will affect height the card.

Action

16

04

08

16

08

24

08

•

Tipografía Notificación Informativa

Elemento

Title

Text description

Tamaño de fuente

14px

12px

Peso de fuente

Semibold

Regular

Token de la fuente

$action2-medium

$action3-regular

•

Tipografía Notificación Temporal

Elemento

Title

Text description

Action

Tamaño de fuente

12px

12px

12px

Peso de fuente

Medium

Regular

Semibold

Token de la fuente

$body3-medium

$body3-regular

$action3-regular

Estados interactivos & Color

Los estados interactivos del componente Notification reflejan su momento de uso y comunican la respuesta del sistema.

Estos estados ayudan al usuario a interpretar situaciones como éxito, error, advertencia o información relacionada con una o varias acciones.

Notificación temporal

Message!

Changes made to the symbol will affect height the card.

Action

1

2

4

3

7

9

5

6

8

10

Notification Success

  1. Icono de estado
    BG=$carbon light-100 | Icon=$success-900
  2. Título $carbon dark-600
  3. Descripción $carbon mid-900
  4. Botón de acción (opcional) $success-900
  5. Botón de cerrar (opcional) $carbon mid-900
  6. Contenedor $success-100
  7. Sombra $bottom-04
  8. Indicador de estado (stroke) $success-400
  9. Indicador de estado $success-900
  10. Border Radius 8px

Message!

Changes made to the symbol will affect height the card.

Action

1

2

4

3

7

9

5

6

8

10

Notification Info

  1. Icono de estado
    BG=$carbon light-100 | Icon=$info-900
  2. Título $carbon dark-600
  3. Descripción $carbon mid-900
  4. Botón de acción (opcional) $info-900
  5. Botón de cerrar (opcional) $carbon mid-900
  6. Contenedor $info-100
  7. Sombra $bottom-04
  8. Indicador de estado (stroke) $info-400
  9. Indicador de estado $info-900
  10. Border Radius 8px

Message!

Changes made to the symbol will affect height the card.

Action

1

2

4

3

7

9

5

6

8

10

Notification Warning

  1. Icono de estado
    BG=$carbon light-100 | Icon=$warning-900
  2. Título $carbon dark-600
  3. Descripción $carbon mid-900
  4. Botón de acción (opcional) $warning-900
  5. Botón de cerrar (opcional) $carbon mid-900
  6. Contenedor $warning-100
  7. Sombra $bottom-04
  8. Indicador de estado (stroke) $warning-400
  9. Indicador de estado $warning-900
  10. Border Radius 8px

Message!

Changes made to the symbol will affect height the card.

Action

1

2

4

3

7

9

5

6

8

10

Notification Error

  1. Icono de estado
    BG=$carbon light-100 | Icon=$error-900
  2. Título $carbon dark-600
  3. Descripción $carbon mid-900
  4. Botón de acción (opcional) $error-900
  5. Botón de cerrar (opcional) $carbon mid-900
  6. Contenedor $error-100
  7. Sombra $bottom-04
  8. Indicador de estado (stroke) $error-400
  9. Indicador de estado $error-900
  10. Border Radius 8px

Message!

Changes made to the symbol will affect height the card.

Action

1

2

4

3

7

9

5

6

8

10

Notification Neutral

  1. Icono de estado
    BG=$carbon light-100 | Icon=$carbon mid-100
  2. Título $carbon dark-600
  3. Descripción $carbon mid-900
  4. Botón de acción (opcional) $secondary-900
  5. Botón de cerrar (opcional) $carbon mid-900
  6. Contenedor $carbon light-400
  7. Sombra $bottom-04
  8. Indicador de estado (stroke) $carbon mid-100
  9. Indicador de estado $carbon mid-100
  10. Border Radius 8px

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

Button

Message!

Changes made to the symbol will affect height the card.

24

16

Hacer

Hacer: La notificación debe adaptarse al ancho de la pantalla, dejando un margen de 16px a cada lado y ubicándose siempre en la parte superior.

Debe desaparecer automáticamente después de 8 segundos y conservar siempre el botón de cerrar visible.

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

Button

Message!

Changes made to the symbol will affect height the card.

Action

No hacer

No hacer: Cambiar la ubicación en la que aparece en pantalla, no usar el icono ni dejar el botón de cerrar activo y visible

No usar tamaños menores a 328px para mobile ni superiores a 552px para desktop

Librería de Átomos →
Librería de Moléculas →

This is fine 🔥 | All Rights Reserved

Librería de átomos →

|

Librería de Moléculas →

ÁTOMOS

Logo

01

Color

02

Tipografía

03

Espaciados

04

Iconografía

05

MOLÉCULAS

Botones

06

Campos de texto

07

Controles de selección

08

Dropdowns

09

Modales

10

Notification (Toast)

11

Badges

12

11

Notificaciones

Principios

Las notificaciones son mensajes que comunican información al usuario. Se utilizan para informar a los usuarios sobre actualizaciones o cambios en el estado del sistema. Brindar retroalimentación inmediata y mantener una comunicación constante con los usuarios. Si bien las notificaciones son una herramienta eficaz para transmitir información, también pueden resultar intrusivas, por lo que deben usarse con moderación.

Tipos

Las notificaciones se presentan en dos tipos:

•

Informativas

Se ubican en el área más adecuada de la interfaz, según el contexto y la relevancia de la información que presentan.

Message!

Changes made to the symbol will affect height the card.

•

Temporales

Aparecen de forma momentánea y se cierran automáticamente sin necesidad de intervención por parte del usuario.

Message!

Changes made to the symbol will affect height the card.

Action

Anatomía

Los siguientes son elementos básicos que en conjunto conforman una “notificación”.

Message!

Changes made to the symbol will affect height the card.

1

2

3

4

  1. Título
  2. Texto descripción
  3. Border radius
  4. Background

Message!

Changes made to the symbol will affect height the card.

Action

1

2

4

3

7

9

5

6

8

10

  1. Icono de estado
  2. Título
  3. Descripción
  4. Botón de acción (opcional)
  5. Botón de cerrar (opcional)
  6. Contenedor
  7. Sombra
  8. Indicador de estado (stroke)
  9. Indicador de estado
  10. Border Radius

Estructura

La estructura de un “Input” se conforma a partir del espaciado que hay entre sus elementos básicos.

Informativa

Message!

Changes made to the symbol will affect height the card.

16

16

343

Temporal

Message!

Changes made to the symbol will affect height the card.

Action

16

04

08

16

08

24

08

•

Tipografía Notificación Informativa

Elemento

Title

Text description

Tamaño de fuente

14px

12px

Peso de fuente

Semibold

Regular

Token de la fuente

$action2-medium

$action3-regular

•

Tipografía Notificación Temporal

Elemento

Title

Text description

Action

Tamaño de fuente

12px

12px

12px

Peso de fuente

Medium

Regular

Semibold

Token de la fuente

$body3-medium

$body3-regular

$action3-regular

Estados interactivos & Color

Los estados interactivos del componente Notification reflejan su momento de uso y comunican la respuesta del sistema.

Estos estados ayudan al usuario a interpretar situaciones como éxito, error, advertencia o información relacionada con una o varias acciones.

Notificación temporal

Message!

Changes made to the symbol will affect height the card.

Action

1

2

4

3

7

9

5

6

8

10

Notification Success

  1. Icono de estado
    BG=$carbon light-100 | Icon=$success-900
  2. Título $carbon dark-600
  3. Descripción $carbon mid-900
  4. Botón de acción (opcional) $success-900
  5. Botón de cerrar (opcional) $carbon mid-900
  6. Contenedor $success-100
  7. Sombra $bottom-04
  8. Indicador de estado (stroke) $success-400
  9. Indicador de estado $success-900
  10. Border Radius 8px

Message!

Changes made to the symbol will affect height the card.

Action

1

2

4

3

7

9

5

6

8

10

Notification Info

  1. Icono de estado
    BG=$carbon light-100 | Icon=$info-900
  2. Título $carbon dark-600
  3. Descripción $carbon mid-900
  4. Botón de acción (opcional) $info-900
  5. Botón de cerrar (opcional) $carbon mid-900
  6. Contenedor $info-100
  7. Sombra $bottom-04
  8. Indicador de estado (stroke) $info-400
  9. Indicador de estado $info-900
  10. Border Radius 8px

Message!

Changes made to the symbol will affect height the card.

Action

1

2

4

3

7

9

5

6

8

10

Notification Warning

  1. Icono de estado
    BG=$carbon light-100 | Icon=$warning-900
  2. Título $carbon dark-600
  3. Descripción $carbon mid-900
  4. Botón de acción (opcional) $warning-900
  5. Botón de cerrar (opcional) $carbon mid-900
  6. Contenedor $warning-100
  7. Sombra $bottom-04
  8. Indicador de estado (stroke) $warning-400
  9. Indicador de estado $warning-900
  10. Border Radius 8px

Message!

Changes made to the symbol will affect height the card.

Action

1

2

4

3

7

9

5

6

8

10

Notification Error

  1. Icono de estado
    BG=$carbon light-100 | Icon=$error-900
  2. Título $carbon dark-600
  3. Descripción $carbon mid-900
  4. Botón de acción (opcional) $error-900
  5. Botón de cerrar (opcional) $carbon mid-900
  6. Contenedor $error-100
  7. Sombra $bottom-04
  8. Indicador de estado (stroke) $error-400
  9. Indicador de estado $error-900
  10. Border Radius 8px

Message!

Changes made to the symbol will affect height the card.

Action

1

2

4

3

7

9

5

6

8

10

Notification Neutral

  1. Icono de estado
    BG=$carbon light-100 | Icon=$carbon mid-100
  2. Título $carbon dark-600
  3. Descripción $carbon mid-900
  4. Botón de acción (opcional) $secondary-900
  5. Botón de cerrar (opcional) $carbon mid-900
  6. Contenedor $carbon light-400
  7. Sombra $bottom-04
  8. Indicador de estado (stroke) $carbon mid-100
  9. Indicador de estado $carbon mid-100
  10. Border Radius 8px

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

Button

Message!

Changes made to the symbol will affect height the card.

24

16

Hacer

Hacer: La notificación debe adaptarse al ancho de la pantalla, dejando un margen de 16px a cada lado y ubicándose siempre en la parte superior.

Debe desaparecer automáticamente después de 8 segundos y conservar siempre el botón de cerrar visible.

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

Button

Message!

Changes made to the symbol will affect height the card.

Action

No hacer

No hacer: Cambiar la ubicación en la que aparece en pantalla, no usar el icono ni dejar el botón de cerrar activo y visible

No usar tamaños menores a 328px para mobile ni superiores a 552px para desktop

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

Message!

Changes made to the symbol will affect height the card.

Action

552

24

Desktop: La notificación debe tener un ancho de 552px —igual al de las tarjetas de contenido— y posicionarse 24px por debajo del encabezado (header).

Librería de Átomos →
Librería de Moléculas →

This is fine 🔥 | All Rights Reserved

ÁTOMOS

Logo

01

Color

02

Tipografía

03

Espaciados

04

Iconografía

05

MOLÉCULAS

Botones

06

Campos de texto

07

Controles de selección

08

Dropdowns

09

Modales

10

Notification (Toast)

11

Badges

12

Librería de Átomos →
Librería de Moléculas →

11

Notificaciones

Principios

Las notificaciones son mensajes que comunican información al usuario. Se utilizan para informar a los usuarios sobre actualizaciones o cambios en el estado del sistema. Brindar retroalimentación inmediata y mantener una comunicación constante con los usuarios. Si bien las notificaciones son una herramienta eficaz para transmitir información, también pueden resultar intrusivas, por lo que deben usarse con moderación.

Tipos

Las notificaciones se presentan en dos tipos:

•

Informativas

Se ubican en el área más adecuada de la interfaz, según el contexto y la relevancia de la información que presentan.

Message!

Changes made to the symbol will affect height the card.

•

Temporales

Aparecen de forma momentánea y se cierran automáticamente sin necesidad de intervención por parte del usuario.

Message!

Changes made to the symbol will affect height the card.

Action

Anatomía

Los siguientes son elementos básicos que en conjunto conforman una “notificación”.

Message!

Changes made to the symbol will affect height the card.

1

2

3

4

  1. Título
  2. Texto descripción
  3. Border radius
  4. Background

Message!

Changes made to the symbol will affect height the card.

Action

1

2

4

3

7

9

5

6

8

10

  1. Icono de estado
  2. Título
  3. Descripción
  4. Botón de acción (opcional)
  5. Botón de cerrar (opcional)
  6. Contenedor
  7. Sombra
  8. Indicador de estado (stroke)
  9. Indicador de estado
  10. Border Radius

Estructura

La estructura de un “Input” se conforma a partir del espaciado que hay entre sus elementos básicos.

Informativa

Message!

Changes made to the symbol will affect height the card.

16

16

343

Temporal

Message!

Changes made to the symbol will affect height the card.

Action

16

04

08

16

08

24

08

•

Tipografía Notificación Informativa

Elemento

Title

Text description

Tamaño de fuente

14px

12px

Peso de fuente

Semibold

Regular

Token de la fuente

$action2-medium

$action3-regular

•

Tipografía Notificación Temporal

Elemento

Title

Text description

Action

Tamaño de fuente

12px

12px

12px

Peso de fuente

Medium

Regular

Semibold

Token de la fuente

$body3-medium

$body3-regular

$action3-regular

Estados interactivos & Color

Los estados interactivos del componente Notification reflejan su momento de uso y comunican la respuesta del sistema.

Estos estados ayudan al usuario a interpretar situaciones como éxito, error, advertencia o información relacionada con una o varias acciones.

Notificación temporal

Message!

Changes made to the symbol will affect height the card.

Action

1

2

4

3

7

9

5

6

8

10

Notification Success

  1. Icono de estado
    BG=$carbon light-100 | Icon=$success-900
  2. Título $carbon dark-600
  3. Descripción $carbon mid-900
  4. Botón de acción (opcional) $success-900
  5. Botón de cerrar (opcional) $carbon mid-900
  6. Contenedor $success-100
  7. Sombra $bottom-04
  8. Indicador de estado (stroke) $success-400
  9. Indicador de estado $success-900
  10. Border Radius 8px

Message!

Changes made to the symbol will affect height the card.

Action

1

2

4

3

7

9

5

6

8

10

Notification Info

  1. Icono de estado
    BG=$carbon light-100 | Icon=$info-900
  2. Título $carbon dark-600
  3. Descripción $carbon mid-900
  4. Botón de acción (opcional) $info-900
  5. Botón de cerrar (opcional) $carbon mid-900
  6. Contenedor $info-100
  7. Sombra $bottom-04
  8. Indicador de estado (stroke) $info-400
  9. Indicador de estado $info-900
  10. Border Radius 8px

Message!

Changes made to the symbol will affect height the card.

Action

1

2

4

3

7

9

5

6

8

10

Notification Warning

  1. Icono de estado
    BG=$carbon light-100 | Icon=$warning-900
  2. Título $carbon dark-600
  3. Descripción $carbon mid-900
  4. Botón de acción (opcional) $warning-900
  5. Botón de cerrar (opcional) $carbon mid-900
  6. Contenedor $warning-100
  7. Sombra $bottom-04
  8. Indicador de estado (stroke) $warning-400
  9. Indicador de estado $warning-900
  10. Border Radius 8px

Message!

Changes made to the symbol will affect height the card.

Action

1

2

4

3

7

9

5

6

8

10

Notification Error

  1. Icono de estado
    BG=$carbon light-100 | Icon=$error-900
  2. Título $carbon dark-600
  3. Descripción $carbon mid-900
  4. Botón de acción (opcional) $error-900
  5. Botón de cerrar (opcional) $carbon mid-900
  6. Contenedor $error-100
  7. Sombra $bottom-04
  8. Indicador de estado (stroke) $error-400
  9. Indicador de estado $error-900
  10. Border Radius 8px

Message!

Changes made to the symbol will affect height the card.

Action

1

2

4

3

7

9

5

6

8

10

Notification Neutral

  1. Icono de estado
    BG=$carbon light-100 | Icon=$carbon mid-100
  2. Título $carbon dark-600
  3. Descripción $carbon mid-900
  4. Botón de acción (opcional) $secondary-900
  5. Botón de cerrar (opcional) $carbon mid-900
  6. Contenedor $carbon light-400
  7. Sombra $bottom-04
  8. Indicador de estado (stroke) $carbon mid-100
  9. Indicador de estado $carbon mid-100
  10. Border Radius 8px

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

Button

Message!

Changes made to the symbol will affect height the card.

Action

24

16

Hacer

Hacer: La notificación debe adaptarse al ancho de la pantalla, dejando un margen de 16px a cada lado y ubicándose siempre en la parte superior.

Debe desaparecer automáticamente después de 8 segundos y conservar siempre el botón de cerrar visible.

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

Button

Message!

Changes made to the symbol will affect height the card.

Action

No hacer

No hacer: Cambiar la ubicación en la que aparece en pantalla, no usar el icono ni dejar el botón de cerrar activo y visible

No usar tamaños menores a 328px para mobile ni superiores a 552px para desktop

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

Message!

Changes made to the symbol will affect height the card.

Action

552

24

Desktop: La notificación debe tener un ancho de 552px —igual al de las tarjetas de contenido— y posicionarse 24px por debajo del encabezado (header).

This is fine 🔥 | All Rights Reserved