Sistema de esta web
Pocas reglas, bien elegidas.
Esta web es un sistema pequeño: ocho tamaños de texto, dos pesos, cuatro grises y dos acentos de estado, una curva de movimiento principal y siete sonidos. Casi todo lo que ves en ella sale de aquí. Lo diseñé y lo construí con Claude Code.
- 8 tamaños de texto
- 2 pesos: 400 y 500
- 1,8 MB pesa la home al abrirla
- 0 cookies
01 · Reglas. Tres reglas que deciden todo lo demás.
Regla 1: El contenido lleva el color; la interfaz, no.
La interfaz es blanca y cuatro grises; el color se reserva para estados: el verde de la disponibilidad y el azul de Figma en marcos, foco y etiquetas de selección. Así los vídeos y las pantallas de los casos son lo que llama la atención.
Regla 2: Dos pesos y ninguna negrita.
La jerarquía sale del tamaño y del gris, no del grosor. Con 400 y 500 basta para leer rápido sin gritar.
Regla 3: El movimiento confirma; no decora.
Cada animación acompaña algo que pasa: entras, haces scroll, pulsas. Si activas «reducir movimiento», la web se queda casi quieta y todo sigue funcionando.
02 · Tipografía. Ocho tamaños, dos familias.
Inter para leer e IBM Plex Mono para datos y etiquetas. Cada tamaño tiene un uso; los grandes se ajustan en tres anchos de pantalla.
| Token | Uso | Tamaños | Peso |
|---|---|---|---|
| t8 | Titulares y cifras | 56 / 48 / 38 px | 500 |
| t7 | Títulos de sección | 36 / 32 / 28 px | 500 |
| t6 | Subtítulos, decisiones y citas | 24 / 22 px | 500 |
| t5 | Entradillas | 22 / 20 px | 400 |
| t4 | Texto de lectura | 18 / 17 px | 400 |
| t3 | Tarjetas y listas | 15 px | 400 |
| t2 | Navegación, pies y metadatos | 13 px | 400 |
| t1 | Etiquetas y datos | 11 px · IBM Plex Mono | 400 |
03 · Color. Cuatro grises, un fondo, dos líneas y dos acentos.
Todos los grises pasan AA sobre blanco salvo el más claro, que se reserva para etiquetas, números, notas de 11 px y adornos, y para la segunda frase del titular de la home en móvil, que a 30 px pasa AA como texto grande. El color solo aparece en estados: el verde de la disponibilidad y el azul de Figma en marcos, foco y etiquetas de selección.
| Color | Hex | Contraste sobre blanco | Uso |
|---|---|---|---|
| Tinta | #0A0A0A | 19,8:1 (AAA) | Titulares y texto principal |
| Gris 1 | #3A3A3A | 11,4:1 (AAA) | Texto de lectura en bloques |
| Gris 2 | #6B6B6B | 5,3:1 (AA) | Texto de apoyo y navegación |
| Gris 3 | #8A8A8A | 3,5:1 (Solo apoyo) | Etiquetas, números y adornos |
- #F3F3F3: Fondo de controles e imágenes que cargan
- rgba(0,0,0,.08): Separar sin cortar
- rgba(0,0,0,.14): Bordes de botones y campos
Estados
- Hover (#EBEBEB): Al pasar el ratón sobre un fondo gris
- Verde (#43B966): Disponibilidad
- Azul de Figma (#0D99FF): Marcos, foco y etiquetas de selección, como en Figma · 3,0:1 (Excepción). El único color que no pasa AA, y es a propósito: las etiquetas imitan la selección de Figma, y con un azul más oscuro el guiño deja de funcionar. Son textos cortos y decorativos.
04 · Espacio y radios. Diez espacios, cuatro radios.
El espacio crece de 4 en 4 hasta 16 y después se dobla.
4 · 8 · 12 · 16 · 24 · 32 · 48 · 64 · 96 · 128 px
- 4 px: etiquetas
- 8 px: tarjetas
- 16 px: paneles
- 999 px: botones
05 · Movimiento. Una curva para casi todo.
Arranca rápido y frena suave, como algo que se coloca en su sitio. Tres duraciones: 150 ms para responder, 300 para cambiar de estado y 600 para entrar en pantalla. Toca cada una.
Curva del sistema: cubic-bezier(.22,1,.36,1)
- 150 ms: Responder (Hover, pulsar, copiar)
- 300 ms: Cambiar de estado (Menú, pestañas, visor de imágenes)
- 600 ms: Entrar en pantalla (Contenido al hacer scroll)
06 · Sonido. Siete sonidos, ningún archivo.
Se generan en el navegador con Web Audio, así que no pesan nada. Suenan al usar la web y puedes apagarlos con «Sonido», en la barra lateral o en el menú. Aquí suenan siempre: pruébalos.
- Clic: 50 ms
- Toque: 35 ms
- Abrir: 370 ms
- Cerrar: 310 ms
- Activar: 190 ms
- Desactivar: 190 ms
- Copiar: 240 ms
07 · Componentes. Las piezas de la web.
Son los mismos que usan la home, los casos y la consultoría, no copias para esta página.
- Botones y enlaces · 14 px, peso 400 · fuera de la escala a propósito, para que se lean como acción
- Disponibilidad · el único verde de la interfaz, porque es el único estado vivo
- Cita · t6 en peso 400, con la comilla de apertura colgada fuera del margen
- Cifra · números tabulares para que no bailen al cambiar
«Vins tiene una visión muy amplia del producto: conecta las decisiones con sus consecuencias y va más allá de lo evidente.»
7,8 → 5,2 minutos por siniestro revisado
Para tu producto
Un sistema así, pero para un producto con más de 30 clientes y 210 componentes, es lo que hice con Ethos.
Para agentes
El mismo sistema, en el formato que lee una IA.