Imagen 3:2
México
El agua que no llega
Tres comunidades llevan semanas sin agua. La documentación muestra que el pozo se cerró en agosto.
Borrador para ratificación. El sistema de color, tipografía, layout, componentes P0 y gates de accesibilidad del nuevo El Tamiz.
design/tokens.json como fuente, CI, changelog, amendment.Diferido: secciones y colores de sección, ads, fotografía, bylines, timing del toggle de tema, prueba de lectores, mono. Detalle en §12.3.
Lo que el sistema protege cuando hay prisa.
Cuerpo AAA (≥ 7:1) en toda superficie. Claro por defecto; oscuro como opción diseñada, no como identidad por defecto.
SourceList, VerificationBox y CorrectionNotice hacen visible “periodismo con fuentes”. Son las piezas que reciben el diseño.
Filetes, espacio y retícula. Sin sombras de tarjeta, sin carruseles, sin parallax. El ámbar firma; la palabra carga.
H1 en Literata 600; retícula 3×3, separador de 2 px y “Periodismo selecto”. El lockup completo es texto, no imagen. El favicon es la retícula sola; la marca compacta es ET + retícula.
La retícula sola es el favicon; ET + retícula es la marca compacta. El punto ámbar se retiró.
La retícula reemplaza el punto y se sienta en la línea base. A 16 px, usa la retícula sola.
Ajustes del lockup en revisión: la cejilla y la retícula. El texto no cambia.
La capa semántica es la que usan los componentes. Los valores crudos viven solo en tokens.json. Los modos son un remapeo, no una segunda hoja.
| Token | Claro | Oscuro | Uso | Gate |
|---|---|---|---|---|
--color-bg | #FAF8F3 | #121417 | Page | — |
--color-bg-subtle | #F0EDE6 | #1A1E23 | Panels, SourceList, VerificationBox | — |
--color-fg | #171512 | #EDEAE3 | Body text | ≥ 7:1 |
--color-fg-muted | #5B564E | #A8A49B | Bylines, captions, metadata | ≥ 4.5:1 |
--color-brand | #8A5A00 | #E8B04B | Masthead, section labels, wordmark | ≥ 4.5:1 |
--color-on-brand | #FFF8E7 | #121417 | Text on brand | ≥ 4.5:1 |
--color-link | #1D4ED8 | #7FB2FF | In-body links, focus | ≥ 4.5:1 |
--color-live | #B00020 | #FF8A8A | Breaking, corrections, live | ≥ 4.5:1 |
--color-border | #DED8CB | #2A2F36 | Hairlines, dividers | Decorative |
| Par medido | Claro | Oscuro | Veredicto |
|---|---|---|---|
| Body on bg | 17.17 | 15.36 | AAA |
| Body on bg-subtle | 15.59 | 13.94 | AAA |
| Muted on bg | 6.86 | 7.42 | AA |
| Muted on bg-subtle | 6.22 | 6.74 | AA |
| Link on bg | 6.31 | 8.54 | AA |
| Link on bg-subtle | 5.73 | 7.75 | AA |
| Brand on bg | 5.58 | 9.44 | AA |
| On-brand on brand | 5.60 | 9.44 | AA |
| Live on bg | 6.90 | 8.13 | AA |
Cuerpo AAA en ambos modos y ambas superficies. Muted, link, brand y live pasan AA. El muted claro (6.86) es el único casi-AAA y se restringe a metadatos. Los colores de sección quedan diferidos; v1 usa etiquetas brand.
Literata para leer y display; Inter para la interfaz. Sin tercera familia. Tamaños en rem; los fluidos en clamp().
Lectura y display. 400, 500, 600; itálica para citas. Cubre el español en el subset latin.
Interfaz y metadatos. 400, 500, 600; cifras tabulares para fechas y conteos.
El preview carga Literata e Inter desde Google Fonts; producción las sirve self-hosted (woff2, subset latin).
¿Qué pasó con el niño? ¡Ñandú, ü, ÁÉÍÓÚ! El País, 21 oct 2026 — “La corrección cambió la cifra: de 3 a 30.”
Probar en todo componente que ponga mayúsculas, trunque, hifenice o use line-height apretado. Los signos invertidos no se recortan.
Página 1240 px; artículo 680–720; rail 300–320; gutter 24 móvil / 32 escritorio. Breakpoints 480, 768, 1024, 1280, 1440.
Todo múltiplo de 4; la mayoría de 8. Sin sombras de tarjeta; filetes de 1 px y espacio.
Cinco piezas que definen el sistema. El inventario P0 completo está abajo.
El masthead usa el lockup a 64 px en escritorio y 40 px sin bajada en móvil; el espécimen está a 64. El lockup es texto en Literata; el SVG es para contextos sin la fuente.
Tres comunidades llevan semanas sin agua. La documentación muestra que el pozo se cerró en agosto.
Tres comunidades llevan semanas sin agua. La documentación muestra que el pozo se cerró en agosto.
Los enlaces abren la fuente original.
Los enlaces abren la fuente original.
El set de lanzamiento. Las tres piezas de marca están especificadas arriba; el resto comparte las reglas de componentes.
| Componente | Para qué | Tokens | Notas |
|---|---|---|---|
| Masthead | Marca, secciones, búsqueda, tema | bg, fg, brand, border | Lockup de texto; 64 px escritorio, 40 px móvil sin bajada |
| SectionNav | Orientación de sección | fg, brand, focus | aria-current; teclado; scroll en móvil |
| Search | Encontrar contenido | bg, fg, focus | Diálogo/página; input 44 px; estado vacío |
| ArticleCard | Entrada a una historia | fg, muted, border | Lead/standard/compact/list; sin sombras |
| Byline | Atribución y tiempo | muted, link | Nombre, |
| SourceList | Probar las fuentes | bg-subtle, border, brand | El componente de marca; numerado; enlaces externos |
| VerificationBox | Mostrar cómo se verificó | bg-subtle, border | 2–4 pasos; enlace a metodología |
| CorrectionNotice | Corregir en público | bg-subtle, live | Filete live de 3 px + etiqueta de texto |
| Figure | Imagen, pie, crédito | border, muted | Aspecto fijo; crédito siempre; sin texto sin scrim |
| PullQuote | Énfasis | brand, fg | Filete brand de 2 px; 30ch; itálica |
| LiveBadge | Estado urgente | live, bg | Punto + etiqueta; sin pulso con reduced motion |
| Pagination | Navegar el archivo | fg, border, focus | Objetivos 44 px; aria-current |
| Newsletter | Suscripción | bg-subtle, link | Etiqueta, error, privacidad; sin dark patterns |
| Footer | Mapa y confianza | muted, border | Metodología, correcciones, privacidad, contacto |
| SkipLink | Salto de teclado | bg, fg | Visible al foco; destino #main |
| Focus | Ubicación de teclado | focus | Anillo 2 px + offset 2 px; nunca outline:none |
P1: live blog con pausa, autor, tag, progreso, TOC, relacionados, share, “en contexto”. P2: persistencia del tema, guardados, personalización, data-viz, comentarios solo con moderación.
Los gates no son aspiraciones; son la definición de terminado.
| Gate | Requisito |
|---|---|
| Cuerpo | ≥ 7:1 en bg y bg-subtle |
| Secundario, link, live | ≥ 4.5:1 en ambas superficies |
| UI y foco | ≥ 3:1 contra colores adyacentes |
| Foco | Visible en todo interactivo; anillo 2 px + offset 2 px |
| Objetivos | ≥ 24×24; 44×44 en acciones primarias móviles |
| Enlaces | Subrayados en cuerpo; hover/focus no solo color en nav |
| Urgente | Etiqueta de texto, nunca solo color |
| Teclado | Menús, búsqueda y diálogos operables; Esc cierra; foco vuelve |
| Reflow | 320 px; zoom 200%; text-spacing; sin scroll horizontal |
| Motion | Reduced motion; sin autoplay; sin carrusel automático |
| Español | lang="es-MX"; acentos; signos invertidos |
El sistema vive en tokens; las decisiones viven en un registro.
120–200 ms hover/focus; 240 ms overlays; sin parallax, sin scroll-jacking, sin autoplay. Reduced motion colapsa a opacidad o nada.
Literata + Inter self-hosted, woff2, subset latin. ≤ 120 KB de fuentes (ideal ≤ 80). LCP < 2.5 s, CLS < 0.1, INP < 200 ms.
design/tokens.json como fuente; CI de hex crudo y matriz de contraste; changelog; amendment. Oli decide diseño; CTO implementa.
| Fase | Trabajo | Gate |
|---|---|---|
| 2 | Tokens + dos páginas espécimen (home, artículo) en worktree; sin deploy | Design review |
| 3 | Prueba de lectores 15–25 (validación diferida) | Veredicto registrado |
| 4 | DLS v1 ratificado; construir P0 | D3 registrado |
| 5 | Revisión en staging.eltamiz.com.mx | Firma de Oli |
| 6 | Cutover a producción según thread #416 | Gate humano |
Si estás de acuerdo, marca las seis casillas y responde “ratificado” en el hilo. El set congela en v1.0.0; los cambios van por amendment.
Oli: ______________________________ · Fecha: ______________
Diferido, no bloquea tokens: secciones y colores de sección, ads, fotografía, bylines, timing del toggle, prueba de lectores, mono, target de accesibilidad.
Lo que la ratificación no congela.
| Item | Owner | Recomendación |
|---|---|---|
| Secciones y colores de sección | Oli + contenido | Fijar la taxonomía antes de estilizar; v1 usa etiquetas brand |
| Ads al lanzamiento | Oli | Si sí, reservar slots y paleta aparte; v1 no reserva |
| Fotografía: grading/proxy | CTO | Cachear/proxy; graduar solo si la imagen no se lee |
| Modelo de bylines | Oli + Lexie | Autores individuales; el componente soporta “Redacción” |
| Timing del toggle de tema | Oli | Los tokens van en v1; el toggle al lanzamiento o después |
| Prueba de lectores 15–25 | CTO | Correr después de ratificar; insumo para v1.1 |
| Mono opcional | CTO | Diferir; Inter tabular cubre datos en v1 |
| Target de accesibilidad | Oli | AAA cuerpo + AA secundario (este draft) |
DLS v1 (Nocturno) · v1.0.0-rc.1 · 2026-10-21 · Borrador para ratificación de Oli · unodos.news/docs/2026-10-21-eltamiz-dls-v1.md · Lockup final · Diez direcciones · Shortlist · thread #438.