Una secuencia de títulos de crédito convertida en página web. Sin color, sin sombra y sin una sola esquina redondeada: la película empieza en negro, los títulos entran apilados en blanco y el año se queda al lado en mono, como una anotación de ficha técnica.
Cinco valores, todos sobre el eje negro y blanco. La jerarquía se construye invirtiendo bandas a sangre, no separando cajas. El interlineado del titular es 0.92, menos que uno, para que las líneas se rocen.
A24 usa una sola familia para todo, de la navegación de 11px al título de 74px, y una mono que solo escribe el año al lado de la película. La jerarquía no la da el peso, que nunca pasa de 500: la da el salto de escala y el tracking. Las mayúsculas pequeñas se abren a 0.14em mientras el titular se cierra a -0.04em, y ese contrapunto es lo que hace que el bloque se lea como un cartel y no como una interfaz. Entre 21px y 74px no hay nada, y ese hueco es deliberado: o es interfaz, o es cartel.
| Rol | Tamaño | LH | Tracking |
|---|---|---|---|
| display | 74px | 0.92 | -0.04em |
| heading-sm | 21px | 1.3 | -0.18px |
| subheading | 18px | 1.33 | -0.09px |
| mono | 15px | 0.92 | -0.065em |
| body | 15px | 1.5 | 0 |
| body-sm | 13px | 1.92 | 0.005em |
| label | 11px | 1.5 | 0.14em |
| caption | 10px | 1.5 | 0.14em |
La acción por defecto de todo el sitio es un enlace de texto de 15px en mayúsculas con una flecha delante. Sin fondo, sin borde y sin padding. No hay color de acción en ninguna parte.
Get our emails. Letters from our filmmakers, new trailers, podcasts, merch, and more. Not too often, just enough.
El input pierde el borde derecho y el botón se pega a él: los dos juntos se leen como un solo rectángulo partido en dos valores, uno en hueco y otro en relleno.
Card de producto: fondo #EEEEEE, 22px de padding, radio 0 y sin borde. El único gris intermedio del sistema existe para aislar el objeto fotografiado, no como fondo general.
Bloque de título: 74px, interlineado 0.92 y sin gap entre líneas, con el año en mono a la derecha y a media altura. El de en medio va en Smoke, que sobre negro sí cumple AA.
:root {
/* Colors */
--color-obsidian: #000000;
--color-paper-white: #FFFFFF;
--color-ash-gray: #EEEEEE;
--color-smoke: #888888;
--color-bone: #CACACA;
/* Roles */
--color-background: #000000;
--color-background-light: #FFFFFF;
--color-surface: #EEEEEE;
--color-text-on-dark: #FFFFFF;
--color-text-on-light: #000000;
--color-text-secondary: #888888;
--color-border-on-light: #CACACA;
--color-border-on-dark: #FFFFFF;
/* Typography */
--font-display: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif;
--font-body: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif;
--font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
--font-weight-regular: 400;
--font-weight-medium: 500;
/* Tracking */
--tracking-display: -0.04em;
--tracking-caps: 0.14em;
--tracking-mono: -0.065em;
/* Scale */
--text-display: 74px;
--leading-display: 0.92;
--text-heading-sm: 21px;
--leading-heading-sm: 1.3;
--text-subheading: 18px;
--leading-subheading: 1.33;
--text-mono: 15px;
--leading-mono: 0.92;
--text-body: 15px;
--leading-body: 1.5;
--text-body-sm: 13px;
--leading-body-sm: 1.92;
--text-label: 11px;
--leading-label: 1.5;
--text-caption: 10px;
--leading-caption: 1.5;
/* Spacing */
--spacing-unit: 4px;
--spacing-4: 4px;
--spacing-9: 9px;
--spacing-12: 12px;
--spacing-18: 18px;
--spacing-22: 22px;
--spacing-36: 36px;
--spacing-56: 56px;
--spacing-96: 96px;
--spacing-120: 120px;
/* Layout */
--page-max-width: none;
--section-gap: 96px;
--card-padding: 22px;
--element-gap: 9px;
/* Radius: no hay familia porque no hay radios */
--radius-none: 0;
/* Elevation: el sistema es plano, esto es literal */
--shadow-none: none;
}@theme {
/* Colors */
--color-obsidian: #000000;
--color-paper-white: #FFFFFF;
--color-ash-gray: #EEEEEE;
--color-smoke: #888888;
--color-bone: #CACACA;
/* Typography */
--font-display: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif;
--font-body: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif;
--font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
/* Tracking */
--tracking-display: -0.04em;
--tracking-caps: 0.14em;
--tracking-mono: -0.065em;
/* Scale */
--text-display: 74px;
--text-display--line-height: 0.92;
--text-display--letter-spacing: -0.04em;
--text-heading-sm: 21px;
--text-heading-sm--line-height: 1.3;
--text-heading-sm--letter-spacing: -0.0086em;
--text-subheading: 18px;
--text-subheading--line-height: 1.33;
--text-subheading--letter-spacing: -0.005em;
--text-body: 15px;
--text-body--line-height: 1.5;
--text-body-sm: 13px;
--text-body-sm--line-height: 1.92;
--text-label: 11px;
--text-label--line-height: 1.5;
--text-label--letter-spacing: 0.14em;
--text-caption: 10px;
--text-caption--line-height: 1.5;
--text-caption--letter-spacing: 0.14em;
/* Spacing */
--spacing-4: 4px;
--spacing-9: 9px;
--spacing-12: 12px;
--spacing-18: 18px;
--spacing-22: 22px;
--spacing-36: 36px;
--spacing-56: 56px;
--spacing-96: 96px;
--spacing-120: 120px;
/* Radius */
--radius-none: 0;
/* Shadows: ninguna, a proposito */
--shadow-none: none;
}{
"color": {
"brand": {
"obsidian": "#000000",
"paperWhite": "#FFFFFF"
},
"surface": {
"paperWhite": "#FFFFFF",
"ashGray": "#EEEEEE",
"obsidian": "#000000"
},
"text": {
"onDark": "#FFFFFF",
"onLight": "#000000",
"secondary": "#888888",
"hairline": "#CACACA"
},
"accent": null,
"state": {
"note": "el sitio no expone ninguno: se resuelven en monocromo, nunca con color"
}
},
"font": {
"display": "Instrument Sans",
"body": "Instrument Sans",
"mono": "IBM Plex Mono",
"original": {
"display": "NB International Web",
"mono": "NB International Mono Web"
},
"weights": [400, 500],
"tracking": {
"display": "-0.04em",
"caps": "0.14em",
"mono": "-0.065em"
},
"scale": {
"display": { "size": "74px", "lineHeight": 0.92, "tracking": "-0.04em" },
"headingSm": { "size": "21px", "lineHeight": 1.3, "tracking": "-0.18px" },
"subheading": { "size": "18px", "lineHeight": 1.33, "tracking": "-0.09px" },
"mono": { "size": "15px", "lineHeight": 0.92, "tracking": "-0.065em" },
"body": { "size": "15px", "lineHeight": 1.5, "tracking": "0" },
"bodySm": { "size": "13px", "lineHeight": 1.92, "tracking": "0.005em" },
"label": { "size": "11px", "lineHeight": 1.5, "tracking": "0.14em" },
"caption": { "size": "10px", "lineHeight": 1.5, "tracking": "0.14em" }
}
},
"spacing": {
"base": "4px",
"scale": ["4px", "5px", "6px", "9px", "12px", "18px", "22px", "24px", "26px", "36px", "42px", "51px", "56px", "96px", "103px", "120px"],
"density": "comfortable",
"sectionGap": "96px",
"cardPadding": "22px",
"elementGap": "9px",
"maxWidth": null
},
"radius": {
"all": "0"
},
"shadow": {
"all": "none"
},
"contrast": {
"whiteOnObsidian": "21.00:1",
"obsidianOnWhite": "21.00:1",
"obsidianOnAsh": "18.10:1",
"smokeOnObsidian": "5.92:1",
"smokeOnWhite": "3.54:1",
"smokeOnAsh": "3.06:1",
"boneOnWhite": "1.64:1"
}
}---
version: "1.0"
name: "A24"
description: "Sistema visual de una secuencia de titulos de credito: bandas a sangre que alternan negro puro y blanco puro, titulos apilados a 74px con interlineado 0.92 y tracking -0.04em para que las lineas se toquen, un mono que solo escribe el ano de la pelicula, radio 0 en todo y ni una sombra. Sin un solo color cromatico."
colors:
primary: "#000000"
primary-hover: "#1A1A1A"
primary-active: "#000000"
secondary: "#FFFFFF"
accent: "#FFFFFF"
accent-soft: "#EEEEEE"
neutral: "#888888"
background: "#000000"
surface: "#EEEEEE"
surface-elevated: "#FFFFFF"
text-primary: "#FFFFFF"
text-secondary: "#888888"
text-muted: "#CACACA"
text-on-primary: "#FFFFFF"
text-accent: "#FFFFFF"
border: "#CACACA"
border-subtle: "#EEEEEE"
success: "#000000"
success-bg: "#EEEEEE"
warning: "#000000"
warning-bg: "#EEEEEE"
error: "#000000"
error-bg: "#EEEEEE"
info: "#000000"
info-bg: "#EEEEEE"
typography:
display:
fontFamily: "Instrument Sans"
fontSize: "74px"
fontWeight: 400
lineHeight: "0.92"
letterSpacing: "-0.04em"
heading-sm:
fontFamily: "Instrument Sans"
fontSize: "21px"
fontWeight: 500
lineHeight: "1.3"
letterSpacing: "-0.0086em"
subheading:
fontFamily: "Instrument Sans"
fontSize: "18px"
fontWeight: 400
lineHeight: "1.33"
letterSpacing: "-0.005em"
mono:
fontFamily: "IBM Plex Mono"
fontSize: "15px"
fontWeight: 400
lineHeight: "0.92"
letterSpacing: "-0.065em"
body:
fontFamily: "Instrument Sans"
fontSize: "15px"
fontWeight: 400
lineHeight: "1.5"
letterSpacing: "0"
body-sm:
fontFamily: "Instrument Sans"
fontSize: "13px"
fontWeight: 400
lineHeight: "1.92"
letterSpacing: "0.005em"
label:
fontFamily: "Instrument Sans"
fontSize: "11px"
fontWeight: 400
lineHeight: "1.5"
letterSpacing: "0.14em"
caption:
fontFamily: "Instrument Sans"
fontSize: "10px"
fontWeight: 500
lineHeight: "1.5"
letterSpacing: "0.14em"
rounded:
sm: "0"
md: "0"
lg: "0"
xl: "0"
pill: "0"
full: "0"
spacing:
base: "4px"
sm: "9px"
md: "18px"
lg: "22px"
xl: "36px"
2xl: "56px"
3xl: "96px"
gap: "9px"
section-padding: "96px"
components:
button-primary:
backgroundColor: "{colors.surface-elevated}"
textColor: "{colors.primary}"
fontSize: "11px"
fontWeight: 400
letterSpacing: "0.14em"
padding: "22px 18px"
borderRadius: "0"
border: "none"
boxShadow: "none"
button-ghost:
backgroundColor: "transparent"
textColor: "{colors.text-primary}"
fontSize: "15px"
fontWeight: 400
letterSpacing: "0"
padding: "0"
borderRadius: "0"
border: "none"
boxShadow: "none"
input:
backgroundColor: "transparent"
textColor: "{colors.text-primary}"
fontSize: "11px"
padding: "22px 18px"
borderRadius: "0"
border: "1px solid {colors.secondary}"
boxShadow: "none"
card:
backgroundColor: "{colors.surface}"
padding: "22px"
borderRadius: "0"
border: "none"
boxShadow: "none"
badge:
backgroundColor: "transparent"
textColor: "{colors.text-primary}"
fontSize: "10px"
fontWeight: 500
letterSpacing: "0.14em"
padding: "0"
borderRadius: "0"
border: "none"
boxShadow: "none"
---
# DESIGN.md - A24
Sistema visual extraido de https://a24films.com.
Fuente de los valores: la ficha publica de refero.design para el dominio, contrastada con
la captura real de portada. Los contrastes WCAG estan medidos aqui, no copiados: uno de
ellos corrige lo que dice la ficha de origen. Los valores marcados
`(derivado para completar el sistema)` no aparecen en el sitio y se han construido desde
la familia real para que el sistema sea usable de punta a punta.
## 1. Tema Visual y Atmosfera
A24 es una secuencia de titulos de credito convertida en pagina web. No hay color, no hay
sombra, no hay una sola esquina redondeada, y esa ausencia es exactamente la marca: la
pelicula empieza en negro, los titulos entran apilados en blanco y el ano de estreno se
queda a un lado en mono, como una anotacion de ficha tecnica.
El gesto central esta en el interlineado. Los titulos van a 74px con line-height 0.92, que
es menos que uno: las lineas se solapan un poco y el bloque entero se lee como un cartel
impreso, no como una lista. Encima, el tracking baja a -0.04em, casi tres pixeles menos por
letra. Cambiar ese 0.92 por un 1.1 razonable deshace la pagina aunque la tipografia y el
color sigan siendo los mismos.
La segunda decision es el ritmo de bandas. Las secciones no se separan con lineas ni con
cards: se separan invirtiendo el valor. Una banda negra a sangre, luego una blanca, luego
un gris de estudio para la foto de producto. La jerarquia es contraste de valor y nada mas,
porque no queda ninguna otra herramienta disponible.
Palabras clave: cartel de cine, monocromo estricto, esquina viva, escala extrema,
izquierda siempre.
## 2. Paleta de Colores y Roles Semanticos
Cinco valores, todos sobre el eje negro-blanco. No hay un sexto y no hay ninguno cromatico.
### Colores de marca
| Nombre | Hex | Rol |
|---|---|---|
| Obsidian | `#000000` | Fondo de las bandas oscuras, texto sobre superficies claras, hairlines y divisores. Es el esqueleto del sistema |
| Paper White | `#FFFFFF` | Fondo de las bandas claras, superficies de card, contenedor de imagen de producto, texto sobre negro |
Los dos hacen los dos papeles segun la banda en la que caigan. No hay un color de texto y
un color de fondo: hay dos valores que se intercambian, y cada componente lee cual le toca
por el fondo que tiene debajo.
### Colores de superficie
| Nombre | Hex | Rol |
|---|---|---|
| Ash Gray | `#EEEEEE` | Unica superficie intermedia. Contenedor de foto de producto y desplazamiento suave de fondo dentro de las secciones claras |
| Obsidian | `#000000` | Banda oscura a sangre, panel de modal |
| Paper White | `#FFFFFF` | Lienzo por defecto de las secciones claras |
Ash Gray existe para una sola cosa: aislar el objeto fotografiado sin sacarlo del sistema.
No es un gris de fondo general y no debe usarse para tarjetas de texto.
### Colores de texto
Contrastes medidos con la formula de WCAG, no estimados.
| Nombre | Hex | Rol | Contraste |
|---|---|---|---|
| Paper White | `#FFFFFF` | Texto sobre banda negra | 21.00:1 sobre `#000000`, AAA |
| Obsidian | `#000000` | Texto sobre banda blanca | 21.00:1 sobre `#FFFFFF`, AAA |
| Obsidian sobre Ash | `#000000` | Texto sobre panel de producto | 18.10:1 sobre `#EEEEEE`, AAA |
| Smoke | `#888888` | Texto secundario y titulo de pelicula en segundo plano, sobre negro | 5.92:1 sobre `#000000`, AA |
| Smoke sobre blanco | `#888888` | Mismo token, banda clara | 3.54:1 sobre `#FFFFFF`, no llega a AA |
| Bone | `#CACACA` | Hairline sobre blanco, separadores de muy baja enfasis | 1.64:1 sobre `#FFFFFF`, decorativo |
Aqui hay una correccion que solo aparece midiendo:
- **La ficha de origen describe Smoke como un gris que se queda justo por encima del minimo
AA. Eso solo es cierto sobre negro.** Sobre `#000000` da 5.92:1 y cumple. Sobre el blanco
de las bandas claras se queda en 3.54:1, por debajo del 4.5:1 que pide AA para texto
normal, y sobre Ash Gray baja a 3.06:1. Es decir: el mismo token pasa o no pasa segun la
banda en la que caiga. Como en A24 los titulos de segundo plano van precisamente en
Smoke, la regla practica es reservarlo para banda oscura, o para texto de 24px hacia
arriba en banda clara, donde el umbral baja a 3:1.
- **Bone no es un color de texto en ningun contexto.** 1.64:1 sobre blanco. Es un hairline y
nada mas. Sobre negro sube a 12.81:1, pero ahi el sistema usa blanco puro para el borde,
no Bone.
### Colores de estado
El sitio no expone ninguno. Es un catalogo de cine sin mas formulario que el alta de correo,
y meterle un rojo de validacion seria introducir el primer color cromatico del sistema, que
es justo lo que la marca prohibe.
| Estado | Color | Fondo | Origen |
|---|---|---|---|
| Success | `#000000` | `#EEEEEE` | *(derivado)*: se resuelve en monocromo, con peso 500 y una marca de comprobacion |
| Warning | `#000000` | `#EEEEEE` | *(derivado)*: mismo tratamiento, cambia el glifo |
| Error | `#000000` | `#EEEEEE` | *(derivado)*: el campo con error se subraya con 1px negro, no se tine de rojo |
| Info | `#000000` | `#EEEEEE` | *(derivado)* |
Regla dura: si un estado necesita color para entenderse, el problema es el diseno del
estado, no la paleta.
## 3. Reglas de Tipografia
El sitio usa NB International Web para absolutamente todo y NB International Mono Web para
una sola cosa. Ninguna de las dos esta en Google Fonts, asi que esta ficha las sustituye.
### Sustitucion
**Original: NB International Web -> HTML: Instrument Sans (Google substitute).**
NB International es una grotesca racional de Neubau: vertical, de aperturas cerradas, algo
estrecha, con un aire mecanico que aguanta igual a 11px que a 74px. Se compararon tres
candidatas de Google antes de elegir:
- **Public Sans** tiene la neutralidad y no tiene nada mas. A 74px se queda plana y el
titular pierde el filo que le da la marca.
- **Archivo** aguanta muy bien la escala grande, pero viene de las grotescas americanas del
XIX: es mas ancha y mas robusta, y a 11px con 0.14em de tracking se lee publicitaria.
- **Instrument Sans** es la que mas se acerca. Neo-grotesca, ligeramente estrecha, con el
espaciado de origen ya apretado, y con una a de doble piso y una g de un solo ojo que
mantienen el caracter cuando el tracking se cierra a -0.04em.
Se elige Instrument Sans, pesos 400 y 500, que son exactamente los dos que usa el sitio.
**Original: NB International Mono Web -> HTML: IBM Plex Mono (Google substitute).**
La ficha de origen propone IBM Plex Mono o JetBrains Mono. Se toma la primera: sus astas con
remate y su a de doble piso le dan voz a un elemento que en esta pagina aparece en un unico
sitio, el ano al lado del titulo, y que si se neutraliza deja de leerse como anotacion.
### Reparto
- **Instrument Sans**, pesos 400 y 500. Navegacion, cuerpo, titulos y display. El 400 hace
casi todo, incluido el titular de 74px. El 500 solo aparece en etiquetas de 10px.
- **IBM Plex Mono**, peso 400, un unico tamano de 15px. Ano de estreno junto al titulo,
etiquetas tecnicas y anotaciones de ficha. Nada mas.
El display se queda en 400 a 74px. Subirlo a 600 convierte un cartel de cine en un banner de
rebajas, y es el error mas rapido de cometer al reproducir este sistema.
### Escala tipografica
Tercera menor (1.2) sobre una base de 14px, con un salto largo hasta el display.
| Rol | Fuente | Tamano | Peso | Interlineado | Tracking |
|---|---|---|---|---|---|
| display | Instrument Sans | 74px | 400 | 0.92 | -0.04em (-2.96px) |
| heading-sm | Instrument Sans | 21px | 500 | 1.3 | -0.0086em (-0.18px) |
| subheading | Instrument Sans | 18px | 400 | 1.33 | -0.005em (-0.09px) |
| mono | IBM Plex Mono | 15px | 400 | 0.92 | -0.065em |
| body | Instrument Sans | 15px | 400 | 1.5 | 0 |
| body-sm | Instrument Sans | 13px | 400 | 1.92 | 0.005em |
| 12px | Instrument Sans | 12px | 400 | 1.32 | 0.005em |
| label | Instrument Sans | 11px | 400 | 1.5 | 0.14em |
| caption | Instrument Sans | 10px | 500 | 1.5 | 0.14em |
Hay un hueco deliberado entre 21px y 74px. El sistema no tiene tamanos intermedios de
titular porque no quiere jerarquia media: o es interfaz, o es cartel.
### Pesos tipograficos
| Peso | Valor | Uso |
|---|---|---|
| Regular | 400 | Display, cuerpo, navegacion, mono, casi todo |
| Medium | 500 | Etiquetas de 10px, logotipo, alguna cifra |
No existe 600 ni 700. La ficha de origen lo dice y la captura lo confirma: el rango
restringido es intencionado.
### Letter spacing
Es la regla que mas se nota si se rompe.
| Rango | Tracking |
|---|---|
| 74px display | -0.04em |
| 18px a 21px | -0.005em a -0.0086em |
| 15px cuerpo | 0 |
| 10px a 13px | +0.005em, y +0.14em en las mayusculas |
| mono 15px | -0.065em |
Las mayusculas pequenas van muy abiertas, a 0.14em. Es el contrapunto exacto del titular
cerrado, y las dos cosas tienen que estar para que ninguna se lea como un accidente.
## 4. Estilos de Componentes
Radio 0 en todo, imagenes incluidas. Sin sombra en nada.
### Botones
**Solido invertido (el unico relleno del sistema)**
```css
background: #FFFFFF;
color: #000000;
font: 400 11px/1.5 "Instrument Sans";
letter-spacing: 0.14em;
text-transform: uppercase;
padding: 22px 18px;
border-radius: 0;
border: none;
box-shadow: none;
```
Es el boton de alta de correo dentro del modal negro. El relleno blanco sobre panel negro es
toda su jerarquia: no hay color de accion en ningun sitio de la web.
Estados *(derivados para completar el sistema, el sitio solo expone el reposo)*:
| Estado | Cambio |
|---|---|
| hover | `background: #EEEEEE` |
| active | `background: #CACACA` |
| focus-visible | `outline: 1px solid #FFFFFF; outline-offset: 2px` |
| disabled | `background: #888888; color: #000000` |
**Enlace con flecha**
```css
background: transparent;
color: inherit;
font: 400 15px/1.5 "Instrument Sans";
text-transform: uppercase;
padding: 0;
border: none;
```
La flecha va delante del texto y es un glifo de linea, no un icono de fuente. Este es el
patron de accion por defecto en toda la pagina. No lleva fondo, ni borde, ni padding. Un
enlace de texto con una flecha delante es un boton en A24.
### Campo de texto
```css
background: transparent;
color: #FFFFFF;
font: 400 11px/1.5 "Instrument Sans";
letter-spacing: 0.14em;
text-transform: uppercase;
padding: 22px 18px;
border-radius: 0;
border: 1px solid #FFFFFF;
border-right: 0;
```
El detalle que hace el componente: el input pierde el borde derecho y el boton se pega a el.
Los dos juntos se leen como un unico rectangulo partido en dos valores, uno en hueco y otro
en relleno. Al enfocar no cambia el color del borde, porque el borde ya estaba ahi: la
afordancia es el rectangulo, no un anillo de foco de color.
### Card de producto
```css
background: #EEEEEE;
padding: 22px;
border-radius: 0;
border: none;
box-shadow: none;
```
La foto va centrada dentro del gris con aire por los cuatro lados. Al lado, la etiqueta de
categoria en 10px u 11px con 0.14em de tracking, y el titulo del producto en 21px. Ni borde
ni sombra: el cambio de valor del fondo ya separa la card del lienzo.
### Bloque de titulo de pelicula
No es una card, es tipografia suelta.
```css
font: 400 74px/0.92 "Instrument Sans";
letter-spacing: -0.04em;
color: #FFFFFF; /* o #888888 para el segundo plano */
margin: 0;
```
Los titulos se apilan sin ningun gap, asi que las lineas casi se tocan. A la derecha de cada
uno, a media altura, el ano en IBM Plex Mono a 15px. Es el componente mas reconocible del
sitio y no tiene ni un pixel de chrome.
### Modal
```css
background: #000000;
color: #FFFFFF;
border-radius: 0;
box-shadow: none;
padding: 36px;
```
Cabecera en 10px u 11px, mayusculas, tracking 0.14em. Cuerpo en 15px con interlineado 1.5.
La X de cierre es un glifo de linea blanco en la esquina superior derecha. Sin sombra
proyectada: el panel negro sobre la foto ya se separa por valor.
### Navegacion
Barra fija sin fondo y sin borde, flotando sobre lo que haya debajo. Hamburguesa y la
palabra MENU a la izquierda en 13px, logotipo A24 centrado, lupa a la derecha. El color de
los tres cambia segun la banda: blanco sobre negro, negro sobre blanco. No hay estado
activo, no hay subrayado, no hay mega menu.
### Etiquetas de seccion
Mayusculas de 10px u 11px, peso 400, tracking 0.14em, sin fondo y sin caja. Son texto puesto
encima del contenido, no badges. Meterlas en una pildora rompe el sistema.
### Indicador de scroll
Una flecha hacia abajo, trazo fino, abajo a la derecha del viewport. Sin fondo, sin texto,
sin animacion. Toma el color de contraste de la banda en la que este.
## 5. Principios de Layout
### Escala de espaciado
Base de 4px con una densidad que la ficha de origen llama comoda, y con valores impares
sacados del sitio real (5, 9, 22, 26, 51, 103) que delatan una maquetacion medida a mano mas
que un sistema de tokens cerrado.
| Token | Valor | Uso |
|---|---|---|
| `--spacing-4` | 4px | Unidad base |
| `--spacing-9` | 9px | Gap entre elementos, es el gap por defecto |
| `--spacing-12` | 12px | Separacion dentro de un bloque de texto |
| `--spacing-18` | 18px | Padding horizontal de input y boton |
| `--spacing-22` | 22px | Padding de card y padding vertical de control |
| `--spacing-36` | 36px | Separacion entre bloques |
| `--spacing-56` | 56px | Aire dentro de banda |
| `--spacing-96` | 96px | Gap entre secciones |
| `--spacing-120` | 120px | Respiro de banda grande |
Los intermedios reales del sitio son 5, 6, 24, 26, 42, 51 y 103px.
### Contenedores
No hay ancho maximo. La pagina es a sangre completa de lado a lado y el ritmo lo marcan el
tipo y la imagen, no un contenedor centrado. Es lo contrario de casi cualquier sistema de
producto, y es deliberado: un catalogo de cine no tiene columna de lectura.
### Grid
Bandas horizontales apiladas. Dentro de cada banda, un reparto asimetrico de texto a la
izquierda e imagen a la derecha, o una sola imagen a sangre. No hay rejilla de tarjetas y no
hay barra lateral.
### Filosofia de espaciado
Denso dentro del bloque de titulos, que es donde el interlineado por debajo de 1 hace su
trabajo, y muy generoso entre bandas. El contraste entre esas dos densidades es lo que da la
sensacion de credito de pelicula.
## 6. Profundidad y Elevacion
No hay sombras. Ninguna. Tampoco gradientes, ni bordes de color, ni desenfoques.
La profundidad se comunica con un unico recurso: el contraste de valor entre bandas
contiguas.
| Nivel | Nombre | Hex | Uso |
|---|---|---|---|
| 1 | Paper White | `#FFFFFF` | Lienzo claro por defecto |
| 2 | Ash Gray | `#EEEEEE` | Contenedor de foto de producto |
| 3 | Obsidian | `#000000` | Banda oscura y panel de modal |
El modal es el mejor ejemplo: en cualquier otro sistema flotaria con una sombra de 40px de
desenfoque sobre la foto. Aqui es un rectangulo negro puro pegado a la imagen, y funciona
porque el salto de valor ya es total.
### Radios de borde
| Token | Valor | Uso |
|---|---|---|
| `--radius-none` | 0 | Todo. Cards, botones, inputs, modales, imagenes, avatares |
No hay familia de radios porque no hay radios. Es el punto en el que este sistema es mas
facil de traicionar sin darse cuenta, porque casi cualquier libreria de componentes trae un
radio por defecto.
## 7. Lo que Si y lo que No
### Si hacer
- Alternar bandas a sangre de `#000000` y `#FFFFFF`. Es la unica herramienta de ritmo que
tiene el sistema y hay que usarla de verdad, no una vez.
- Poner los titulos a 74px con interlineado 0.92 y tracking -0.04em, apilados sin gap. Las
lineas tienen que rozarse.
- Dejar el ano en mono a 15px a la derecha del titulo, a media altura. Es el unico sitio
donde entra la segunda familia.
- Dar radio 0 a todo, imagenes incluidas.
- Escribir las etiquetas pequenas en mayusculas de 10px u 11px con 0.14em de tracking. El
contraste entre esas mayusculas abiertas y el titular cerrado es la firma tipografica.
- Pegar el input y el boton compartiendo borde, para que se lean como un unico control.
- Alinear todo a la izquierda y dejar la pagina a sangre, sin ancho maximo.
- Reservar Smoke para banda oscura, o para texto grande si va sobre blanco.
### No hacer
- No meter ni un color cromatico, ni siquiera en un estado de error o en un enlace.
- No usar border-radius en nada. Ni 2px, ni en la imagen, ni en el avatar.
- No poner box-shadow ni drop-shadow. La profundidad es contraste de valor.
- No centrar el cuerpo ni los titulos. Todo lee a la izquierda.
- No subir el peso por encima de 500 para dar enfasis: sube el tamano o cambia de banda.
- No anadir divisores decorativos, filetes ni ornamentos entre bloques.
- No introducir una tercera familia. El mono es la unica desviacion permitida.
- No usar Smoke a tamano de cuerpo sobre blanco: se queda en 3.54:1 y no pasa AA.
- No meter un ancho maximo centrado: rompe el modelo de bandas a sangre.
## 8. Comportamiento Responsive
### Breakpoints *(derivados para completar el sistema)*
| Nombre | Ancho |
|---|---|
| sm | 640px |
| md | 768px |
| lg | 1024px |
| xl | 1440px |
No hay ancho maximo de contenedor en ningun breakpoint: lo que cambia es la escala del tipo,
no la caja.
### Cambios por breakpoint
- **Display:** de 74px baja a 40px en movil, conservando el interlineado 0.92 y el tracking
-0.04em. Las dos cosas son identidad, no ajuste optico.
- **Gap de seccion:** de 96px a 56px.
- **Banda asimetrica:** el reparto texto izquierda e imagen derecha se apila, texto primero.
- **Navegacion:** la hamburguesa ya es el menu, asi que no colapsa nada. El logotipo se
queda centrado.
- **Modal:** pasa a ocupar casi todo el ancho con 18px de margen lateral. El input y el
boton dejan de ir en linea y se apilan, pero el boton conserva el relleno blanco.
- **Padding de banda:** 18px a los lados en movil, 22px de 768px en adelante.
### Touch targets
El input y el boton del modal tienen 22px de padding vertical, asi que ya pasan de 44px de
alto. El enlace con flecha, en cambio, es texto suelto de 15px: en movil hay que darle 12px
de padding vertical invisible para que sea tocable, sin cambiar nada de su aspecto.
*(derivado para completar el sistema)*
### Filosofia responsive
El sistema es de bandas, y las bandas no tienen problema de ancho. Lo unico que hay que
gestionar al estrechar es que el titular no se rompa en cuatro lineas: primero baja la
escala del display, y solo despues se toca la disposicion.
## 9. Guia de Prompts para Agentes
### Referencia rapida de color
- fondo oscuro: `#000000`
- fondo claro: `#FFFFFF`
- superficie de producto: `#EEEEEE`
- texto sobre oscuro: `#FFFFFF`
- texto sobre claro: `#000000`
- texto secundario: `#888888` (solo sobre oscuro)
- hairline: `#CACACA` sobre blanco, `#FFFFFF` sobre negro
- accion: no hay color de accion
### Prompt de inicializacion de sesion
```
Trabaja con el sistema A24. Solo dos valores reales, #000000 y #FFFFFF, mas #EEEEEE
para el panel de producto, #888888 para texto secundario sobre negro y #CACACA para
hairline sobre blanco. Cero color cromatico. Tipografia: Instrument Sans 400 y 500
para todo, IBM Plex Mono 400 a 15px solo para el ano junto al titulo. Display a 74px
con line-height 0.92 y tracking -0.04em. Mayusculas pequenas a 10px u 11px con 0.14em.
Espaciado base 4px, gap por defecto 9px, 96px entre secciones. border-radius 0 en
absolutamente todo. Prohibido box-shadow y prohibido cualquier color.
```
### Prompt: crear pantalla nueva
```
Monta la pantalla como bandas a sangre alternando #000000 y #FFFFFF, sin ancho maximo.
En la banda oscura, titulos apilados en Instrument Sans 400 a 74px, line-height 0.92,
tracking -0.04em, color #FFFFFF, sin gap entre lineas, y el ano a la derecha en IBM
Plex Mono 15px. Etiqueta de seccion en mayusculas de 11px con 0.14em. Accion como
enlace de texto de 15px con una flecha delante, sin fondo ni borde. 96px entre bandas.
Radio 0 y sin sombras.
```
### Prompt: anadir componente al kit
```
Anade el componente con border-radius 0 y sin sombra. Si necesita separarse del fondo,
cambia de banda o usa #EEEEEE, nunca un borde de color ni una elevacion. Si necesita un
estado de accion, resuelvelo invirtiendo valor (relleno blanco sobre negro), no
introduciendo un acento. La segunda familia solo puede aparecer si el dato es tecnico:
ano, codigo, referencia.
```
### Prompt: revision de consistencia
```
Revisa la pantalla contra el sistema A24 y senala: 1) cualquier valor de color que no
sea #000000, #FFFFFF, #EEEEEE, #888888 o #CACACA, 2) cualquier border-radius distinto
de 0, 3) cualquier box-shadow o filtro de sombra, 4) cualquier texto centrado,
5) cualquier peso por encima de 500, 6) cualquier titular con line-height por encima
de 1, 7) uso de #888888 a tamano de cuerpo sobre fondo claro, 8) uso del mono fuera de
un dato tecnico.
```
### Prompt: variante de campana
```
Para una campana puedes llevar el display por encima de 74px y dejar que el titulo
salga del encuadre por la derecha, como hace el cartel de una pelicula. Tambien puedes
poner la foto a sangre completa detras del texto. Lo que no puedes cambiar: el
monocromo, el radio 0, la ausencia de sombra y el interlineado por debajo de 1 en el
bloque de titulos.
```
## 10. Movimiento (Motion)
El sitio apoya casi todo en el corte, no en la transicion. La tabla es
*(derivada para completar el sistema)* a partir del comportamiento observado.
| Elemento | Propiedad | Duracion | Curva |
|---|---|---|---|
| Enlace con flecha, hover | opacity | 120ms | linear |
| Titulo de pelicula, hover | color | 150ms | linear |
| Modal, entrada | opacity | 200ms | ease-out |
| Boton solido, hover | background-color | 120ms | linear |
| Cambio de banda al hacer scroll | ninguna | 0ms | corte seco |
Principios: nada escala, nada rebota, nada se desliza. Una curva elastica en un sistema de
esquinas vivas se nota inmediatamente. Cuando haya duda, la respuesta es el corte. Respetar
siempre `prefers-reduced-motion`.
## Anexo: Stack tecnico detectado
| Aspecto | Valor |
|---|---|
| URL de origen | https://a24films.com |
| Tema | mixed en la ficha de origen, se publica como dark porque la portada abre en negro |
| Familia de color | neutral |
| Color dominante declarado | `#000000` |
| Tipografias reales | NB International Web, NB International Mono Web |
| Disponibles en Google Fonts | Ninguna de las dos. Sustituidas por Instrument Sans e IBM Plex Mono |
| Unidad base de espaciado | 4px |
| Densidad | comoda |
| Ancho maximo | ninguno, pagina a sangre |
| Radios | 0 en todo |
| Sombras | ninguna |
| Gradientes | ninguno |
| Imagenes | fotograma de pelicula a sangre, retrato en blanco y negro de alto contraste, producto aislado sobre `#EEEEEE`. Iconos de linea de 1.5px |
Nota de fidelidad: la identidad central (paleta, escala, radio 0, ausencia de sombra,
interlineado del display) sale del sitio real y de su ficha publica. La sustitucion
tipografica esta declarada arriba. Los estados de interaccion, los colores semanticos, los
breakpoints y la tabla de motion estan marcados como derivados alli donde aparecen. Los
contrastes se han calculado para esta ficha y uno de ellos corrige la descripcion de la
fuente original.