CTS Design System

Guía de identidad visual — Industrias CTS

React / Next.js TypeScript Tailwind CSS v1.0.0 ☀ Modo claro

01 Colores

Azules CTS

Paleta principal de marca

Azul CTS — Primario
#0065BB
Botones, links, íconos activos, barras de nav
Azul Claro
#89AEDC
Fondos de estado, badges secundarios
Azul Oscuro
#004D9E
Hover del primario, topbar dark

Grises CTS

Neutros corporativos

Gris Medio
#8F8F8F
Texto deshabilitado, íconos secundarios
Gris Claro
#C8C8C8
Bordes, separadores
Gris Oscuro
#646464
Texto secundario, subtítulos

Sistema de Prioridades

Medidor de prioridad

Alta
#EF4444
Media
#F59E0B
Baja
#22C55E
Alta Media Baja

Estados del sistema

Feedback y notificaciones

Éxito
#16A34A
Advertencia
#D97706
Error
#DC2626
Info
#89AEDC

Fondos de tema

Cambian según modo claro/oscuro

bg-page
Light: #D0DCF0 · Dark: #C7E3FF
bg-surface
Light: #FFFFFF · Dark: #283D63
bg-alt
Light: #EEF4FB · Dark: #192945
nav-bg
Light: #0065BB · Dark: #283D63

02 Tipografía

Conthrax — Display

Títulos, portadas, separadores

⚠ Fuente comercial — Typodermic Fonts. Requiere licencia.

Bold — Títulos
SemiBold — Secciones
Regular — Subtítulos
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Ññ Oo Pp Qq Ss Tt Uu

Titillium Web — Body

Contenido, UI, manuales, fichas

✓ Libre — Google Fonts / SIL OFL

Bold — Labels, botones, títulos párrafo
SemiBold — Énfasis en cuerpo
Regular — Cuerpo de texto estándar
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Ññ Oo Pp Qq Ss Tt Uu

Escala tipográfica

10 variantes — h1 → caption

h1Conthrax Bold · 48px
Industrias CTS
h2Conthrax Bold · 36px
Catálogo de Productos
h3Conthrax SemiBold · 30px
Fichas Técnicas
h4Conthrax SemiBold · 24px
Especificaciones del Producto
subtitleConthrax Reg · 20px
Descripción de portada
body-lgTitillium Reg · 18px
Párrafo introductorio con mayor énfasis visual.
bodyTitillium Reg · 16px
Texto de contenido estándar para documentos y descripciones corporativas.
body-smTitillium Reg · 14px
Texto de apoyo, notas y aclaraciones secundarias del documento.
labelTitillium Bold · 14px
Etiqueta de campo
captionTitillium Reg · 12px
Pie de elemento · metadata · Actualizado: 12/05/2026

03 Espaciado & Forma

Escala de espaciado

Base 4px

space-1
4px
space-2
8px
space-3
12px
space-4
16px
space-5
20px
space-6
24px
space-8
32px
space-10
40px
space-12
48px
space-16
64px

Border Radius

none
sm 4px
md 8px
lg 12px
xl 16px
full

Sombras

Tono azul CTS

SM--sh-sm
MD--sh-md
LG--sh-lg

04 Botones

Variantes

Tamaños

Estados especiales

Sobre fondo oscuro

05 Inputs

Estados

Formato: CTS-XXXXCódigo no encontrado.
Verificado correctamente.

Con íconos

$

07 Componentes de App

Tarjetas de métricas

Resumen de estado en el dashboard

🗂
##
Nombre de métrica
⊞
##
Nombre de métrica
⚡
##
Nombre de métrica
⊙
##
Nombre de métrica
COD-001
Título de la tarjeta
Media
Categoría0 / N completados
0% completado
ClienteNombre del cliente
COD-002
Título de la tarjeta
Baja
CategoríaN / N completados
100% completado
ClienteNombre del cliente
COD-003
Título de la tarjeta
Alta
CategoríaN / M completados
33% completado
ClienteNombre del cliente
COD-004
Título de la tarjeta
Alta
CategoríaN / M completados
50% completado
ClienteNombre del cliente

Progress bars

Por prioridad y estado

Alta — 33%Alta
Media — 60%Media
Baja — 100%Baja
CTS Blue — 50%Activo

Stepper de fases

Fase de diseño de un tablero/OT

✓
Fase 1
2
Fase 2
3
Fase 3
4
Fase 4
5
Fase 5
6
Fase 6

Secciones de campos

Ejemplo de vista de detalle con múltiples secciones

Sección A
Campo 1
Valor del campo
Campo 2
Valor del campo
Campo 3
Valor del campo
Estado
Bajo
Categoría
Inactivo
Sección B
Campo 4
Valor del campo
Campo 5
Valor del campo
Campo 6
Valor del campo
Campo 7
Valor del campo
Campo 8
Valor del campo

08 Badges

Variantes de estado

Primary Secondary Disponible En revisión Cancelado Info Borrador

Prioridades

Alta Media Baja

Con punto de estado

Activo Completado En proceso Cancelado Pendiente