Proyecto sin nombre

1 · La ficha del sello

Sin esta ficha no hay dirección de arte, hay decoración. Es el §6 del capítulo 17.

2 · Color: escalas y contraste medido

Una escala de diez pasos por color de marca (50–900) y una de neutros. Los derivados son una decisión: se aprueban con el contraste delante, no a ojo.

Escala del color de marca

Escala de neutros

Escala del acento

Contraste medido de los pares que importan

Texto normal exige AA 4,5:1 · texto grande (24 px o 19 px en negrita) exige 3:1 · AAA pide 7:1. Se mide, no se estima.

3 · Tipografía: una escala cerrada y fluida

Una familia (dos como máximo), escala fija de titulares y cuerpos, un clamp() por tamaño y sin media queries. Suelo de 13 px, cuerpos de 16 px para arriba.

La escala, con sus dos extremos y el clamp() que sale

4 · Espacio, formas y elevación

Una rejilla de espaciado, tres radios como máximo (el radio es una decisión de marca) y dos o tres niveles de sombra, todos con el mismo tinte.

Escala de espacio

Radios y sombras

5 · Movimiento: reglas, no efectos

Estos valores son invariantes del estudio: no se cambian por gusto. Todo movimiento tiene un motivo que se explica en una frase.

6 · La lista negra

Marca lo que apareció en este proyecto. Cada marca es un pecado que se corrige aunque esté bonito.

7 · La vara de aceptación

La lista que se pasa antes de decir «terminado». Si algo no está marcado, no está terminado, aunque la web se vea bonita.

8 · La muestra

El sistema aplicado a bloques reales. Si aquí se ve sucio, en el sitio también: esta es la vara antes de escribir una línea de producción.

8 · Exportar

Cinco salidas. La primera —el prompt— es la que se entrega a una sesión nueva de Hermes para que arme el proyecto con el sistema ya decidido. Las otras cuatro son los archivos que van dentro del proyecto del cliente.

Para empezar en una sesión nueva: pulsa Prompt para Hermes (.md), después Copiar al portapapeles y pégalo allá; o descarga el archivo y dile la ruta, que llega entero y no se corta al pegarlo.