---
version: alpha
name: "Noir"
description: "Negro, blanco hueso y una serif enorme. El trabajo es el único color. Noir elimina el color para que hable el trabajo: páginas negras, texto en blanco hueso, una Instrument Serif gigante para nombres y títulos de proyecto y marcos de imagen cuadrados. Luce más en modo oscuro; el modo claro en blanco hueso va bien con casos de estudio de aire impreso."
colors:
  primary: "#0E0E0E"
  on-primary: "#F4F2EE"
  secondary: "#6E6A63"
  tertiary: "#A39D93"
  neutral: "#5F5C57"
  surface: "#F4F2EE"
  on-surface: "#0E0E0E"
typography:
  display-lg:
    fontFamily: "Instrument Serif"
    fontSize: 120px
    fontWeight: 400
    lineHeight: 0.9
    letterSpacing: -0.03em
  headline-lg:
    fontFamily: "Instrument Serif"
    fontSize: 72px
    fontWeight: 400
    lineHeight: 0.95
    letterSpacing: -0.02em
  headline-md:
    fontFamily: "Instrument Serif"
    fontSize: 40px
    fontWeight: 400
    lineHeight: 1.05
    letterSpacing: -0.01em
  headline-sm:
    fontFamily: "Instrument Serif"
    fontSize: 22px
    fontWeight: 400
    lineHeight: 1.3
  body-md:
    fontFamily: "Manrope"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.6
  body-sm:
    fontFamily: "Manrope"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0.08em
rounded:
  sm: 0px
  md: 0px
  lg: 0px
  xl: 4px
spacing:
  xs: 8px
  sm: 16px
  md: 32px
  lg: 48px
  xl: 96px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    rounded: "{rounded.lg}"
    padding: "{spacing.md}"
---

## Overview

Noir elimina el color para que hable el trabajo: páginas negras, texto en blanco hueso, una Instrument Serif gigante para nombres y títulos de proyecto y marcos de imagen cuadrados. Luce más en modo oscuro; el modo claro en blanco hueso va bien con casos de estudio de aire impreso.

## Colors

- **primary (#0E0E0E):** Negro en modo claro y blanco hueso en modo oscuro, para botones, enlaces y el proyecto activo.
- **on-primary (#F4F2EE)**
- **secondary (#6E6A63):** Gris oscuro cálido, para bloques de texto secundarios y la segunda serie de datos.
- **tertiary (#A39D93):** Gris piedra, para marcadores de imagen, números de índice y una tercera serie.
- **neutral (#5F5C57):** Gris medio cálido para pies de foto, créditos y años.
- **surface (#F4F2EE):** Blanco hueso en modo claro con tarjetas de blanco puro; el modo oscuro es casi negro puro.
- **on-surface (#0E0E0E)**

## Typography

Instrument Serif con grosor 400 para los titulares, de hasta 120px con interlineado de 0.9 y poco espaciado entre letras; Manrope a 16px con interlineado de 1.6 para el cuerpo. Las etiquetas pequeñas de 12px usan un espaciado de 0.08em.

## Layout

Una cuadrícula de 12 columnas de hasta 1440px con gutters estrechos de 16px y una unidad de espaciado de 8px. Las imágenes de proyecto van grandes y pueden romper la cuadrícula; el texto se queda en columnas estrechas de 56 caracteres.

## Shapes

Esquinas rectas (radio de 0px) en imágenes y botones. Líneas finas de 1px en gris cálido; sin sombras.

## Components

Una lista índice de proyectos con año y rol, secuencias de imágenes a todo el ancho, botones de enlace de texto con una flecha y una cabecera mínima con nombre, trabajos y contacto.

## Do's and Don'ts

- Abre cada página con un único título gigante en serif.
- Numera los proyectos e indica el año, el cliente y el rol.
- No añadas un color de acento; las imágenes aportan el color.
- No pongas las imágenes en marcos redondeados ni con sombra.