Colores

La identidad cromática de DEVSOFTEC es monocroma. El color nunca se usa como decoración: solo para comunicar estados funcionales.

Filosofía

El monocromo no es una limitación, es una decisión. Cuando todo es blanco y negro, cada pixel de color significa algo.

Colores de marca

Los dos colores fundamentales. Se invierten según el tema (claro/oscuro). Clic en un color para copiar el hex.

Contexto	Modo claro	Modo oscuro
Fondo principal	`#FAFAFA`	`#0A0A0A`
Texto principal	`#0A0A0A`	`#FAFAFA`
Logo / acento	`#0A0A0A`	`#FAFAFA`

Escala de grises

Escala Neutral (no Zinc): fondos intermedios, bordes, texto secundario y hover. Misma familia que --ds-gray-* en la librería.

Los extremos de marca cierran la escala: 50 ≈ #FAFAFA (--ds-brand-white) y 950 ≈ #0A0A0A (--ds-brand-black).

Usos comunes

Gris	Uso
100 – 200	Fondos de navegación, superficies (modo claro)
300	Bordes, separadores
400 – 500	Texto secundario, placeholders
600 – 700	Texto terciario (modo oscuro)
800 – 900	Fondos de navegación (modo oscuro)

Colores de estado

Solo para feedback funcional: alertas, badges, validación. Clic en el swatch para copiar.

En contexto

Así se ven al 100% (texto / badge) y con las opacidades de superficie:

Éxito--ds-success

Badge 100%Fondo 10% · borde 20%Texto al 100%

Error--ds-error

Badge 100%Fondo 10% · borde 20%Texto al 100%

Aviso--ds-warning

Badge 100%Fondo 10% · borde 20%Texto al 100%

Info--ds-info

Badge 100%Fondo 10% · borde 20%Texto al 100%

Reglas de uso

Nunca uses colores de estado como decoración o acento visual.
En backgrounds, usar 10% de opacidad: color-mix(in srgb, var(--ds-success) 10%, transparent).
En texto y badges sólidos, usar el color al 100%.
El borde de estado usa 20% de opacidad.

Tokens CSS

:root {
  --ds-brand-black: #0a0a0a;
  --ds-brand-white: #fafafa;

  --ds-gray-100: #f5f5f5;
  --ds-gray-200: #e5e5e5;
  --ds-gray-300: #d4d4d4;
  --ds-gray-400: #a3a3a3;
  --ds-gray-500: #737373;
  --ds-gray-600: #525252;
  --ds-gray-700: #404040;
  --ds-gray-800: #262626;
  --ds-gray-900: #171717;

  --ds-success: #00bb7f;
  --ds-error: #e40014;
  --ds-warning: #fcbb00;
  --ds-info: #5f98ff;
}