Instalacion

Dos formas vigentes de integrar el Design System: paquete npm (recomendado) o CDN directo.

Opcion 1 — Paquete npm (recomendado)

1. Configurar registry

Crear o agregar al .npmrc del repo:

@nuevauno:registry=https://npm.pkg.github.com

2. Instalar

pnpm add @nuevauno/brand

3. Configurar Tailwind

// tailwind.config.mjs
import nuBrand from '@nuevauno/brand/tailwind-preset';

export default {
  presets: [nuBrand],
  content: ['./app/**/*.{ts,tsx}'],
};

4. Agregar CSS base (opcional)

En el entry principal, importar el CSS publicado por el paquete:

import '@nuevauno/brand/css/brand.css';

Opcion 2 — CDN directo

Para proyectos sin Tailwind o que solo necesitan tokens CSS:

<link rel="stylesheet" href="https://branding.nuevauno.com/css/brand.css" />

Esto incluye:

@font-face para Urbanist variable (self-hosted)
CSS custom properties (--nu-accent, --nu-font-sans, --nu-font-mono)
Compatibilidad tipográfica: font-sans y font-mono resuelven a Urbanist

Contenido del paquete

@nuevauno/brand
├── tailwind-preset.js  → import nuBrand from '@nuevauno/brand/tailwind-preset'
├── tokens.js           → import { colors, fontFamily } from '@nuevauno/brand'
└── css/
    └── brand.css       → import '@nuevauno/brand/css/brand.css'