Definiciones de estilo para color, tipografía & layout.

Color

Nuestro sistema de color tiene 4 niveles de definición.

Base

Define la paleta base de colores a ocupar en el sistema, basados en colores de marca.

Cada color está interpolado entre valores de 5 a 90 según luminosidad (CIELAB), y grises entre 0 y 100 en valores de 5 para tener más tonos para la elevación de superficies en la UI.

• avocado: Verde basado en Pantone 361 C usado en CMR Falabella, Seguros, Tottus y Falabella Corporativo
• lime: Verde basado en Pantone 382 C usado en el logo de Banco Falabella
• orange: Naranja basado en Pantone 7549 C usado en Salud (Seguros Falabella) y CMR Puntos
• cherry: Rojo basado en Pantone 192 C usado en Sodimac, CMR Puntos y Falabella Corporativo
• raspberry: Fucsia/Magenta basado en Pantone 1915 C usado en Vida (Seguros Falabella) y CMR Puntos
• grape: Púrpura Violeta/Lila basado en Pantone 7441 C usado en Hogar (Seguros Falabella) y CMR Puntos
• blueberry: Azul basado en Pantone 285 C usado en Auto (Seguros Falabella), Sodimac, CMR Puntos y Falabella Corporativo
• agave: Verde basado en Pantone 7710 C usado en Viajes
• neutral: Escala de grises fríos basado en Pantone 538 C

Theme

Define los temas o marcas que ocupan el sistema de diseño, puede ser extendida a futuro. Las marcas pueden sobre escribir un ‘significado’ aplicando otro color base, así se mantiene consistente el contraste y accesibilidad de todos los componentes.

• fif (Por defecto): Usado para Banco, Seguros y CMR Puntos.
  • Accent (Color primario): avocado
  • Info (Color informativo): blueberry
  • Warning (Color advertencia): orange
  • Danger (Color peligro/destructivo): cherry
  • Highlight (Color secundario/foco): lime
• parlo : Usado para nuestra herramienta interna de Chat y Servicio al Cliente.
  • Accent: grape
• sf-auto : Usado para flujos o elementos Auto/Movilidad (Seguros Falabella).
  • Accent: blueberry
• sf-travel : Usado para flujos o elementos Auto/Movilidad (Seguros Falabella).
  • Accent: agave
• sf-life : Usado para flujos o elementos Auto/Movilidad (Seguros Falabella).
  • Accent: raspberry
• sf-health : Usado para flujos o elementos Auto/Movilidad (Seguros Falabella).
  • Accent: orange
• sf-home : Usado para flujos o elementos Auto/Movilidad (Seguros Falabella).
  • Accent: grape

Contrast

• on-light (Por defecto): Uso en fondos claros y lisos, con contraste alto.
• on-dark: Uso en fondos oscuros, imágenes o videos que requieran invertir el color del componente o aplicar filtros adicionales.

Scheme

Nuestros tokens o variables de color están separadas en 4 categorías semánticas.

• text: Para textos o iconos inline que acompañen al texto
  • primary: E
  • secondary: E
  • tertiary: E
  • accent: E
  • warning: E
  • danger: E
• icon: Para iconos, pictogramas e ilustraciones
  • primary: E
  • secondary: E
  • tertiary: E
  • accent: E
  • warning: E
  • danger: E
  • negative: E
  • highlight: E
  • shading: E
  • overlay: E
• state: Para elementos UI que sean interactivos o representen estados
  • primary: E
    • default: E
    • hover: E
    • active: E
  • secondary: E
    • default: E
    • hover: E
    • active: E
  • tertiary: E
    • default: E
    • hover: E
    • active: E
  • warning: E
    • default: E
    • hover: E
    • active: E
  • danger: E
    • default: E
    • hover: E
    • active: E
  • disabled: E
• surface: Para fondos, rellenos y trazos de contenedores.

<aside> <img src="/icons/light-bulb_green.svg" alt="/icons/light-bulb_green.svg" width="40px" />

Dado que en Falabella varias marcas ocupan verdes (Falabella, Tottus, Banco) y naranja (Falabella.com) en el límite del espectro sRGB, varía mucho por pantalla. Elegimos esta estructura para simplificar aplicación de estilos, preservar los colores de marca y mantener accesibilidad acorde al área, importancia y uso de cada componente. Estamos ocupando la medición APCA de contraste (WCAG 3.0) ¿Porqué?

</aside>

Tipografía

Siempre ocupamos Maven Pro para UI y BeauSans Pro para piezas de marca.

• title: Usado en títulos principales, generalmente h1 y h2.
• heading: Usado en encabezados internos, generalmente h3 a h6.
• paragraph: Usado en párrafos de texto como descripciones y textos legales.
• label: Usado en etiquetas de componentes.
• table: Usado para encabezados y data de tablas.

<aside> <img src="/icons/warning_yellow.svg" alt="/icons/warning_yellow.svg" width="40px" />

</aside>

Espaciado

Para espaciado ocupamos una escala de 4pt y estamos migrando a un sistema semántico para simplificar el diseño responsive basado en un componente base.

• canvas: El lienzo donde se construye la vista.
• section: Secciones de la vista, generalmente con un encabezado.
• organism: Componentes de primer nivel que puedes ocupar directamente en una sección.
• molecule: Grupos de elementos dentro del componente que deban tener foco, lectura o acciones separadas.
• atom: Elementos individuales como labels, icons, bloques de texto que puedan ser seleccionados o ofuscados por un Skeleton para generar un estado de carga.