Typography

Newsreader solo para el titular de página. Todo lo demás en Geist.

Escala de texto del panel. Los títulos de página siguen ContentWrapper (24 px); las secciones siguen WeekProgress (16 px). Newsreader también acompaña las citas de comentarios, como en CommentQuote. Geist para el cuerpo y Geist Mono para datos crudos.

Instalación

shadcn

npx shadcn@latest add https://design.moodinary.com/r/typography.json

import

import { BodyText, Caption, InlineCode, PageTitle, Quote, SectionTitle, Subheading } from "@moodinary/ui/components/typography";

Ejemplos

Escala

Título, secciones, cuerpo, cita, nota y código en línea.

Configuración

¿Contestó mi gente?

Participación por equipo

Revisá cómo se sienten los equipos y qué acciones podés acompañar. Las respuestas son anónimas.

“Hoy pudimos organizarnos mejor como equipo.”

Datos anónimosCódigo de equipo EQUIPO-NORTE

Código

scale.tsx

import {
	BodyText,
	Caption,
	InlineCode,
	PageTitle,
	Quote,
	SectionTitle,
	Subheading,
} from "@moodinary/ui/components/typography";

export default function TypographyScale() {
	return (
		<div className="grid gap-3.5">
			<PageTitle>Configuración</PageTitle>
			<SectionTitle>¿Contestó mi gente?</SectionTitle>
			<Subheading>Participación por equipo</Subheading>
			<BodyText>
				Revisá cómo se sienten los equipos y qué acciones podés acompañar. Las
				respuestas son anónimas.
			</BodyText>
			<Quote>“Hoy pudimos organizarnos mejor como equipo.”</Quote>
			<Caption>Datos anónimos</Caption>
			<span>
				Código de equipo <InlineCode>EQUIPO-NORTE</InlineCode>
			</span>
		</div>
	);
}

Props

PageTitle

Prop	Tipo	Default	Descripción
className	string	-	Clases extra.
...props	ComponentProps<"h1">	-	Atributos nativos.

SectionTitle

Prop	Tipo	Default	Descripción
className	string	-	Clases extra.
...props	ComponentProps<"h2">	-	Atributos nativos.

Subheading

Prop	Tipo	Default	Descripción
className	string	-	Clases extra.
...props	ComponentProps<"h3">	-	Atributos nativos.

BodyText

Prop	Tipo	Default	Descripción
className	string	-	Clases extra.
...props	ComponentProps<"p">	-	Atributos nativos.

Quote

Prop	Tipo	Default	Descripción
className	string	-	Clases extra.
...props	ComponentProps<"blockquote">	-	Atributos nativos.

Caption

Prop	Tipo	Default	Descripción
className	string	-	Clases extra.
...props	ComponentProps<"small">	-	Atributos nativos.

InlineCode

Prop	Tipo	Default	Descripción
className	string	-	Clases extra.
...props	ComponentProps<"code">	-	Atributos nativos.

Cuándo sí y cuándo no

Hacé

Usá un solo PageTitle por pantalla.
Seguí el orden h1, h2, h3.
Usá Caption para datos secundarios.

Evitá

Reservá Newsreader para títulos y voz humana, no para métricas ni controles.
No elijas un título por tamaño si rompe la jerarquía.
No uses InlineCode para resaltar palabras comunes.

Cada componente usa su elemento HTML semántico.
No saltees niveles de encabezado.