Scriptum Design System

01 — Fundamentos

Principios

Los cinco principios que guían todas las decisiones de diseño en el ecosistema Scriptum.

Documento formal primero

Contratos, memorias descriptivas, pliegos, informes de inspección e informes geotécnicos son el contenido central. La UI existe para navegar ese contenido, no al revés. La tipografía serif marca dónde empieza el documento y termina la interfaz.

Glassmorphism como firma visual

Cards con backdrop-filter:blur + borde blanco + fondo semitransparente es el elemento más reconocible del ecosistema. Se aplica en cards elevadas, modales, widgets flotantes y paneles laterales en todas las apps sin excepción.

Color = semántica, no decoración

Los colores expresan estado (riesgo legal, fase de proyecto, tipo de defecto). KPIs de dashboard: un único acento navy + neutros. Un dashboard con cuatro colores de acento distintos señala ausencia de sistema.

Tokens, nunca valores mágicos

Ningún color, espaciado, radio o sombra se escribe fuera del objeto de tokens. Si mañana cambia el rojo de marca, se toca exactamente un sitio. Todo lo demás se actualiza en cascada.

Fase ≠ Defecto — dimensiones ortogonales

Un expediente puede estar en fase Construcción con un defecto Crítico simultáneamente. Los badges de fase y de estado de defecto son tipos distintos que pueden coexistir. Nunca usar el mismo componente Badge para ambos conceptos.

02 — Fundamentos

Tokens de color

La paleta base y los tokens semánticos que cubren los tres dominios del ecosistema.

Superficies y texto

surface-0

#FAFAF8

surface-1

#F5F3EF

ink

#1A1A1A

ink-light ⚠

ink-light

solo decorativo

Accent — Scriptum Navy

soft

accent-soft

#E8EEF4

mid

accent-mid

#2E5A8F

accent

#1E3A5F

deep

accent-deep

#0D1F35

Estados semánticos — riesgo y conformidad

Light mode

success

Conforme / Resuelto / Recepción

warning

En revisión / Leve / Construcción

danger

Riesgo crítico / Defecto estructural

info

Pendiente / Licitación / Informativo

neutral

Sin clasificar / Garantía / Archivo

Dark mode

success

rgba(27,115,64,0.15)

warning

rgba(184,134,11,0.15)

danger

rgba(196,30,58,0.15)

info

rgba(30,58,95,0.25)

neutral

rgba(255,255,255,0.06)

Fases de proyecto — TOKENS.phases

Diseño

Planificación activa — mismo verde que success, misma connotación positiva

Licitación

Proceso formal — navy, el color de la marca Scriptum

Construcción

Obra activa — ámbar (atención, no alerta de error)

Recepción

Entrega — verde claro, tono celebratorio diferenciado de success

Garantía

Mantenimiento — neutro, sin urgencia ni celebración

Defectos técnicos — TOKENS.defects

Crítico — estructural Grave — funcional mayor Leve — estético Subsanado

03 — Fundamentos

Tipografía

Tres roles tipográficos con separación estricta. La mezcla de serif y sans dentro del mismo bloque es el error más visible en cualquier interfaz Scriptum.

Documento / Serif

Source Serif 4

Contratos, memorias, pliegos, informes de inspección, informes geotécnicos, normativa, resúmenes IA, texto de cláusulas

'Source Serif 4', Georgia, serif

UI / Sans

Source Sans 3

Navegación, badges, botones, labels de formulario, etiquetas de campo, métricas de dashboard, encabezados de sección

'Source Sans 3', system-ui

Datos técnicos / Mono

IBM Plex Mono

Medidas (m², kN, MPa), referencias (CTE DB-SE, EHE-08), UTM, partidas presupuestarias, tolerancias (±0.5mm), IDs, scores

'IBM Plex Mono', monospace

Escala tipográfica

2xlInforme de Inspección Estructural1.9rem · serif 400

xlVista de expediente1.4rem · sans 500

lgEncabezado de tarjeta1.15rem · sans 500

mdCuerpo de texto de cláusula o memoria descriptiva1.0rem · serif 400

baseTexto de interfaz estándar0.9rem · sans 400

smMetadata, fechas, detalles secundarios0.82rem · sans 400

data2.450 m³ · ±0.5mm · CTE DB-SE-C §7.3.20.9rem · mono

xsLABEL / UNIDAD / CATEGORÍA0.72rem · 600

04 — Fundamentos

Espaciado y radios

Escala de espaciado — múltiplos de 4

space-14px

space-28px

space-312px

space-416px

space-520px

space-624px

space-832px

Radios de borde

radius-sm6px — badges, NormRef

radius-md8px — inputs, buttons, cards pequeñas

radius-lg12px — cards de contenido

radius-xl16px — modales, paneles

radius-glass24px — cards glass Scriptum

radius-pill9999px — badges, PhaseIndicator

05 — Componentes

Badge

Componente central del ecosistema. Siempre toma su color del objeto TOKENS. Nunca usar colores hex directos en un badge.

Light mode

Conforme En revisión Riesgo crítico Pendiente Neutro

Defectos técnicos

Crítico — estructural Grave — funcional Leve — estético Subsanado

Dark mode

Conforme En revisión Riesgo crítico Pendiente Neutro

06 — Componentes

PhaseIndicator

Muestra en qué fase del ciclo de vida está un expediente. La fase activa tiene doble borde y sombra de halo. Las completadas tienen color pleno. Las pendientes son grises neutros.

Diseño

Licitación

● Construcción

Recepción

Garantía

Fase activa: borde doble + box-shadow: 0 0 0 3px rgba(184,134,11,0.15) · Completadas: color pleno · Pendientes: neutral

07 — Componentes

MeasureDisplay

Dato técnico con unidad. El valor usa serif (es un dato documental). Las tolerancias usan mono. La unidad siempre en mono muted. El color del valor sigue la escala semántica.

Volumen hormigón

2.450 m³

Carga máxima

847 kN

Tolerancia

±0.5 mm

Superficie total

1.240 m²

Resistencia

30 MPa

08 — Componentes

NormRef

Badge de referencia normativa. Sin color semántico — solo indica "esto tiene base normativa". Radio cuadrado (4px) para diferenciarlo de los badges de estado que son pill. Fuente mono siempre.

CTE DB-SE §7.3.2 EHE-08 Art.31.1 NCSE-02 §2.1.4 ISO 9001:2015 BOE-A-2006-17120 EAE-11 §35 UNE-EN 1992-1-1

Fondo neutro · Texto mono · border-radius: 4px · Sin color semántico · Se puede combinar con badges de estado

09 — Componentes

Card Glass

La firma visual más reconocible de Scriptum. Aplicar en cards elevadas, modales, widgets flotantes y paneles laterales. Nunca simplificar quitando el blur o el borde blanco.

Viaducto Río Segura — Km 14+320

Exp. OC-2024-0847 · Actualizado 12 mar 2026

Construcción

Defecto crítico EHE-08 Art.31 CTE DB-SE-C §7.2

background: hsla(0,0%,100%,0.75) · border: 2px solid #fff · backdrop-filter: blur(7px) · border-radius: 24px

10 — Componentes

Score

Valor numérico de conformidad o evaluación técnica. Usar serif porque es un dato de documento formal. Color según umbral.

12%

Crítico — <30%

48%

Bajo — 30-60%

71%

Medio — 60-85%

86%

Conforme — >85%

Escala: danger.fg · warning.fg · accent-mid · success.fg

11 — Componentes

Buttons

12 — Implementación

Dark mode

Reglas obligatorias para que el dark mode no rompa la identidad visual. El 90% de los fallos de dark mode en Scriptum vienen de pasteles claros sobre fondo oscuro.

Badges semánticos — nunca pasteles en dark

#FCEBEB (rosa pastel) sobre fondo oscuro da contraste <2:1. Usar siempre TOKENS.dark.* con rgba y opacidad 0.15. La variante dark está definida en el objeto de tokens — nunca hardcodear.

Card glass dark

Light: hsla(0,0%,100%,0.75) + border: 2px solid #fff. Dark: hsla(0,0%,14%,0.80) + border: 2px solid rgba(255,255,255,0.06). El blur funciona igual. El backdrop solo cambia su base.

Sombras en dark

0 0 3px rgba(0,0,0,0.13) es invisible sobre fondo negro. Dark necesita mínimo rgba(0,0,0,0.40). En interfaces de ingeniería civil preferir border suave sobre sombra para mayor legibilidad de datos.

NormRef dark

Background: rgba(255,255,255,0.06) · Border: rgba(255,255,255,0.12) · Color: var(--ink-muted). Mantener el aspecto neutro — en dark nunca añadir color a las referencias normativas.

ink-light (#9B9B9B) no pasa WCAG AA

Sobre #FAFAF8 tiene ratio ~3.0:1, por debajo del 4.5:1 requerido para texto pequeño. Usar solo para texto puramente decorativo (fechas secundarias, separadores de metadata). Nunca para información funcional.

Puente sobre Río Duero — Vía A-62

Construcción

Defecto crítico EHE-08 Art.31

Carga máxima

847kN

Conformidad

24%

13 — Implementación

System prompt

Incluir al inicio de cualquier petición a Cursor, Claude o agente de generación de código para garantizar que el prototipo siga la identidad Scriptum.

## Scriptum Design System v2.0 — Legal · Ingeniería Civil · Construcción
## Incluir al inicio de cualquier solicitud de prototipo Scriptum

═══ TOKENS ════════════════════════════════════════════════════════

const TOKENS = {
  // Superficies
  surface0: '#FAFAF8', surface1: '#F5F3EF', surface2: '#FFFFFF',
  border: '#E5E2DC', borderStr: '#D0CCC4',

// Texto
  ink: '#1A1A1A', inkSoft: '#3D3D3D', inkMuted: '#6B6B6B',
  inkLight: '#9B9B9B', // SOLO decorativo, nunca información funcional

// Accent Scriptum Navy
  accent: '#1E3A5F', accentMid: '#2E5A8F', accentSoft: '#E8EEF4',

// Semántica riesgo/conformidad — light
  success: { bg:'#EEF7F1', fg:'#1B7340', border:'#B8DCC6' },
  warning: { bg:'#FFF8E7', fg:'#B8860B', border:'#F0DCA0' },
  danger:  { bg:'#FDF2F4', fg:'#C41E3A', border:'#F5C6CE' },
  info:    { bg:'#E8EEF4', fg:'#1E3A5F', border:'#C0D4E8' },
  neutral: { bg:'#F5F3EF', fg:'#6B6B6B', border:'#E5E2DC' },

// Semántica — dark (rgba semitransparente, NUNCA pasteles)
  dark: {
    success: { bg:'rgba(27,115,64,0.15)',  fg:'#4ade80', border:'rgba(27,115,64,0.3)' },
    warning: { bg:'rgba(184,134,11,0.15)', fg:'#fbbf24', border:'rgba(184,134,11,0.3)' },
    danger:  { bg:'rgba(196,30,58,0.15)',  fg:'#f87171', border:'rgba(196,30,58,0.3)' },
    info:    { bg:'rgba(30,58,95,0.25)',   fg:'#93c5fd', border:'rgba(30,58,95,0.4)' },
    neutral: { bg:'rgba(255,255,255,0.06)',fg:'#9B9B9B', border:'rgba(255,255,255,0.1)' },
  },

// Fases de proyecto (DISTINTO a semántica — dimensión de ciclo de vida)
  phases: {
    diseno:       { bg:'#EEF7F1', fg:'#1B7340', border:'#B8DCC6' },
    licitacion:   { bg:'#E8EEF4', fg:'#1E3A5F', border:'#C0D4E8' },
    construccion: { bg:'#FFF8E7', fg:'#B8860B', border:'#F0DCA0' },
    recepcion:    { bg:'#EAF3DE', fg:'#3B6D11', border:'#C0DD97' },
    garantia:     { bg:'#F5F3EF', fg:'#6B6B6B', border:'#E5E2DC' },
  },

// Defectos técnicos (DISTINTO a riesgo legal)
  defects: {
    critico:   { bg:'#FDF2F4', fg:'#C41E3A', border:'#F5C6CE' },
    grave:     { bg:'#FFF3E0', fg:'#D97706', border:'#F5CFA0' },
    leve:      { bg:'#FFF8E7', fg:'#B8860B', border:'#F0DCA0' },
    subsanado: { bg:'#EEF7F1', fg:'#1B7340', border:'#B8DCC6' },
  },
};

═══ TIPOGRAFÍA — TRES ROLES OBLIGATORIOS ══════════════════════════

SERIF   'Source Serif 4', Georgia, serif
  → Documentos formales: contratos, memorias descriptivas,
    pliegos, informes de inspección, geotécnicos, normativa,
    resúmenes IA, texto de cláusulas

SANS    'Source Sans 3', system-ui, sans-serif
  → Chrome UI: navegación, badges, botones, labels,
    etiquetas de campo, métricas de dashboard, encabezados UI

MONO    'IBM Plex Mono', monospace
  → Datos técnicos: medidas (m², m³, kN, MPa, kPa),
    referencias (CTE DB-SE, EHE-08, NCSE-02, UNE-EN),
    coordenadas UTM, partidas presupuestarias,
    tolerancias (±0.5mm), IDs de expediente, scores

Escala: xs=11px / sm=13px / base=14px / md=16px
        lg=18px / xl=22px / 2xl=30px
Pesos: 400 · 500 · 600 (nunca 700 en UI)

═══ FIRMA VISUAL: CARD GLASS SCRIPTUM ════════════════════════════

Light:
  background: hsla(0, 0%, 100%, 0.75)
  border-radius: 24px
  box-shadow: 0 0 3px rgba(0,0,0,0.13)
  border: 2px solid #fff
  backdrop-filter: blur(7px)

Dark:
  background: hsla(0, 0%, 14%, 0.80)
  border-radius: 24px
  box-shadow: 0 0 3px rgba(0,0,0,0.40)
  border: 2px solid rgba(255,255,255,0.06)
  backdrop-filter: blur(7px)

═══ COMPONENTES CLAVE ═════════════════════════════════════════════

Badge (riesgo / conformidad)
  → border-radius: 9999px (pill) · font: sans 11px 600
  → Usa TOKENS.success/warning/danger/info/neutral
  → En dark: usa TOKENS.dark.* con rgba

PhaseIndicator (ciclo de vida del proyecto)
  → Usa TOKENS.phases — DISTINTO al Badge de estado
  → Activa: borde doble + box-shadow halo suave
  → Completadas: color pleno · Pendientes: neutral gris

NormRef (referencia normativa)
  → Fondo: TOKENS.neutral · Fuente: mono
  → border-radius: 4px (NO pill — diferencia visual crítica)
  → SIN color semántico — solo indica base normativa
  → Dark: rgba(255,255,255,0.06) bg + rgba(255,255,255,0.12) border

MeasureDisplay (dato técnico con unidad)
  → Valor numérico: serif (dato documental) o mono (tolerancia ±)
  → Unidad: mono muted
  → Label superior: sans xs uppercase letter-spacing
  → Color del valor: según umbral semántico

Score (conformidad / evaluación técnica)
  → Fuente: serif · Color por umbral:
     <30%  → TOKENS.danger.fg  (#C41E3A)
     30-60% → TOKENS.warning.fg (#B8860B)
     60-85% → accentMid         (#2E5A8F)
     >85%  → TOKENS.success.fg (#1B7340)

═══ REGLAS DARK MODE ══════════════════════════════════════════════

- NUNCA pasteles (#FCEBEB, #FFF8E7, etc.) en badges dark
  → Siempre TOKENS.dark.* con rgba 0.15
- Card glass dark: hsla(0,0%,14%,0.80) + rgba border
- Sombras dark: mínimo rgba(0,0,0,0.40)
- NormRef dark: rgba(255,255,255,0.06) bg
- KPI dashboards: UN solo acento navy + neutros, NO paleta arcoíris

═══ PROHIBIDO ═════════════════════════════════════════════════════

- Gradientes en backgrounds de UI
- Colores hex fuera del objeto TOKENS
- Serif y sans mezclados en el mismo bloque de texto formal
- Más de 2 colores de acento en la misma vista
- Usar phases y defects con los tokens de success/danger
  (son dimensiones distintas — no mezclar)
- box-shadow decorativos complejos — preferir border suave

14 — Implementación

Checklist de revisión

Verificar antes de entregar cualquier prototipo o pantalla del ecosistema Scriptum.

0 / 18 verificados

Scriptum DesignSystem

Principios

Tokens de color

Tipografía

Espaciado y radios

Badge

PhaseIndicator

MeasureDisplay

NormRef

Card Glass

Score

Buttons

Dark mode

System prompt

Checklist de revisión

Scriptum Design
System