Saltar al contenido principal

Colores

Nuestro Sistema de Diseño utiliza una paleta de colores cuidadosamente seleccionada que garantiza consistencia y accesibilidad en todas las plataformas.

Colourways del logomark

Los colores de marca también componen los cuatro colourways del logomark (primary, reverse, neon y mono). Ver Logomark.

Colores Primarios​

  • Natura: #00D47E - Color principal de la marca (uso limitado por alta saturación)
  • Forrest: #1B434C - Color secundario de uso constante en UI
    • Dark Forrest: #243838
    • Light Forrest: #E4ECE3
  • Trust: #FFFFFF - Blanco
  • Green Neon: #C6F54F - Verde neón
    • Light Green Neon: #F7F8F1
Uso de Colores Primarios

Natura es el color principal de la marca, pero debido a su alta saturación debe usarse con moderación (botones destacados, acentos, elementos activos). Forrest es el color de trabajo constante para interfaces, ideal para texto, navegación, bordes y elementos que requieren mayor presencia visual.

Colores Secundarios​

  • Lavender: #9687F2 - Lavanda
    • Light Lavender: #EBE8FF
  • Sun: #FF7834 - Naranja
    • Light Sun: #FFDECC
  • Sky: #75DBD2 - Celeste
    • Light Sky: #D6F5F2

Colores Semánticos​

  • Success: #C6F54F - Acciones exitosas (Green Neon)
    • Success Light: #F7F8F1
  • Warning: #FF7834 - Advertencias (Sun)
    • Warning Light: #FFDECC
  • Error: #F54F4F - Errores
    • Error Light: #FFDDDD
  • Info: #9687F2 - Información (Lavender)
    • Info Light: #EBE8FF

Colores Neutros (Grises)​

  • Gray 600: #384152 - Más oscuro (títulos)
  • Gray 500: #6B7380 - Call to actions
  • Gray 400: #9CA2AE - Párrafos
  • Gray 300: #E1E8F0 - Bordes de tarjetas
  • Gray 200: #E6E7EB - Fondos
  • Gray 100: #F6F6F6 - Más claro (fondos)

Colores de Superficie (Elevación)​

Cuatro niveles de superficie (--bg-0dp a --bg-3dp) con valores propios para modo claro y oscuro; usa el nivel según el rol del elemento, no por luminosidad.

Modo Claro​

  • bg-0dp: #f5fafb - Fondo base (nivel más bajo)
  • bg-1dp: #ffffff - Tarjetas, superficies elevadas
  • bg-2dp: #f3f3f3 - Modales, diálogos
  • bg-3dp: #e8e8e8 - Menús desplegables, tooltips

Modo Oscuro​

  • bg-0dp: #1e1e1e - Fondo base (nivel más bajo)
  • bg-1dp: #303030 - Tarjetas, superficies elevadas
  • bg-2dp: #3e3e3e - Modales, diálogos
  • bg-3dp: #272727 - Menús desplegables, tooltips
Uso de Elevación

Usa bg-0dp para el fondo principal de la aplicación, bg-1dp para tarjetas y paneles, bg-2dp para elementos flotantes como modales, y bg-3dp para menús y tooltips. Las variables cambian automáticamente entre modo claro y oscuro.

Colores de Formularios​

Tokens específicos para elementos de formulario que mantienen consistencia entre modo claro y oscuro.

Modo Claro​

  • input-bg: var(--bg-1dp) - Fondo de inputs
  • input-border: #c3c3c3 - Borde de inputs

Modo Oscuro​

  • input-bg: var(--bg-1dp) - Fondo de inputs (se adapta automáticamente)
  • input-border: #616161 - Borde de inputs

Uso​

Variables CSS​

:root {
  /* Colores Primarios */
  --color-forrest: #1B434C;
  --color-dark-forrest: #243838;
  --color-light-forrest: #E4ECE3;
  --color-natura: #00D47E;
  --color-trust: #FFFFFF;
  --color-green-neon: #C6F54F;
  --color-light-green-neon: #F7F8F1;
  
  /* Colores Secundarios */
  --color-lavender: #9687F2;
  --color-light-lavender: #EBE8FF;
  --color-sun: #FF7834;
  --color-light-sun: #FFDECC;
  --color-sky: #75DBD2;
  --color-light-sky: #D6F5F2;
  
  /* Colores Semánticos */
  --color-success: #C6F54F;
  --color-success-light: #F7F8F1;
  --color-warning: #FF7834;
  --color-warning-light: #FFDECC;
  --color-error: #F54F4F;
  --color-error-light: #FFDDDD;
  --color-info: #9687F2;
  --color-info-light: #EBE8FF;
  
  /* Grises */
  --color-gray-600: #384152;
  --color-gray-500: #6B7380;
  --color-gray-400: #9CA2AE;
  --color-gray-300: #E1E8F0;
  --color-gray-200: #E6E7EB;
  --color-gray-100: #F6F6F6;
  
  /* Superficie / Elevación */
  --bg-0dp: #f5fafb;  /* Fondo base */
  --bg-1dp: #ffffff;  /* Tarjetas */
  --bg-2dp: #f3f3f3;  /* Modales */
  --bg-3dp: #e8e8e8;  /* Menús, tooltips */
  
  /* Formularios */
  --input-bg: var(--bg-1dp);
  --input-border: #c3c3c3;
  --select-bg: var(--bg-1dp);
}

/* Modo Oscuro */
body.scheme-dark {
  --bg-0dp: #1e1e1e;
  --bg-1dp: #303030;
  --bg-2dp: #3e3e3e;
  --bg-3dp: #272727;
  --input-border: #616161;
}

Ejemplos de uso​

/* Usa variables CSS de WebFoundation */
.my-component {
  background-color: var(--color-natura);
  border-color: var(--color-forrest);
  color: var(--color-gray-600);
}

.success-message {
  background-color: var(--color-success-light);
  color: var(--color-success);
  border: 1px solid var(--color-success);
}

/* Usar colores semánticos */
.error-box {
  background-color: var(--color-error-light);
  border: 1px solid var(--color-error);
  color: var(--color-error);
}

/* Usar colores secundarios */
.info-panel {
  background-color: var(--color-light-lavender);
  color: var(--color-lavender);
}

/* Usar tokens de superficie */
.card {
  background-color: var(--bg-1dp);
  border: 1px solid var(--color-gray-300);
}

.modal {
  background-color: var(--bg-2dp);
}

.dropdown-menu {
  background-color: var(--bg-3dp);
}

/* Formularios - se adaptan automáticamente al modo oscuro */
.custom-input {
  background-color: var(--input-bg);
  border: 1px solid var(--input-border);
}

Accesibilidad​

Todas las combinaciones de colores cumplen con los estándares WCAG 2.1 AA para proporciones de contraste:

  • Texto normal: mínimo 4.5:1
  • Texto grande: mínimo 3:1