@pimia/design-tokens 0.1.0

package/README.md

@@ -0,0 +1,77 @@
+# @pimia/design-tokens
+
+El sistema de diseño de Pimia («los números en limpio») como paquete
+**opcional** para apps de partner: tokens tipados, variables CSS y un preset de
+Tailwind. Licencia MIT.
+
+**El white-label es poder no usarlo.** Tu app vertical puede traer tu marca, tu
+tipografía y tu paleta — este paquete existe para el partner que quiera el
+aspecto Pimia (o su chasis) sin copiarlo a mano, y para que «powered by Pimia»
+pueda verse, no solo leerse.
+
+Fuente de verdad: el `DESIGN.md` de la plataforma (snapshot 2026-07-30). Si
+diverge, gana la plataforma y este paquete se actualiza — no al revés.
+
+## Uso
+
+**Variables CSS (sin build, sin framework):**
+
+```css
+@import '@pimia/design-tokens/pimia.css';
+
+.mi-boton {
+  background: var(--pimia-color-primary);
+  border-radius: var(--pimia-radius-control);
+}
+```
+
+**Preset de Tailwind:**
+
+```js
+// tailwind.config.js
+import pimiaPreset from '@pimia/design-tokens/tailwind'
+
+export default {
+  presets: [pimiaPreset],
+  content: ['./src/**/*.{ts,tsx,vue}'],
+}
+```
+
+Da `bg-primary`, `text-ink-muted`, `bg-success-container`, `rounded-card`,
+`font-display`, `p-md`… siempre por `theme.extend` (no borra la paleta por
+defecto; la disciplina de no usar `purple-*` es tuya si adoptas el sistema).
+
+**Tokens en JS/TS:**
+
+```ts
+import { colors, typography, namedRules } from '@pimia/design-tokens'
+```
+
+Las fuentes (Plus Jakarta Sans + Inter) no van en el paquete: cárgalas
+self-hosted o desde tu proveedor; los stacks declaran los fallbacks.
+
+## Las reglas que hacen que parezca Pimia
+
+Si adoptas el sistema, estas cinco reglas son el 90 % del resultado (el
+detalle narrativo vive en el DESIGN.md de la plataforma; aquí van como
+`namedRules` consultables):
+
+1. **Una sola voz** — el violeta OKLCH 278 es la única voz de marca; nada de
+   `purple-*`/`violet-*` de serie.
+2. **El semáforo contable** — `success`/`warning`/`danger` hablan SOLO de
+   estado de dinero y cumplimiento; el violeta jamás comunica estado.
+3. **El límite del slate** — el texto legible nunca baja de `ink-muted`
+   (`#475569`); `ink-subtle` es solo decorativo (no cumple AA).
+4. **Plano por defecto** — profundidad por hairlines de 1 px y contraste de
+   superficie; sombra máxima `shadow-sm` y siempre con borde.
+5. **Números tabulares** — todo dato financiero en mono con `tabular-nums` y,
+   en tablas, alineado a la derecha.
+
+Y una prohibición sin matices: **cero emojis en la UI**.
+
+## Qué NO es
+
+- No es una librería de componentes (los recetarios de `components` son la
+  forma canónica de botón/input/card/badge, para que montes los tuyos).
+- No es obligatorio: ninguna invariante de la plataforma depende de él — las
+  reglas legales y de cumplimiento viven server-side, no en el CSS.

package/dist/css.d.ts

@@ -0,0 +1 @@
+export declare function cssVariables(): string;

package/dist/css.js

@@ -0,0 +1,25 @@
+/**
+ * Variables CSS a partir de los tokens: la vía de adopción sin build ni
+ * framework. `cssVariables()` devuelve el bloque `:root`; el build lo vuelca
+ * además a `dist/pimia.css` para importarlo tal cual.
+ */
+import { colors, fontFamilies, radius, spacing } from './tokens.js';
+const kebab = (name) => name.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
+export function cssVariables() {
+    const lines = [':root {'];
+    for (const [name, value] of Object.entries(colors)) {
+        lines.push(`  --pimia-color-${kebab(name)}: ${value};`);
+    }
+    for (const [name, value] of Object.entries(fontFamilies)) {
+        const stack = value.map((f) => (f.includes(' ') ? `'${f}'` : f)).join(', ');
+        lines.push(`  --pimia-font-${kebab(name)}: ${stack};`);
+    }
+    for (const [name, value] of Object.entries(radius)) {
+        lines.push(`  --pimia-radius-${kebab(name)}: ${value};`);
+    }
+    for (const [name, value] of Object.entries(spacing)) {
+        lines.push(`  --pimia-space-${name}: ${value};`);
+    }
+    lines.push('}');
+    return lines.join('\n') + '\n';
+}

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export { colors, components, fontFamilies, forbiddenFonts, namedRules, radius, spacing, tokens, typography, } from './tokens.js';
+export type { PimiaTokens, TypeStyle } from './tokens.js';
+export { cssVariables } from './css.js';
+export { default as tailwindPreset } from './tailwind.js';

package/dist/index.js

@@ -0,0 +1,3 @@
+export { colors, components, fontFamilies, forbiddenFonts, namedRules, radius, spacing, tokens, typography, } from './tokens.js';
+export { cssVariables } from './css.js';
+export { default as tailwindPreset } from './tailwind.js';

package/dist/pimia.css

@@ -0,0 +1,33 @@
+/* @pimia/design-tokens — variables CSS del sistema de diseño de Pimia.
+ * Generado del build; no editar a mano. Fuente: src/tokens.ts. */
+:root {
+  --pimia-color-primary: oklch(48% 0.20 278);
+  --pimia-color-primary-hover: oklch(44% 0.22 278);
+  --pimia-color-primary-container: oklch(96% 0.04 278);
+  --pimia-color-primary-container-subtle: oklch(95% 0.018 278);
+  --pimia-color-ink: #1e293b;
+  --pimia-color-muted-ink: #475569;
+  --pimia-color-subtle-ink: #94a3b8;
+  --pimia-color-surface: #ffffff;
+  --pimia-color-surface-muted: #f8fafc;
+  --pimia-color-border: #e2e8f0;
+  --pimia-color-border-subtle: #f1f5f9;
+  --pimia-color-success: oklch(52% 0.18 155);
+  --pimia-color-success-container: oklch(97% 0.03 155);
+  --pimia-color-warning: oklch(62% 0.18 75);
+  --pimia-color-warning-container: oklch(98% 0.02 75);
+  --pimia-color-danger: oklch(54% 0.22 25);
+  --pimia-color-danger-container: oklch(98% 0.02 25);
+  --pimia-font-display: 'Plus Jakarta Sans', system-ui, sans-serif;
+  --pimia-font-body: Inter, system-ui, sans-serif;
+  --pimia-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  --pimia-radius-control: 0.5rem;
+  --pimia-radius-card: 0.75rem;
+  --pimia-radius-badge: 0.375rem;
+  --pimia-radius-pill: 9999px;
+  --pimia-space-xs: 0.375rem;
+  --pimia-space-sm: 0.625rem;
+  --pimia-space-md: 1rem;
+  --pimia-space-lg: 1.25rem;
+  --pimia-space-xl: 2.5rem;
+}

package/dist/tailwind.d.ts

@@ -0,0 +1,57 @@
+declare const preset: {
+    theme: {
+        extend: {
+            colors: {
+                primary: {
+                    DEFAULT: "oklch(48% 0.20 278)";
+                    hover: "oklch(44% 0.22 278)";
+                    container: "oklch(96% 0.04 278)";
+                    'container-subtle': "oklch(95% 0.018 278)";
+                };
+                ink: {
+                    DEFAULT: "#1e293b";
+                    muted: "#475569";
+                    subtle: "#94a3b8";
+                };
+                surface: {
+                    DEFAULT: "#ffffff";
+                    muted: "#f8fafc";
+                };
+                line: {
+                    DEFAULT: "#e2e8f0";
+                    subtle: "#f1f5f9";
+                };
+                success: {
+                    DEFAULT: "oklch(52% 0.18 155)";
+                    container: "oklch(97% 0.03 155)";
+                };
+                warning: {
+                    DEFAULT: "oklch(62% 0.18 75)";
+                    container: "oklch(98% 0.02 75)";
+                };
+                danger: {
+                    DEFAULT: "oklch(54% 0.22 25)";
+                    container: "oklch(98% 0.02 25)";
+                };
+            };
+            fontFamily: {
+                display: ("Plus Jakarta Sans" | "system-ui" | "sans-serif")[];
+                body: ("system-ui" | "sans-serif" | "Inter")[];
+                mono: ("ui-monospace" | "SFMono-Regular" | "Menlo" | "Monaco" | "Consolas" | "monospace")[];
+            };
+            borderRadius: {
+                control: "0.5rem";
+                card: "0.75rem";
+                badge: "0.375rem";
+            };
+            spacing: {
+                xs: "0.375rem";
+                sm: "0.625rem";
+                md: "1rem";
+                lg: "1.25rem";
+                xl: "2.5rem";
+            };
+        };
+    };
+};
+export default preset;

package/dist/tailwind.js

@@ -0,0 +1,63 @@
+/**
+ * Preset de Tailwind con los tokens de Pimia. Uso:
+ *
+ *   // tailwind.config.js
+ *   import pimiaPreset from '@pimia/design-tokens/tailwind'
+ *   export default { presets: [pimiaPreset], content: [...] }
+ *
+ * Va por `theme.extend`: no borra la paleta por defecto de Tailwind — las
+ * reglas del sistema (nada de purple-* ni violet-*) son disciplina de uso, y
+ * el partner que no quiera el sistema sencillamente no monta el preset.
+ */
+import { colors, fontFamilies, radius, spacing } from './tokens.js';
+const preset = {
+    theme: {
+        extend: {
+            colors: {
+                primary: {
+                    DEFAULT: colors.primary,
+                    hover: colors.primaryHover,
+                    container: colors.primaryContainer,
+                    'container-subtle': colors.primaryContainerSubtle,
+                },
+                ink: {
+                    DEFAULT: colors.ink,
+                    muted: colors.mutedInk,
+                    subtle: colors.subtleInk,
+                },
+                surface: {
+                    DEFAULT: colors.surface,
+                    muted: colors.surfaceMuted,
+                },
+                line: {
+                    DEFAULT: colors.border,
+                    subtle: colors.borderSubtle,
+                },
+                success: {
+                    DEFAULT: colors.success,
+                    container: colors.successContainer,
+                },
+                warning: {
+                    DEFAULT: colors.warning,
+                    container: colors.warningContainer,
+                },
+                danger: {
+                    DEFAULT: colors.danger,
+                    container: colors.dangerContainer,
+                },
+            },
+            fontFamily: {
+                display: [...fontFamilies.display],
+                body: [...fontFamilies.body],
+                mono: [...fontFamilies.mono],
+            },
+            borderRadius: {
+                control: radius.control,
+                card: radius.card,
+                badge: radius.badge,
+            },
+            spacing: { ...spacing },
+        },
+    },
+};
+export default preset;

package/dist/tokens.d.ts

@@ -0,0 +1,208 @@
+/**
+ * Tokens del sistema de diseño de Pimia («los números en limpio»).
+ *
+ * Fuente de verdad: DESIGN.md del repo de la plataforma (frontmatter + reglas
+ * con nombre), snapshot del 2026-07-30. Este paquete NO inventa valores: los
+ * transcribe para que una app de partner pueda adoptarlos — o ignorarlos por
+ * completo, que es exactamente lo que significa white-label.
+ *
+ * Los canónicos de marca y semáforo van en OKLCH (matiz 278 para la marca);
+ * los `hex` que aparecen en comentarios son equivalencias orientativas.
+ */
+export declare const colors: {
+    /** La única voz de marca: acciones primarias, enlaces, navegación activa, foco. */
+    readonly primary: "oklch(48% 0.20 278)";
+    readonly primaryHover: "oklch(44% 0.22 278)";
+    /** Fondos de estado activo, badges de marca. */
+    readonly primaryContainer: "oklch(96% 0.04 278)";
+    /** Fondo de avatares de iniciales (texto en `primary`). */
+    readonly primaryContainerSubtle: "oklch(95% 0.018 278)";
+    /** Texto principal (slate-800). */
+    readonly ink: "#1e293b";
+    /** Texto secundario y cuerpo de lectura (slate-600) — el LÍMITE legible. */
+    readonly mutedInk: "#475569";
+    /** SOLO decorativo (slate-400): iconos de apoyo, placeholders, disabled. ~3:1 sobre blanco, no cumple AA para texto. */
+    readonly subtleInk: "#94a3b8";
+    /** Cards y formularios. */
+    readonly surface: "#ffffff";
+    /** Fondo de página y sidebar (slate-50). */
+    readonly surfaceMuted: "#f8fafc";
+    /** Bordes de card y panel (slate-200). */
+    readonly border: "#e2e8f0";
+    /** Separadores internos de card (slate-100). */
+    readonly borderSubtle: "#f1f5f9";
+    readonly success: "oklch(52% 0.18 155)";
+    readonly successContainer: "oklch(97% 0.03 155)";
+    readonly warning: "oklch(62% 0.18 75)";
+    readonly warningContainer: "oklch(98% 0.02 75)";
+    readonly danger: "oklch(54% 0.22 25)";
+    readonly dangerContainer: "oklch(98% 0.02 25)";
+};
+export declare const fontFamilies: {
+    /** Titulares y superficies comerciales (login, landing). */
+    readonly display: readonly ["Plus Jakarta Sans", "system-ui", "sans-serif"];
+    /** El trabajo: tablas, formularios, lectura funcional. */
+    readonly body: readonly ["Inter", "system-ui", "sans-serif"];
+    /** Montos, NIFs, IBANs, códigos — SIEMPRE con `tabular-nums` y, en tablas, a la derecha. */
+    readonly mono: readonly ["ui-monospace", "SFMono-Regular", "Menlo", "Monaco", "Consolas", "monospace"];
+};
+export type TypeStyle = {
+    fontFamily: readonly string[];
+    fontSize: string;
+    fontWeight: number;
+    lineHeight: number;
+    letterSpacing: string;
+};
+export declare const typography: Record<string, TypeStyle>;
+/** Radios por rol — controles, cards, badges, pills. */
+export declare const radius: {
+    readonly control: "0.5rem";
+    readonly card: "0.75rem";
+    readonly badge: "0.375rem";
+    readonly pill: "9999px";
+};
+export declare const spacing: {
+    readonly xs: "0.375rem";
+    readonly sm: "0.625rem";
+    readonly md: "1rem";
+    readonly lg: "1.25rem";
+    readonly xl: "2.5rem";
+};
+/**
+ * Recetas de componente del frontmatter, con las referencias resueltas.
+ * Son la forma canónica, no una imposición: una app de partner puede montar
+ * sus propios componentes con los tokens de arriba.
+ */
+export declare const components: {
+    readonly buttonPrimary: {
+        readonly backgroundColor: "oklch(48% 0.20 278)";
+        readonly textColor: "#ffffff";
+        readonly rounded: "0.5rem";
+        readonly padding: "0.5rem 1rem";
+    };
+    readonly buttonSecondary: {
+        readonly backgroundColor: "#ffffff";
+        readonly textColor: "#1e293b";
+        readonly rounded: "0.5rem";
+        readonly padding: "0.5rem 1rem";
+    };
+    readonly input: {
+        readonly backgroundColor: "#ffffff";
+        readonly textColor: "#1e293b";
+        readonly rounded: "0.5rem";
+        readonly padding: "0.5rem 0.75rem";
+    };
+    readonly card: {
+        readonly backgroundColor: "#ffffff";
+        readonly textColor: "#1e293b";
+        readonly rounded: "0.75rem";
+        readonly padding: "1.25rem";
+    };
+    readonly badge: {
+        readonly backgroundColor: "oklch(96% 0.04 278)";
+        readonly textColor: "oklch(48% 0.20 278)";
+        readonly rounded: "0.375rem";
+        readonly padding: "0.125rem 0.5rem";
+    };
+};
+/**
+ * Las reglas con nombre del sistema, en forma consultable (para linters de
+ * partner, documentación generada o simple lectura). El detalle narrativo
+ * vive en DESIGN.md; esto es el resumen operativo.
+ */
+export declare const namedRules: {
+    readonly unaSolaVoz: "El violeta OKLCH 278 es la única voz de marca; purple-*/violet-* de Tailwind quedan prohibidos.";
+    readonly semaforoContable: "success/warning/danger hablan SOLO de estado de dinero y cumplimiento; el violeta jamás comunica estado.";
+    readonly limiteDelSlate: "El texto legible nunca baja de mutedInk (#475569); subtleInk es solo decorativo (no cumple AA).";
+    readonly planoPorDefecto: "Profundidad por hairlines de 1px y contraste de superficie; sombra máxima shadow-sm y siempre con borde.";
+    readonly numerosTabulares: "Todo dato financiero o estructurado va en mono con tabular-nums y, en tablas, alineado a la derecha.";
+    readonly sinEmojis: "Nada de emojis en la UI: StatusBadge, iconos o puntos de color.";
+};
+/** Fuentes vetadas y jubiladas por DESIGN.md §3 — no reintroducir. */
+export declare const forbiddenFonts: readonly ["Sora", "DM Sans", "Space Mono", "IBM Plex", "Outfit", "Nunito", "Raleway", "Lato", "Poppins", "Lexend", "Source Sans 3", "Bricolage Grotesque", "Hanken Grotesk"];
+export declare const tokens: {
+    readonly colors: {
+        /** La única voz de marca: acciones primarias, enlaces, navegación activa, foco. */
+        readonly primary: "oklch(48% 0.20 278)";
+        readonly primaryHover: "oklch(44% 0.22 278)";
+        /** Fondos de estado activo, badges de marca. */
+        readonly primaryContainer: "oklch(96% 0.04 278)";
+        /** Fondo de avatares de iniciales (texto en `primary`). */
+        readonly primaryContainerSubtle: "oklch(95% 0.018 278)";
+        /** Texto principal (slate-800). */
+        readonly ink: "#1e293b";
+        /** Texto secundario y cuerpo de lectura (slate-600) — el LÍMITE legible. */
+        readonly mutedInk: "#475569";
+        /** SOLO decorativo (slate-400): iconos de apoyo, placeholders, disabled. ~3:1 sobre blanco, no cumple AA para texto. */
+        readonly subtleInk: "#94a3b8";
+        /** Cards y formularios. */
+        readonly surface: "#ffffff";
+        /** Fondo de página y sidebar (slate-50). */
+        readonly surfaceMuted: "#f8fafc";
+        /** Bordes de card y panel (slate-200). */
+        readonly border: "#e2e8f0";
+        /** Separadores internos de card (slate-100). */
+        readonly borderSubtle: "#f1f5f9";
+        readonly success: "oklch(52% 0.18 155)";
+        readonly successContainer: "oklch(97% 0.03 155)";
+        readonly warning: "oklch(62% 0.18 75)";
+        readonly warningContainer: "oklch(98% 0.02 75)";
+        readonly danger: "oklch(54% 0.22 25)";
+        readonly dangerContainer: "oklch(98% 0.02 25)";
+    };
+    readonly fontFamilies: {
+        /** Titulares y superficies comerciales (login, landing). */
+        readonly display: readonly ["Plus Jakarta Sans", "system-ui", "sans-serif"];
+        /** El trabajo: tablas, formularios, lectura funcional. */
+        readonly body: readonly ["Inter", "system-ui", "sans-serif"];
+        /** Montos, NIFs, IBANs, códigos — SIEMPRE con `tabular-nums` y, en tablas, a la derecha. */
+        readonly mono: readonly ["ui-monospace", "SFMono-Regular", "Menlo", "Monaco", "Consolas", "monospace"];
+    };
+    readonly typography: Record<string, TypeStyle>;
+    readonly radius: {
+        readonly control: "0.5rem";
+        readonly card: "0.75rem";
+        readonly badge: "0.375rem";
+        readonly pill: "9999px";
+    };
+    readonly spacing: {
+        readonly xs: "0.375rem";
+        readonly sm: "0.625rem";
+        readonly md: "1rem";
+        readonly lg: "1.25rem";
+        readonly xl: "2.5rem";
+    };
+    readonly components: {
+        readonly buttonPrimary: {
+            readonly backgroundColor: "oklch(48% 0.20 278)";
+            readonly textColor: "#ffffff";
+            readonly rounded: "0.5rem";
+            readonly padding: "0.5rem 1rem";
+        };
+        readonly buttonSecondary: {
+            readonly backgroundColor: "#ffffff";
+            readonly textColor: "#1e293b";
+            readonly rounded: "0.5rem";
+            readonly padding: "0.5rem 1rem";
+        };
+        readonly input: {
+            readonly backgroundColor: "#ffffff";
+            readonly textColor: "#1e293b";
+            readonly rounded: "0.5rem";
+            readonly padding: "0.5rem 0.75rem";
+        };
+        readonly card: {
+            readonly backgroundColor: "#ffffff";
+            readonly textColor: "#1e293b";
+            readonly rounded: "0.75rem";
+            readonly padding: "1.25rem";
+        };
+        readonly badge: {
+            readonly backgroundColor: "oklch(96% 0.04 278)";
+            readonly textColor: "oklch(48% 0.20 278)";
+            readonly rounded: "0.375rem";
+            readonly padding: "0.125rem 0.5rem";
+        };
+    };
+};
+export type PimiaTokens = typeof tokens;

package/dist/tokens.js

@@ -0,0 +1,188 @@
+/**
+ * Tokens del sistema de diseño de Pimia («los números en limpio»).
+ *
+ * Fuente de verdad: DESIGN.md del repo de la plataforma (frontmatter + reglas
+ * con nombre), snapshot del 2026-07-30. Este paquete NO inventa valores: los
+ * transcribe para que una app de partner pueda adoptarlos — o ignorarlos por
+ * completo, que es exactamente lo que significa white-label.
+ *
+ * Los canónicos de marca y semáforo van en OKLCH (matiz 278 para la marca);
+ * los `hex` que aparecen en comentarios son equivalencias orientativas.
+ */
+export const colors = {
+    /** La única voz de marca: acciones primarias, enlaces, navegación activa, foco. */
+    primary: 'oklch(48% 0.20 278)', // ≈ #4b44ca
+    primaryHover: 'oklch(44% 0.22 278)', // ≈ #422fc7
+    /** Fondos de estado activo, badges de marca. */
+    primaryContainer: 'oklch(96% 0.04 278)', // ≈ #ebf0ff
+    /** Fondo de avatares de iniciales (texto en `primary`). */
+    primaryContainerSubtle: 'oklch(95% 0.018 278)',
+    /** Texto principal (slate-800). */
+    ink: '#1e293b',
+    /** Texto secundario y cuerpo de lectura (slate-600) — el LÍMITE legible. */
+    mutedInk: '#475569',
+    /** SOLO decorativo (slate-400): iconos de apoyo, placeholders, disabled. ~3:1 sobre blanco, no cumple AA para texto. */
+    subtleInk: '#94a3b8',
+    /** Cards y formularios. */
+    surface: '#ffffff',
+    /** Fondo de página y sidebar (slate-50). */
+    surfaceMuted: '#f8fafc',
+    /** Bordes de card y panel (slate-200). */
+    border: '#e2e8f0',
+    /** Separadores internos de card (slate-100). */
+    borderSubtle: '#f1f5f9',
+    // El semáforo contable: habla SOLO de estado de dinero y cumplimiento,
+    // nunca de marca. Cada estado con su `-container` pastel para badges.
+    success: 'oklch(52% 0.18 155)', // ≈ #008435
+    successContainer: 'oklch(97% 0.03 155)', // ≈ #e6fcec
+    warning: 'oklch(62% 0.18 75)', // ≈ #c37000
+    warningContainer: 'oklch(98% 0.02 75)', // ≈ #fff7ea
+    danger: 'oklch(54% 0.22 25)', // ≈ #d00021
+    dangerContainer: 'oklch(98% 0.02 25)', // ≈ #fff4f2
+};
+export const fontFamilies = {
+    /** Titulares y superficies comerciales (login, landing). */
+    display: ['Plus Jakarta Sans', 'system-ui', 'sans-serif'],
+    /** El trabajo: tablas, formularios, lectura funcional. */
+    body: ['Inter', 'system-ui', 'sans-serif'],
+    /** Montos, NIFs, IBANs, códigos — SIEMPRE con `tabular-nums` y, en tablas, a la derecha. */
+    mono: ['ui-monospace', 'SFMono-Regular', 'Menlo', 'Monaco', 'Consolas', 'monospace'],
+};
+export const typography = {
+    /** Hero comercial (Jakarta). Techo duro: 48px. */
+    display: {
+        fontFamily: fontFamilies.display,
+        fontSize: 'clamp(2.25rem, 5vw, 3rem)',
+        fontWeight: 800,
+        lineHeight: 1.05,
+        letterSpacing: '-0.025em',
+    },
+    /** h1 de página. */
+    headline: {
+        fontFamily: fontFamilies.display,
+        fontSize: '1.5rem',
+        fontWeight: 700,
+        lineHeight: 1.2,
+        letterSpacing: 'normal',
+    },
+    /** h2 de sección y cabeceras de card grandes. */
+    title: {
+        fontFamily: fontFamilies.display,
+        fontSize: '1.125rem',
+        fontWeight: 600,
+        lineHeight: 1.3,
+        letterSpacing: 'normal',
+    },
+    /** Celdas, formularios, lectura funcional. */
+    body: {
+        fontFamily: fontFamilies.body,
+        fontSize: '0.875rem',
+        fontWeight: 400,
+        lineHeight: 1.5,
+        letterSpacing: 'normal',
+    },
+    /** Metadatos y filas secundarias (DESIGN.md §3, escala de trabajo). */
+    bodySm: {
+        fontFamily: fontFamilies.body,
+        fontSize: '0.75rem',
+        fontWeight: 400,
+        lineHeight: 1.5,
+        letterSpacing: 'normal',
+    },
+    /** Leyendas de campo y cabeceras de tabla: MAYÚSCULAS + tracking. */
+    label: {
+        fontFamily: fontFamilies.body,
+        fontSize: '0.6875rem',
+        fontWeight: 600,
+        lineHeight: 1.4,
+        letterSpacing: '0.05em',
+    },
+};
+/** Radios por rol — controles, cards, badges, pills. */
+export const radius = {
+    control: '0.5rem', // botones e inputs (rounded-lg)
+    card: '0.75rem', // cards, panels, secciones (rounded-xl)
+    badge: '0.375rem', // StatusBadge
+    pill: '9999px',
+};
+export const spacing = {
+    xs: '0.375rem',
+    sm: '0.625rem',
+    md: '1rem',
+    lg: '1.25rem',
+    xl: '2.5rem',
+};
+/**
+ * Recetas de componente del frontmatter, con las referencias resueltas.
+ * Son la forma canónica, no una imposición: una app de partner puede montar
+ * sus propios componentes con los tokens de arriba.
+ */
+export const components = {
+    buttonPrimary: {
+        backgroundColor: colors.primary,
+        textColor: colors.surface,
+        rounded: radius.control,
+        padding: '0.5rem 1rem',
+    },
+    buttonSecondary: {
+        backgroundColor: colors.surface,
+        textColor: colors.ink,
+        rounded: radius.control,
+        padding: '0.5rem 1rem',
+    },
+    input: {
+        backgroundColor: colors.surface,
+        textColor: colors.ink,
+        rounded: radius.control,
+        padding: '0.5rem 0.75rem',
+    },
+    card: {
+        backgroundColor: colors.surface,
+        textColor: colors.ink,
+        rounded: radius.card,
+        padding: '1.25rem',
+    },
+    badge: {
+        backgroundColor: colors.primaryContainer,
+        textColor: colors.primary,
+        rounded: radius.badge,
+        padding: '0.125rem 0.5rem',
+    },
+};
+/**
+ * Las reglas con nombre del sistema, en forma consultable (para linters de
+ * partner, documentación generada o simple lectura). El detalle narrativo
+ * vive en DESIGN.md; esto es el resumen operativo.
+ */
+export const namedRules = {
+    unaSolaVoz: 'El violeta OKLCH 278 es la única voz de marca; purple-*/violet-* de Tailwind quedan prohibidos.',
+    semaforoContable: 'success/warning/danger hablan SOLO de estado de dinero y cumplimiento; el violeta jamás comunica estado.',
+    limiteDelSlate: 'El texto legible nunca baja de mutedInk (#475569); subtleInk es solo decorativo (no cumple AA).',
+    planoPorDefecto: 'Profundidad por hairlines de 1px y contraste de superficie; sombra máxima shadow-sm y siempre con borde.',
+    numerosTabulares: 'Todo dato financiero o estructurado va en mono con tabular-nums y, en tablas, alineado a la derecha.',
+    sinEmojis: 'Nada de emojis en la UI: StatusBadge, iconos o puntos de color.',
+};
+/** Fuentes vetadas y jubiladas por DESIGN.md §3 — no reintroducir. */
+export const forbiddenFonts = [
+    'Sora',
+    'DM Sans',
+    'Space Mono',
+    'IBM Plex',
+    'Outfit',
+    'Nunito',
+    'Raleway',
+    'Lato',
+    'Poppins',
+    'Lexend',
+    'Source Sans 3',
+    'Bricolage Grotesque',
+    'Hanken Grotesk',
+];
+export const tokens = {
+    colors,
+    fontFamilies,
+    typography,
+    radius,
+    spacing,
+    components,
+};

package/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "@pimia/design-tokens",
+  "version": "0.1.0",
+  "description": "Sistema de diseño de Pimia como paquete OPCIONAL para apps de partner: tokens tipados, variables CSS y preset de Tailwind. El white-label es poder no usarlo.",
+  "license": "MIT",
+  "author": "Pimia (https://pimia.es)",
+  "homepage": "https://github.com/Pimia-AI/pimia-sdks/tree/main/design-tokens#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Pimia-AI/pimia-sdks.git",
+    "directory": "design-tokens"
+  },
+  "bugs": {
+    "url": "https://github.com/Pimia-AI/pimia-sdks/issues"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./tailwind": {
+      "types": "./dist/tailwind.d.ts",
+      "import": "./dist/tailwind.js"
+    },
+    "./pimia.css": "./dist/pimia.css"
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "engines": {
+    "node": ">=20"
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.json && node scripts/emit-css.mjs",
+    "typecheck": "tsc -p tsconfig.json --noEmit",
+    "test": "node --test test/*.test.js",
+    "prepublishOnly": "npm run build"
+  },
+  "devDependencies": {
+    "typescript": "^5.7.2"
+  },
+  "keywords": [
+    "pimia",
+    "design-tokens",
+    "design-system",
+    "tailwind"
+  ]
+}