Aceite y aguaOil & water

1 · Concepto1 · Concept

Estilo distill.pub: una columna de prosa serif angosta (~68ch), notas al margen, figuras que pueden sangrar a ancho completo, y una TOC pegajosa. El tono es de paper técnico interactivo, no de landing de marketing: los números mandan, la prosa explica, y la honestidad del sistema (abstenciones, fallbacks señalizados) se muestra como rasgo de diseño, no se esconde. A distill.pub style: a narrow serif prose column (~68ch), margin notes, figures that can bleed full-width, and a sticky TOC. The tone is an interactive technical paper, not a marketing landing: numbers lead, prose explains, and the system's honesty (abstentions, signaled fallbacks) is displayed as a design feature, never hidden.

2 · Color

Marca y superficiesBrand & surfaces

Reglas: el ámbar es el acento (enlaces, énfasis, valores protagonistas); el teal es estructura y navegación activa. El texto siempre viste tokens de tinta (--ink-*), nunca colores de serie. Los colores de estado (ok / warn / error) están reservados y jamás se reutilizan como series de datos. Rules: amber is the accent (links, emphasis, hero values); teal is structure and active navigation. Text always wears ink tokens (--ink-*), never series colors. Status colors (ok / warn / error) are reserved and never reused as data series.

3 · Tipografía3 · Typography

Serif (Charter/Georgia) para la prosa — voz de paper. Sans (system-ui) para UI, títulos, tablas y captions. Mono para todo número tabular, id de método (sw_simandoux 0.1.0) y extractos del ledger — los números son datos, se alinean con tabular-nums. Serif (Charter/Georgia) for prose — the paper voice. Sans (system-ui) for UI, headings, tables, captions. Mono for every tabular number, method id (sw_simandoux 0.1.0) and ledger excerpt — numbers are data, aligned with tabular-nums.

Escala: 2.4 / 1.55 / 1.12 / 1.06 rem — poca jerarquía, mucha lectura.Scale: 2.4 / 1.55 / 1.12 / 1.06 rem — little hierarchy, much reading.

4 · Layout distill4 · Distill layout

Rejilla de tres pistas: TOC pegajosa (15rem) · prosa (44rem) · canal de notas al margen (13rem, flotadas). Las figuras clave usan .bleed para sangrar más allá de la prosa. Bajo 64rem la TOC desaparece y las notas fluyen en línea. Three-track grid: sticky TOC (15rem) · prose (44rem) · margin-note channel (13rem, floated). Key figures use .bleed to escape the prose column. Under 64rem the TOC hides and notes flow inline.

5 · Componentes5 · Components

Fichas de métrica (hero numbers)Stat tiles (hero numbers)

Banner de abstención (la honestidad es un feature)Abstention banner (honesty is a feature)

Tabla comparativa (leaderboard)Comparison table (leaderboard)

Tarjeta de informe finalFinal report card

Los informes reales (Markdown renderizado) se muestran así — cada tarjeta abre el informe completo con sus figuras, ledger y grafo de metodología: The real reports (rendered Markdown) are showcased like this — each card opens the full report with its figures, ledger and methodology graph:

Extracto de ledgerLedger excerpt

{
  "sw_summary": { "method": "sw_simandoux", "method_source": "agent" },
  "reclosed_steps": [], "authored_core": 3
}

Figura con marcoFramed figure

6 · Color de datos (validado)6 · Data color (validated)

Paletas computadas, no intuidas: pasan banda de luminosidad OKLCH, piso de croma, separación CVD adyacente y contraste ≥3:1 contra su superficie — en ambos temas por separado (el oscuro no es un flip automático). Palettes are computed, not eyeballed: they pass the OKLCH lightness band, chroma floor, adjacent CVD separation and ≥3:1 contrast against their surface — in each theme separately (dark is not an automatic flip).

Categórica (modelos) — orden fijo, nunca ciclada Categorical (models) — fixed order, never cycled

Secuencial (profundidad/magnitud) y divergente (Δ v7↔v8) Sequential (depth/magnitude) and diverging (Δ v7↔v8)

Divergente agua←gris→aceite: los deltas de net pay entre versiones se leen en la metáfora del proyecto. Máx. 5 series; la 6ª se pliega en "Other". Toda gráfica lleva tooltip al hover y vista de tabla. Diverging water←gray→oil: net-pay deltas across versions read in the project's metaphor. Max 5 series; a 6th folds into "Other". Every chart ships hover tooltips and a table view.

7 · Dinamismo7 · Motion & dynamics

Movimiento editorial, no decorativo: (a) revelado al hacer scroll (10px, 500ms) como el de estas secciones; (b) transición de tema en 260ms; (c) hover de tarjetas −2px; (d) scrollspy en la TOC; (e) gráficas con crosshair/tooltip y filtros de una fila. Nada parpadea ni rebota. prefers-reduced-motion apaga todo. Motion is editorial, not decorative: (a) scroll-reveal (10px, 500ms) like these sections; (b) 260ms theme transition; (c) −2px card hover; (d) TOC scrollspy; (e) charts with crosshair/tooltips and one-row filters. Nothing blinks or bounces. prefers-reduced-motion turns it all off.

8 · Bilingüe8 · Bilingual

Un solo HTML, contenido duplicado en nodos <span data-lang="es|en">; el CSS muestra solo el idioma activo (html[data-lang-active]) — sin flash, sin JS por nodo, indexable. La elección persiste en localStorage y arranca del idioma del navegador. Los términos técnicos (net pay, ledger, Simandoux) no se traducen. A single HTML, content duplicated in <span data-lang="es|en"> nodes; CSS shows only the active language (html[data-lang-active]) — no flash, no per-node JS, indexable. The choice persists in localStorage and boots from the browser language. Technical terms (net pay, ledger, Simandoux) stay untranslated.

9 · Estructura de la página final9 · Final page structure

1. Hero — el pitch en una frase + 4 fichas de métrica.Hero — one-sentence pitch + 4 stat tiles.
2. El problema — informes petrofísicos sin humano en el loop, con evidencia trazable.The problem — petrophysical reports with no human in the loop, evidence-traceable.
3. El invariante — callout: el LLM nunca calcula.The invariant — callout: the LLM never computes.
4. Metodología — pipeline determinista → loop del analista → validadores → gate (diagrama interactivo).Methodology — deterministic pipeline → analyst loop → validators → gate (interactive diagram).
5. Resultados — leaderboard por modelo, el experimento de seeds, el flip autor (v7↔v8), gráficas con la divergente.Results — per-model leaderboard, the seed experiment, the author flip (v7↔v8), diverging-palette charts.
6. Informes finales — galería de tarjetas que abren los reports reales por modelo/pozo.Final reports — card gallery opening the real per-model/per-well reports.
7. Honestidad — abstenciones, fallbacks señalizados, límites.Honesty — abstentions, signaled fallbacks, limits.
8. Reproducibilidad — stack, seeds, ledgers, repo.Reproducibility — stack, seeds, ledgers, repo.