Color tokens
| Token | CSS variable | Value | Description |
|---|---|---|---|
color-blue-50 |
--rs-color-blue-50 |
#F0F9FD |
|
color-blue-100 |
--rs-color-blue-100 |
#E6F6FB |
|
color-blue-500 |
--rs-color-blue-500 |
#48A0D4 |
|
color-blue-700 |
--rs-color-blue-700 |
#2A719B |
|
color-green-100 |
--rs-color-green-100 |
#EDF7E6 |
|
color-green-500 |
--rs-color-green-500 |
#4EAE01 |
|
color-navygreen-100 |
--rs-color-navygreen-100 |
#E5F1EA |
|
color-navygreen-500 |
--rs-color-navygreen-500 |
#007C2F |
|
color-yellow-100 |
--rs-color-yellow-100 |
#FFF4E6 |
|
color-yellow-500 |
--rs-color-yellow-500 |
#FF9001 |
|
color-red-100 |
--rs-color-red-100 |
#FFF0F1 |
|
color-red-500 |
--rs-color-red-500 |
#D80115 |
|
color-darkblue-100 |
--rs-color-darkblue-100 |
#E5ECF5 |
|
color-darkblue-500 |
--rs-color-darkblue-500 |
#004A9F |
|
color-navyblue-100 |
--rs-color-navyblue-100 |
var(--rs-color-darkblue-100) |
Backfilled legacy navyblue reference from the darkblue scale. |
color-navyblue-500 |
--rs-color-navyblue-500 |
var(--rs-color-darkblue-500) |
Backfilled legacy navyblue reference from the darkblue scale. |
color-gray-100 |
--rs-color-gray-100 |
#F6F6F6 |
|
color-gray-300 |
--rs-color-gray-300 |
#EEEEEE |
|
color-gray-500 |
--rs-color-gray-500 |
#D1D1D1 |
|
color-gray-600 |
--rs-color-gray-600 |
#545454 |
|
color-gray-700 |
--rs-color-gray-700 |
#909090 |
|
color-black-500 |
--rs-color-black-500 |
#000000 |
|
color-white-500 |
--rs-color-white-500 |
#FFFFFF |
|
color-project-pc |
--rs-color-project-pc |
#014A9F |
Project brand color for Plan Comercial. |
color-project-alta |
--rs-color-project-alta |
#65AC1E |
Project brand color for Alta. |
color-project-cc |
--rs-color-project-cc |
#49A0D4 |
Project brand color for Cuenta Corriente. |
color-project-pog |
--rs-color-project-pog |
#007C2F |
Project brand color for POG. |
color-project-cyo |
--rs-color-project-cyo |
#49A0D4 |
Project brand color for Cuenta y Orden. |
color-background |
--rs-color-background |
var(--rs-color-gray-100) |
|
color-background-disabled |
--rs-color-background-disabled |
var(--rs-color-gray-100) |
|
color-background-caution |
--rs-color-background-caution |
var(--rs-color-yellow-100) |
|
color-background-info |
--rs-color-background-info |
var(--rs-color-blue-100) |
|
color-surface-primary |
--rs-color-surface-primary |
var(--rs-color-white-500) |
|
color-surface-tertiary |
--rs-color-surface-tertiary |
var(--rs-color-black-500) |
|
color-text-primary |
--rs-color-text-primary |
var(--rs-color-black-500) |
|
color-text-secondary |
--rs-color-text-secondary |
var(--rs-color-gray-700) |
|
color-text-brand |
--rs-color-text-brand |
var(--rs-color-blue-500) |
|
color-text-brand-blue |
--rs-color-text-brand-blue |
var(--rs-color-blue-500) |
|
color-text-brand-green |
--rs-color-text-brand-green |
var(--rs-color-green-500) |
|
color-text-brand-yellow |
--rs-color-text-brand-yellow |
var(--rs-color-yellow-500) |
|
color-text-brand-red |
--rs-color-text-brand-red |
var(--rs-color-red-500) |
|
color-text-placeholder |
--rs-color-text-placeholder |
var(--rs-color-gray-500) |
|
color-text-caution |
--rs-color-text-caution |
var(--rs-color-yellow-500) |
|
color-text-button-primary |
--rs-color-text-button-primary |
var(--rs-color-white-500) |
|
color-text-button-secondary |
--rs-color-text-button-secondary |
var(--rs-color-gray-600) |
|
color-text-button-tertiary |
--rs-color-text-button-tertiary |
var(--rs-color-blue-500) |
|
color-text-button-tertiary-hover |
--rs-color-text-button-tertiary-hover |
var(--rs-color-blue-700) |
|
color-icon-primary |
--rs-color-icon-primary |
var(--rs-color-blue-500) |
|
color-icon-secondary |
--rs-color-icon-secondary |
var(--rs-color-black-500) |
|
color-icon-button-primary |
--rs-color-icon-button-primary |
var(--rs-color-white-500) |
|
color-icon-button-secondary |
--rs-color-icon-button-secondary |
var(--rs-color-gray-600) |
|
color-icon-button-tertiary |
--rs-color-icon-button-tertiary |
var(--rs-color-blue-500) |
|
color-icon-input |
--rs-color-icon-input |
var(--rs-color-black-500) |
|
color-icon-brand-blue |
--rs-color-icon-brand-blue |
var(--rs-color-blue-500) |
|
color-icon-brand-green |
--rs-color-icon-brand-green |
var(--rs-color-green-500) |
|
color-icon-brand-yellow |
--rs-color-icon-brand-yellow |
var(--rs-color-yellow-500) |
|
color-icon-brand-red |
--rs-color-icon-brand-red |
var(--rs-color-red-500) |
|
color-icon-brand-darkblue |
--rs-color-icon-brand-darkblue |
var(--rs-color-darkblue-500) |
|
color-icon-project-pc |
--rs-color-icon-project-pc |
var(--rs-color-project-pc) |
|
color-icon-project-alta |
--rs-color-icon-project-alta |
var(--rs-color-project-alta) |
|
color-icon-project-cc |
--rs-color-icon-project-cc |
var(--rs-color-project-cc) |
|
color-icon-project-pog |
--rs-color-icon-project-pog |
var(--rs-color-project-pog) |
|
color-icon-project-cyo |
--rs-color-icon-project-cyo |
var(--rs-color-project-cyo) |
|
color-stroke-default |
--rs-color-stroke-default |
var(--rs-color-gray-500) |
|
color-stroke-focused |
--rs-color-stroke-focused |
var(--rs-color-blue-500) |
|
color-stroke-disabled |
--rs-color-stroke-disabled |
var(--rs-color-gray-100) |
|
color-stroke-success |
--rs-color-stroke-success |
var(--rs-color-green-500) |
|
color-stroke-caution |
--rs-color-stroke-caution |
var(--rs-color-yellow-500) |
|
color-stroke-error |
--rs-color-stroke-error |
var(--rs-color-red-500) |
|
color-button-primary |
--rs-color-button-primary |
var(--rs-color-blue-500) |
|
color-button-primary-hover |
--rs-color-button-primary-hover |
var(--rs-color-blue-700) |
|
color-button-secondary |
--rs-color-button-secondary |
var(--rs-color-gray-500) |
|
color-button-secondary-hover |
--rs-color-button-secondary-hover |
var(--rs-color-gray-700) |
|
color-button-blue-surface |
--rs-color-button-blue-surface |
var(--rs-color-blue-100) |
|
color-button-green-surface |
--rs-color-button-green-surface |
var(--rs-color-green-100) |
|
color-button-yellow-surface |
--rs-color-button-yellow-surface |
var(--rs-color-yellow-100) |
|
color-button-red-surface |
--rs-color-button-red-surface |
var(--rs-color-red-100) |
Font tokens
| Token | CSS variable | Value | Description |
|---|---|---|---|
font-family |
--rs-font-family |
'Inter', sans-serif |
Component tokens
| Token | CSS variable | Value | Description |
|---|---|---|---|
pill-bg-brand-blue |
--rs-pill-bg-brand-blue |
var(--rs-color-blue-100) |
|
pill-color-brand-blue |
--rs-pill-color-brand-blue |
var(--rs-color-blue-500) |
|
pill-bg-brand-navyblue |
--rs-pill-bg-brand-navyblue |
var(--rs-color-navyblue-100) |
Legacy token referenced an undefined navyblue scale. |
pill-color-brand-navyblue |
--rs-pill-color-brand-navyblue |
var(--rs-color-navyblue-500) |
Legacy token referenced an undefined navyblue scale. |
pill-bg-brand-green |
--rs-pill-bg-brand-green |
var(--rs-color-green-100) |
|
pill-color-brand-green |
--rs-pill-color-brand-green |
var(--rs-color-green-500) |
|
pill-bg-brand-navygreen |
--rs-pill-bg-brand-navygreen |
var(--rs-color-navygreen-100) |
|
pill-color-brand-navygreen |
--rs-pill-color-brand-navygreen |
var(--rs-color-navygreen-500) |
|
pill-bg-brand-red |
--rs-pill-bg-brand-red |
var(--rs-color-red-100) |
|
pill-color-brand-red |
--rs-pill-color-brand-red |
var(--rs-color-red-500) |
|
pill-bg-brand-yellow |
--rs-pill-bg-brand-yellow |
var(--rs-color-yellow-100) |
|
pill-color-brand-yellow |
--rs-pill-color-brand-yellow |
var(--rs-color-yellow-500) |
|
color-sidebar-background |
--rs-color-sidebar-background |
var(--rs-color-white-500) |
|
color-sidebar-background-active |
--rs-color-sidebar-background-active |
var(--rs-color-blue-100) |
|
color-sidebar-background-hover |
--rs-color-sidebar-background-hover |
var(--rs-color-blue-100) |
|
color-sidebar-stroke |
--rs-color-sidebar-stroke |
var(--rs-color-gray-100) |
|
color-sidebar-stroke-active |
--rs-color-sidebar-stroke-active |
var(--rs-color-blue-500) |