---
version: alpha
name: "Mono"
description: "Páginas blancas lisas, tipografía Geist y un solo azul cobalto, hechos para documentación y herramientas de desarrollo. Mono es un sistema discreto para productos de desarrollo: páginas blancas, Geist y Geist Mono, bordes finos y un solo azul cobalto para enlaces y acciones principales. Los bloques de código, las tablas y las referencias de API son lo principal, no un añadido."
colors:
  primary: "#2450E6"
  on-primary: "#FFFFFF"
  secondary: "#0F9F6E"
  tertiary: "#D97706"
  neutral: "#5D6470"
  surface: "#FFFFFF"
  on-surface: "#0B0C0E"
typography:
  display-lg:
    fontFamily: "Geist"
    fontSize: 60px
    fontWeight: 600
    lineHeight: 1.05
    letterSpacing: -0.025em
  headline-lg:
    fontFamily: "Geist"
    fontSize: 40px
    fontWeight: 600
    lineHeight: 1.1
    letterSpacing: -0.02em
  headline-md:
    fontFamily: "Geist"
    fontSize: 28px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: -0.01em
  headline-sm:
    fontFamily: "Geist"
    fontSize: 20px
    fontWeight: 600
    lineHeight: 1.3
  body-md:
    fontFamily: "Geist"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.55
  body-sm:
    fontFamily: "Geist"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.45
rounded:
  sm: 4px
  md: 6px
  lg: 8px
  xl: 12px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 48px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    rounded: "{rounded.lg}"
    padding: "{spacing.md}"
---

## Overview

Mono es un sistema discreto para productos de desarrollo: páginas blancas, Geist y Geist Mono, bordes finos y un solo azul cobalto para enlaces y acciones principales. Los bloques de código, las tablas y las referencias de API son lo principal, no un añadido.

## Colors

- **primary (#2450E6):** Azul cobalto, para enlaces, botones principales y el elemento activo de la barra lateral.
- **on-primary (#FFFFFF)**
- **secondary (#0F9F6E):** Esmeralda, para estados de éxito, líneas añadidas en los diffs y la segunda serie de gráficos.
- **tertiary (#D97706):** Ámbar, para advertencias, avisos de obsolescencia y una tercera serie.
- **neutral (#5D6470):** Gris pizarra frío para descripciones, números de línea y metadatos.
- **surface (#FFFFFF):** Blanco puro; las tarjetas son iguales que la página y se distinguen por un borde. El modo oscuro es casi negro.
- **on-surface (#0B0C0E)**

## Typography

Geist en todo: seminegrita 600 para los encabezados, desde un display de 60px hasta 20px, regular 400 a 16px con interlineado de 1.55 para el cuerpo. Geist Mono para código, comandos, teclas y números de versión.

## Layout

El contenido se apoya en una cuadrícula de 12 columnas y 1280px con gutters de 24px y una unidad de espaciado de 4px. Las páginas de documentación usan una barra lateral a la izquierda, una columna de contenido de 72 caracteres y una tabla de contenidos de la página a la derecha.

## Shapes

Esquinas de 8px en tarjetas, bloques de código, inputs y botones. Todo se separa con bordes de 1px en gris claro; sin sombras.

## Components

Bloques de código con botón de copiar y una pestaña con el nombre del archivo, avisos de nota y de advertencia, comandos de instalación en pestañas (npm, pnpm, bun), chips de atajos de teclado y una búsqueda con command-K.

## Do's and Don'ts

- Muestra un ejemplo de código que funcione cerca del principio de cada página.
- Pon cada comando, ruta y flag en Geist Mono.
- No uses el azul para nada que no sea clicable.
- No decores con degradados, ilustraciones ni resplandores.