005 Digital System.

LOS NUEVE PRINCIPIOS

TODO EL SISTEMA DIGITAL SE DEDUCE DE NUEVE REGLAS. SI UNA DECISIÓN DE DISEÑO LAS CONTRADICE, LA DECISIÓN ES INCORRECTA.

Índice
  1. La serif piensa, la grotesca habla.
  2. Hairlines, no sombras.
  3. Una banda navy por página.
  4. Esquinas vivas — radios 0 / 4 / 6 / 8 / 10.
  5. Una sola curva de easing.
  6. El orbe es el único ornamento.
  7. Dos tonos en titulares.
  8. Blanco cálido, nunca gris frío.
  9. Nada rebota, nada gira.
COMPONENTES

EJEMPLOS VIVOS, CONSTRUIDOS CON LOS TOKENS REALES. CADA PIEZA LLEVA SU RECETA EN MONO. NADA DE ESTA PÁGINA ES UNA IMAGEN.

Índice
Botonesbg --ink · radius 4px · 10×18px · peso 400
hover translateY(-1px) → #26231F · ghost: hairline
Botón sobre navyen paneles navy el primario invierte:
bg #FFF · texto --navy · misma geometría
Agentes de IA

Resuelven las consultas al instante y escalan solo lo necesario.

Cardbg --bg-sand-2 · hairline · radius 6px · sin sombra en reposo
hover translateY(-3px) + 0 14px 34px rgba(14,13,12,.08)
Nav58px sólida #FCFCFC → pill flotante al hacer scroll:
rgba(252,252,252,.82) · blur(12px) · radius 4px
Formulariolabel caps 0.75rem 500 · input blanco + hairline
focus: borde --ink + anillo 3px rgba(14,13,12,.06)
¿Cuánto dura un proyecto?

Entre cuatro y seis semanas, según el alcance del análisis inicial.

FAQacordeón <details> dividido por hairlines
icono + rota 45° → × · reveal animado en altura
RITMO

EL RITMO DE PÁGINA ES FIJO: RESPIRACIÓN DE SECCIÓN, ANCHO MÁXIMO Y UNA ESCALERA TIPOGRÁFICA ÚNICA. LOS CAMBIOS DE SUPERFICIE MARCAN LOS CAMBIOS DE SECCIÓN.

Índice
NivelMuestraEspecificación
H1 héroeAaTobias 400 · clamp(2.8rem, 6.9vw, 6.5rem) · lh 0.9 · ls −0.02em
H2 secciónLa inteligencia cambiaTobias 400 · clamp(2.1rem, 3vw, 2.9rem) · lh 1.05 · dos tonos
H3AaTobias 400 · clamp(1.4rem, 2.2vw, 1.9rem)
LedeAaSuisse 400 · 0.95rem · lh 1.55 · --ink-60
EyebrowCasos de usoSuisse 400 · 0.75rem · caps · tinta plena
CuerpoAaSuisse 400 · 0.875rem / 1.5 · --ink-60 · móvil 1rem
Mono30535 · 1082 · 140211línea de tokens · 600 · solo dato y receta

SECCIÓN: PADDING CLAMP(64PX, 9VH, 96PX) 24PX · ANCHO MÁXIMO 1280PX · CABECERA EDITORIAL A DOS COLUMNAS: EYEBROW + TITULAR TOBIAS A LA IZQUIERDA, LEDE DE 384PX A LA DERECHA, ALINEADOS POR LÍNEA BASE, HAIRLINE INFERIOR.

MOCIÓN

UNA SOLA CURVA PARA TODO EL SISTEMA. LOS REVEALS SON FUNDIDO + ASCENSO SUAVE. NADA REBOTA, NADA GIRA. SIEMPRE CON PREFERS-REDUCED-MOTION.

Índice
01 — Analizamos
02 — Configuramos
03 — Implementamos
PROHIBICIONES

LO QUE EL SISTEMA DIGITAL NO HACE NUNCA. NO SON PREFERENCIAS: SON LÍMITES.

Índice
MÁQUINA

ESTE MANUAL TIENE UNA CAPA LEGIBLE POR AGENTES. LOS TOKENS Y LAS REGLAS VIVEN EN FICHEROS FUENTE: LOS AGENTES LOS IMPORTAN, NUNCA LOS COPIAN.

Índice

Un agente de código que construya una superficie Providence™ no interpreta este capítulo: importa tokens.css y lee BRAND.md. Copiar valores a mano crea derivas; importar la fuente las hace imposibles.

tokens.css — valores canónicos
/* fuente de verdad: providence-site */
@import url("tokens.css");

:root {
  --bg: #FBFBFA;   --ink: #0E0D0C;
  --navy: #0A1929; --muted: #858484;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* … superficies, hairlines, radios */
}
BRAND.md — reglas para agentes
1. Importa tokens.css. No copies valores.
2. Tobias solo en display. Nunca en negrita.
3. Hairlines, no sombras. Una banda navy
   por página, máximo.
4. Una sola curva de easing. Nada rebota,
   nada gira.