@ryanyahya/opendoc 0.4.0

package/starter/themes/civic-spectrum/index.ts

@@ -0,0 +1,57 @@
+import type { DocTheme } from 'opendoc/themes';
+
+/** Civic Spectrum signal colors with the owner's requested white page surface. */
+export const colors = {
+  stock: '#FFFFFF', ink: '#17232B', blue: '#2F7EA5', muted: '#68747A', rule: '#C9CEC7',
+  sky: '#7ABED0', leaf: '#5F9D7A', sun: '#E3C84F', flame: '#E27D47', violet: '#7D6FA6',
+  inverse: '#F8F5EC', inverseMuted: '#B9C2C3', inverseRule: '#516068',
+} as const;
+
+export const metrics = {
+  margin: 48, bottomMargin: 56, columns: 6, gutter: 12, baseline: 4,
+  mainWidth: 328, railHeight: 12, signalSize: 8, badgeSize: 132,
+  railWeights: [2, 1, 3, 1.5, 2, 1],
+} as const;
+
+export const theme: DocTheme = {
+  id: 'civic-spectrum', name: 'Civic Spectrum',
+  description: 'Warm civic modernism: an unequal spectrum rail, square signals, compact grotesk type, and generous asymmetric space.',
+  body: 'OpenDoc Sans', heading: 'OpenDoc Sans',
+  ink: colors.ink, muted: colors.muted, accent: colors.blue, paper: colors.stock, line: colors.rule,
+  fontSize: 11, lineHeight: 1.5, margin: metrics.margin, paragraphGap: 12,
+  pageSize: 'A4', runningHeader: true, runningFooter: true, footerLabel: 'Civic Spectrum',
+  useFor: ['Public information', 'Community and cultural reports', 'Editorial explainers'],
+  principles: ['One grid, many voices.', 'Use color to classify.', 'Make space part of the structure.'],
+  palette: [
+    { name: 'Signal blue', value: colors.blue, role: 'Orientation and the primary emphasis' },
+    { name: 'Sky', value: colors.sky, role: 'Supporting information' },
+    { name: 'Leaf', value: colors.leaf, role: 'Progress and participation' },
+    { name: 'Sun', value: colors.sun, role: 'Attention and selected evidence' },
+    { name: 'Flame', value: colors.flame, role: 'Action and urgency' },
+    { name: 'Violet', value: colors.violet, role: 'Context and reflection' },
+    { name: 'Stock', value: colors.stock, role: 'White page surface' },
+    { name: 'Ink', value: colors.ink, role: 'Primary text and inverse surface' },
+    { name: 'Muted', value: colors.muted, role: 'Secondary text' },
+    { name: 'Rule', value: colors.rule, role: 'Quiet structural boundaries' },
+  ],
+  geometry: ['A4 portrait; 48 pt margins; six columns with 12 pt gutters.', 'Unequal rail: 2 : 1 : 3 : 1.5 : 2 : 1; 12 pt high.', 'Square 8 pt signals and 132 pt outlined or solid badges.', 'Four-column reading field with a two-column supporting field.', '4 pt baseline; square corners; no gradients or shadows.'],
+  design: {
+    page: { margin: { top: 48, right: 48, bottom: 56, left: 48 }, style: { backgroundColor: colors.stock } },
+    typography: {
+      h1: { fontSize: 42, lineHeight: 1.04, letterSpacing: -0.8, marginBottom: 20 },
+      h2: { fontSize: 23, lineHeight: 1.1, letterSpacing: -0.35, marginTop: 24, marginBottom: 12 },
+      h3: { fontSize: 14, lineHeight: 1.2, marginTop: 20, marginBottom: 8 },
+      label: { fontSize: 8, fontWeight: 600, letterSpacing: 1.1, color: colors.ink },
+      lead: { fontSize: 16, lineHeight: 1.4, color: colors.muted },
+      small: { fontSize: 8, lineHeight: 1.35, color: colors.muted },
+      caption: { fontSize: 9, lineHeight: 1.4, color: colors.muted },
+    },
+    title: { block: { borderBottomWidth: 0, borderTopWidth: 5, borderColor: colors.blue, paddingTop: 20, paddingBottom: 0, marginBottom: 28 }, heading: { fontSize: 42 }, eyebrow: { marginBottom: 16 } },
+    cover: { page: { backgroundColor: colors.stock }, block: { borderTopWidth: 12, borderColor: colors.blue, marginTop: 40, paddingTop: 32 }, title: { fontSize: 52, lineHeight: 1.02, letterSpacing: -1.1 } },
+    furniture: { uppercaseHeader: false, header: { fontSize: 8, letterSpacing: 0.4, paddingBottom: 20 }, footer: { borderTopWidth: 0.75, borderColor: colors.rule, paddingTop: 12 }, text: { fontSize: 8, fontWeight: 600, color: colors.ink }, pageNumber: 'page' },
+    table: { header: { backgroundColor: colors.ink, borderBottomWidth: 0 }, headerText: { color: colors.inverse, fontWeight: 600, fontSize: 9 }, cell: { padding: 10, borderBottomWidth: 0.5, borderColor: colors.rule }, text: { fontSize: 10 }, alternate: colors.stock },
+    figure: { block: { marginTop: 12, marginBottom: 24 } },
+    callout: { block: { backgroundColor: colors.sun, borderLeftWidth: 0, padding: 16, marginTop: 12, marginBottom: 20 }, title: { color: colors.ink, fontSize: 10, letterSpacing: 0 }, text: { color: colors.ink } },
+    list: { block: { paddingLeft: 0 }, item: { marginBottom: 8 }, gap: 8, markerWidth: 12 },
+  },
+};

package/starter/themes/civic-spectrum/preview.tsx

@@ -0,0 +1,66 @@
+import * as F from '@formepdf/react';
+import { Callout, DataTable, Document, Figure, Heading, Paragraph, Section, Strong } from 'opendoc';
+import { CivicBadge, CivicOpening, CivicPages, CivicSplit, SignalBlock, SpectrumLegend, SpectrumRail, SquareSignal } from './components';
+import { colors, theme } from './index';
+
+export const meta = { title: 'Civic Spectrum — Systems people can read', description: theme.description, theme: theme.id };
+
+function Identity() {
+  return <CivicPages title="Civic Spectrum / Design system" section="CS—01" footer="Civic Spectrum · Identity" rail>
+    <SquareSignal id="civic-identity-label" label="A civic language for print" />
+    <F.View style={{ marginTop: 28, marginBottom: 32 }}>
+      <CivicSplit id="civic-identity-split"
+        main={<><Heading id="civic-identity-title" level={1} style={{ fontSize: 54, lineHeight: 0.98, letterSpacing: -1.25, marginBottom: 20 }}>{'Civic\nSpectrum'}</Heading><Paragraph id="civic-identity-line" style={{ fontSize: 22, lineHeight: 1.15, width: 270 }}>Systems people can read.</Paragraph></>}
+        aside={<F.View style={{ paddingTop: 12 }}><CivicBadge id="civic-identity-badge" value="01" label="One system. Many public voices." /></F.View>} />
+    </F.View>
+    <F.View style={{ marginBottom: 24 }}><SquareSignal id="civic-palette-label" label="Six signals / precise roles" color={colors.leaf} /></F.View>
+    <SpectrumLegend id="civic-palette" />
+    <Paragraph id="civic-neutral-palette" style={{ fontFamily: 'OpenDoc Mono', fontSize: 8, color: colors.muted, marginBottom: 32 }}>{`STOCK ${colors.stock} · INK ${colors.ink} · RULE ${colors.rule}`}</Paragraph>
+    <CivicSplit id="civic-geometry-split"
+      main={<><Heading id="civic-geometry-title" level={2} style={{ marginTop: 0 }}>An unequal rhythm.</Heading><Paragraph id="civic-geometry-copy">The rail has six unequal lengths: <Strong>2 : 1 : 3 : 1.5 : 2 : 1</Strong>. A six-column print grid makes room for a wide reading field and a smaller supporting voice.</Paragraph><SpectrumRail height={8} /></>}
+      aside={<F.View style={{ borderTopWidth: 0.75, borderColor: colors.ink, paddingTop: 12 }}><F.Text style={{ fontSize: 32, fontWeight: 600, lineHeight: 1, color: colors.blue }}>6 / 12 / 4</F.Text><F.Text style={{ fontSize: 9, lineHeight: 1.45, marginTop: 12, color: colors.muted }}>{'Columns / gutter / baseline\nA4 · 48 pt margins\nSquare corners throughout'}</F.Text></F.View>} />
+  </CivicPages>;
+}
+
+function Reading() {
+  return <CivicPages title="Civic Spectrum / Applied reading" section="CS—02" footer="Illustrative community brief">
+    <CivicSplit id="civic-reading-layout"
+      main={<>
+        <CivicOpening id="civic-reading-opening" kicker="Community brief / Sample" title={'A place\nto gather.'} subtitle="Public information can be direct, generous, and warm." color={colors.leaf} />
+        <Paragraph id="civic-reading-intro">Imagine a neighborhood hall opening its doors for a shared workshop. A useful notice tells people where they belong, what they can do, and how to take the next step.</Paragraph>
+        <Section id="civic-reading-orient" title="Start with the person." lead="Give readers a clear entry point. Name the place and purpose before explaining the program.">
+          <Paragraph id="civic-reading-body">A strong hierarchy lets someone scan the essentials and then stay for the detail. The wide column carries the story. The narrower field carries a small set of signs: orientation, explanation, action.</Paragraph>
+        </Section>
+        <Section id="civic-reading-space" title="Leave useful space." lead="Empty space can separate different voices without drawing another box around them.">
+          <Paragraph id="civic-reading-space-copy">This composition keeps the main passage on four columns. Short supporting modules occupy two. Their top edges, square markers, and repeated spacing make the page feel like one system.</Paragraph>
+        </Section>
+      </>}
+      aside={<F.View style={{ paddingTop: 52 }}>
+        <SignalBlock id="civic-orient" code="01" title="Orient" color={colors.blue}>Establish the place, sequence, and purpose.</SignalBlock>
+        <SignalBlock id="civic-explain" code="02" title="Explain" color={colors.sun}>Give each part a clear role and a readable label.</SignalBlock>
+        <SignalBlock id="civic-move" code="03" title="Move" color={colors.flame}>Make the next action easy to find.</SignalBlock>
+        <F.View style={{ marginTop: 20 }}><CivicBadge id="civic-reading-badge" value="Aa" color={colors.sun} filled label="OpenDoc Sans · clear grotesk reading and display type" /></F.View>
+      </F.View>} />
+  </CivicPages>;
+}
+
+function Evidence() {
+  return <CivicPages title="Civic Spectrum / Applied evidence" section="CS—03" footer="Illustrative space allocation">
+    <CivicOpening id="civic-evidence-opening" kicker="Example allocation / Synthetic" title="Make the whole visible." subtitle="A simple partition shows how one shared room could be used." />
+    <Figure id="civic-allocation" caption="A notional 120 m² room, divided by activity." sourceNote="Illustrative dimensions only. This is a design demonstration, not a measured plan.">
+      <F.View style={{ flexDirection: 'row', gap: 4, height: 156 }}>
+        <F.View style={{ flex: 2, backgroundColor: colors.blue, padding: 12, justifyContent: 'space-between' }}><F.Text style={{ fontSize: 10, color: colors.inverse }}>Arrival</F.Text><F.Text style={{ fontSize: 25, lineHeight: 1, fontWeight: 600, color: colors.inverse }}>24</F.Text></F.View>
+        <F.View style={{ flex: 5, backgroundColor: colors.leaf, padding: 16, justifyContent: 'space-between' }}><F.Text style={{ fontSize: 12, color: colors.ink, fontWeight: 600 }}>Workshop</F.Text><F.Text style={{ fontSize: 54, lineHeight: 1, fontWeight: 600, letterSpacing: -1, color: colors.ink }}>60</F.Text></F.View>
+        <F.View style={{ flex: 3, backgroundColor: colors.sky, padding: 12, justifyContent: 'space-between' }}><F.Text style={{ fontSize: 10, color: colors.ink }}>Shared tables</F.Text><F.Text style={{ fontSize: 34, lineHeight: 1, fontWeight: 600, color: colors.ink }}>36</F.Text></F.View>
+      </F.View>
+    </Figure>
+    <DataTable id="civic-allocation-table" caption="The allocation in exact values."
+      columns={[{ label: 'Activity', width: 2 }, { label: 'Area (m²)' }, { label: 'Share' }]}
+      rows={[['Arrival', 24, '20%'], ['Workshop', 60, '50%'], ['Shared tables', 36, '30%']]} />
+    <Callout id="civic-allocation-note" title="Color carries the category.">Blue marks arrival, leaf marks participation, and sky supports shared activity. The yellow note asks for attention; it does not become a fourth data category.</Callout>
+  </CivicPages>;
+}
+
+export default function Preview() {
+  return <Document title={meta.title} theme={theme}><Identity /><Reading /><Evidence /></Document>;
+}

package/starter/themes/field-manual/components.tsx

@@ -0,0 +1,106 @@
+import { Fragment, type ReactNode } from 'react';
+import * as F from '@formepdf/react';
+import { Block, Heading, Page, Paragraph } from 'opendoc';
+import { colors, metrics } from './index';
+
+export type ManualSurface = 'light' | 'dark';
+const surface = (value: ManualSurface) => value === 'dark'
+  ? { bg: colors.dark, ink: colors.inverse, muted: colors.inverseMuted, rule: colors.inverseRule }
+  : { bg: colors.stock, ink: colors.ink, muted: colors.muted, rule: colors.rule };
+
+/** Normal flowing pages, with genuine repeated fixed revision furniture. */
+export function ManualPages({ title, code = 'FM—01', revision = 'REV 01', surface: mode = 'light', children }: {
+  title: string; code?: string; revision?: string; surface?: ManualSurface; children: ReactNode;
+}) {
+  const c = surface(mode);
+  return <Page size="A4" margin={{ top: metrics.margin, right: metrics.margin, bottom: metrics.bottomMargin, left: metrics.margin }} style={{ backgroundColor: c.bg }}>
+    <F.Fixed position="header"><F.View style={{ flexDirection: 'row', justifyContent: 'space-between', borderBottomWidth: 0.75, borderColor: c.rule, paddingBottom: 12, marginBottom: 16 }}>
+      <F.Text style={{ fontFamily: 'OpenDoc Mono', fontSize: 7.5, color: c.muted }}>{title}</F.Text>
+      <F.Text style={{ fontFamily: 'OpenDoc Mono', fontSize: 7.5, color: c.muted }}>{revision}</F.Text>
+    </F.View></F.Fixed>
+    <F.Fixed position="footer"><F.View style={{ flexDirection: 'row', justifyContent: 'space-between', borderTopWidth: 0.75, borderColor: c.rule, paddingTop: 12 }}>
+      <F.Text style={{ fontFamily: 'OpenDoc Mono', fontSize: 7.5, color: c.muted }}>{code} / FIELD MANUAL</F.Text>
+      <F.Text style={{ fontFamily: 'OpenDoc Mono', fontSize: 7.5, color: c.muted }}>{'{{pageNumber}}'}</F.Text>
+    </F.View></F.Fixed>
+    {children}
+  </Page>;
+}
+
+export function ManualCode({ id, code, label, surface: mode = 'light' }: { id: string; code: string; label: string; surface?: ManualSurface }) {
+  const c = surface(mode);
+  return <Block id={id} style={{ flexDirection: 'row', alignItems: 'center', gap: 12 }}>
+    <F.View style={{ backgroundColor: colors.orange, paddingTop: 5, paddingBottom: 5, paddingLeft: 8, paddingRight: 8 }}>
+      <F.Text style={{ fontFamily: 'OpenDoc Mono', fontWeight: 400, fontSize: 8, color: colors.ink }}>{code}</F.Text>
+    </F.View>
+    <F.Text style={{ fontFamily: 'OpenDoc Mono', fontWeight: 400, fontSize: 8, letterSpacing: 0.4, color: c.ink }}>{label.toUpperCase()}</F.Text>
+  </Block>;
+}
+
+export function ManualSpine({ id, children }: { id: string; children: ReactNode }) {
+  return <Block id={id} style={{ borderLeftWidth: metrics.spine, borderColor: colors.orange, paddingLeft: metrics.inset }}>{children}</Block>;
+}
+
+export function ManualOpening({ id, code, label, title, subtitle, surface: mode = 'light' }: {
+  id: string; code: string; label: string; title: string; subtitle?: string; surface?: ManualSurface;
+}) {
+  const c = surface(mode);
+  return <F.View wrap={false} style={{ marginBottom: 28 }}>
+    <ManualCode id={`${id}-code`} code={code} label={label} surface={mode} />
+    <Heading id={`${id}-title`} level={1} style={{ color: c.ink, marginTop: 24 }}>{title}</Heading>
+    {subtitle && <Paragraph id={`${id}-subtitle`} role="lead" style={{ color: c.muted, marginBottom: 0 }}>{subtitle}</Paragraph>}
+  </F.View>;
+}
+
+/** The label/value field is usable for actual metadata, definitions, and revision records. */
+export function SpecRows({ id, rows, surface: mode = 'light' }: {
+  id: string; rows: { label: string; value: string }[]; surface?: ManualSurface;
+}) {
+  const c = surface(mode);
+  return <Block id={id}>
+    {rows.map(row => <F.View key={row.label} wrap={false} style={{ borderTopWidth: metrics.rule, borderColor: c.rule, paddingTop: 8, paddingBottom: 12, flexDirection: 'row', gap: 8 }}>
+      <F.Text style={{ width: metrics.labelWidth, flexShrink: 0, fontFamily: 'OpenDoc Mono', fontSize: 7.5, color: c.muted }}>{row.label.toUpperCase()}</F.Text>
+      <F.Text style={{ flex: 1, minWidth: 0, fontFamily: 'OpenDoc Mono', fontSize: 8, lineHeight: 1.35, color: c.ink }}>{row.value}</F.Text>
+    </F.View>)}
+  </Block>;
+}
+
+export function EvidenceChain({ id, steps }: {
+  id: string; steps: [{ title: string; detail: string }, { title: string; detail: string }, { title: string; detail: string }];
+}) {
+  return <Block id={id} style={{ flexDirection: 'row', alignItems: 'stretch', marginTop: 8, marginBottom: 24 }}>
+    {steps.map((step, index) => <Fragment key={step.title}>
+      {index > 0 && <F.Text style={{ width: 20, flexShrink: 0, alignSelf: 'center', textAlign: 'center', fontFamily: 'OpenDoc Sans', fontSize: 16, color: colors.muted }}>→</F.Text>}
+      <F.View style={{ flex: 1, minWidth: 0, borderTopWidth: 4, borderColor: index === 1 ? colors.orange : colors.ink, backgroundColor: index === 1 ? colors.paper : colors.panel, padding: 12 }}>
+        <F.Text style={{ fontFamily: 'OpenDoc Mono', fontSize: 7.5, color: index === 1 ? colors.orange : colors.muted }}>{`0${index + 1} / ${['INPUT', 'METHOD', 'OUTPUT'][index]}`}</F.Text>
+        <F.Text style={{ fontSize: 23, lineHeight: 1.1, fontWeight: 600, letterSpacing: -0.4, color: colors.ink, marginTop: 24, marginBottom: 12 }}>{step.title}</F.Text>
+        <F.Text style={{ fontSize: 10, lineHeight: 1.45, color: colors.muted }}>{step.detail}</F.Text>
+      </F.View>
+    </Fragment>)}
+  </Block>;
+}
+
+export function ManualAnnotation({ id, code, children, surface: mode = 'light' }: { id: string; code: string; children: ReactNode; surface?: ManualSurface }) {
+  const c = surface(mode);
+  return <Block id={id} style={{ flexDirection: 'row', gap: 16, borderTopWidth: 0.75, borderColor: c.rule, paddingTop: 12, marginTop: 12, marginBottom: 20 }}>
+    <F.Text style={{ width: 68, fontFamily: 'OpenDoc Mono', fontSize: 8, color: colors.orange }}>{code}</F.Text>
+    <F.Text style={{ flex: 1, minWidth: 0, fontSize: 10, lineHeight: 1.5, color: c.muted }}>{children}</F.Text>
+  </Block>;
+}
+
+/** A whole directive page; use only for a real revision, handover, or closing instruction. */
+export function DirectivePage({ id, code, revision, title, lead, rows }: {
+  id: string; code: string; revision: string; title: string; lead: string; rows: { label: string; value: string }[];
+}) {
+  return <ManualPages title="Directive / Field Manual" code={code} revision={revision} surface="dark">
+    <F.View style={{ height: 6, backgroundColor: colors.orange, marginBottom: 40 }} />
+    <ManualCode id={`${id}-code`} code={revision} label="Closing directive" surface="dark" />
+    <F.View style={{ marginTop: 36, marginBottom: 36 }}>
+      <ManualSpine id={`${id}-spine`}>
+        <Heading id={`${id}-title`} level={1} style={{ color: colors.inverse, fontSize: 48, lineHeight: 1.02, letterSpacing: -1, marginBottom: 24 }}>{title}</Heading>
+        <Paragraph id={`${id}-lead`} style={{ width: 340, fontSize: 15, lineHeight: 1.5, color: colors.inverseMuted, marginBottom: 0 }}>{lead}</Paragraph>
+      </ManualSpine>
+    </F.View>
+    <SpecRows id={`${id}-record`} rows={rows} surface="dark" />
+    <ManualAnnotation id={`${id}-note`} code="FM / RULE" surface="dark">A revision is useful when a reader can see what changed, why it changed, and which check comes next.</ManualAnnotation>
+  </ManualPages>;
+}

package/starter/themes/field-manual/design.md

@@ -0,0 +1,72 @@
+# Field Manual
+
+**Evidence before ornament.** Field Manual is a technical publishing system with warm stock, dense ink, a safety-orange spine, coded annotations, and visible revision information. Use it for manuals, evidence dossiers, decision records, and operational handovers. Every line identifies, divides, connects, or measures something. It is not a nostalgic imitation of an agency document.
+
+## Palette and function
+
+| Role | Hex | Use |
+| --- | --- | --- |
+| Safety orange | `#F05A28` | Priority, active reasoning step, revision, change |
+| Ink | `#16191B` | Main copy and strong structure |
+| Stock | `#F2F0E8` | Warm technical-paper page |
+| Paper | `#FCFAF4` | Lifted evidence field, without a shadow |
+| Panel | `#E5E3DB` | Supporting modules and table headers |
+| Rule | `#BFC2BC` | Quiet borders and technical structure |
+| Muted | `#656B6E` | Qualifiers, annotations, and secondary labels |
+| Dark | `#171A1C` | A directive or revision page |
+| Inverse | `#F6F3EA` | Main text on dark |
+| Inverse notes | `#AEB4B5` | Supporting text on dark |
+| Inverse rule | `#4B5154` | Structure on dark |
+
+Orange has a job. Use it for one active step, a meaningful priority, or a revision signal. Routine prose remains Ink. Do not color every number orange or use warning symbolism for ordinary content. On orange fields, use Ink text. Dark pages use Inverse and Inverse notes, with the same orange retained as a signal.
+
+## Print grid and geometry
+
+Use **A4 portrait**, **44 pt top/side margins**, and a **52 pt bottom margin**. The content field is approximately 507 pt wide. Use a **4 pt baseline** and prefer 12, 16, 24, and 32 pt gaps. Ordinary explanatory text can occupy a **328 pt field**, leaving a structured annotation strip. A deliberate opening can use a wider display span while keeping metadata in a narrow field.
+
+The signature is a **6 pt vertical orange spine** with an **18 pt content inset**. It introduces an opening or a major directive. Do not replace it with caution stripes. Fine structural rules are **0.75 pt**; evidence modules use **4 pt top rules**. Corners are square, with no shadows or rounded-card treatment. A light Paper field can distinguish a source or method without implying elevation.
+
+The three-step evidence chain is **Source → Reason → Act**: equal-width modules, **20 pt connector fields**, **12 pt internal padding**, and straight arrows. Source names an observation, record, or constraint; Reason explains the transformation or judgment; Act states the result, owner, and next condition. Orange marks Reason in the standard demonstration. It may identify another active step only when the content makes that status explicit.
+
+## Type system
+
+Use **OpenDoc Sans**, the local Source Sans 3 derivative, for display and prose. It substitutes for the original Public Sans. Use **OpenDoc Mono**, the local Source Code Pro derivative, for codes, revision labels, units, and annotations. Both are already embedded by OpenDoc. Mono has a real regular face; keep it at 400 instead of requesting an unavailable bold face. Display and emphasis use the real Sans 600 face.
+
+| Role | Size / line height | Treatment |
+| --- | --- | --- |
+| Identity display | 52 pt / 0.98 | Tracking −1.2 pt; compact and declarative |
+| Main title | 38 pt / 1.02 | Tracking −0.75 pt; 20 pt after |
+| Directive title | 48 pt / 1.02 | Inverse on Dark; orange spine |
+| Section | 21 pt / 1.10 | 24 pt before, 12 after |
+| Subheading | 13 pt / 1.20 | 20 pt before, 8 after |
+| Lead | 14 pt / 1.45 | Muted; short measure |
+| Body | 10.5 pt / 1.50 | 12 pt paragraph gap |
+| Caption/code label | 8 pt / 1.40 | Mono; concrete information only |
+| Running note | 7.5 pt / 1.40 | Mono; use sparingly, never for the main argument |
+
+Use sentence case for claims. Uppercase belongs to short document codes, revisions, classifications, and units. Do not invent tiny decorative labels to make an empty page look technical. Long content flows; a manual is not a stack of fixed-position posters.
+
+## Reusable component API
+
+Import `theme` from `themes/field-manual`, and import the following from `components.tsx`. Place the components inside an OpenDoc `Document` using that theme.
+
+- `ManualPages({title, code?, revision?, surface?, children})` supplies flowing pages and actual repeating header/footer records. `surface` is `light` or `dark`.
+- `ManualCode({id, code, label, surface?})` pairs an orange code badge with a mono classification.
+- `ManualSpine({id, children})` provides the exact 6/18 pt opening geometry.
+- `ManualOpening({id, code, label, title, subtitle?, surface?})` keeps the title and its supporting line with the code.
+- `SpecRows({id, rows, surface?})` takes `{label, value}` records. Labels occupy 68 pt; values flow beside them. Use real metadata, definitions, or revision information.
+- `EvidenceChain({id, steps})` takes exactly three `{title, detail}` entries in source/method/action order.
+- `ManualAnnotation({id, code, surface?, children})` separates a quiet explanatory note from the main reading field.
+- `DirectivePage({id, code, revision, title, lead, rows})` creates a full dark closing/revision page with an orange rule and spine. It is reusable publication content, not a preview-only graphic.
+
+Preserve stable IDs and real record identity. Avoid wrapping a whole long section in an unbreakable component. Normal `TitleBlock`, headings, tables, figures, lists, code, and callouts also receive executable theme styles.
+
+## Evidence and image rules
+
+Tables expose units in headers, align numbers, use 9 pt cell padding, and favor horizontal rules. Header borders paint through cells because the current PDF engine ignores borders on a table row. Put sources and qualifications close to the exhibit. The demonstration handover is illustrative; it claims no operational findings.
+
+Charts stay mostly monochrome unless orange identifies the one comparison that matters. Diagrams name inputs, methods, outputs, and evidence links; use straight connectors. Images retain their aspect ratio and readable detail. Add a crop only when it preserves the relevant evidence. Brand marks use supplied assets and real provenance. Avoid gradients, grunge, faux stamps, agency insignia, ornamental coordinates, and automatic warning icons.
+
+## Implementation and review
+
+The system combines an orange spine, mono record labels, the Source / Reason / Act chain, and a dark directive composition. It uses flowing A4 pages and bundled OpenDoc Sans and Mono. Keep this specification synchronized with `index.ts` and the theme components. Review every page, dark-background visibility, repeated revision furniture, narrow metadata values, table continuation, and copied PDF text.

package/starter/themes/field-manual/index.ts

@@ -0,0 +1,57 @@
+import type { DocTheme } from 'opendoc/themes';
+
+export const colors = {
+  stock: '#F2F0E8', ink: '#16191B', orange: '#F05A28', muted: '#656B6E', rule: '#BFC2BC',
+  panel: '#E5E3DB', paper: '#FCFAF4', dark: '#171A1C', inverse: '#F6F3EA',
+  inverseMuted: '#AEB4B5', inverseRule: '#4B5154',
+} as const;
+
+export const metrics = {
+  margin: 44, bottomMargin: 52, spine: 6, inset: 18, gutter: 16,
+  baseline: 4, mainWidth: 328, labelWidth: 68, rule: 0.75,
+} as const;
+
+export const theme: DocTheme = {
+  id: 'field-manual', name: 'Field Manual',
+  description: 'Evidence-first technical publishing: warm stock, a safety-orange spine, mono codes and revisions, traceable chains, and decisive dark pages.',
+  body: 'OpenDoc Sans', heading: 'OpenDoc Sans', ink: colors.ink, muted: colors.muted,
+  accent: colors.orange, paper: colors.paper, line: colors.rule,
+  fontSize: 10.5, lineHeight: 1.5, margin: metrics.margin, paragraphGap: 12,
+  pageSize: 'A4', runningHeader: true, runningFooter: true, footerLabel: 'Field Manual / Revision 01',
+  useFor: ['Technical manuals', 'Evidence and decision records', 'Operational handovers'],
+  principles: ['Evidence before ornament.', 'Expose source, reasoning, and action.', 'Document what changes.'],
+  palette: [
+    { name: 'Safety orange', value: colors.orange, role: 'Priority, active step, change' },
+    { name: 'Ink', value: colors.ink, role: 'Main text and structural emphasis' },
+    { name: 'Stock', value: colors.stock, role: 'Technical-paper page surface' },
+    { name: 'Paper', value: colors.paper, role: 'Evidence fields' },
+    { name: 'Panel', value: colors.panel, role: 'Supporting modules and table bands' },
+    { name: 'Rule', value: colors.rule, role: 'Fine structure' },
+    { name: 'Muted', value: colors.muted, role: 'Annotations and qualifiers' },
+    { name: 'Dark', value: colors.dark, role: 'Directive and revision surface' },
+    { name: 'Inverse', value: colors.inverse, role: 'Main text on dark' },
+    { name: 'Inverse muted', value: colors.inverseMuted, role: 'Notes on dark' },
+  ],
+  geometry: ['A4 portrait; 44 pt margins; 4 pt baseline.', '6 pt vertical orange spine; 18 pt content inset.', '328 pt reading field plus structured annotation strip.', 'Source → Reason → Act modules; straight connectors; 4 pt top rules.', 'Square corners, 0.75 pt structural rules, mono codes and revision furniture.'],
+  design: {
+    page: { margin: { top: 44, right: 44, bottom: 52, left: 44 }, style: { backgroundColor: colors.stock } },
+    typography: {
+      h1: { fontSize: 38, lineHeight: 1.02, letterSpacing: -0.75, marginBottom: 20 },
+      h2: { fontSize: 21, lineHeight: 1.1, letterSpacing: -0.3, marginTop: 24, marginBottom: 12 },
+      h3: { fontSize: 13, lineHeight: 1.2, marginTop: 20, marginBottom: 8 },
+      label: { fontFamily: 'OpenDoc Mono', fontSize: 8, fontWeight: 400, letterSpacing: 0.6, color: colors.ink },
+      lead: { fontSize: 14, lineHeight: 1.45, color: colors.muted },
+      small: { fontFamily: 'OpenDoc Mono', fontSize: 7.5, fontWeight: 400, lineHeight: 1.4, color: colors.muted },
+      caption: { fontFamily: 'OpenDoc Mono', fontSize: 8, fontWeight: 400, lineHeight: 1.4, color: colors.muted },
+      code: { fontFamily: 'OpenDoc Mono', fontSize: 9, fontWeight: 400, lineHeight: 1.45, color: colors.ink },
+    },
+    title: { block: { borderBottomWidth: 0, borderLeftWidth: 6, borderColor: colors.orange, paddingLeft: 18, paddingBottom: 12, marginBottom: 28 }, eyebrow: { marginBottom: 16, color: colors.muted }, heading: { fontSize: 38, marginBottom: 18 }, byline: { fontFamily: 'OpenDoc Mono' } },
+    cover: { page: { backgroundColor: colors.stock }, block: { borderTopWidth: 0, borderLeftWidth: 6, borderColor: colors.orange, paddingLeft: 18, paddingTop: 0, marginTop: 48 }, title: { fontSize: 50, lineHeight: 1.02, letterSpacing: -1 } },
+    furniture: { uppercaseHeader: false, header: { paddingBottom: 12, borderBottomWidth: 0.75, borderColor: colors.rule, marginBottom: 12 }, text: { fontFamily: 'OpenDoc Mono', fontSize: 7.5, fontWeight: 400, color: colors.muted }, footer: { borderTopWidth: 0.75, paddingTop: 10 }, pageNumber: 'total' },
+    table: { header: { backgroundColor: colors.panel, borderTopWidth: 1, borderBottomWidth: 0.75, borderColor: colors.ink }, headerText: { fontFamily: 'OpenDoc Mono', fontSize: 8, fontWeight: 400, color: colors.ink }, cell: { padding: 9, borderBottomWidth: 0.5, borderColor: colors.rule }, text: { fontSize: 9.5, color: colors.ink }, alternate: colors.paper },
+    figure: { block: { marginTop: 12, marginBottom: 20 } },
+    callout: { block: { backgroundColor: colors.paper, borderLeftWidth: 6, borderColor: colors.orange, padding: 16, marginTop: 12, marginBottom: 20 }, title: { fontFamily: 'OpenDoc Mono', fontSize: 8, fontWeight: 400, color: colors.ink, letterSpacing: 0.4 }, text: { fontSize: 10.5, color: colors.ink } },
+    code: { panel: { backgroundColor: colors.panel, borderTopWidth: 0.75, borderColor: colors.rule, padding: 12 } },
+    list: { block: { paddingLeft: 0 }, item: { marginBottom: 8 }, gap: 8, markerWidth: 16 },
+  },
+};

package/starter/themes/field-manual/preview.tsx

@@ -0,0 +1,82 @@
+import * as F from '@formepdf/react';
+import { DataTable, Document, Heading, Paragraph, Strong } from 'opendoc';
+import { DirectivePage, EvidenceChain, ManualAnnotation, ManualCode, ManualOpening, ManualPages, ManualSpine, SpecRows } from './components';
+import { colors, theme } from './index';
+
+export const meta = { title: 'Field Manual — Evidence before ornament', description: theme.description, theme: theme.id };
+
+function Identity() {
+  const neutrals = [
+    { name: 'Ink', value: colors.ink }, { name: 'Stock', value: colors.stock },
+    { name: 'Paper', value: colors.paper }, { name: 'Panel', value: colors.panel },
+    { name: 'Muted', value: colors.muted }, { name: 'Rule', value: colors.rule },
+  ];
+  return <ManualPages title="Field Manual / Design specification" code="FM—01" revision="REV 01">
+    <ManualSpine id="manual-identity-spine">
+      <ManualCode id="manual-identity-code" code="FM—01" label="Evidence systems" />
+      <F.View style={{ flexDirection: 'row', gap: 16, marginTop: 28 }}>
+        <F.View style={{ width: 312 }}>
+          <Heading id="manual-identity-title" level={1} style={{ fontSize: 52, lineHeight: 0.98, letterSpacing: -1.2, marginBottom: 20 }}>{'Field\nManual.'}</Heading>
+          <Paragraph id="manual-identity-purpose" style={{ fontSize: 22, lineHeight: 1.15, marginBottom: 16 }}>{'Evidence before\nornament.'}</Paragraph>
+          <Paragraph id="manual-identity-description" style={{ fontSize: 11, color: colors.muted, marginBottom: 0, width: 270 }}>A visual language for methods, decisions, and operational truth.</Paragraph>
+        </F.View>
+        <F.View style={{ flex: 1, minWidth: 0, backgroundColor: colors.paper, borderWidth: 0.75, borderColor: colors.rule, padding: 12 }}>
+          <F.Text style={{ fontFamily: 'OpenDoc Mono', fontSize: 36, lineHeight: 1, letterSpacing: -1, color: colors.orange, marginBottom: 24 }}>{'FM\n01'}</F.Text>
+          <SpecRows id="manual-identity-record" rows={[{ label: 'Class', value: 'Reference' }, { label: 'Mode', value: 'Evidence first' }, { label: 'Rev', value: '01' }]} />
+        </F.View>
+      </F.View>
+    </ManualSpine>
+    <F.View style={{ marginTop: 32, marginBottom: 16 }}><ManualCode id="manual-palette-label" code="CLR" label="Signal / support" /></F.View>
+    <F.View style={{ flexDirection: 'row', gap: 16 }}>
+      <F.View style={{ width: 148, backgroundColor: colors.orange, padding: 16, justifyContent: 'space-between' }}>
+        <F.Text style={{ fontFamily: 'OpenDoc Mono', fontSize: 8, color: colors.ink }}>{'SAFETY\nORANGE'}</F.Text>
+        <F.Text style={{ fontFamily: 'OpenDoc Mono', fontSize: 14, color: colors.ink }}>#F05A28</F.Text>
+      </F.View>
+      <F.View style={{ flex: 1 }}>
+        {[neutrals.slice(0, 2), neutrals.slice(2, 4), neutrals.slice(4)].map((row, index) => <F.View key={index} style={{ flexDirection: 'row', gap: 12, marginBottom: index === 2 ? 0 : 12 }}>
+          {row.map(entry => <F.View key={entry.name} style={{ flex: 1, flexDirection: 'row', gap: 8 }}>
+            <F.View style={{ width: 24, height: 24, borderWidth: 0.5, borderColor: colors.rule, backgroundColor: entry.value }} />
+            <F.View style={{ flex: 1 }}><F.Text style={{ fontSize: 8, color: colors.ink }}>{entry.name}</F.Text><F.Text style={{ fontFamily: 'OpenDoc Mono', fontSize: 8, color: colors.muted, marginTop: 3 }}>{entry.value}</F.Text></F.View>
+          </F.View>)}
+        </F.View>)}
+      </F.View>
+    </F.View>
+    <ManualAnnotation id="manual-geometry" code="6 / 18 / 4">A <Strong>6 pt orange spine</Strong>, an 18 pt inset, and a 4 pt baseline. Fine rules separate records. Monospace codes make identity, status, and revision visible.</ManualAnnotation>
+    <Paragraph id="manual-type-note" style={{ fontFamily: 'OpenDoc Mono', fontSize: 7.5, color: colors.muted }}>{'DISPLAY 52/51 · HEADING 38/39 · BODY 10.5/15.75 · NOTES 8/11.2\nDARK #171A1C · INVERSE #F6F3EA · INVERSE NOTES #AEB4B5'}</Paragraph>
+  </ManualPages>;
+}
+
+function Decision() {
+  return <ManualPages title="Field Manual / Decision anatomy" code="FM—02" revision="REV 01">
+    <ManualOpening id="manual-decision-opening" code="FM—02" label="Decision anatomy" title={'A decision should\nexpose its chain.'} />
+    <EvidenceChain id="manual-decision-chain" steps={[
+      { title: 'Source', detail: 'Name the observation, record, or constraint.' },
+      { title: 'Reason', detail: 'Show the rule, transformation, or judgment.' },
+      { title: 'Act', detail: 'State the result, owner, and next condition.' },
+    ]} />
+    <Paragraph id="manual-decision-intro">The chain separates what was observed from how it was interpreted and what happens next. Each step is inspectable. Orange identifies the active reasoning step; it does not turn every box into a warning.</Paragraph>
+    <DataTable id="manual-decision-record" caption="Sample handover record — illustrative only."
+      columns={[{ label: 'Record', width: 1 }, { label: 'Observation', width: 2 }, { label: 'Next condition', width: 1.8 }]}
+      rows={[
+        ['SRC / 01', 'Three draft sections use different terms.', 'Identify the owning definition.'],
+        ['MTH / 01', 'Compare each use with that definition.', 'Record the unresolved cases.'],
+        ['ACT / 01', 'Assign one editor to the revision.', 'Check the next issue before release.'],
+      ]} />
+    <ManualAnnotation id="manual-decision-note" code="NOTE / 01">This example contains no operational findings. It demonstrates the difference between a source record, a method, and an action.</ManualAnnotation>
+  </ManualPages>;
+}
+
+export default function Preview() {
+  return <Document title={meta.title} theme={theme}>
+    <Identity />
+    <Decision />
+    <DirectivePage id="manual-directive" code="FM—03" revision="REV 01" title={'Document\nwhat changes.'}
+      lead="A trustworthy system makes revisions, evidence, and responsibility inspectable. Every change should leave a clear path back to its reason."
+      rows={[
+        { label: 'Change', value: 'State what changed in this issue.' },
+        { label: 'Basis', value: 'Name the record or condition that required it.' },
+        { label: 'Owner', value: 'Identify who carries the next action.' },
+        { label: 'Check', value: 'Define what must be true before release.' },
+      ]} />
+  </Document>;
+}

package/starter/themes/index.ts

@@ -0,0 +1,3 @@
+export { neutral } from './neutral/index';
+export { themeType, themePage, validateTheme } from 'opendoc/themes';
+export type { DocTheme, ThemeDesign, ThemeFont, ThemeTypeRole } from 'opendoc/themes';

package/starter/themes/mckinsey-consulting/components.tsx

@@ -0,0 +1,69 @@
+import type { ReactNode } from 'react';
+import { Fixed, Text, View } from '@formepdf/react';
+import { Block, Heading, Paragraph, Page } from 'opendoc';
+import { colors as c, theme } from './index';
+
+/** A reusable dark publication opening. Its square field is deliberately unlike an analytical page. */
+export function ConsultingCover({ id, title, subtitle, label = 'Executive exhibit system', children }: {
+  id: string; title: string; subtitle: string; label?: string; children?: ReactNode;
+}) {
+  return <Page size="A4" margin={48} style={{ backgroundColor: c.ink }}>
+    <View style={{ flexDirection: 'row', alignItems: 'center', gap: 10 }}>
+      <View style={{ width: 22, height: 3, backgroundColor: c.focus }} />
+      <Text style={{ fontSize: 8, letterSpacing: 1.3, color: c.pale }}>{label.toUpperCase()}</Text>
+    </View>
+    <Heading id={`${id}-title`} level={1} style={{ color: c.white, fontSize: 62, lineHeight: 1.01, letterSpacing: -1.7, marginTop: 78, marginBottom: 24 }}>{title}</Heading>
+    <Paragraph id={`${id}-subtitle`} style={{ width: 350, color: c.pale, fontSize: 15, lineHeight: 1.4 }}>{subtitle}</Paragraph>
+    <View style={{ marginTop: 48, height: 224 }}>
+      <View style={{ flexDirection: 'row', height: 56 }}><View style={{ width: '18%' }} /><View style={{ width: '44%', backgroundColor: c.blue1 }} /><View style={{ width: '38%', backgroundColor: c.blue2 }} /></View>
+      <View style={{ flexDirection: 'row', height: 56 }}><View style={{ width: '44%', backgroundColor: c.blue1 }} /><View style={{ width: '56%', backgroundColor: c.focus }} /></View>
+      <View style={{ flexDirection: 'row', height: 56 }}><View style={{ width: '62%', backgroundColor: c.focus }} /><View style={{ width: '38%', backgroundColor: c.pale }} /></View>
+      <View style={{ flexDirection: 'row', height: 56 }}><View style={{ width: '18%', backgroundColor: c.blue2 }} /><View style={{ width: '44%', backgroundColor: c.blue4 }} /><View style={{ width: '38%' }} /></View>
+    </View>
+    {children}
+    <Fixed position="footer"><View style={{ flexDirection: 'row', justifyContent: 'space-between', borderTopWidth: 0.5, borderColor: c.positive, paddingTop: 8 }}>
+      <Text style={{ fontSize: 8, color: c.pale }}>Independent consulting design / {theme.name}</Text>
+      <Text style={{ fontSize: 8, color: c.pale }}>{'{{pageNumber}} / {{totalPages}}'}</Text>
+    </View></Fixed>
+  </Page>;
+}
+
+/** Keep a claim and its measurement definition together; evidence below remains flowable. */
+export function ExhibitTitle({ id, number, topic, children, metric }: {
+  id: string; number: string; topic: string; children: ReactNode; metric: string;
+}) {
+  return <View wrap={false} style={{ marginBottom: 20 }}>
+    <View style={{ flexDirection: 'row', gap: 8, alignItems: 'center', marginBottom: 12 }}>
+      <View style={{ width: 20, height: 2, backgroundColor: c.focus }} />
+      <Text style={{ color: c.focus, fontSize: 8, letterSpacing: 0.7, fontWeight: 600 }}>EXHIBIT {number} / {topic.toUpperCase()}</Text>
+    </View>
+    <Heading id={`${id}-claim`} level={1} style={{ marginBottom: 12 }}>{children}</Heading>
+    <Paragraph id={`${id}-metric`} style={{ fontSize: 9, color: c.muted, marginBottom: 0 }}>{metric}</Paragraph>
+  </View>;
+}
+
+/** Direct labels, a visible zero baseline, and one explicitly selected focus. Values share a scale. */
+export function RankedBars({ id, rows, max = 100, suffix = '%', highlight = 0 }: {
+  id: string; rows: Array<{ label: string; detail?: string; value: number }>; max?: number; suffix?: string; highlight?: number;
+}) {
+  if (!Number.isFinite(max) || max <= 0 || rows.some(row => !Number.isFinite(row.value) || row.value < 0 || row.value > max)) throw new Error('RankedBars needs finite nonnegative values within a positive maximum.');
+  return <Block id={id} style={{ marginBottom: 16 }}>
+    {rows.map((row, index) => <View key={row.label} wrap={false} style={{ flexDirection: 'row', alignItems: 'center', gap: 12, paddingTop: 8, paddingBottom: 8, borderTopWidth: 0.5, borderColor: c.rule }}>
+      <View style={{ width: 112 }}><Text style={{ fontSize: 10, fontWeight: 600 }}>{row.label}</Text>{row.detail && <Text style={{ fontSize: 8, color: c.muted, marginTop: 2 }}>{row.detail}</Text>}</View>
+      <View style={{ flex: 1, height: 22, backgroundColor: c.soft }}><View style={{ width: `${row.value / max * 100}%`, height: 22, backgroundColor: index === highlight ? c.focus : c.blue2 }} /></View>
+      <Text style={{ width: 36, textAlign: 'right', fontSize: 15, fontWeight: 600, color: index === highlight ? c.focus : c.ink }}>{row.value}{suffix}</Text>
+    </View>)}
+    <View style={{ flexDirection: 'row', marginLeft: 124, marginRight: 48, justifyContent: 'space-between', borderTopWidth: 0.5, borderColor: c.rule, paddingTop: 4 }}><Text style={{ fontSize: 7, color: c.muted }}>0</Text><Text style={{ fontSize: 7, color: c.muted }}>{max}{suffix}</Text></View>
+  </Block>;
+}
+
+export function Implication({ id, label = 'What this changes', children }: { id: string; label?: string; children: ReactNode }) {
+  return <Block id={id} style={{ backgroundColor: c.pale, padding: 16, marginTop: 8, marginBottom: 12 }}>
+    <Text style={{ fontSize: 9, fontWeight: 600, marginBottom: 6 }}>{label}</Text>
+    <Text style={{ fontSize: 10.5, lineHeight: 1.4 }}>{children}</Text>
+  </Block>;
+}
+
+export function SourceNote({ id, children }: { id: string; children: ReactNode }) {
+  return <Paragraph id={id} style={{ fontSize: 8, lineHeight: 1.35, color: c.muted, marginTop: 8 }}>{children}</Paragraph>;
+}

package/starter/themes/mckinsey-consulting/design.md

@@ -0,0 +1,68 @@
+# McKinsey Consulting
+
+Answer-first analytical editorialism: one conclusion, one exhibit that proves it, one explicit implication. This independent OpenDoc system applies analytical publication conventions to flowing A4 pages. It is suited to executive decisions, operating reviews and business cases. It does not use McKinsey logos or claim affiliation.
+
+## Palette
+
+The executable tokens are `colors` in `index.ts`; keep this table synchronized when refining them.
+
+| Role | Hex | Use |
+| --- | --- | --- |
+| Deep blue | `#051C2C` | Text, structure, dark covers |
+| Electric blue | `#2251FF` | The focal datum or governing conclusion |
+| White | `#FFFFFF` | Analytical canvas, inverse copy |
+| Gray | `#4D4D4D` | Secondary copy and source notes |
+| Rule | `#D0D0D0` | Axes, dividers and table rules |
+| Soft | `#F0F0F0` | Context bands and alternate rows |
+| Pale blue | `#AAE6F0` | Implication field or selected row |
+| Cyan | `#00A9F4` | Secondary emphasis, used sparingly |
+| Series 1–4 | `#034B6F`, `#027AB1`, `#39BDF3`, `#71D2F1` | Ordered dark-to-light series |
+| Positive | `#3C96B4` | Favorable movement when direction is defined |
+| Caution | `#FAA082` | A watch item |
+| Negative | `#E5546C` | Adverse variance or exception |
+
+Keep most analytical content deep blue, gray and white. Electric blue earns attention by being scarce. Semantic warning colors require a meaningful exception; they are never decoration. The cover may combine the ordered blues in an abstract rectangular field, but charts use color to explain evidence.
+
+## Type, space and geometry
+
+Use the embedded **OpenDoc Sans** regular and semibold faces. This is a deliberate substitute for proprietary McKinsey Sans. There is no CSS fallback stack and no external font request. OpenDoc Mono appears only in the system specimen’s hex values.
+
+| Role | Size / leading |
+| --- | --- |
+| Cover | 62 pt / 1.01 |
+| Answer or exhibit heading | 31 pt / 1.10 |
+| Section | 19 pt / 1.15 |
+| Subheading | 12 pt / 1.20 |
+| Body | 10.5 pt / 1.42 |
+| Table | 9 pt |
+| Source | 8 pt / 1.35 |
+
+Use sentence case and restrained semibold emphasis. Keep the answer to two or three short lines on A4. Do not bold a whole paragraph. Keep numerical labels flush right and use a shared comparison scale.
+
+The page is A4 portrait with 48 pt left/right/top margins and 52 pt below. Build from a 12-column construction with 12 pt gutters; use 4 pt spacing increments. All analytical containers have square corners. Rules are 0.5 pt. Gaps and aligned edges separate groups; avoid boxed cells, rounded dashboards, shadows, gradients and decorative icons.
+
+## Composition and evidence
+
+An analytical page follows **exhibit marker → answer → metric frame → evidence → implication → source**. The metric frame defines unit, population, period and comparison basis. Give the evidence the largest area. A title claiming “three levers account for 82%” requires those three contributions and their sum to be immediately inspectable.
+
+Sort bars to expose the pattern and directly label values. Begin bars at zero; show a benchmark in the same field when relevant. Use exact-value tables when precision matters more than shape. Use a dark header and fine horizontal rules; select at most one row or decisive range. Source notes disclose limitations without hiding them in microscopic text. Synthetic data is labeled as illustrative at the exhibit and page footer.
+
+Long prose and tables flow normally. Do not put an entire report in an unbreakable container or force every section onto a hand-positioned page. Reserve the separate dark cover for a substantial publication; a short memo starts directly with its answer.
+
+## Reusable components
+
+Import the theme from `./index` and the components below from `./components` (use the corresponding relative paths in a document). Pass this theme to the enclosing OpenDoc `Document`.
+
+| Component | Inputs and purpose |
+| --- | --- |
+| `ConsultingCover` | `id`, `title`, `subtitle`, optional `label`; dark cover with a rectangular field and automatic folio |
+| `ExhibitTitle` | `id`, `number`, `topic`, `metric`, conclusion as children; keeps the claim with its measurement definition |
+| `RankedBars` | `id`, rows of `{label, detail?, value}`, optional `max`, `suffix`, `highlight`; common zero scale and direct labels |
+| `Implication` | `id`, optional `label`, text children; pale-blue decision field |
+| `SourceNote` | `id`, text children; a readable caveat and source line |
+
+Use standard OpenDoc `Pages`, `Paragraph`, `DataTable`, `Figure` and citation primitives for the rest; the theme’s native role styles already govern them. Retain stable IDs. The three-page `preview.tsx` demonstrates the cover, exact system grammar and an applied analytical exhibit through these same reusable components.
+
+## Basis
+
+This is an independent implementation using OpenDoc primitives, a deep-blue/electric-blue palette, answer-first exhibits, and square geometry. It uses bundled OpenDoc Sans instead of proprietary fonts and includes no McKinsey artwork. The theme does not claim affiliation or endorsement.