BLUEPRINT DESIGN SYSTEM — CONSOLIDATED REFERENCE

[SEC-01] · PALETA DE COLOR① A-01

PALETA DE COLOR

Monocromía azul técnico. Sin gradientes decorativos. El color señaliza — no decora. Señales de estado solo en rojo y verde.

[CLR-BASE] · TOKENS PRIMARIOS10 VALORES

--color-bg

#0A1628

BG PRINCIPAL

--color-bg-panel

#0D1F3C

BG PANEL

--color-grid

#1A3560

GRILLA

--color-line

#4A7FBF

BORDES

--color-line-light

#6FA3D8

LÍN. SEC.

--color-ink

#A8CFEE

TEXTO

--color-ink-bright

#DDEEFF

TEXTO DEST.

--color-accent

#FFFFFF

NODOS

--color-signal-red

#FF4D4D

ERROR

--color-signal-ok

#4DFFB4

ÉXITO

10 tokens base · monocromía azul técnico · señales solo para estados funcionales

[CLR-SEM] · TOKENS SEMÁNTICOS14 VALORES

SURFACE

Semantic tokens · surface · text · border · signal states · reference: colors_and_type.css

[SEC-02] · TIPOGRAFÍA② A-02

TIPOGRAFÍA

Solo fuentes monoespaciadas. IBM Plex Mono para display/títulos. Space Mono para body y labels. Sin serifs, sin humanistas. Escala 1.25× desde base 13px.

[TYPE-SCALE] · ESCALA TIPOGRÁFICA8 NIVELES

50px · --text-3xl

DISPLAY

Aa

40px · --text-2xl

H1

BLUEPRINT

32px · --text-xl

H2

SISTEMA

25px · --text-lg

H3

DE DISEÑO

20px · --text-md

H4

SECCIÓN REF

16px · --text-sm

LABEL

LABEL — ESTADO

13px · --text-xs

BODY

Texto de cuerpo.

10px · --text-2xs

ANNOTATION

← 48px · cotas

IBM Plex Mono · Space Mono · escala modular 1.25× · siempre monoespaciado

[TYPE-SPEC] · USO DE FuentesTEXTO

IBM PLEX MONO — DISPLAY

BLUEPRINT
SYSTEM

28px · tracking 0.2em · uppercase

PANEL REV 1.0

16px · tracking 0.15em

ABCDEFGHIJKLMNOPQRSTUVWXYZ 0–9

13px · regular · charset

SPACE MONO — BODY / LABEL

Especificación técnica del componente. Cada elemento tiene una razón estructural de existir en el sistema.

13px · regular · body copy

ESTADO: ACTIVO

13px · bold · label / UI text

Nota de referencia — ver lámina A-04

13px · italic · annotation

COTAS Y ANOTACIONES

← 320px ——————————————→

↑
48px
↓

10px · dimension arrows

◆ REF: [A-03] · VER LÁM. 04
○ NODO · × ERROR · [i] INFO

10px · technical symbols

IBM Plex Mono para display/títulos · Space Mono para body/labels · Tipografía técnica sin ornamentación

[SEC-03] · ESPACIADO③ A-03

ESCALA DE ESPACIADO

Base 8px. Todos los espaciados en múltiplos de 8. Grid subyacente invisible pero presente en la estructura.

[SP-SCALE] · TOKENS DE ESPACIADO12 NIVELES

--space-1

4px

--space-2

8px

--space-3

16px

--space-4

24px

--space-5

32px

--space-6

40px

--space-7

48px

--space-8

56px

--space-9

64px

--space-10

72px

--space-11

80px

--space-12

96px

base 8px · 12 niveles · múltiplos: 4,8,16,24,32,40,48,56,64,72,80,96

[SEC-04] · GRILLA④ A-04

SISTEMA DE GRILLAS

Grilla base 20px con subgrilla de 5px. Todas las grillas SVG embebidas. Sin grillas invisible.

[GRID-SYS] · TIPOS DE GRILLA3 TIPOS

LINE GRID — 20PX

stroke: #1A3560 · 0.5px · --color-grid

CROSS GRID — 20PX

intersections · --color-line · radius 1.5px

DOT GRID — 5PX

dot: #1A3560 · 5px pitch · panel texture

Line grid · cross grid · dot grid · todos SVG embebidos · sin grillas implícitas

[SEC-05] · BORDES⑤ A-05

BORDES Y MARCAS DECORATIVAS

Todos los bordes 1px. Sin border-radius nunca. Marcas de registro, cotas, y símbolos técnicos.

[BORDER-ALL] · ESTILOS DE BORDER7 TIPOS

SIMPLE

BORDER SIMPLE — 1px solid #4A7FBF

--border-simple · default border

BRIGHT

BORDER BRIGHT — hover state

--border-bright · hover border

FOCUS

FOCUS — #DDEEFF + glow

--border-focus · input focus

DASHED

DASHED — guide / reference

--border-dashed · layout guides

BOTTOM DOUBLE

BOTTOM DOUBLE — inputs at rest

double underline · inputs

ERROR / OK

ERROR — #FF4D4D

signal colors · only functional

7 estilos de borde · border-radius 0 siempre · señales solo para estados funcionales

[DECOR-MARKS] · MARCAS DECORATIVASTIPOS

REGISTRATION CROSS

panel corners · reference marks

DIMENSION ARROWS

←—— 48px ——→

↑
48px
↓

dimension lines · cotas técnicas

UNICODE MARKS

○●◆×[i][!][✓]

node · radio · diamond · close · alerts

REFERENCE BADGES

① REFERENCIA-A ② REFERENCIA-B
[A1] PANEL [B3] SECCIÓN

component numbering · technical style

marcas de registro · cotas · símbolos Unicode · badges de referencia

[SEC-06] · BOTONES⑥ A-06

BOTONES

5 variantes: primary, secondary, active, disabled, danger. Hover: bg fills, text inverts. Active: inverted colors. Disabled: opacity 0.3.

[BTN-VAR] · VARIANTES DE BOTONES5 TIPOS

Primary: transparent bg
hover: #4A7FBF

Secondary: #4A7FBF border
hover: #6FA3D8

Active: bg #4A7FBF
text inverted

Disabled: opacity 0.3
cursor: not-allowed

Danger: #FF4D4D border
destructive actions only

5 variantes · transition 80ms linear · no transform · no scale

[SEC-07] · INPUTS⑦ A-07

INPUTS DE FORMULARIO

Inputs con border-bottom doble en reposo. Focus: borde completo + glow. Error: red border + ✕ icono. Select con dropdown custom SVG.

[INPUT-ALL] · CAMPOS DE TEXTOESTADOS

— IDENTIFICADOR DE USUARIO

— DESCRIPCIÓN TÉCNICA

— CATEGORÍA

— CAMPO ACTIVO (FOCUS)

— ERROR DE VALIDACIÓN

✕

— DESHABILITADO

Border-bottom doble en reposo · focus = borde completo + glow · error = borde rojo + icono ✕

[SEC-08] · CARDS⑧ A-08

CARDS / PANELS

Borde 1px, grid-dot interior, referencia [PANEL-XX] en esquina superior izquierda, marcas de registro十字 en esquinas, hover borde brightened.

[PANEL-VAR] · VARIANTES DE CARDS3 TIPOS

[PANEL-01]① A-01

MÓDULO ESTÁNDAR

Panel de referencia base. Fondo con dot-grid interno. Borde 1px en --color-line.

ESTADO: ACTIVO · REF: SYS-04

[PANEL-02]② A-02

PANEL HOVER

Borde brightened a --color-line-light. Hover o seleccionado. Sin sombra.

ESTADO: HOVER · REF: SYS-05

[PANEL-03]③ A-03

PANEL COMPACTO

Variante densa para listados o sidebars. Padding reducido, tipografía 10px.

REF: SYS-06

Dot-grid interior · referencia [PANEL-XX] esq. sup. izq. · marcas de registro · hover borde brightened

[SEC-09] · ALERTS⑨ A-09

ALERTS / NOTIFICACIONES

4 variantes: info, success, warning, error. Iconos ASCII [i], [✓], [-], [!]. Borde izquierdo grueso para info.

[ALERT-VAR] · TYPES OF ALERTS4 TIPOS

[i]

INFORMACIÓN DEL SISTEMA

Componente actualizado a REV 1.1. Sin impacto en módulos dependientes. Verificar documentación técnica.

REF: SYS-INFO-042 · 2026-04-22

[✓]

PROCESO COMPLETADO

Validación exitosa. Todos los módulos responden dentro de tolerancia. Estado: APROBADO.

REF: SYS-OK-019 · DURACIÓN: 142ms

[-]

ADVERTENCIA DE CONFIGURACIÓN

Parámetro fuera del rango recomendado. Revisar especificación técnica sección 4.2 antes de continuar.

REF: SYS-WARN-007 · NIVEL: MODERADO

[!]

ERROR CRÍTICO — MÓDULO B-02

Fallo de conexión detectado. Sistema detenido. Intervención manual requerida. Ver log REF-ERR-042.

REF: SYS-ERR-042 · CÓDIGO: 0x4F2A

4 variantes · iconos ASCII · border-left para info · señal color solo para estados

[SEC-10] · BADGES⑩ A-10

BADGES & ETIQUETAS

5 variantes de estilos + formato de referencia cruzada. Font Space Mono Bold sin redondeo. Prefijo de categoría en --color-line.

[BADGE-VAR] · VARIANTES DE BADGESTIPOS

ESTADOS BASE

PRIMARIO DESTACADO ACTIVO ERROR [✓] APROBADO

Rect sin redondeo · borde 1px · fuente Space Mono Bold

CON PREFIJO DE CATEGORÍA

TYPE:PRIMARIO REV:1.0 ESTADO:ACTIVO CAT:MÓDULO-A REF:SYS-042

Prefijo en --color-line · valor en --color-line-light

REFERENCIA NUMÉRICA

① A-01 ② B-03 [REV-1.0] [A3] ◆ NODO

IBM Plex Mono · referencia cruzada estilo plano técnico

5 variantes de estilos · formato de referencia cruzada · prefijos de categoría · Space Mono Bold

[SEC-11] · TABLAS⑪ A-11

TABLAS DE DATOS

Bordes completos en toda la grilla. Header: fondo --color-line, texto invertido. Filas alternadas a 20% de opacidad. Hover: fondo azul tenue.

[TBL-REF] · TABLA DE REFERENCIA5 COLUMNAS · 5 FILAS

COL-A · REFERENCIA	COL-B · MÓDULO	COL-C · VERSIÓN	COL-D · ESTADO	COL-E · FECHA
① A-001	SISTEMA PRIMARIO	REV 1.0	[✓] ACTIVO	2026-04-22
② A-002	MÓDULO SECUNDARIO	REV 2.1	— STANDBY	2026-03-15
③ B-001	PANEL CONTROL	REV 1.3	[✓] ACTIVO	2026-04-01
④ B-002	INTERFAZ USUARIO	REV 0.9	[!] ERROR	2026-04-20
⑤ C-001	MÓDULO DATOS	REV 3.0	[✓] ACTIVO	2026-02-28

Grilla completa · header invertido · filas alternas 20% · hover: fondo azul tenue

[SEC-12] · CONTROLES⑫ A-12

CONTROLES DE FORMULARIO

Checkbox: cuadrado con × al marcar. Radio: círculo con punto interior ● al seleccionar. Toggle: slider rectangular sin pill, etiquetas ON/OFF.

[CTRL-VAR] · TIPOS DE CONTROLES3 TIPOS

CHECKBOX

OPCIÓN A

OPCIÓN B — MARCADO

OPCIÓN C — OFF

Cuadrado · × al marcar · sin relleno · border: --line-light al activar

RADIO BUTTON

MODO ESTÁNDAR

MODO AVANZADO — SEL.

MODO DIAGNÓSTICO

MODO RESTRINGIDO

Círculo · punto interior ● al seleccionar

TOGGLE

MÓDULO A OFF

MÓDULO B ON

DESHABILITADO OFF

Slider rect. · sin pill · etiquetas ON/OFF · ON: thumb blanco + borde --line-light

Checkbox: × al marcar · Radio: ● interior · Toggle: rect. sin pill · ON/OFF labels

[SEC-13] · TOOLTIP⑬ A-13

TOOLTIP

Caja rectangular sin redondeo. Fondo --color-bg. Borde --color-line. Flecha cuadrada (rotate 45deg square). Referencia [?] con estilo técnico.

[TTP-ALL] · TOOLTIPTIPO

TOOLTIP SUPERIOR

Caja rect. · borde --color-line · flecha cuadrada · fondo --color-bg · texto 10px Space Mono

TOOLTIP INFERIOR

Flecha invertida · ajuste para viewport superior

Caja rectangular sin redondeo · flecha cuadrada rotate 45deg · referencias estilo plano técnico

[SEC-14] · PROGRESS⑭ A-14

PROGRESS & LOADING

Rectángulo sin redondeo. Borde --color-line. Fill solid color (line, ok, error). Scan: línea que recorre 100% ancho en 1.4s linear.

[PRG-VAR] · TIPOS DE PROGRESS4 ESTADOS

PROGRESS BAR — 72%

PROGRESS BAR — 100% (OK)

PROGRESS BAR — 38% (ERROR)

LOADING SCAN

Rect. sin redondeo · borde --color-line · scan: línea que recorre el ancho — 1.4s linear

Barra progress: rect sin redondeo · fill: line, ok, error · Scan: animación rectilínea 1.4s linear

[SEC-15] · PRINCIPIOS⑮ A-15

PRINCIPIOS

Fundamentos filosóficos y técnicos del sistema. La belleza surge de la precisión, no del ornamento.

[PRIN-ALL] · DECLARACIÓN DE PRINCIPIOS

╔════════════════════════════════════════════════════════════════╗
║ PRINCIPIOS DEL SISTEMA — BLUEPRINT DESIGN SYSTEM · REV 1.0 ║
║ ────────────────────────────────────────────────────────── ║
║ 1. La grilla es visible, no implícita ║
║ 2. Cada elemento está anotado y referenciado ║
║ 3. El color señaliza, no decora ║
║ 4. La tipografía es técnica o no es ║
║ 5. Cero border-radius. Cero gradientes decorativos ║
║ 6. La jerarquía se expresa con bordes, no sombras ║
║ 7. Las transiciones son 80ms · lineales · sin easing ║
║ 8. Cada componente tiene un código de referencia ║
╚════════════════════════════════════════════════════════════════╝

Estilo carátula de plano técnico · ASCII box-drawing · fuente monoespaciada

╔═══════════════════════════════════════════╗
║ REV 1.0 — BLUEPRINT DESIGN SYSTEM ║
║ FECHA: 2026-04-23 · ESTADO: APROBADO ║
║ AUTOR: SISTEMA GENERATIVO · [SYS-DS-01] ║
╚═══════════════════════════════════════════╝