Typography

4 Brand Fonts

Sistema tipografico de Nidus. Cuatro fuentes de marca instaladas y listas para usar via clases de Tailwind. Esta pagina es la referencia canonica para aplicarlas de forma consistente en componentes y vistas.

Font Families

Todas las familias disponibles. Usá la clase Tailwind o la variable CSS segun el contexto.

Nexa Regular

Available

Aa Bb Cc 123

--font-nexa-regular

Fuente principal de marca para UI y contenido general.

Owners Narrow

Available

HEADING DISPLAY

--font-owners-narrow-regular

Titulares compactos y etiquetas de alto impacto.

Owners Wide

Available

SECTION TITLE

--font-owners-wide-regular

Titulares amplios para hero y secciones editoriales.

Elaina Script

Available

Nidus Platform

--font-elaina-script

Tipografia expresiva para logotipo y acentos decorativos.

Sans (Sistema)

Available

UI Text / Body

--font-sans

Fallback de sistema para UI general y prosa.

Mono (Sistema)

Available

const token = true;

--font-mono

Codigo, IDs y valores tecnicos.

Brand Fonts — Showcase

Vista en vivo de cada tipografia con sus casos de uso recomendados y guias de aplicacion.

Nexa Regular

Body / UI Principal

Plataforma de gestión de obras

Construimos espacios con propósito

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz 0123456789

Uso: Usá esta fuente para párrafos, labels, botones y la mayoría del contenido de interfaz.

Owners Narrow Regular

Display / Headings Compactos

GESTION DE OBRAS

SISTEMA DE DISENO NIDUS

ABCDEFGHIJKLMNOPQRSTUVWXYZ

0123456789

Uso: Titulares de página, encabezados de sección y etiquetas de alto impacto con tracking amplio.

Owners Wide Regular

Display / Hero & Editorial

NIDUS

BUILD BETTER

ABCDEFGHIJKLMNOPQRSTUVWXYZ

0123456789

Uso: Hero sections, banners editoriales y cualquier titular que necesite presencia visual amplia.

Elaina Script

Brand / Decorativo

Nidus

Construimos juntos

Platform

Uso: Exclusivamente para el logotipo, firmas y detalles expresivos de marca. No usar en UI funcional.

Cómo usar las fuentes

Dos metodos disponibles. Ambos requieren que FONT_CLASSES este aplicado en el layout.tsx raiz.

Metodo 1 — Clase Tailwind (recomendado)

// Titulares de marca
<h1 className="font-owners-wide tracking-wide uppercase">
  NIDUS PLATFORM
</h1>

// Cuerpo principal
<p className="font-nexa text-base leading-relaxed">
  Texto de la plataforma
</p>

// Acento decorativo
<span className="font-elaina text-3xl">
  Nidus
</span>

Metodo 2 — Variable CSS (para estilos custom)

/* En un archivo CSS o estilo inline */
.mi-componente {
  font-family: var(--font-nexa-regular);
}

.mi-titulo {
  font-family: var(--font-owners-narrow-regular);
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

/* Tailwind arbitrary value */
<p className="font-[--font-nexa-regular]">
  Texto
</p>

Setup en layout.tsx — Referencia rapida

import { FONT_CLASSES } from '@repo/ui';

// Las 4 fuentes se activan en el <body> via className:
<body
  className={`
    ${FONT_CLASSES.NEXA_REGULAR}
    ${FONT_CLASSES.ELAINA_SCRIPT}
    ${FONT_CLASSES.OWNERS_NARROW_REGULAR}
    ${FONT_CLASSES.OWNERS_WIDE_REGULAR}
    antialiased
  `}
>

// Tailwind tokens disponibles tras el setup:
// font-nexa          → Nexa Regular
// font-elaina        → Elaina Script
// font-owners-narrow → Owners Narrow Regular
// font-owners-wide   → Owners Wide Regular

Text Scale

Escala tipografica con la fuente recomendada para cada nivel de jerarquia.

Display XL — Owners Wide

font-owners-wide text-5xl tracking-wide uppercase

NIDUS PLATFORM

Hero principal o titulares de alto impacto editorial.

Display L — Owners Narrow

font-owners-narrow text-4xl tracking-widest uppercase

GESTIÓN DE OBRAS

Titulares de pagina principal, secciones destacadas.

Heading M — Nexa Regular

font-nexa text-2xl font-semibold tracking-tight

Sistema de componentes

Titulos de seccion y subseccion de UI.

Body — Nexa Regular

font-nexa text-base leading-relaxed

Texto base para lectura continua en producto y documentacion.

Parrafos principales y contenido largo.

Body Small — Nexa Regular

font-nexa text-sm leading-relaxed

Texto secundario para ayudar al escaneo visual.

Descripciones y notas de apoyo.

Caption — Nexa Regular

font-nexa text-xs leading-snug

Meta data, timestamps y etiquetas auxiliares.

Ayudas contextuales y labels compactos.

Brand Accent — Elaina Script

font-elaina text-3xl

Nidus Platform

Logotipo, firmas y acentos expresivos de marca.

Code — Mono

font-mono text-sm

const font = 'font-nexa';

Snippets de codigo, IDs y valores tecnicos.

Text Color Tokens

Token	Uso	Vista
`text-foreground`	Texto principal de interfaz	Sample text preview
`text-text-primary`	Texto primario semantico	Sample text preview
`text-text-secondary`	Texto secundario semantico	Sample text preview
`text-muted-foreground`	Texto de soporte y meta informacion	Sample text preview
`text-text-disabled`	Texto deshabilitado o inactivo	Sample text preview