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
PARTÍCULAS [MORFOSIS]

EL ELEMENTO INSIGNIA: EL CAMPO DE PARTÍCULAS DE LA SECCIÓN «CÓMO TRABAJAMOS». SE RECONFIGURA A TRAVÉS DE LAS CUATRO FASES DEL PROCESO — REJILLA, GRAFO, CUBO, ORBE. EN EL SITIO LO GUÍA EL SCROLL; AQUÍ, EN BUCLE VIVO. MISMO SHADER WEBGL QUE PROVIDENCE.TECH.

Índice
01
Analizamos
Rejilla
02
Configuramos
Grafo
03
Implementamos
Cubo
04
Optimizamos
Orbe

6.400 PUNTOS INDEXADOS POR ÁNGULO · REJILLA → GRAFO → CUBO → ORBE · MEZCLA SMOOTHERSTEP, AMORTIGUADA 0,12/FRAME · RUIDO SIMPLEX: SOLO EL ORBE RESPIRA (0,006 → 0,026) · NAVY #0A1929 · TAMAÑO 1,5 · WEBGL — EL MISMO SHADER QUE EL SITIO

CARRUSEL [SERVICIOS]

LA LISTA DE CAPACIDADES CICLA HACIA ARRIBA, UNA LÍNEA CADA 1,6 S. LA LÍNEA CENTRADA SE ENCIENDE A TINTA PLENA; EL RESTO QUEDA AL 18 %. CANTO SUPERIOR E INFERIOR DISUELTOS POR MÁSCARA.

Índice

Ayudamos a organizaciones a trabajar con inteligencia artificial.

CICLO 1,6 S · TWEEN 0,7 S CUBIC-BEZIER(.22,1,.36,1) · LÍNEA ACTIVA FUNDE COLOR 0,55 S · LISTA DUPLICADA PARA BUCLE SIN COSTURA · MÁSCARA VERTICAL 32–68 %

CARRUSEL [TESTIMONIOS]

FUNDIDO CRUZADO CADA 8 S ENTRE DIAPOSITIVAS. BAJO ELLAS, BARRAS DE PROGRESO: LA ACTIVA SE LLENA EN 8 S; AL PULSAR CUALQUIERA SALTA Y REINICIA. (COPY PLANTILLA — SIN CLIENTE REAL AÚN.)

Índice

«La facturación nos ocupaba tres tardes a la semana. Providence™ la automatizó de principio a fin y hoy ese tiempo va donde importa: nuestros clientes.»

Nombre Apellido — Directora de Operaciones · Empresa de producción, Madrid

«No sabíamos por dónde empezar con la IA. En un mes teníamos un diagnóstico claro, políticas de uso y al equipo entero trabajando con las herramientas.»

Nombre Apellido — CEO · Estudio creativo, Barcelona

«El agente responde el 80 % de las consultas al momento y escala al equipo solo las que lo necesitan. La calidad de la atención ha subido, no bajado.»

Nombre Apellido — Directora de Atención · Retail, Valencia

SERVICIOS [PLANTILLA]

CADA SERVICIO TIENE SU LANDING. LA MISMA PLANTILLA SIEMPRE: HÉROE → TRES FEATURES (LA DEL MEDIO VOLTEADA, EN PANEL OSCURO) → BANDA CTA CON ORBE. SOLO CAMBIAN EL COPY Y LOS MOCKUPS.

Índice
Héroe · eyebrow · titular-resultado · intro · CTA · mockup
Feature 01 · texto izq · panel claro der
Feature 02 · volteado · panel oscuro
Feature 03 · texto izq · panel claro der
Banda CTA · orbe animado + «Hagamos X juntos»
Automatizaciones con IA/automatizaciones

Agentes y flujos a medida que se integran con tus sistemas y actúan solo cuando aportan valor.

Consultoría de IA/consultoria

Evaluamos tus casos de uso y herramientas para elegir la tecnología adecuada, lista desde el primer día.

Formaciones con IA/formaciones

Formaciones prácticas y a medida que convierten la IA en resultados reales. 100 % bonificables por FUNDAE.

Integraciones/integraciones

Tu IA preferida, integrada con las aplicaciones que ya usa tu equipo. Sin migraciones, sin empezar de cero.

Contenido audiovisual con IA/contenido-audiovisual

Vídeo, foto y render con IA. Lo producimos por ti, o montamos el sistema para que lo haga tu equipo.

SERVICIOS [MOCKUPS]

CUATRO ARQUETIPOS DE INTERFAZ RECORREN TODAS LAS LANDINGS: FLUJO, ACTIVIDAD, CHAT (PANEL OSCURO) Y MÉTRICAS. HAIRLINES, PUNTOS DE ESTADO, CERO SOMBRAS. TODO ES HTML VIVO, NADA ES IMAGEN.

Índice
Flujo · Nuevo pedidoLive
Pedido en Shopify
Disparador
Agente evalúa > 500 €
Decidiendo
HubSpot
CRM
Slack
Aviso
Ejecuciones · Hoy24 activas
Facturación mensualhace 2 min
Onboarding clientehace 14 min
Revisión de datosen cola
Respuesta a leadshace 1 h
Informe semanalprogramado
Atención al cliente80 % auto
Hola, ¿dónde está mi pedido #1042?
Va en camino, entrega mañana. Te paso el seguimiento.
¡Gracias!
Impacto · 30 díasLive
Horas ahorradas
120 h
Fiabilidad
99.2 %

CÁSCARA .UI: BARRA DE TÍTULO CON PUNTO DE ESTADO + PÍLDORA · CUERPO EN HAIRLINES · PUNTOS VERDE/ÁMBAR/AZUL/PIZARRA COMO ÚNICO COLOR FUNCIONAL, NUNCA COMO COLOR DE MARCA

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.