Design System Quipux Design System Quipux
  • Inicio
  • Plataformas digitales
    • Clientes
      • Fundamentos
        • Estilos
        • Formularios
        • Componentes
      • Sistemas Inteligentes de Movilidad
        • Contenido
        • Elementos
        • Layouts
        • Templates
        • Componentes
Design System Quipux Design System Quipux
  • Inicio
  • Plataformas digitales
    • Clientes
      • Fundamentos
        • Estilos
        • Formularios
        • Componentes
      • Sistemas Inteligentes de Movilidad
        • Contenido
        • Elementos
        • Layouts
        • Templates
        • Componentes
Plataformas digitales
  • Folder icon closed Folder open iconClientes
    • Fundamentos
      • Estilos
        • Colores
        • Iconografía
        • Elevaciones
        • Tipografía
        • Grids
      • Formularios
        • Inputs
        • Selects
        • Toggles
        • Slider
        • File uploader
      • Componentes
        • Button
        • Cards
        • Progress bar
        • Badge, tags y chips
        • Usos y normas de las tablas
    • Sistemas Inteligentes de Movilidad
      • Contenido
        • Colores
        • Uso tipográfico
        • Logos y manuales
      • Elementos
        • Footer
        • Notificaciones
      • Layouts
        • Ejemplos de vistas
        • Ejemplo de uso de grids
        • Ejemplos de vistas de WordPress
      • Templates
        • Correos
        • Documentos
      • Componentes
        • Lista
        • Usos de progress bar
        • Botones
        • CIVii
  • Folder icon closed Folder open iconCorporativo
  • Folder icon closed Folder open iconPlantilla

Uso tipográfico

El sistema tipográfico está compuesto por varias familias tipográficas, seleccionadas según la función, jerarquía y contexto de uso dentro de la interfaz. Cada tipografía cumple un propósito específico, permitiendo construir una experiencia visual consistente, legible y alineada con la identidad del producto.

Color de encabezados y resaltados

Los encabezados pueden usar variantes de color según la intención visual y el contexto de uso. Estas variables no modifican la jerarquía tipográfica del texto, sino su énfasis dentro de la interfaz. 

Normalmente se utiliza el color Secondary para títulos y resaltados de mayor importancia.

En casos puntuales se utiliza en H1 para el banner y se usa el siguiente color para mejor contraste:

  • White  (#FFFFFF)

Ejemplos de uso

Movilidad en Línea – Medellín

Tipografía que se usa:

  • Montserrat

Ejemplos de uso

  1. H1
  2. Texto con resaltado

Servicios Digitales – Cali

Tipografía que se usa:

  • Montserrat

Ejemplos de uso

  1. H1
  2. Texto con resaltado

Movilidad en Línea – Manizales

Tipografía que se usa:

  • Montserrat

Ejemplos de uso

  1. H1
  2. Texto con resaltado

Buenos usos

  • Usar la tipografía indicada de cada servicio de forma consistente en los encabezados.
  • Limitar el uso de H1 a una sola vez por página, cuando sea posible.
  • Mantener contraste, tamaño y peso adecuados para asegurar legibilidad.
Uso tipográfico - PreviousColoresNext - Uso tipográficoLogos y manuales
Contenidos

Copyright © 2026 Quipux. Todos los derechos reservados