Sistema de Diseño · Distribución de Beneficios

Librería viva de estilos y componentes, pensada como punto de partida reutilizable para éste y otros proyectos ENCCRV / CONAF. Usa las hojas reales css/tokens.css y css/main3.css, sin librerías. La base de color, tipografía y espaciado es compartida por el flujo del Postulante (v2.2) y el del Evaluador (v3). El espejo de marca css/ds-brand.css agrega los tokens corporativos y un tema de previsualización que no afecta a los flujos en escala de grises.

Grayscale + color semántico Tokens compartidos Sin librerías Marca ENCCRV incluida

Marca ENCCRV

Paleta institucional del Manual de Normas Gráficas (v3.0). Estos colores viven en ds-brand.css como variables --enccrv-* y --medida-*; alimentan el tema «Marca ENCCRV» del selector superior.

Primarios corporativos (isologotipo)

--enccrv-blue-dark#004f83 · 2955 C

--enccrv-blue-light#427ebc · 285 C

--enccrv-green-dark#13622d · 3435 C

--enccrv-green-light#178336 · 348 C

--enccrv-purple-dark#8c3a8c · 2603 C

--enccrv-purple-light#a0579e · 2583 C

--enccrv-orange-dark#e8491b · 179 C

--enccrv-orange-light#f28e14 · 144 C

--enccrv-yellow#f8ab08 · 136 C

--enccrv-gray-bg#E2E5E6 · 427 C

Identidad por Medida de Acción

Paletas tonales (estilo Material) de los tonos principales

Color (tema actual)

Base en escala de grises del prototipo. Los colores semánticos (verde / amarillo / rojo) son los únicos con color real y se reservan para éxito, advertencia y error.

Semánticos — únicos con color

Success · VerdeAprobado, adjudicado, cuadrado, contacto logradotext #1a7f37 · bg #e4f4ea

Warning · AmarilloEn evaluación, corrección, documentos pendientestext #8a6100 · bg #fdf3d2

Error · RojoSuspendida, rechazada, presupuesto en números rojostext #c0392b · bg #fbe6e4

Info · NeutroInformativo / en proceso (se mantiene en gris)text #495057 · bg #f1f3f5

Superficies y bordes

--color-bg#f5f5f4

--color-surface#ffffff

--color-surface-alt#f1f3f5

--color-border#dee2e6

Texto y acción

--color-text-primary#1a1a1a

--color-text-secondary#495057

--color-text-muted#6c757d

--color-text-disabled#adb5bd

--color-action#1a1a1a

Tipografía

El prototipo usa tipografía de sistema. La marca define además una arquitectura tipográfica corporativa (abajo).

--font-size-xl · 20px · 800/700

Título de página · H1

--font-size-lg · 17px · 700

Encabezado de sección

--font-size-md · 14.5px · 400

Texto base de la interfaz y párrafos.

--font-size-sm · 13px · 400/600

Texto secundario, celdas de tabla y controles.

--font-size-xs · 11px · 700

Kickers, badges y etiquetas

Pesos

Aa400 · Regular

Aa600 · Semibold

Aa700 · Bold

Aa800 · Extrabold

Arquitectura tipográfica de marca

Base del sistema · gobCL

Fuente oficial del Gobierno de Chile en todas sus densidades para documentos y textos del sistema.

Énfasis / cursiva · Lato Italic

Citas y énfasis en cursiva usan estrictamente Lato Italic (Light / Regular / Bold / Black).

Portadas y headers de gran envergadura · Gotham

GOTHAM BOLD / MEDIUM para títulos destacados corporativos.

Fallback seguro · Calibri

Si las anteriores no están cargadas en el cliente, se usa Calibri (Regular / Bold). Variables: --brand-font-base, --brand-font-italic, --brand-font-display.

Espacio y forma

Escala de espaciado base 4, radios de esquina y sombras de elevación.

Escala de espaciado

--space-1 · 4px

--space-2 · 8px

--space-3 · 12px

--space-4 · 16px

--space-5 · 20px

--space-6 · 24px

--space-8 · 32px

--space-10 · 40px

Radios

--radius-sm · 4px

--radius-md · 6px

--radius-lg · 8px

Sombras

--shadow-card

--shadow-sidebar

Tokens — tabla relacional y puente con Figma

Cada variable CSS con su equivalente en nombre JSON (notación de puntos) y su valor. Descarga el archivo de tokens en formato compatible con Tokens Studio / Figma ($value / $type).

Archivo: enccrv-design-tokens.json

Variable CSS	Nombre JSON	Valor

Componentes

Piezas principales del flujo, renderizadas con sus clases reales ev-*. Cambia el tema arriba para verlas en marca.

Botones

Badges de estado y fase

Base semántica

Soft Info Warning Success Danger

Estados del ciclo de vida (chip corto)

Borrador Asignada Evaluación Suspendida Adjudicada No adjudicada

Celda de estado (macro-fase + sub-estado)

Fase 3 · Evaluación técnicaSuspendida

Pills, chips y callouts

Modo lectura MT5IF3 Región De Los Ríos Fase 3 · Evaluación técnica

Callout informativo: guía o contexto dentro de un paso.

✓ Contacto logrado. El protocolo de no contacto se detiene con éxito.

⚠ Presupuesto excedido — números rojos. El costo supera el adjudicado.

Formulario y tabla

Campo de texto Selector

Casillas y radios

Confirmo la información.

Sin respuestaRespondió

#	Código	Postulante	Fase	Acciones
1	PC_07_2026_PP_1042	Pérez Soto Juan	Fase 3 · Evaluación técnicaEvaluación
2	PC_09_2026_PP_2317	González Lefián María	Fase 3 · Evaluación técnicaSuspendida

Anatomía de componentes

Para cada componente: la vista, su HTML y las variables CSS que consume.

Logos y personajes

Descarga individual o completa. Los archivos se leen desde images/logos/ e images/personajes/ según el manifiesto js/ds-assets.js. Los que aún no existan se muestran como «pendiente».

Logos

Personajes

Sistema de Diseño · ENCCRV / CONAF — referencia de estilos del prototipo (v2.2 Postulante · v3 Evaluador). Construido sobre tokens.css + ds-brand.css + main3.css, sin librerías. No modifica los flujos existentes.