name: neumorphism
label: Neumorphism
summary: Soft UI with dual shadows and same-colour surfaces — calm, minimal.
tokens:
  palette:
    bg: "#E3E7EE"
    surface: "#F3F6FA"
    ink: "#3B4453"
    ink_muted: "#7E8898"
    accent: "#5A7DF0"
    accent_alt: "#9FAED8"
    rule: "#D4DAE4"
    on_accent: "#0A0A0A"
  surfaces:
    title:
      bg: "#3B4453"
      ink: "#FFFFFF"
      muted: "#B7C0CF"
      accent: "#5A7DF0"
    section:
      bg: "#5A7DF0"
      ink: "#FFFFFF"
      muted: "#F8F9FE"
  dark:
    bg: "#232830"
    surface: "#2B313B"
    ink: "#E3E7EE"
    ink_muted: "#98A2B2"
    accent: "#7E9BFF"
    accent_alt: "#8FA0C8"
    rule: "#FFFFFF1A"
    on_accent: "#FFFFFF"
  type:
    display:
      family: Manrope
      weight: 700
      size: 38
      line: 1.1
      tracking: -0.5
    heading:
      family: Manrope
      weight: 700
      size: 29
      line: 1.15
      tracking: -0.3
    subhead:
      family: Inter
      weight: 500
      size: 15
      line: 1.4
      tracking: 0
    body:
      family: Inter
      weight: 400
      size: 13
      line: 1.55
      tracking: 0
    caption:
      family: Inter
      weight: 500
      size: 10
      line: 1.35
      tracking: 0.2
    eyebrow:
      family: Inter
      weight: 600
      size: 10
      line: 1.2
      tracking: 1.2
      transform: upper
    stat:
      family: Manrope
      weight: 700
      size: 52
      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.32
      pill: 0.4
      chip: 0.12
    border:
      width: 0
      color: "#00000000"
    card_pad: 0.3
    card_fill:
      color: "#E3E7EE"
      transparency: 88
  # Composition — src/composition.js owns the vocabulary; every axis
  # left out here is the shared default.
  layout:
    title:
      composition: top
    section:
      composition: centred
    heading:
      align: centre
      opening: none

  plate:
    enabled: true
    html: >
      <style>
        .bg{position:absolute;inset:0;background:
          linear-gradient(150deg, {{tokens.palette.bg}} 0%, {{tokens.palette.rule}} 100%);}
        .field{position:absolute;left:{{panel.x}}px;top:{{panel.y}}px;width:{{panel.w}}px;height:{{panel.h}}px;
          border-radius:48px;background:{{tokens.palette.bg}};
          box-shadow:
            -40px -40px 72px {{tokens.palette.surface}}e6,
            40px 40px 72px {{tokens.palette.ink}}59,
            inset -20px -20px 40px {{tokens.palette.ink}}40,
            inset 20px 20px 40px {{tokens.palette.surface}}e6;}
      </style>

      <div class="bg"></div>

      <div class="field"></div>
    surfaces:
      # Soft UI is one colour lit from one direction. The title and section
      # surfaces were carrying radial accent glows borrowed from the soft-glow
      # themes, which is the precise opposite of what this style is: a glow is
      # light coming out of the surface, and neumorphism is light falling
      # across it. Both are now the same material as the content field —
      # same-colour ground, form entirely from a raised or recessed edge.
      title: |
        <style>
          .ground{position:absolute;inset:0;
            background:linear-gradient(150deg, {{tokens.surfaces.title.bg}} 0%, {{tokens.palette.ink}} 100%);}
          /* A slab lifted off the ground, holding the title. */
          .slab{position:absolute;left:0;top:22%;width:74%;height:52%;
            border-radius:0 56px 56px 0;
            background:{{tokens.surfaces.title.bg}};
            box-shadow:
              28px 28px 56px #00000059,
              -18px -18px 44px {{tokens.palette.ink_muted}}3d,
              inset 2px 2px 3px {{tokens.palette.ink_muted}}59,
              inset -2px -2px 3px #00000047;}
          /* A channel machined right across the panel, entering at one edge and
             leaving at the other. Stopping short of an edge makes it an object
             sitting on the surface; running the full width makes it something
             cut into it, which is the whole idea. Kept below the slab so the
             two forms read as one plane at different depths. */
          .cut{position:absolute;left:-6%;bottom:11%;width:112%;height:10%;
            border-radius:7px;transform:rotate(-7deg);
            background:{{tokens.surfaces.title.bg}};
            box-shadow:
              inset 9px 9px 18px #00000075,
              inset -9px -9px 18px {{tokens.palette.ink_muted}}47;}
        </style>
        <div class="ground"></div>
        <div class="slab"></div>
        <div class="cut"></div>
      section: |
        <style>
          .ground{position:absolute;inset:0;
            background:linear-gradient(150deg, {{tokens.surfaces.section.bg}} 0%, {{tokens.palette.accent}} 100%);}
          .slab{position:absolute;left:0;top:24%;width:70%;height:50%;
            border-radius:0 999px 999px 0;
            background:{{tokens.surfaces.section.bg}};
            box-shadow:
              26px 26px 52px {{tokens.palette.ink}}4d,
              -16px -16px 40px #ffffff33,
              inset 2px 2px 3px #ffffff4d,
              inset -2px -2px 3px {{tokens.palette.ink}}3d;}
          /* The same channel, edge to edge, below the slab and clear of the
             crest. The light inset runs weaker than the dark one: matched
             evenly on a mid-tone ground the bright edge wins and the channel
             reads as a ridge standing proud rather than a groove cut in. */
          .cut{position:absolute;left:-6%;bottom:9%;width:112%;height:10%;
            border-radius:7px;transform:rotate(-7deg);
            background:{{tokens.surfaces.section.bg}};
            box-shadow:
              inset 10px 10px 20px {{tokens.palette.ink}}80,
              inset -8px -8px 16px #ffffff2e;}
        </style>
        <div class="ground"></div>
        <div class="slab"></div>
        <div class="cut"></div>
  shadow:
    card:
      type: outer
      blur: 18
      offset: 4
      angle: 90
      color: 5A7DF0
      opacity: 0.12
voice:
  feel: calm, minimal, quiet, software that recedes
  density: low
  prefers:
    - generous whitespace
    - one idea per slide
    - soft, understated emphasis
  avoid:
    - loud gradients or saturated colour
    - dense bullet walls
    - anything that shouts
  headline_style: >
    Short, calm, confident. "Soft Interfaces" over "An Introduction to Soft
    Interfaces". Fewer words than you think you need.
  body_style: |
    Full sentences, quiet tone. Give the surface room to breathe.