Skip to content

coframe.tech homepage — Hokusai woodblock design (v1)

Design handoff from a sibling Claude session (working in Paper). Intent: a "woodblock-print" homepage that takes the vibe of Hokusai's Great Wave without being literal about it. The metaphor maps directly to Coframe's positioning — organic shapes regimented into a structured print, just as Coframe takes messy analytical data and regiments it into structurally correct queries.

A reference screenshot of the Paper artboard should be placed alongside this file at coframe_website_hokusai_design_v1.png. (Sibling session is running in Paper desktop and will export.)

Mood and palette

Mood: woodblock. Not first-instinct "maritime" — woodblock leans into the medium of the print (the cream paper, registration marks, the vermilion artist's seal) which maps better to Coframe's "structural rigor over messy data" thesis.

Palette, derived color-by-color from a single Hokusai print:

Hex Role
#F2EAD8 aged paper — ground
#1B3F7A Prussian blue — primary ink
#0A2247 indigo / mountain shadow — heavy text, dominant blob
#5E8FA8 mid-tone sea — secondary
#F8F2E2 foam cream — highlights, light surfaces
#B33A2A vermilion — the one hot accent (the artist's seal)

Vermilion is used like a chop, not a fill. Three appearances and no more on the page: the seal in the hero, the single hot blob inside the canopy mosaic, and the roman numerals on the plates section.

Type

  • Display: Crimson Pro 700, 124px / 108, letter-spacing -0.025em. Italicize emphasis words (e.g. "structurally impossible.")
  • Italic sub: Crimson Pro italic 400, 26px / 38, max-width ~440px.
  • Section heads: Crimson Pro 700, 44px / 48, letter-spacing -0.01em.
  • Plate heads: Crimson Pro 700, 30px / 36, letter-spacing -0.01em.
  • Drop-cap markers: Crimson Pro italic 400, 56px in vermilion (roman numerals i, ii, iii, iv).
  • Eyebrows / nav: Inter 500–600, 11–12px UPPERCASE, letter-spacing 0.18em (nav) to 0.28em (section markers).
  • Body: Inter 400, 14–16px, line-height ~22–24.
  • Footer headings: Inter 600, 10px UPPERCASE, color sea-blue.

Direction

Cream paper canvas. One rhythmic crown-shyness mosaic running through the hero's right side (organic blobs in the palette, no outlines, with channels of cream paper between them — the gaps are as important as the shapes). A giant indigo display headline pinned against it. Vermilion seal in the upper right as the artist's chop.

Edges are regimented (corner registration marks like a printer's proof); the mosaic is loose and ornamental against that structure. That tension — regimented frame, organic interior — is the whole point.

Page structure (top → bottom)

  1. Nav (thin, full-bleed top, ~36px tall)
  2. Wordmark: coframe (Crimson 700, 26px) + small-caps TECH in sea-blue
  3. Nav items: QUICKSTART · DEMO · MANUAL · PLATFORM · ABOUT (Inter 500, 12px UPPERCASE, 0.16em tracking)

  4. Right-aligned status: vermilion dot + small-caps PRE-V1.0

  5. Hero

  6. Eyebrow row: 36px indigo rule + small-caps PLATE I · THE GRAMMAR LAYER
  7. Headline (Crimson 700, 124px): "Silently wrong answers, made <i>structurally impossible.</i>"
  8. Sub (Crimson italic, 26px, max-width 440): "A grammar layer for analytical data — built so an AI agent either returns a verified answer, or refuses with diagnostics. Nothing in between."
  9. CTA row:
    • Primary: dark indigo block Read the quickstart → (Inter 600, 14px, paper-cream text)
    • Secondary: text link with thin indigo underline See it run on real data →

  10. Decorative: crown-shyness mosaic behind the right half of the hero (see spec below). Vermilion seal/chop in the top-right corner of the hero, rotated -4deg, labeled CF / VERIFIED / PLATE I in foam-cream on vermilion.

  11. Plates II — "What makes it different"

  12. Section head: small-caps vermilion II. + Crimson 700 head + italic sea-blue label four plates, with a 1px indigo rule beneath.
  13. 2×2 grid (640px columns) of plates, with 1px hairline dividers in #0A2247 @ 20% alpha between cells.
  14. Each plate: italic vermilion roman numeral (56px) + small-caps sea-blue label + Crimson 700 head (30px, with italic emphasis on the punchline phrase) + Inter body (15px / 24, opacity 0.86, max 480px).

  15. Content:

    • i · cross-grain navigation — Joins and aggregations resolve automatically, with a correctness proof.
    • ii · binary outcomes — Verified answer, or a refusal with diagnostics. Nothing in the middle.
    • iii · native to agents — An agent describes the question. Coframe writes the SQL — and stands behind it.
    • iv · trust calibration — Three tiers — A, AA, AAA — like WCAG, but for analytical trust.

  16. Plates III — "Two editions, one grammar"

  17. Section head: III. + Crimson 700 head + italic pick your bar.

  18. Two equal-width cards side-by-side, 32px gap:

    • Coframe Core: cream #F8F2E2 background, 1px indigo border, a top-right corner tab APACHE 2.0 (dark indigo on cream, paper-cream text).
    • Glyph: italic vermilion A + Crimson 700 head Coframe Core
    • Italic sub: "The open grammar. Pre-v1.0, evolving in the open, backed by Polars and DuckDB."
    • Dashed-line separator (#0A2247 @ 33% alpha), then 4 bullets (vermilion dots, Inter 14px): Polars + DuckDB backends · Verification tier A · CLI + Python agent SDK · Community-supported
    • Bottom CTA with top-rule: READ THE QUICKSTART →
    • Coframe Pro: indigo #0A2247 background, paper-cream text, vermilion corner tab COMMERCIAL.
    • Glyph: italic vermilion AAA + Crimson 700 head Coframe Pro in paper cream
    • Italic sub: "Multi-backend, audit-grade verification, support contract. For teams shipping analytical answers to humans who'll act on them."
    • Dashed separator (paper-cream @ 33%), 4 bullets: Snowflake, BigQuery, Redshift, Postgres · Verification tiers A · AA · AAA · Audit log + signed verification certificates · Direct support, SLAs, deployment help
    • Bottom CTA: TALK TO US →

  19. Colophon

  20. Eyebrow: vermilion small-caps COLOPHON + italic sea-blue a print, in the open

  21. Single paragraph in Crimson 400, 30px / 40, max 920: "Coframe is being engraved in the open. The grammar, the verifier, and the manual all live on GitHub — pulled apart, debated, and re-cut as the spec settles toward v1.0."

  22. Footer (top-bordered)

  23. Wordmark + copyright © 2026 Coframe contributors · Apache 2.0
  24. Three columns (Learn / Background / Project) with small-caps sea-blue headings and Inter 13px links

Decorative ornament — crown-shyness mosaic

A cluster of ~16 organic blobs occupying the hero's right side. The silhouette of the whole is structured; each cell is organic; cream paper shows through the channels between them (this is the "crown shyness" effect — tree canopies that don't quite touch).

  • No outlines on any blob. Solid fills only.
  • Vary opacity 0.40 – 1.00 for atmospheric depth — some blobs recede, others sit forward.
  • One dominant indigo blob (the visual gravity well) at ~100% opacity.
  • 4–5 mid-sized Prussian/sea blobs orbiting, with shyness gaps.
  • 3 foam-cream highlights scattered.
  • 1 vermilion blob embedded inside the dominant indigo — feels like a heart, not a floating accent.
  • 6–8 micro ellipses + ~10 specks fragmenting outward into the cream paper margin, so the mosaic integrates with the page rather than sitting as a hard graphic.

Geometry (in a 880×700 viewBox; render frame ~760×640 positioned absolute, top: 260px, right: -200px on the artboard, behind the headline):

// Reference SVG paths in the Paper export below; recommend reusing
// the path strings verbatim rather than re-tracing.

Other decorative

  • Registration tick marks in all four artboard corners — thin 1.2px indigo L-shapes, 18px each leg, at 32px inset. Center ticks on each edge at 0.8px / 0.35 opacity.
  • Paper grain: SVG feTurbulence with baseFrequency=1.2, seed=7, two octaves, color-matrixed to oklch(0.62 / 0.56 / 0.42 @ 0.18), full-bleed under everything at opacity: 0.55, mix-blend-mode: multiply.
  • Ink bleed: a second turbulence layer, baseFrequency=0.025, matrixed to indigo at 0.10 — gives the paper a barely-perceptible staining/wash quality.

Layout rules

  • Container: centered to 1440px wide (single artboard width). Page uses 80px horizontal padding consistently.
  • Section spacing: hero uses 96px top, 32px between groups inside hero; plates section starts 160px below hero CTAs; editions section starts 140px below plates; colophon 160px; footer with 1px indigo rule and 36px vertical padding.
  • Vertical hairlines: plate cells use #0A2247 @ 33% alpha 1px borders on right/top to form the 2×2 grid.

Paper export — exact JSX with inline styles

The following is a one-to-one export from the Paper artboard ("Quiet beacon" file, artboard coframe.tech — hokusai, 1440×fit-content). React component using inline styles — feel free to translate to whatever the coframe.tech site uses (mkdocs overrides/ template? a separate landing repo?), but the values here are ground truth.

export function CoframeHokusaiHero() {
  return (
    <div style={{ backgroundColor: '#F2EAD8', boxSizing: 'border-box', display: 'flex', flexDirection: 'column', fontSize: '12px', height: 'fit-content', lineHeight: '16px', overflow: 'clip', position: 'relative', width: '1440px' }}>

      {/* paper grain — full-bleed turbulence at 0.55 opacity multiply */}
      <div style={{ bottom: 0, left: 0, mixBlendMode: 'multiply', opacity: 0.55, position: 'absolute', right: 0, top: 0, pointerEvents: 'none' }}>
        <svg width="1440" height="1600" viewBox="0 0 1440 1600" xmlns="http://www.w3.org/2000/svg" style={{ position: 'absolute', inset: 0 }}>
          <defs>
            <filter id="paper-grain">
              <feTurbulence type="fractalNoise" baseFrequency="1.2" numOctaves="2" seed="7" />
              <feColorMatrix values="0 0 0 0 0.62  0 0 0 0 0.56  0 0 0 0 0.42  0 0 0 0.18 0" />
            </filter>
            <filter id="ink-bleed">
              <feTurbulence type="fractalNoise" baseFrequency="0.025" numOctaves="2" seed="3" />
              <feColorMatrix values="0 0 0 0 0.11  0 0 0 0 0.25  0 0 0 0 0.48  0 0 0 0.10 0" />
            </filter>
          </defs>
          <rect width="1440" height="1600" filter="url(#paper-grain)" />
          <rect width="1440" height="1600" filter="url(#ink-bleed)" />
        </svg>
      </div>

      {/* registration tick marks — 32px inset corners */}
      <div style={{ bottom: 32, left: 32, position: 'absolute', right: 32, top: 32, pointerEvents: 'none' }}>
        <svg width="100%" height="100%" viewBox="0 0 1376 1536" preserveAspectRatio="none">
          <g stroke="#0A2247" strokeWidth="1.2" fill="none" opacity="0.55">
            <path d="M0 18 L18 18 L18 0" />
            <path d="M1376 18 L1358 18 L1358 0" />
            <path d="M0 1518 L18 1518 L18 1536" />
            <path d="M1376 1518 L1358 1518 L1358 1536" />
          </g>
          <g stroke="#0A2247" strokeWidth="0.8" fill="none" opacity="0.35">
            <line x1="688" y1="0" x2="688" y2="14" />
            <line x1="688" y1="1522" x2="688" y2="1536" />
            <line x1="0" y1="768" x2="14" y2="768" />
            <line x1="1362" y1="768" x2="1376" y2="768" />
          </g>
        </svg>
      </div>

      {/* nav */}
      <div style={{ alignItems: 'center', display: 'flex', gap: 56, padding: '36px 80px 0 80px', position: 'relative' }}>
        <div style={{ alignItems: 'baseline', display: 'flex', gap: 10 }}>
          <span style={{ color: '#0A2247', fontFamily: '"Crimson Pro", serif', fontSize: 26, fontWeight: 700, letterSpacing: '-0.01em' }}>coframe</span>
          <span style={{ color: '#5E8FA8', fontFamily: '"Inter", sans-serif', fontSize: 11, fontWeight: 500, letterSpacing: '0.18em', textTransform: 'uppercase' }}>tech</span>
        </div>
        <div style={{ alignItems: 'center', display: 'flex', flex: 1, gap: 36 }}>
          {['quickstart','demo','manual','platform','about'].map(label => (
            <span key={label} style={{ color: '#0A2247', fontFamily: '"Inter", sans-serif', fontSize: 12, fontWeight: 500, letterSpacing: '0.16em', textTransform: 'uppercase' }}>{label}</span>
          ))}
        </div>
        <div style={{ alignItems: 'center', display: 'flex', gap: 10 }}>
          <span style={{ background: '#B33A2A', borderRadius: '50%', height: 6, width: 6 }} />
          <span style={{ color: '#0A2247', fontFamily: '"Inter", sans-serif', fontSize: 11, fontWeight: 500, letterSpacing: '0.16em', textTransform: 'uppercase' }}>pre-v1.0</span>
        </div>
      </div>

      {/* crown-shyness mosaic — sits behind the hero text, right side */}
      <div style={{ height: 640, position: 'absolute', right: -200, top: 260, width: 760, pointerEvents: 'none' }}>
        <svg width="100%" height="100%" viewBox="0 0 880 700" xmlns="http://www.w3.org/2000/svg" style={{ overflow: 'visible' }}>
          {/* dominant indigo — opacity 1 */}
          <path d="M 420 220 C 524 196, 640 224, 696 296 C 750 364, 754 458, 686 510 C 614 564, 502 562, 432 514 C 372 472, 348 396, 366 322 C 376 282, 396 246, 420 220 Z" fill="#0A2247" />
          {/* upper-left prussian — 0.62 */}
          <path d="M 162 188 C 232 154, 332 168, 372 220 C 404 262, 386 304, 326 322 C 268 340, 196 326, 158 290 C 130 264, 132 218, 162 188 Z" fill="#1B3F7A" opacity="0.62" />
          {/* upper-far-right sea — 0.48 */}
          <path d="M 730 130 C 798 116, 858 152, 848 212 C 838 264, 768 286, 712 256 C 668 232, 666 174, 696 144 C 706 134, 718 130, 730 130 Z" fill="#5E8FA8" opacity="0.48" />
          {/* lower-right prussian — 0.88 */}
          <path d="M 596 506 C 690 494, 786 540, 794 614 C 798 660, 736 692, 660 678 C 580 664, 506 622, 510 568 C 514 528, 552 510, 596 506 Z" fill="#1B3F7A" opacity="0.88" />
          {/* lower-left sea — 0.56 */}
          <path d="M 232 484 C 312 466, 408 498, 416 552 C 422 596, 358 624, 280 614 C 200 604, 134 568, 142 522 C 148 496, 188 488, 232 484 Z" fill="#5E8FA8" opacity="0.56" />
          {/* mid-left indigo — 0.78 */}
          <path d="M 88 366 C 132 350, 184 374, 184 414 C 184 452, 132 472, 92 458 C 56 446, 40 412, 56 388 C 64 376, 76 370, 88 366 Z" fill="#0A2247" opacity="0.78" />
          {/* upper-mid bridge prussian — 0.42 (ghosted, recedes) */}
          <path d="M 446 96 C 510 80, 574 106, 580 154 C 584 192, 526 214, 472 200 C 418 186, 396 144, 416 118 C 424 106, 434 100, 446 96 Z" fill="#1B3F7A" opacity="0.42" />
          {/* vermilion accent — embedded INSIDE the dominant indigo, opacity 1 */}
          <path d="M 540 360 C 580 348, 622 372, 620 406 C 618 436, 580 452, 548 444 C 516 436, 502 408, 514 386 C 520 376, 530 364, 540 360 Z" fill="#B33A2A" />
          {/* foam-cream highlights, varied opacity */}
          <path d="M 300 376 C 326 368, 354 384, 350 408 C 346 428, 320 436, 298 428 C 276 420, 270 396, 282 384 C 288 378, 294 376, 300 376 Z" fill="#F8F2E2" opacity="0.95" />
          <path d="M 644 386 C 670 380, 692 398, 686 418 C 680 436, 654 442, 638 432 C 622 422, 624 398, 638 390 Z" fill="#F8F2E2" opacity="0.82" />
          <path d="M 408 458 C 432 452, 456 468, 452 488 C 448 506, 422 510, 406 500 C 390 490, 392 466, 408 458 Z" fill="#F8F2E2" opacity="0.65" />
          {/* micro ellipses */}
          <ellipse cx="240" cy="276" rx="22" ry="18" fill="#1B3F7A" opacity="0.5" />
          <ellipse cx="528" cy="270" rx="18" ry="14" fill="#5E8FA8" opacity="0.68" />
          <ellipse cx="746" cy="356" rx="20" ry="16" fill="#0A2247" opacity="0.84" />
          <ellipse cx="358" cy="624" rx="24" ry="18" fill="#0A2247" opacity="0.72" />
          <ellipse cx="124" cy="278" rx="14" ry="11" fill="#F8F2E2" opacity="0.55" />
          <ellipse cx="836" cy="466" rx="14" ry="11" fill="#F8F2E2" opacity="0.9" />
          {/* speck pebbles */}
          <circle cx="48" cy="488" r="5" fill="#0A2247" opacity="0.6" />
          <circle cx="68" cy="544" r="3.5" fill="#1B3F7A" opacity="0.4" />
          <circle cx="836" cy="278" r="4.5" fill="#0A2247" opacity="0.85" />
          <circle cx="822" cy="608" r="5" fill="#1B3F7A" opacity="0.7" />
          <circle cx="496" cy="100" r="4" fill="#0A2247" opacity="0.5" />
          <circle cx="378" cy="68" r="3" fill="#1B3F7A" opacity="0.62" />
          <circle cx="612" cy="56" r="3.5" fill="#5E8FA8" opacity="0.78" />
          <circle cx="780" cy="660" r="4" fill="#0A2247" opacity="0.46" />
          <circle cx="180" cy="654" r="3" fill="#5E8FA8" opacity="0.55" />
        </svg>
      </div>

      {/* hero */}
      <div style={{ display: 'flex', flexDirection: 'column', gap: 32, padding: '96px 80px 0 80px', position: 'relative' }}>
        <div style={{ alignItems: 'center', display: 'flex', gap: 16 }}>
          <span style={{ background: '#0A2247', height: 1, width: 36 }} />
          <span style={{ color: '#0A2247', fontFamily: '"Inter", sans-serif', fontSize: 12, fontWeight: 600, letterSpacing: '0.24em', textTransform: 'uppercase' }}>Plate I · The grammar layer</span>
        </div>
        <h1 style={{ color: '#0A2247', fontFamily: '"Crimson Pro", serif', fontSize: 124, fontWeight: 700, letterSpacing: '-0.025em', lineHeight: '108px', margin: 0, maxWidth: 880 }}>
          Silently wrong answers, made <em style={{ color: '#1B3F7A', fontWeight: 700 }}>structurally impossible.</em>
        </h1>
        <p style={{ color: '#0A2247', fontFamily: '"Crimson Pro", serif', fontSize: 26, fontStyle: 'italic', lineHeight: '38px', margin: 0, maxWidth: 440, opacity: 0.86 }}>
          A grammar layer for analytical data — built so an AI agent either returns a verified answer, or refuses with diagnostics. Nothing in between.
        </p>
        <div style={{ alignItems: 'center', display: 'flex', gap: 24, paddingTop: 16 }}>
          <a href="/quickstart" style={{ alignItems: 'center', background: '#0A2247', color: '#F2EAD8', display: 'flex', fontFamily: '"Inter", sans-serif', fontSize: 14, fontWeight: 600, gap: 14, letterSpacing: '0.02em', padding: '18px 28px', textDecoration: 'none' }}>
            <span>Read the quickstart</span>
            <svg width="22" height="14" viewBox="0 0 22 14" fill="none"><path d="M1 7 H20 M14 1 L20 7 L14 13" stroke="#F2EAD8" strokeWidth="1.6" strokeLinecap="square" /></svg>
          </a>
          <a href="/demo" style={{ alignItems: 'center', borderBottom: '1.5px solid #0A2247', color: '#0A2247', display: 'flex', fontFamily: '"Inter", sans-serif', fontSize: 14, fontWeight: 500, gap: 12, letterSpacing: '0.02em', padding: '18px 4px', textDecoration: 'none' }}>
            <span>See it run on real data</span>
            <span style={{ fontFamily: '"Crimson Pro", serif', fontSize: 16, fontStyle: 'italic' }}>→</span>
          </a>
        </div>
      </div>

      {/* vermilion seal — top-right of hero, rotated chop */}
      <div style={{ height: 78, position: 'absolute', right: 88, top: 156, transform: 'rotate(-4deg)', width: 78 }}>
        <svg width="78" height="78" viewBox="0 0 78 78">
          <rect x="2" y="2" width="74" height="74" fill="#B33A2A" stroke="#0A2247" />
          <rect x="7" y="7" width="64" height="64" fill="none" stroke="#F8F2E2" strokeWidth="0.9" />
          <text x="39" y="32" textAnchor="middle" fontFamily="Crimson Pro, serif" fontWeight="700" fontSize="18" fill="#F8F2E2" letterSpacing="0.04em">CF</text>
          <line x1="14" y1="42" x2="64" y2="42" stroke="#F8F2E2" strokeWidth="0.7" />
          <text x="39" y="56" textAnchor="middle" fontFamily="Inter, sans-serif" fontWeight="600" fontSize="9" fill="#F8F2E2" letterSpacing="0.14em">VERIFIED</text>
          <text x="39" y="68" textAnchor="middle" fontFamily="Inter, sans-serif" fontWeight="500" fontSize="6" fill="#F8F2E2" letterSpacing="0.18em">PLATE I</text>
        </svg>
      </div>

      {/* plates II — "What makes it different" */}
      <div style={{ display: 'flex', flexDirection: 'column', gap: 56, padding: '160px 80px 0 80px', position: 'relative' }}>
        <div style={{ alignItems: 'baseline', borderBottom: '1px solid #0A2247', display: 'flex', gap: 36, paddingBottom: 24 }}>
          <span style={{ color: '#B33A2A', fontFamily: '"Inter", sans-serif', fontSize: 11, fontWeight: 600, letterSpacing: '0.28em', textTransform: 'uppercase' }}>II.</span>
          <h2 style={{ color: '#0A2247', flex: 1, fontFamily: '"Crimson Pro", serif', fontSize: 44, fontWeight: 700, letterSpacing: '-0.01em', lineHeight: '48px', margin: 0 }}>What makes it different</h2>
          <span style={{ color: '#5E8FA8', fontFamily: '"Crimson Pro", serif', fontSize: 18, fontStyle: 'italic' }}>four plates</span>
        </div>
        <div style={{ display: 'flex', flexWrap: 'wrap' }}>
          {[
            { numeral: 'i',   label: 'cross-grain navigation', head: <>Joins and aggregations resolve <em style={{ fontStyle: 'italic' }}>automatically</em>, with a correctness proof.</>, body: "No more fan-trap, no more chasm-trap. The grammar layer walks the schema for you and emits a query that's either provably correct against the model — or refuses with a diagnostic.", borderRight: true,  borderTop: false },
            { numeral: 'ii',  label: 'binary outcomes',         head: <>Verified answer, or a refusal with diagnostics. <em style={{ fontStyle: 'italic' }}>Nothing in the middle.</em></>, body: "The dangerous case in analytical pipelines isn't a wrong answer — it's a wrong answer that looks fine. Coframe makes that case structurally unreachable.", borderRight: false, borderTop: false },
            { numeral: 'iii', label: 'native to agents',        head: <>An agent describes the question. Coframe writes the SQL — <em style={{ fontStyle: 'italic' }}>and stands behind it.</em></>, body: "Agents shouldn't be hand-crafting joins from scraped table descriptions. Hand off the intent; let the grammar layer produce, verify, and return.", borderRight: true,  borderTop: true },
            { numeral: 'iv',  label: 'trust calibration',       head: <>Three tiers — <em style={{ fontStyle: 'italic' }}>A, AA, AAA</em> — like WCAG, but for analytical trust.</>, body: "Pick the bar you want answers to clear. The grammar layer marks every result with its level — so you know, at a glance, what you're trusting and what you're not.", borderRight: false, borderTop: true },
          ].map((p, i) => (
            <div key={i} style={{
              borderRight: p.borderRight ? '1px solid #0A224733' : undefined,
              borderTop:   p.borderTop   ? '1px solid #0A224733' : undefined,
              display: 'flex',
              flexDirection: 'column',
              gap: 18,
              padding: p.borderTop ? (p.borderRight ? '40px 40px 36px 0' : '40px 0 36px 40px') : (p.borderRight ? '36px 40px 40px 0' : '36px 0 40px 40px'),
              width: 640,
            }}>
              <div style={{ alignItems: 'baseline', display: 'flex', gap: 12 }}>
                <span style={{ color: '#B33A2A', fontFamily: '"Crimson Pro", serif', fontSize: 56, fontStyle: 'italic', lineHeight: '56px' }}>{p.numeral}</span>
                <span style={{ color: '#5E8FA8', fontFamily: '"Inter", sans-serif', fontSize: 11, fontWeight: 600, letterSpacing: '0.20em', textTransform: 'uppercase' }}>{p.label}</span>
              </div>
              <h3 style={{ color: '#0A2247', fontFamily: '"Crimson Pro", serif', fontSize: 30, fontWeight: 700, letterSpacing: '-0.01em', lineHeight: '36px', margin: 0 }}>{p.head}</h3>
              <p style={{ color: '#0A2247', fontFamily: '"Inter", sans-serif', fontSize: 15, lineHeight: '24px', margin: 0, maxWidth: 480, opacity: 0.86 }}>{p.body}</p>
            </div>
          ))}
        </div>
      </div>

      {/* plates III — editions */}
      <div style={{ display: 'flex', flexDirection: 'column', gap: 56, padding: '140px 80px 0 80px', position: 'relative' }}>
        <div style={{ alignItems: 'baseline', borderBottom: '1px solid #0A2247', display: 'flex', gap: 36, paddingBottom: 24 }}>
          <span style={{ color: '#B33A2A', fontFamily: '"Inter", sans-serif', fontSize: 11, fontWeight: 600, letterSpacing: '0.28em', textTransform: 'uppercase' }}>III.</span>
          <h2 style={{ color: '#0A2247', flex: 1, fontFamily: '"Crimson Pro", serif', fontSize: 44, fontWeight: 700, letterSpacing: '-0.01em', lineHeight: '48px', margin: 0 }}>Two editions, one grammar</h2>
          <span style={{ color: '#5E8FA8', fontFamily: '"Crimson Pro", serif', fontSize: 18, fontStyle: 'italic' }}>pick your bar</span>
        </div>
        <div style={{ display: 'flex', gap: 32 }}>
          {/* Core (cream) */}
          <div style={{ background: '#F8F2E2', border: '1px solid #0A2247', display: 'flex', flex: 1, flexDirection: 'column', gap: 22, padding: '36px 36px 40px 36px', position: 'relative' }}>
            <div style={{ background: '#0A2247', color: '#F8F2E2', fontFamily: '"Inter", sans-serif', fontSize: 10, fontWeight: 600, letterSpacing: '0.20em', padding: '6px 12px', position: 'absolute', right: -1, textTransform: 'uppercase', top: -1 }}>Apache 2.0</div>
            <div style={{ alignItems: 'baseline', display: 'flex', gap: 14 }}>
              <span style={{ color: '#B33A2A', fontFamily: '"Crimson Pro", serif', fontSize: 36, fontStyle: 'italic', lineHeight: '36px' }}>A</span>
              <h3 style={{ color: '#0A2247', fontFamily: '"Crimson Pro", serif', fontSize: 38, fontWeight: 700, letterSpacing: '-0.01em', lineHeight: '42px', margin: 0 }}>Coframe Core</h3>
            </div>
            <p style={{ color: '#0A2247', fontFamily: '"Crimson Pro", serif', fontSize: 18, fontStyle: 'italic', lineHeight: '26px', margin: 0, opacity: 0.86 }}>The open grammar. Pre-v1.0, evolving in the open, backed by Polars and DuckDB.</p>
            <div style={{ borderTop: '1px dashed #0A224755', display: 'flex', flexDirection: 'column', gap: 12, paddingTop: 8 }}>
              {['Polars + DuckDB backends', 'Verification tier A', 'CLI + Python agent SDK', 'Community-supported'].map(b => (
                <div key={b} style={{ alignItems: 'baseline', display: 'flex', gap: 14 }}>
                  <span style={{ color: '#B33A2A', flexShrink: 0, fontFamily: '"Inter", sans-serif', fontSize: 11, fontWeight: 600, letterSpacing: '0.16em', width: 14 }}>·</span>
                  <span style={{ color: '#0A2247', fontFamily: '"Inter", sans-serif', fontSize: 14, lineHeight: '22px' }}>{b}</span>
                </div>
              ))}
            </div>
            <a href="/quickstart" style={{ alignItems: 'center', borderTop: '1px solid #0A2247', color: '#0A2247', display: 'inline-flex', fontFamily: '"Inter", sans-serif', fontSize: 13, fontWeight: 600, gap: 10, letterSpacing: '0.06em', marginTop: 12, paddingTop: 14, textDecoration: 'none' }}>
              <span>READ THE QUICKSTART</span>
              <span style={{ fontFamily: '"Crimson Pro", serif', fontSize: 18, fontStyle: 'italic' }}>→</span>
            </a>
          </div>
          {/* Pro (indigo) */}
          <div style={{ background: '#0A2247', border: '1px solid #0A2247', color: '#F2EAD8', display: 'flex', flex: 1, flexDirection: 'column', gap: 22, padding: '36px 36px 40px 36px', position: 'relative' }}>
            <div style={{ background: '#B33A2A', color: '#F8F2E2', fontFamily: '"Inter", sans-serif', fontSize: 10, fontWeight: 600, letterSpacing: '0.20em', padding: '6px 12px', position: 'absolute', right: -1, textTransform: 'uppercase', top: -1 }}>Commercial</div>
            <div style={{ alignItems: 'baseline', display: 'flex', gap: 14 }}>
              <span style={{ color: '#B33A2A', fontFamily: '"Crimson Pro", serif', fontSize: 36, fontStyle: 'italic', lineHeight: '36px' }}>AAA</span>
              <h3 style={{ color: '#F2EAD8', fontFamily: '"Crimson Pro", serif', fontSize: 38, fontWeight: 700, letterSpacing: '-0.01em', lineHeight: '42px', margin: 0 }}>Coframe Pro</h3>
            </div>
            <p style={{ color: '#F2EAD8', fontFamily: '"Crimson Pro", serif', fontSize: 18, fontStyle: 'italic', lineHeight: '26px', margin: 0, opacity: 0.86 }}>Multi-backend, audit-grade verification, support contract. For teams shipping analytical answers to humans who'll act on them.</p>
            <div style={{ borderTop: '1px dashed #F2EAD855', display: 'flex', flexDirection: 'column', gap: 12, paddingTop: 8 }}>
              {['Snowflake, BigQuery, Redshift, Postgres', 'Verification tiers A · AA · AAA', 'Audit log + signed verification certificates', 'Direct support, SLAs, deployment help'].map(b => (
                <div key={b} style={{ alignItems: 'baseline', display: 'flex', gap: 14 }}>
                  <span style={{ color: '#B33A2A', flexShrink: 0, fontFamily: '"Inter", sans-serif', fontSize: 11, fontWeight: 600, letterSpacing: '0.16em', width: 14 }}>·</span>
                  <span style={{ color: '#F2EAD8', fontFamily: '"Inter", sans-serif', fontSize: 14, lineHeight: '22px' }}>{b}</span>
                </div>
              ))}
            </div>
            <a href="mailto:hi@coframe.tech" style={{ alignItems: 'center', borderTop: '1px solid #F2EAD8', color: '#F2EAD8', display: 'inline-flex', fontFamily: '"Inter", sans-serif', fontSize: 13, fontWeight: 600, gap: 10, letterSpacing: '0.06em', marginTop: 12, paddingTop: 14, textDecoration: 'none' }}>
              <span>TALK TO US</span>
              <span style={{ fontFamily: '"Crimson Pro", serif', fontSize: 18, fontStyle: 'italic' }}>→</span>
            </a>
          </div>
        </div>
      </div>

      {/* colophon */}
      <div style={{ display: 'flex', flexDirection: 'column', gap: 28, padding: '160px 80px 80px 80px', position: 'relative' }}>
        <div style={{ alignItems: 'baseline', display: 'flex', gap: 24 }}>
          <span style={{ color: '#B33A2A', fontFamily: '"Inter", sans-serif', fontSize: 11, fontWeight: 600, letterSpacing: '0.28em', textTransform: 'uppercase' }}>Colophon</span>
          <span style={{ color: '#5E8FA8', fontFamily: '"Crimson Pro", serif', fontSize: 18, fontStyle: 'italic' }}>a print, in the open</span>
        </div>
        <p style={{ color: '#0A2247', fontFamily: '"Crimson Pro", serif', fontSize: 30, lineHeight: '40px', margin: 0, maxWidth: 920 }}>
          Coframe is being engraved in the open. The grammar, the verifier, and the manual all live on GitHub — pulled apart, debated, and re-cut as the spec settles toward v1.0.
        </p>
      </div>

      {/* footer */}
      <div style={{ alignItems: 'flex-end', borderTop: '1px solid #0A2247', display: 'flex', gap: 56, padding: '36px 80px', position: 'relative' }}>
        <div style={{ display: 'flex', flex: 1, flexDirection: 'column', gap: 6 }}>
          <span style={{ color: '#0A2247', fontFamily: '"Crimson Pro", serif', fontSize: 22, fontWeight: 700, letterSpacing: '-0.01em' }}>coframe</span>
          <span style={{ color: '#0A2247', fontFamily: '"Inter", sans-serif', fontSize: 11, letterSpacing: '0.04em', opacity: 0.7 }}>© 2026 Coframe contributors · Apache 2.0</span>
        </div>
        {[
          { heading: 'Learn',      items: ['Quickstart', 'Demo', 'Manual'] },
          { heading: 'Background', items: ['Vision', 'Naming', 'Website plan'] },
          { heading: 'Project',    items: ['GitHub', 'Status', 'About'] },
        ].map(col => (
          <div key={col.heading} style={{ display: 'flex', flexDirection: 'column', gap: 8, width: 160 }}>
            <span style={{ color: '#5E8FA8', fontFamily: '"Inter", sans-serif', fontSize: 10, fontWeight: 600, letterSpacing: '0.20em', textTransform: 'uppercase' }}>{col.heading}</span>
            {col.items.map(item => (
              <a key={item} href="#" style={{ color: '#0A2247', fontFamily: '"Inter", sans-serif', fontSize: 13, textDecoration: 'none' }}>{item}</a>
            ))}
          </div>
        ))}
      </div>
    </div>
  );
}

Notes for the implementing session

  • The single artboard is 1440px wide; treat the entire layout as one desktop hero. Mobile breakpoints aren't designed yet — keep them simple (stack everything single-column, drop the canopy mosaic or shrink and shift it under the hero block).
  • The crown-shyness mosaic is the one ornament. Don't add others. Restraint > clever.
  • The vermilion appears at most three times: seal, mosaic blob, roman numerals. Any further vermilion dilutes it.
  • The italic phrases in the headings ("structurally impossible.", "Nothing in the middle.", "and stands behind it.", "A, AA, AAA") are the rhythmic punchlines — keep them as italic emphasis, never bold.
  • If the coframe.tech site is mkdocs-rendered, this probably warrants a custom home.html template under docs/overrides/ rather than Markdown — Material for MkDocs supports template overrides at that path.