Este manual es el mismo brand book que vive en Brand/brand book/index.html, traducido a MDX para que cualquier agente o editor pueda referenciarlo desde dentro del portal. La Fase 6 del plan va a expandirlo con las secciones completas: identidad, sistema, voz y aplicación.

Mientras tanto, esta página funciona como referencia de la gramática editorial: si escribís un .mdx nuevo, todos los elementos de abajo renderizan así sin que tengas que aplicar clases a mano.

Heading H1

El nivel más grande dentro del MDX. Instrument Serif entre 1.8rem y 2.6rem. El título de página (DocsTitle) va un escalón por encima, también en serif.

Heading H2

Segundo nivel, sigue siendo serif pero más chico (1.4–1.9rem). Úsalo para abrir bloques dentro de una misma sección.

Heading H3

Tercer nivel serif (1.15–1.5rem). Para subdivisiones dentro de una sección h2.

EYEBROW CON H4

El h4 no es un cuarto nivel de título. Es un eyebrow: DM Sans en mayúsculas, tracking amplio, color stone. Reservalo para etiquetar bloques cortos o abrir una pausa editorial.

Bloques de prosa

El párrafo hereda DM Sans del layout global. Mantenelo corto: cuando una frase empieza a tener dos subordinadas anidadas, partila en dos con punto. El ritmo es parte del tono.

La IA no llegó para reemplazarte. Llegó para que trabajes mejor. Y "mejor" no significa más rápido a cualquier costo — significa con más claridad, con más estructura.

Las citas llevan barra izquierda en acento teal y texto en earth. Usalas para manifestar ideas que quieras que el lector relea, no como decoración.

Inline code como useMDXComponents aparece en mono sobre accent-wash. Reservalo para nombres de funciones, archivos, variables o flags — cualquier cosa que el lector podría copiar tal cual.

components/mdx.tsx

import defaultMdxComponents from 'fumadocs-ui/mdx';

export function getMDXComponents() {
  return { ...defaultMdxComponents };
}

Los bloques de código mantienen el tratamiento nativo de Fumadocs (shiki, copy button, título opcional). No los tocamos: el brand book no prescribe un tema de código propio.

Callouts editoriales

Cuatro sabores, cada uno con su rol:

Nota

Información que el lector necesita para entender lo que sigue. El color accent la ancla al teal de la marca.

Sugerencia

Un atajo o mejora opcional. Ocre para separarla de lo obligatorio sin pisar los rojos de advertencia.

Advertencia

Algo que puede romper o sorprender. Terracotta porque es el único color de la paleta que funciona como alarma sin caer en el rojo puro.

Ejemplo

Un caso concreto que aterriza el punto. Stone para que se sienta como una pausa reflexiva, no como énfasis.

Mantenelo editorial

Si dudás si algo es on-brand, preguntate: ¿esto pasa el filtro de claridad, criterio y estructura? Si la respuesta es "no estoy seguro", probablemente no.

Introducción