The Four Directions

Four complete, mutually exclusive color systems. Each keeps the same law: an achromatic ink-on-paper base, one hue family, one AA-verified functional accent, color never as decoration. These cards stay in their own colors regardless of the toolbar, for side-by-side comparison; everything else in the doc follows your selection.

What the toolbar changes

Logo (hero and §02), every link and focus ring, the 3px instrument bar, section numerals and eyebrows, callout tints, buttons, form focus, swatch galleries (§04), the token drop-in (§03), and chart series (§12). What it never changes: ink, paper, greys, type, spacing, layout, voice. The as-built foundation is direction-independent by design.

Brand & Logo

The mark: an isometric lattice of three hexagonal cells, each shaded as three rhombic faces, bound by a 16px round-join outline whose interior strokes form a CS monogram. As built, the faces are three greys (top #E6E6E6, side #D9D9D9, bottom #CCCCCC). logotype.svg cls-3/cls-1/cls-4

The mark in the active direction proposed

Full variant gallery

Model explorations exploration only

Nine image-model renders (nano-banana pipeline / gemini-3.1-flash-image-preview; fal.ai / flux-pro/kontext) used as perception probes, not production art. They earned their keep twice: exposing the medal-podium reading that demoted V2, and proposing the sweep that became V5.

Tokens

The site has a real token layer: one :root block. The as-built values and their two defects, then the drop-in block for the direction you have selected.

Drop-in block: active direction proposed

/* Climate Synthesis - CONDUCTOR (2026-07-22) */
:root{
  --ink:#1f1f1f; --paper:#ffffff; --muted:#5f6368; --faint:#8a8f96; --rule:#d9dce1;
  /* spectrum - graphic only, never text */
  --silver:#C9CFD6; --champagne:#E8D9B4; --gold:#D9AE5F; --copper:#CE7B45; --ember:#B85C38;
  --deep:#9C4B26;  /* links/CTA/focus · 6.09:1 · also fixes the undefined-var bug */
  --accent-soft:#FBF4EA; --accent-line:#EDDCC3;
  --spectrum:linear-gradient(90deg,#C9CFD6,#E8D9B4 28%,#D9AE5F 52%,#CE7B45 76%,#B85C38);
}
.accent-top{ background:var(--spectrum); }
footer{ color:var(--muted); }  /* clears the AA failure */

/* Climate Synthesis - PLASMA (2026-07-22) */
:root{
  --ink:#1f1f1f; --paper:#ffffff; --muted:#5f6368; --faint:#8a8f96; --rule:#d9dce1;
  /* ramp - graphic only, never text */
  --pale:#F2BE7E; --amber:#F0A860; --magenta:#C05077; --violet-mid:#7C4B9B; --violet:#543A8C;
  --deep:#5B3E9E;  /* links/CTA/focus · 7.99:1 · also fixes the undefined-var bug */
  --accent-soft:#F6F1FA; --accent-line:#DFD3EE;
  --spectrum:linear-gradient(90deg,#F2BE7E,#F0A860 28%,#C05077 52%,#7C4B9B 76%,#543A8C);
}
.accent-top{ background:var(--spectrum); }
footer{ color:var(--muted); }  /* clears the AA failure */

/* Climate Synthesis - BLUEPRINT (2026-07-22) */
:root{
  --ink:#1f1f1f; --paper:#ffffff; --muted:#5f6368; --faint:#8a8f96; --rule:#d9dce1;
  /* ramp - graphic only, never text */
  --paperblue:#D9E6EF; --sky:#A7C8DC; --cyan:#3E90B0; --depth:#2A6E93; --prussian:#1B3A57;
  --deep:#1F5D7A;  /* links/CTA/focus · 7.23:1 · also fixes the undefined-var bug */
  --accent-soft:#EEF4F8; --accent-line:#CFE0EA;
  --spectrum:linear-gradient(90deg,#D9E6EF,#A7C8DC 28%,#3E90B0 52%,#2A6E93 76%,#1B3A57);
}
.accent-top{ background:var(--spectrum); }
footer{ color:var(--muted); }  /* clears the AA failure */

/* Climate Synthesis - TERRAIN (2026-07-22) */
:root{
  --ink:#1f1f1f; --paper:#ffffff; --muted:#5f6368; --faint:#8a8f96; --rule:#d9dce1;
  /* ramp - graphic only, never text */
  --sand:#E5DFC2; --meadow:#B5C98E; --green:#7EA055; --sea:#3E7488; --ocean:#24536B;
  --deep:#276749;  /* links/CTA/focus · 6.73:1 · also fixes the undefined-var bug */
  --accent-soft:#EFF4EA; --accent-line:#D8E3CC;
  --spectrum:linear-gradient(90deg,#E5DFC2,#B5C98E 28%,#7EA055 52%,#3E7488 76%,#24536B);
}
.accent-top{ background:var(--spectrum); }
footer{ color:var(--muted); }  /* clears the AA failure */

Color

As built: achromatic ink-on-paper plus one 3px inherited-slate bar. Proposed: the active direction below. Click any hex to copy. Switch directions from the toolbar to re-skin this section.

Usage law (all directions)

Typography

One face, direction-independent: Open Sans, 16px on 1.62, bold headings, uppercase letter-spaced eyebrows. No display face. The color decision deliberately does not touch this layer. cs-home.html L31

Spacing & Layout

A single centered reading column, direction-independent.

Links & Actions

As built, a{color:var(--deep)} references a token that does not exist, so links render in inherited ink and the page's one conversion (the contact mailto) has zero chromatic salience. Every direction fixes this by defining --deep. cs-home.html L48

Buttons proposed

The site has no buttons as built; its one action is a text link. If buttons ever ship (a report download, a repo link), this is the spec: three weights, accent-driven, no gradients on interactive surfaces (usage law #4).

Cards & Content Blocks

As built: two structures carry the page: the three-column feature row and the stacked "opens" definition list, both achromatic. Proposed: one optional card surface on the direction's tint for future secondary content.

Forms proposed

None as built (contact is a mailto). The spec if one ships: hairline fields, accent focus, no decoration.

Feedback & Callouts

Two callout weights, tint-grounded in the active direction. Accent-on-tint stays AA in all four (conductor 5.38:1 · plasma 7.19:1 · blueprint 6.52:1 · terrain 6.02:1).

Data & Figures proposed

Grid modeling ships charts. When figures reach the site or reports, series colors come from the active ramp, and one rule matters more than any palette choice here.

Nav & Header

No navigation as built; the header is the logotype alone, preceded by the site's one chromatic element: the full-width 3px bar.

As built: inherited slate #4C809A:

Proposed: the active direction's instrument line (also live at the top of this page):

Motion

None as built; the recommendation in every direction is to keep it that way. Stillness is coherent with the evidence-first voice, and the usage law already forbids animating the ramp. This doc's own toggle transitions are doc chrome, not a site proposal.

Information Architecture

Voice & Copy

Measured, evidence-first, pre-emptively honest; the register argues by disclosure, not adjectives.

"The framework places no thumb on the scale." · "What the analysis shows is what we report." · "…with every assumption visible and every result reproducible." · "…replication is what separates a tool that can be trusted from one taken on faith." climate-synthesis.pages.dev, extracted 2026-07-22

Tech Stack & Provenance

As-Built Notes / Inconsistencies

Defects found during extraction, severity-ordered, each verified against the fetched source and contrast math (2026-07-22). Direction-independent: every candidate system fixes 1, 2 and 4 by construction.

Changelog