Instalación

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

Opción 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: ['./src/**/*.{html,js,jsx,tsx,svelte,ts,vue,astro}'],
};

4. Agregar CSS base (opcional)

En el layout principal, agregar el link al CSS con @font-face y variables:

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

Opción 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 Inter y JetBrains Mono (self-hosted)
  • CSS custom properties (--nu-accent, --nu-font-sans, etc.)

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'

NUEVAUNO © 2026