name: isometric-dark
label: Isometric Dark
summary: Obsidian slate with a faint 3D-wireframe grid — architectural and precise.
tokens:
  palette:
    bg: "#12151C"
    surface: "#1A1E28"
    ink: "#E8EAEF"
    ink_muted: "#9BA1AE"
    accent: "#2E7FFF"
    accent_alt: "#2E6BD6"
    rule: "#FFFFFF1C"
    on_accent: "#0D1117"
  surfaces:
    title:
      bg: "#0D1117"
      ink: "#E8EAEF"
      muted: "#8B93A4"
      accent: "#3D9BFF"
    section:
      bg: "#1A3A6E"
      # Was #0D1117 — near-black ink on a dark blue ground, 1.69:1. The section
      # title was effectively unreadable on every deck this theme rendered.
      ink: "#EAF0FA"
      muted: "#A8C4F0"
  dark:
    bg: "#0D1017"
    surface: "#141820"
    ink: "#E8EAEF"
    ink_muted: "#8F96A5"
    accent: "#4FA6FF"
    accent_alt: "#2E6BD6"
    rule: "#FFFFFF1A"
    on_accent: "#0D1117"
  type:
    display:
      family: Space Grotesk
      weight: 700
      size: 40
      line: 1.08
      tracking: -0.6
    heading:
      family: Space Grotesk
      weight: 600
      size: 29
      line: 1.15
      tracking: -0.3
    subhead:
      family: Inter
      weight: 400
      size: 15
      line: 1.4
      tracking: 0
    body:
      family: Inter
      weight: 400
      size: 13
      line: 1.6
      tracking: 0
    caption:
      family: Inter
      weight: 500
      size: 10
      line: 1.35
      tracking: 0.3
    eyebrow:
      family: Space Grotesk
      weight: 600
      size: 10
      line: 1.2
      tracking: 2
      transform: upper
    stat:
      family: Space Grotesk
      weight: 700
      size: 54
      line: 1
      tracking: -1
  grid:
    # A little wider than a flat theme: the content box is the inside of the
    # plate's panel, which the renderer draws past it on every side, and the
    # ground behind has to stay visible. Only a little — `flow`'s vertical
    # spine stops fitting its body above the readable floor past about 0.76in,
    # so this is the widest step that costs no theme a slide.
    margin:
      top: 0.66
      right: 0.74
      bottom: 0.58
      left: 0.74
    gutter: 0.3
    columns: 12
    band:
      eyebrow_y: 0.62
      title_y: 1.3
      body_y: 2.55
  shape:
    radius:
      card: 0.12
      pill: 0.4
      chip: 0.06
    border:
      width: 1
      color: "#FFFFFF24"
    card_pad: 0.3
    card_fill:
      color: "#1A1E28"
      transparency: 0
  shadow:
    card:
      type: outer
      blur: 16
      offset: 4
      angle: 90
      color: "000000"
      opacity: 0.45
  # Composition — src/composition.js owns the vocabulary; every axis
  # left out here is the shared default.
  layout:
    title:
      composition: top
    section:
      composition: numeral
    heading:
      opening: numeral
    content:
      frame: sidebar
    list:
      marker: arrow

  plate:
    enabled: true
    # Three axes, and a ground under all of them.
    #
    # The grid was two sets of lines at 30 and 150 degrees, which draws a
    # diamond lattice rather than an isometric one — an isometric projection has
    # a third, vertical axis, and without it the surface reads flat. All three
    # are here now, the verticals weaker than the diagonals so the plane still
    # recedes.
    #
    # Every surface also paints its own ground. The grid draws lines onto
    # transparency and the vignette only darkened the edges, so the middle of a
    # plate was never painted at all. On content slides the panel happened to
    # cover the hole; on the title nothing did, and the slide rasterised white
    # with near-white title text on it at 1.2:1 — an unreadable title slide on
    # every deck using this theme.
    html: |
      <style>
        .ground{position:absolute;inset:0;background:{{tokens.palette.bg}};}
        .grid{position:absolute;inset:0;background:
          linear-gradient(30deg, transparent 46%, {{tokens.palette.accent}}22 46% 47%, transparent 47%),
          linear-gradient(150deg, transparent 46%, {{tokens.palette.accent}}22 46% 47%, transparent 47%),
          linear-gradient(90deg, transparent 49.4%, {{tokens.palette.accent}}14 49.4% 50.2%, transparent 50.2%);
          background-size: 86px 74px, 86px 74px, 86px 74px;}
        .vignette{position:absolute;inset:0;background:
          radial-gradient(120% 100% at 50% 0%, transparent 45%, {{tokens.palette.bg}} 100%);}
        .field{position:absolute;left:{{panel.x}}px;top:{{panel.y}}px;width:{{panel.w}}px;height:{{panel.h}}px;
          background:{{tokens.palette.surface}}f0;border:1px solid {{tokens.palette.accent}}3d;border-radius:12px;
          box-shadow:0 20px 52px #00000066;}
      </style>
      <div class="ground"></div>
      <div class="grid"></div>
      <div class="vignette"></div>
      <div class="field"></div>
    surfaces:
      title: |
        <style>
          .ground{position:absolute;inset:0;background:{{tokens.surfaces.title.bg}};}
          .grid{position:absolute;inset:0;background:
            linear-gradient(30deg, transparent 46%, {{tokens.palette.accent}}33 46% 47%, transparent 47%),
            linear-gradient(150deg, transparent 46%, {{tokens.palette.accent}}33 46% 47%, transparent 47%),
            linear-gradient(90deg, transparent 49.4%, {{tokens.palette.accent}}1f 49.4% 50.2%, transparent 50.2%);
            background-size: 86px 74px, 86px 74px, 86px 74px;}
          /* The grid resolves out of the dark rather than being cut off by it:
             brightest along the upper band, gone by the lower third, so the
             title has unlit slate to sit on. */
          .fade{position:absolute;inset:0;background:
            linear-gradient(180deg, transparent 0%, {{tokens.surfaces.title.bg}}66 42%, {{tokens.surfaces.title.bg}} 78%);}
          .edge{position:absolute;left:0;top:64%;width:38%;height:2px;
            background:{{tokens.surfaces.title.accent}};}
        </style>
        <div class="ground"></div>
        <div class="grid"></div>
        <div class="fade"></div>
        <div class="edge"></div>
      section: |
        <style>
          .ground{position:absolute;inset:0;background:
            linear-gradient(30deg, {{tokens.surfaces.section.bg}} 0%, {{tokens.palette.accent_alt}} 100%);}
          .grid{position:absolute;inset:0;background:
            linear-gradient(30deg, transparent 46%, #FFFFFF2E 46% 47%, transparent 47%),
            linear-gradient(150deg, transparent 46%, #FFFFFF2E 46% 47%, transparent 47%),
            linear-gradient(90deg, transparent 49.4%, #FFFFFF1A 49.4% 50.2%, transparent 50.2%);
            background-size: 86px 74px, 86px 74px, 86px 74px;}
          /* A plate of slate laid on the grid, squared off — this theme draws
             right angles, so its divider does not get a rounded end. */
          .slab{position:absolute;left:0;top:26%;width:64%;height:44%;
            background:{{tokens.palette.bg}}b3;
            border-top:1px solid {{tokens.palette.accent}}59;
            border-right:1px solid {{tokens.palette.accent}}59;
            border-bottom:1px solid {{tokens.palette.accent}}59;}
        </style>
        <div class="ground"></div>
        <div class="grid"></div>
        <div class="slab"></div>

voice:
  feel: precise, engineered, architectural, calm
  density: medium
  prefers:
    - measured, technical language
    - a systems view — how the parts fit
    - figures over adjectives
  avoid:
    - glow, neon, gradients over content
    - playful or warm phrasing
    - decoration that distracts from the grid
  headline_style: >
    Label it like a blueprint. "THE RENDER PIPELINE, FRAME BY FRAME". Clear,
    technical, exact.
  body_style: |
    Short precise sentences. Name the system, state its behaviour, stop.