Colores
This content is not available in your language yet.
Colores base
Sección titulada «Colores base»Negros, blancos y off-white. Punto de partida de la paleta neutra.
--co-color-base-negro #1f1c1b --co-color-base-blanco #ffffff --co-color-base-off-white #f7f6f0 Primary
Sección titulada «Primary»Los cuatro colores de marca Prolibu. Verde es el principal, Azul se usa para acciones interactivas.
--co-color-primary-verde #02a270 --co-color-primary-amarillo #fdbf00 --co-color-primary-azul #2563eb --co-color-primary-rosado #f32a73 Escalas — Azul
Sección titulada «Escalas — Azul»--co-color-azul-100 #eff4ff --co-color-azul-200 #dbe6fe --co-color-azul-300 #bfd3fe --co-color-azul-400 #93b4fd --co-color-azul-500 #6090fa --co-color-azul-600 #3b76f6 --co-color-azul-700 #2563eb --co-color-azul-800 #1d58d8 --co-color-azul-900 #1e408a Escalas — Verde
Sección titulada «Escalas — Verde»--co-color-verde-100 #ecfdf5 --co-color-verde-200 #d0fbe5 --co-color-verde-300 #a5f5d0 --co-color-verde-400 #6beab8 --co-color-verde-500 #31d69a --co-color-verde-600 #0cbd82 --co-color-verde-700 #02a270 --co-color-verde-800 #027a58 --co-color-verde-900 #046147 Escalas — Amarillo
Sección titulada «Escalas — Amarillo»--co-color-amarillo-100 #ffffea --co-color-amarillo-200 #fffbc5 --co-color-amarillo-300 #fff885 --co-color-amarillo-400 #ffe01b --co-color-amarillo-500 #fdbf00 --co-color-amarillo-600 #e29500 --co-color-amarillo-700 #bb6902 --co-color-amarillo-800 #985108 --co-color-amarillo-900 #7c420b Escalas — Rosado
Sección titulada «Escalas — Rosado»--co-color-rosado-100 #fef1f6 --co-color-rosado-200 #fde6f0 --co-color-rosado-300 #fdcde2 --co-color-rosado-400 #fda4c8 --co-color-rosado-500 #fb6ba3 --co-color-rosado-600 #f32a73 --co-color-rosado-700 #e41e5c --co-color-rosado-800 #c61044 --co-color-rosado-900 #a41039 --co-color-gray-100 #f6f6f6 --co-color-gray-200 #e3e3e3 --co-color-gray-300 #c4c4c4 --co-color-gray-400 #a0a0a0 --co-color-gray-500 #888888 --co-color-gray-600 #585858 --co-color-gray-700 #1f1c1b --co-color-gray-800 #0a0a0a Neutrales
Sección titulada «Neutrales»--co-color-neutral-100 #e6e5df --co-color-neutral-200 #eeede7 --co-color-neutral-300 #f3f2ec Secundarios
Sección titulada «Secundarios»--co-color-secondary-rosado-100 #d74ba0 --co-color-secondary-rosado-50 #ffc8eb --co-color-secondary-rosado-25 #ffe6f5 --co-color-secondary-rojo-100 #eb1e1e --co-color-secondary-rojo-50 #ff878c --co-color-secondary-rojo-25 #ffd7dc --co-color-secondary-naranja-100 #f0821e --co-color-secondary-naranja-50 #ffbe82 --co-color-secondary-naranja-25 #ffe6d2 --co-color-secondary-amarillo-100 #fad223 --co-color-secondary-amarillo-50 #ffe67d --co-color-secondary-amarillo-25 #fffac3 --co-color-secondary-verde-100 #afe664 --co-color-secondary-verde-50 #d7ffb4 --co-color-secondary-verde-25 #ebffc8 --co-color-secondary-oliva-100 #aab43c --co-color-secondary-oliva-50 #d2dc96 --co-color-secondary-oliva-25 #f0f0d2 --co-color-secondary-turquesa-100 #00afaf --co-color-secondary-turquesa-50 #3ce1c8 --co-color-secondary-turquesa-25 #c8f0f0 --co-color-secondary-azul-claro-100 #00bee6 --co-color-secondary-azul-claro-50 #6ee6f0 --co-color-secondary-azul-claro-25 #befaff --co-color-secondary-azul-electrico-100 #000aff --co-color-secondary-azul-electrico-50 #8095ff --co-color-secondary-azul-electrico-25 #cce0ff --co-color-secondary-violeta-100 #5f4bd7 --co-color-secondary-violeta-50 #b9b4ff --co-color-secondary-violeta-25 #e1e1ff --co-color-secondary-marron-100 #af7355 --co-color-secondary-marron-50 #d7b9a5 --co-color-secondary-marron-25 #f0e1d7 --co-color-secondary-guinda-100 #811137 --co-color-secondary-guinda-50 #c0889c --co-color-secondary-guinda-25 #e6cfd7 Colores semánticos para estados de UI (success, error, warning, progress, etc.).
--co-color-status-success #0a7724 --co-color-status-bg-success #ebf9ec --co-color-status-progress #2d6cc5 --co-color-status-bg-progress #eef3fa --co-color-status-submitted #7556ca --co-color-status-bg-submitted #f4f1fb --co-color-status-review #85571f --co-color-status-bg-review #fcf5db --co-color-status-pending #b45103 --co-color-status-bg-pending #f9f1eb --co-color-status-error #aa2e1b --co-color-status-bg-error #ffefef Opacity
Sección titulada «Opacity»Capas semitransparentes sobre negro y blanco — útiles para hover, overlays y bordes sutiles.
--co-color-opacity-negro-4 rgba(31, 28, 27, 0.04) --co-color-opacity-negro-8 rgba(31, 28, 27, 0.08) --co-color-opacity-negro-16 rgba(31, 28, 27, 0.16) --co-color-opacity-negro-25 rgba(31, 28, 27, 0.25) --co-color-opacity-negro-50 rgba(31, 28, 27, 0.50) --co-color-opacity-negro-80 rgba(31, 28, 27, 0.80) --co-color-opacity-blanco-4 rgba(255, 255, 255, 0.04) --co-color-opacity-blanco-8 rgba(255, 255, 255, 0.08) --co-color-opacity-blanco-16 rgba(255, 255, 255, 0.16) --co-color-opacity-blanco-25 rgba(255, 255, 255, 0.25) --co-color-opacity-blanco-50 rgba(255, 255, 255, 0.50) --co-color-opacity-blanco-80 rgba(255, 255, 255, 0.80)