Specs — Permanencia · OQO

Uso

Una fuente. Dos oficios.

Specs es el sistema operativo de Permanencia. Diseño y código leen el mismo :root: color por nombre en hex y RGB, tipografías por token, ritmo fijado.

Diseño

En Figma o Canva entra el nombre, el hex y el RGB 0–255. La dieta es 40 / 28 / 16 / 8 / 4 / 4. Fraunces habla. Formula opera. Mono reporta. No inventar un quinto azul ni un cream más claro.

Código

Solo variables. Hex: var(--origen). Alpha: rgb(var(--origen-rgb) / .7). Tipo: var(--font-story). Cero hex sueltos, cero rem con decimales. El archivo vivo es tokens.css.

:root

Hex y RGB. Por nombre.

Cada color tiene dos variables: --origen y --origen-rgb. Los canales van 0–255, separados por espacio, para rgb(var(--origen-rgb) / .7). Archivo vivo: /tokens.css.

:root {
  /* Color — hex + canales RGB (0–255, espacio) */
  --origen: #faf6ee;
  --origen-rgb: 250 246 238;
  --base: #1c1815;
  --base-rgb: 28 24 21;
  --roble: #b07a3e;
  --roble-rgb: 176 122 62;
  --veta: #e4d4bc;
  --veta-rgb: 228 212 188;
  --resalte: #5c93c9;
  --resalte-rgb: 92 147 201;
  --piedra: #c9c2b6;
  --piedra-rgb: 201 194 182;
  --blanco: #ffffff;
  --blanco-rgb: 255 255 255;
  --tinta-sig: var(--resalte);
  --tinta-sig-rgb: var(--resalte-rgb);
  --roble-08: #f4ece0;
  --roble-08-rgb: 244 236 224;
  --roble-16: #eee2d2;
  --roble-16-rgb: 238 226 210;
  --roble-24: #e8d8c4;
  --roble-24-rgb: 232 216 196;
  --roble-40: #dcc4a8;
  --roble-40-rgb: 220 196 168;
  --roble-shade-15: #9a6b38;
  --roble-shade-15-rgb: 154 107 56;
  --roble-shade-30: #845d32;
  --roble-shade-30-rgb: 132 93 50;
  --roble-shade-50: #66492a;
  --roble-shade-50-rgb: 102 73 42;
  --ink-08: #e8e4dd;
  --ink-08-rgb: 232 228 221;
  --ink-14: #dbd7d0;
  --ink-14-rgb: 219 215 208;
  --ink-42: #9d9993;
  --ink-42-rgb: 157 153 147;
  --ink-68: #635f5a;
  --ink-68-rgb: 99 95 90;
  --ink-85: #3d3936;
  --ink-85-rgb: 61 57 54;
  --veta-35: #f2eadd;
  --veta-35-rgb: 242 234 221;
  --veta-55: #eee3d3;
  --veta-55-rgb: 238 227 211;
  --veta-75: #eaddc9;
  --veta-75-rgb: 234 221 201;
  --piedra-soft: #e2dcd2;
  --piedra-soft-rgb: 226 220 210;
  --resalte-12: #eef4fa;
  --resalte-12-rgb: 238 244 250;
  --resalte-24: #ddecf7;
  --resalte-24-rgb: 221 236 247;
  --resalte-shade-15: #4e7fb0;
  --resalte-shade-15-rgb: 78 127 176;

  /* Dieta % */
  --origen-pct: 40%;
  --base-pct: 28%;
  --roble-pct: 16%;
  --veta-pct: 8%;
  --resalte-pct: 4%;
  --piedra-pct: 4%;

  /* Tipo — por nombre */
  --font-story: "Fraunces", Georgia, serif;
  --font-story-b: "Manrope", system-ui, sans-serif;
  --font-ui: "PPFormula", "Arial Narrow", sans-serif;
  --font-ui-b: "PPRader", Georgia, serif;
  --font-m: "PPSupplyMono", ui-monospace, monospace;
  --font-s: var(--font-story);
  --font-display: var(--font-ui);
  --font-body: var(--font-story-b);
  --font-accent: var(--font-story);
  --font-mono: var(--font-m);
  --fw-story: 600;
  --fw-story-body: 400;
  --fw-ui: 600;
  --fw-mono: 500;
  --track-story: -0.015em;
  --track-ui: -0.02em;
  --track-cta: 0.06em;
  --track-mono: 0.12em;
  --lh-body: 1.55;
  --fs-xs: 11px;
  --fs-sm: 13px;
  --fs-md: 15px;
  --fs-lg: 17px;
  --fs-floor: 11px;

  /* Ritmo */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 40px;
  --space-5: 64px;
  --space-6: 120px;
  --wrap: min(1180px, 100%);
  --nav-h: 56px;
  --radius: 16px;
  --btn-radius: 999px;
  --touch-min: 44px;
  --btn-min-size: 18px;
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --dur-ack: 110ms;
  --dur-state: 220ms;
  --dur-enter: 560ms;
}

Color

Inventario completo.

Clic en hex, RGB o token para copiar. Figma usa RGB con comas. CSS usa los canales del token.

40%

28%

16%

8%

4%

Dieta

Seis tonos. Suman 100. El % es presencia de marca, no histograma por página.

Nombre	RGB	Rol
Origen40%	CMYK 0 2 5 2	Canvas de página. Nunca sustituir por blanco.
Base28%	CMYK 0 14 25 89	Texto, chrome oscuro, logo negativo, bandas ink y tech.
Roble16%	CMYK 0 31 65 31	CTA, kicker de relato, links. Presencia generosa.
Veta8%	CMYK 0 7 18 11	Superficie madera. Bandas secundarias. No es CTA.
Resalte4%	CMYK 54 27 0 21	Señal tech y foco del dato. Nunca CTA ni nav activo.
Piedra4%	CMYK 0 3 9 21	Bordes, captiones, disabled. Nunca texto de cuerpo.

Funcionales

Blanco no entra al %. Tinta sig es alias de Resalte.

Tono	Nombre	Token	Hex	RGB	Rol
	Blanco			CMYK 0 0 0 0	Texto del CTA y papel de diagrama. Fuera del %.
	Tinta sig				Alias de Resalte sobre bandas ink.

Roble · tints

Wash y bandas sobre Origen. El CTA sólido sigue siendo Roble 100.

Tono	Nombre	Token	Hex	RGB	Rol
	Roble 8%				Hover / wash sobre Origen.
	Roble 16%				Bandas suaves.
	Roble 24%				Paneles de apoyo.
	Roble 40%				Énfasis seco.

Roble · shades

Hacia Base. Hover, pressed, ink cálido.

Tono	Nombre	Token	Hex	RGB	Rol
	Roble shade 15				Hover del CTA.
	Roble shade 30				Pressed / texto denso sobre Roble.
	Roble shade 50				Ink cálido.

Ink

Base sobre Origen, hex sólido. No inventar grises.

Tono	Nombre	Token	Hex	RGB	Rol
	Ink 8%				Línea suave.
	Ink 14%				Bordes de panel.
	Ink 42%				Meta sobre claro.
	Ink 68%				Texto secundario.
	Ink 85%				Cuerpo denso.

Veta · superficies

Madera suave. Nunca como CTA ni fill del logo.

Tono	Nombre	Token	Hex	RGB	Rol
	Veta 35%				Wash madera.
	Veta 55%				Banda suave.
	Veta 75%				Panel de apoyo.
	Piedra soft				Borde cálido.

Resalte · gamas

El 4% es el sólido. Estas no suman extra. Un solo foco por página.

Tono	Nombre	Token	Hex	RGB	Rol
	Resalte 12%				Wash / zebra dentro del panel blanco.
	Resalte 24%				Nodo o celda de apoyo.
	Resalte shade 15				Hover sobre Resalte. Links ≥18px.

Tipo

Cinco familias. Por nombre.

Fraunces habla. Manrope sostiene. Formula opera. Rader ejecuta. Mono reporta. Mayúsculas solo en rótulos de tres palabras o menos.

story
Treinta años no se explican.
Fraunces
Frase de marca. Titular de sección, caja normal.
Token
CSS
Fraunces
Peso
600–700
Tracking
−0.015em
story
La evidencia es material. El tono es cercano.
Manrope
Cuerpo de marca. Bajadas, about, casos.
Token
CSS
Manrope
Peso
400–500
Tracking
0
producto
HABLEMOS
PP Formula Narrow
Cosa que se usa o elige. Caps solo ≤3 palabras.
Token
CSS
PPFormula
Peso
600–700
Tracking
−0.02em · CTA 0.06em
producto
Interfaz precisa. Links que se ven.
PP Rader
Cuerpo de producto. Forms, fichas, UI.
Token
CSS
PPRader
Peso
400–500
Tracking
0
meta
--origen · #FAF6EE · 250 246 238
PP Supply Mono
Dato. Rótulos, hex, scores, grilla técnica.
Token
CSS
PPSupplyMono
Peso
500
Tracking
0.12em

Escala

Cuatro tamaños. Un piso.

Token	Valor	Rol
	11px	Rótulos en mono. Piso del sistema.
	13px	Pie de tarjeta, meta.
	15px	Listas, tarjetas, chips.
	17px	Cuerpo y bajadas.
	11px	Nada bajo este tamaño. Cero rem con decimales.

Medida

Peso y tracking.

Token	Valor	Rol
	600	Peso de titular Fraunces
	400	Peso de cuerpo Manrope
	600	Peso de Formula (CTA, chip)
	500	Peso de Supply Mono
	-0.015em	Tracking Fraunces
	-0.02em	Tracking Formula display
	0.06em	Tracking CTA
	0.12em	Tracking rótulos
	1.55	Interlineado de cuerpo

Alias de compatibilidad: --font-s → var(--font-story)--font-display → var(--font-ui)--font-body → var(--font-story-b)--font-accent → var(--font-story)--font-mono → var(--font-m)

Ritmo

Espacio. Forma. Motion.

Reveal con data-reveal. Override oscuro en ink y tech. Respetar prefers-reduced-motion. Sin blur extra.

Espacio

Token	Valor
Gaps densos, iconos, meta	8px
Padding de control, nav	16px
Bloques internos	24px
Secciones compactas	40px
Padding vertical mínimo	64px
Padding vertical máximo	120px
Contenedor	min(1180px, 100%)
Altura de nav	56px

Forma

Token	Valor
Paneles, swatches, módulos	16px
CTA y chips. Pill canónico.	999px
Objetivo táctil mínimo	44px
Piso de tipo en CTA	18px

Motion

Token	Valor
Curva por defecto	cubic-bezier(0.32, 0.72, 0, 1)
Acuse: hover / press corto	110ms
Cambio de estado	220ms
Entrada / reveal	560ms

Implementación

Así se usa.

El hex pinta. El RGB abre el alpha. Las familias van por token, no por nombre suelto en el CSS de página.

/* Hex canónico */
background: var(--origen);
color: var(--base);

/* RGB + alpha — para velos, líneas, overlays */
color: rgb(var(--base-rgb) / 0.68);
box-shadow: inset 0 0 0 1px rgb(var(--base-rgb) / 0.14);
background: rgb(var(--resalte-rgb) / 0.12);

/* Tipo por nombre */
h2 { font-family: var(--font-story); font-weight: var(--fw-story); letter-spacing: var(--track-story); }
.cta { font-family: var(--font-ui); letter-spacing: var(--track-cta); }
.meta { font-family: var(--font-m); font-size: var(--fs-xs); }

El sistema, por nombre.