Diagrammatic Grammar

[v0.2]

The brand is the diagrams. The grammar defines the primitives. Every xCO diagram is assembled from these — no others.

The visual language is raw and computational. Rectangles are the atomic unit. Hatching encodes weight. Lines are crisp and precise — no pretence of hand-drawing. The diagram should feel like it was built by people who take measurement seriously.

— Two line weights: 1.5px structural · 0.75px texture
— Rectangle is the atomic unit — solid, hatched, or dashed border
— Hatching density encodes character: sparse (open) → dense (constrained)
— Three node types: Risk, Option, Field
— One annotation style: DM Mono italic, marked uncertainty
— One multi-solve signature: stacked ticks
— One scale marker: faint rule, left-margin label

Line

Two weights, no others. Structural (1.5px) carries the diagram. Texture (0.75px) carries density — hatching, grid, leaders. Both are crisp and precise.

usage

<JitteredLine
  x1={20} y1={100}
  x2={380} y2={100}
  amplitude={1.8}
  seed={42}
/>

// Annotation variant (thin, dashed):
<JitteredLine
  x1={20} y1={140}
  x2={380} y2={140}
  annotation
  seed={7}
/>

RiskNode

The triggering condition. Ember fill — the only node type that uses the accent colour. Used sparingly: one risk node per diagram.

usage

// Triggers the response — ember fill, paper text
<RiskNode cx={200} cy={80} label="Arctic destabilisation" />

OptionNode

The response. Default node — white fill, ink border. Frontier and Fortress are both OptionNodes. Hatching optional to encode weight.

usage

// The response — paper fill, ink stroke (default node)
<OptionNode cx={200} cy={80} label="Frontier" />

FieldNode

The systemic precondition. Cool-coloured dashed border — visually quieter, foundationally more important. Field is never a peer of Frontier and Fortress; it's what makes them possible.

usage

// Systemic precondition — cool stroke, dashed border
<FieldNode cx={200} cy={80} label="Field" sublabel="precondition" />

MultiSolveTicks

The multi-solving signature. Stacked horizontal ticks beneath a node show how many distinct contributions it makes — the visual rhyme that runs through the entire portfolio system.

usage

// A food forest cools AND recharges aquifer AND provides nutrition
// → 3 ticks
<OptionNode cx={200} cy={80} label="Peri-urban food forest" />
<MultiSolveTicks cx={200} y={112} count={3} />

ScaleRule

Scale boundary marker. When a diagram crosses scales — macro, bioregional, urban, neighbourhood — draw this rule. The scale label lives in the left margin in DM Mono italic.

usage

// Scale boundary — macro to bioregional
<ScaleRule y={120} label="macro" x={40} width={320} />
<ScaleRule y={220} label="bioregional" x={40} width={320} />

Annotation

Marginalia in DM Mono italic. Every diagram should permit and visibly invite these. This is what differentiates xCO diagrams from McKinsey diagrams — the working is visible.

usage

// Marginalia — always mark uncertainty inline
<Annotation
  x={20}
  y={160}
  text="[inference] governance assumes legionella testing — unverified with Madrid water authority"
/>