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
- Título
- Texto descripción
- Border radius
- Background
Message!
Changes made to the symbol will affect height the card.
Action
1
2
4
3
7
9
5
6
8
10
- Icono de estado
- Título
- Descripción
- Botón de acción (opcional)
- Botón de cerrar (opcional)
- Contenedor
- Sombra
- Indicador de estado (stroke)
- Indicador de estado
- 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
- Icono de estado BG=$carbon light-100 | Icon=$success-900
- Título $carbon dark-600
- Descripción $carbon mid-900
- Botón de acción (opcional) $success-900
- Botón de cerrar (opcional) $carbon mid-900
- Contenedor $success-100
- Sombra $bottom-04
- Indicador de estado (stroke) $success-400
- Indicador de estado $success-900
- 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
- Icono de estado BG=$carbon light-100 | Icon=$info-900
- Título $carbon dark-600
- Descripción $carbon mid-900
- Botón de acción (opcional) $info-900
- Botón de cerrar (opcional) $carbon mid-900
- Contenedor $info-100
- Sombra $bottom-04
- Indicador de estado (stroke) $info-400
- Indicador de estado $info-900
- 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
- Icono de estado BG=$carbon light-100 | Icon=$warning-900
- Título $carbon dark-600
- Descripción $carbon mid-900
- Botón de acción (opcional) $warning-900
- Botón de cerrar (opcional) $carbon mid-900
- Contenedor $warning-100
- Sombra $bottom-04
- Indicador de estado (stroke) $warning-400
- Indicador de estado $warning-900
- 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
- Icono de estado BG=$carbon light-100 | Icon=$error-900
- Título $carbon dark-600
- Descripción $carbon mid-900
- Botón de acción (opcional) $error-900
- Botón de cerrar (opcional) $carbon mid-900
- Contenedor $error-100
- Sombra $bottom-04
- Indicador de estado (stroke) $error-400
- Indicador de estado $error-900
- 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
- Icono de estado BG=$carbon light-100 | Icon=$carbon mid-100
- Título $carbon dark-600
- Descripción $carbon mid-900
- Botón de acción (opcional) $secondary-900
- Botón de cerrar (opcional) $carbon mid-900
- Contenedor $carbon light-400
- Sombra $bottom-04
- Indicador de estado (stroke) $carbon mid-100
- Indicador de estado $carbon mid-100
- 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
This is fine 🔥 | All Rights Reserved
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
- Título
- Texto descripción
- Border radius
- Background
Message!
Changes made to the symbol will affect height the card.
Action
1
2
4
3
7
9
5
6
8
10
- Icono de estado
- Título
- Descripción
- Botón de acción (opcional)
- Botón de cerrar (opcional)
- Contenedor
- Sombra
- Indicador de estado (stroke)
- Indicador de estado
- 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
- Icono de estado BG=$carbon light-100 | Icon=$success-900
- Título $carbon dark-600
- Descripción $carbon mid-900
- Botón de acción (opcional) $success-900
- Botón de cerrar (opcional) $carbon mid-900
- Contenedor $success-100
- Sombra $bottom-04
- Indicador de estado (stroke) $success-400
- Indicador de estado $success-900
- 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
- Icono de estado BG=$carbon light-100 | Icon=$info-900
- Título $carbon dark-600
- Descripción $carbon mid-900
- Botón de acción (opcional) $info-900
- Botón de cerrar (opcional) $carbon mid-900
- Contenedor $info-100
- Sombra $bottom-04
- Indicador de estado (stroke) $info-400
- Indicador de estado $info-900
- 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
- Icono de estado BG=$carbon light-100 | Icon=$warning-900
- Título $carbon dark-600
- Descripción $carbon mid-900
- Botón de acción (opcional) $warning-900
- Botón de cerrar (opcional) $carbon mid-900
- Contenedor $warning-100
- Sombra $bottom-04
- Indicador de estado (stroke) $warning-400
- Indicador de estado $warning-900
- 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
- Icono de estado BG=$carbon light-100 | Icon=$error-900
- Título $carbon dark-600
- Descripción $carbon mid-900
- Botón de acción (opcional) $error-900
- Botón de cerrar (opcional) $carbon mid-900
- Contenedor $error-100
- Sombra $bottom-04
- Indicador de estado (stroke) $error-400
- Indicador de estado $error-900
- 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
- Icono de estado BG=$carbon light-100 | Icon=$carbon mid-100
- Título $carbon dark-600
- Descripción $carbon mid-900
- Botón de acción (opcional) $secondary-900
- Botón de cerrar (opcional) $carbon mid-900
- Contenedor $carbon light-400
- Sombra $bottom-04
- Indicador de estado (stroke) $carbon mid-100
- Indicador de estado $carbon mid-100
- 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).
This is fine 🔥 | All Rights Reserved
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
- Título
- Texto descripción
- Border radius
- Background
Message!
Changes made to the symbol will affect height the card.
Action
1
2
4
3
7
9
5
6
8
10
- Icono de estado
- Título
- Descripción
- Botón de acción (opcional)
- Botón de cerrar (opcional)
- Contenedor
- Sombra
- Indicador de estado (stroke)
- Indicador de estado
- 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
- Icono de estado BG=$carbon light-100 | Icon=$success-900
- Título $carbon dark-600
- Descripción $carbon mid-900
- Botón de acción (opcional) $success-900
- Botón de cerrar (opcional) $carbon mid-900
- Contenedor $success-100
- Sombra $bottom-04
- Indicador de estado (stroke) $success-400
- Indicador de estado $success-900
- 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
- Icono de estado BG=$carbon light-100 | Icon=$info-900
- Título $carbon dark-600
- Descripción $carbon mid-900
- Botón de acción (opcional) $info-900
- Botón de cerrar (opcional) $carbon mid-900
- Contenedor $info-100
- Sombra $bottom-04
- Indicador de estado (stroke) $info-400
- Indicador de estado $info-900
- 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
- Icono de estado BG=$carbon light-100 | Icon=$warning-900
- Título $carbon dark-600
- Descripción $carbon mid-900
- Botón de acción (opcional) $warning-900
- Botón de cerrar (opcional) $carbon mid-900
- Contenedor $warning-100
- Sombra $bottom-04
- Indicador de estado (stroke) $warning-400
- Indicador de estado $warning-900
- 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
- Icono de estado BG=$carbon light-100 | Icon=$error-900
- Título $carbon dark-600
- Descripción $carbon mid-900
- Botón de acción (opcional) $error-900
- Botón de cerrar (opcional) $carbon mid-900
- Contenedor $error-100
- Sombra $bottom-04
- Indicador de estado (stroke) $error-400
- Indicador de estado $error-900
- 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
- Icono de estado BG=$carbon light-100 | Icon=$carbon mid-100
- Título $carbon dark-600
- Descripción $carbon mid-900
- Botón de acción (opcional) $secondary-900
- Botón de cerrar (opcional) $carbon mid-900
- Contenedor $carbon light-400
- Sombra $bottom-04
- Indicador de estado (stroke) $carbon mid-100
- Indicador de estado $carbon mid-100
- 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