Design tokens
Cómo consumir los colores, radios, sombras y tipografía de la marca en cualquier repo — CSS, Tailwind v4/v3 y JS/TS.
Todos los valores de marca viven en una única fuente de verdad: tokens/tokens.json. Con
pnpm build:tokens se generan artefactos listos para cualquier stack, en tokens/dist/.
tokens/dist/* a mano — se regeneran. Edita tokens/tokens.json.Artefactos
| Archivo | Para qué |
|---|---|
web.css | El sitio principal — variables con los nombres del código real (--brand-blue-dark, --brand-cream, .mark-yellow, Poppins/Inter) |
tokens.css | Vanilla — var(--navy), var(--radius-lg) |
theme.css | Tailwind v4 — clases bg-navy, text-amarillo, shadow-3d-navy, rounded-lg |
tailwind-preset.js | Tailwind v3 — presets: [require(...)] |
tokens.js + .d.ts | JS / TS — tokens.color.navy, tokens.web.color['brand-blue-dark'], tokens.motion |
fonts.css | @font-face Nunito (solo universo app) |
¿Pieza institucional / del sitio? Parte por
web.css(contexto principal). Los tokensnavy/amarillo/celestea secas son la paleta compartida; los soft de la app difieren de los del sitio.
Ejemplos
Tailwind v4 (como este brandbook):
@import 'tailwindcss';
@import 'pro-universitas-brand/tokens/dist/theme.css';<button class="rounded-lg bg-amarillo text-navy shadow-3d-amarillo">Empieza gratis</button>Vanilla CSS:
@import 'pro-universitas-brand/tokens/dist/tokens.css';
.cta { background: var(--navy); color: #fff; border-radius: var(--radius-lg); }JS / TS:
import { tokens } from 'pro-universitas-brand/tokens/dist/tokens.js';
tokens.color.navy; // "#003C72"
tokens.subject.matematicas; // "navy"Instalar en otro repo
pnpm add github:Pbezama/pro-universitas-brando copia la carpeta tokens/dist/ (y public/brand/fonts/ si haces self-host de Nunito).
Recordatorios de marca
- Amarillo siempre con texto navy (
text-navysobrebg-amarillo). - Éxito = celeste, no navy.
- Botón principal: 3D (
shadow-3d-navy/shadow-3d-amarillo), radiolg(16px), Nunito ExtraBold.
Niveles y personajes por curso
Las insignias por desempeño (Base, Medio, Avanzado, Élite) y los personajes del chungungo por curso escolar (1° medio a egresado). Reglas y descargas.
Plantillas
Genera piezas de marca en segundos — social cards, posts, stories, banners de ads, OG, presentaciones y firma de correo.