name: aurora-mesh
label: Aurora Mesh
summary: Flowing multi-stop mesh gradients — violet, pink and indigo light.
tokens:
  palette:
    bg: "#F6F3FF"
    surface: "#FFFFFF"
    ink: "#2B2255"
    ink_muted: "#6E6596"
    accent: "#6B3CE8"
    accent_alt: "#E84393"
    rule: "#E5E0F7"
    on_accent: "#FFFFFF"
  # The curtain's hue travel. An aurora is one continuous sheet of light whose
  # colour shifts along its length, so these are stops on a single gradient
  # rather than separate light sources. Ordered as the eye should read them:
  # deep indigo at the edges, violet through orchid to magenta at the crest,
  # with a cool blue to turn the far end back towards the ground.
  aurora:
    edge: "#2E2A7A"
    violet: "#6B3CE8"
    orchid: "#B14BE0"
    magenta: "#E84393"
    cool: "#4A7BE8"

  surfaces:
    title:
      bg: "#2B2255"
      ink: "#FFFFFF"
      muted: "#BFB4E8"
      accent: "#E84393"
    section:
      bg: "#6B3CE8"
      ink: "#FFFFFF"
      muted: "#E3DBFF"
  dark:
    bg: "#191530"
    surface: "#241E48"
    ink: "#ECE7FF"
    ink_muted: "#A79DC9"
    accent: "#8F74F7"
    accent_alt: "#F0659F"
    rule: "#FFFFFF1A"
    on_accent: "#FFFFFF"
  type:
    display:
      family: Outfit
      weight: 700
      size: 40
      line: 1.1
      tracking: -0.6
    heading:
      family: Outfit
      weight: 600
      size: 30
      line: 1.15
      tracking: -0.4
    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: Outfit
      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.22
      pill: 0.4
      chip: 0.12
    border:
      width: 0
      color: "#00000000"
    card_pad: 0.3
    card_fill:
      color: "#FFFFFF"
      transparency: 0
  shadow:
    card:
      type: outer
      blur: 18
      offset: 5
      angle: 90
      color: 2B2255
      opacity: 0.08
  # Composition — src/composition.js owns the vocabulary; every axis
  # left out here is the shared default.
  layout:
    title:
      composition: top
    section:
      composition: centred
    heading:
      opening: none
    content:
      frame: offset

  plate:
    enabled: true
    html: |
      <style>
        .ground{position:absolute;inset:0;
          background:linear-gradient(135deg, {{tokens.palette.bg}} 0%, {{tokens.palette.rule}} 100%);}
        /* One continuous sheet, not a set of light sources.
           The fill is a single gradient running the length of the curtain, so
           the colour changes continuously along it — indigo through violet and
           orchid to magenta and back. The soft form comes from a mask rather
           than from the colour fading out, which is what keeps the shade
           travelling all the way to the edge instead of dissolving into the
           ground colour. Separate blurred blobs cannot do this: each one is a
           single hue, so the transitions between them are overlaps rather than
           a shift. */
        .curtain{position:absolute;
          background:linear-gradient(96deg,
            {{tokens.aurora.edge}} 0%, {{tokens.aurora.violet}} 16%,
            {{tokens.aurora.orchid}} 34%, {{tokens.aurora.magenta}} 52%,
            {{tokens.aurora.orchid}} 68%, {{tokens.aurora.violet}} 84%,
            {{tokens.aurora.cool}} 100%);
          -webkit-mask-image:radial-gradient(closest-side ellipse at 50% 52%,
            #000 0%, #000d 26%, #0007 54%, #0000 86%);
          mask-image:radial-gradient(closest-side ellipse at 50% 52%,
            #000 0%, #000d 26%, #0007 54%, #0000 86%);}
        /* The vertical rays a real curtain shows, at the edge of visible. */
        .rays{position:absolute;
          background:repeating-linear-gradient(94deg,
            #ffffff14 0px, #ffffff14 2px, #0000 2px, #0000 9px);
          -webkit-mask-image:radial-gradient(closest-side ellipse at 50% 52%,
            #000 0%, #0009 40%, #0000 82%);
          mask-image:radial-gradient(closest-side ellipse at 50% 52%,
            #000 0%, #0009 40%, #0000 82%);}
        .grain{position:absolute;inset:0;opacity:.28;mix-blend-mode:soft-light;
          background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
          background-size:200px 200px;}
        .c1{left:-16%;top:-30%;width:132%;height:62%;transform:rotate(-9deg);}
        .c2{left:-10%;bottom:-34%;width:124%;height:52%;transform:rotate(-5deg);opacity:.72;}
        .page{position:absolute;left:{{panel.x}}px;top:{{panel.y}}px;width:{{panel.w}}px;height:{{panel.h}}px;
          border-radius:22px;background:{{tokens.palette.surface}};
          box-shadow:0 24px 60px {{tokens.palette.ink}}2b;}
      </style>
      <div class="ground"></div>
      <div class="curtain c1"></div><div class="rays c1"></div>
      <div class="curtain c2"></div>
      <div class="grain"></div>
      <div class="page"></div>
    surfaces:
      title: |
        <style>
          .ground{position:absolute;inset:0;
            background:linear-gradient(150deg, {{tokens.surfaces.title.bg}} 0%, {{tokens.palette.ink}} 100%);}
        /* One continuous sheet, not a set of light sources.
           The fill is a single gradient running the length of the curtain, so
           the colour changes continuously along it — indigo through violet and
           orchid to magenta and back. The soft form comes from a mask rather
           than from the colour fading out, which is what keeps the shade
           travelling all the way to the edge instead of dissolving into the
           ground colour. Separate blurred blobs cannot do this: each one is a
           single hue, so the transitions between them are overlaps rather than
           a shift. */
        .curtain{position:absolute;
          background:linear-gradient(96deg,
            {{tokens.aurora.edge}} 0%, {{tokens.aurora.violet}} 16%,
            {{tokens.aurora.orchid}} 34%, {{tokens.aurora.magenta}} 52%,
            {{tokens.aurora.orchid}} 68%, {{tokens.aurora.violet}} 84%,
            {{tokens.aurora.cool}} 100%);
          -webkit-mask-image:radial-gradient(closest-side ellipse at 50% 52%,
            #000 0%, #000d 26%, #0007 54%, #0000 86%);
          mask-image:radial-gradient(closest-side ellipse at 50% 52%,
            #000 0%, #000d 26%, #0007 54%, #0000 86%);}
        /* The vertical rays a real curtain shows, at the edge of visible. */
        .rays{position:absolute;
          background:repeating-linear-gradient(94deg,
            #ffffff14 0px, #ffffff14 2px, #0000 2px, #0000 9px);
          -webkit-mask-image:radial-gradient(closest-side ellipse at 50% 52%,
            #000 0%, #0009 40%, #0000 82%);
          mask-image:radial-gradient(closest-side ellipse at 50% 52%,
            #000 0%, #0009 40%, #0000 82%);}
        .grain{position:absolute;inset:0;opacity:.28;mix-blend-mode:soft-light;
          background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
          background-size:200px 200px;}
          /* On a dark ground the curtain is the whole image, so it hangs lower
             and further open than on a pale one: a mask that closes early
             leaves most of the frame as flat ground, which is what made the
             title slide read as empty. */
          .c1{left:-18%;top:-30%;width:136%;height:88%;transform:rotate(-10deg);}
          .c2{left:-14%;bottom:-40%;width:130%;height:78%;transform:rotate(-4deg);opacity:.8;}
          .curtain{
            -webkit-mask-image:radial-gradient(closest-side ellipse at 50% 50%,
              #000 0%, #000 30%, #000b 58%, #0005 78%, #0000 96%);
            mask-image:radial-gradient(closest-side ellipse at 50% 50%,
              #000 0%, #000 30%, #000b 58%, #0005 78%, #0000 96%);}
          .rule{position:absolute;left:0;top:70%;width:46%;height:2px;
            background:{{tokens.palette.surface}}80;}
        </style>
        <div class="ground"></div>
        <div class="curtain c1"></div><div class="rays c1"></div>
        <div class="curtain c2"></div>
        <div class="grain"></div>
        <div class="rule"></div>
      section: |
        <style>
          .ground{position:absolute;inset:0;
            background:linear-gradient(140deg, {{tokens.surfaces.section.bg}} 0%, {{tokens.palette.ink}} 120%);}
        /* One continuous sheet, not a set of light sources.
           The fill is a single gradient running the length of the curtain, so
           the colour changes continuously along it — indigo through violet and
           orchid to magenta and back. The soft form comes from a mask rather
           than from the colour fading out, which is what keeps the shade
           travelling all the way to the edge instead of dissolving into the
           ground colour. Separate blurred blobs cannot do this: each one is a
           single hue, so the transitions between them are overlaps rather than
           a shift. */
        .curtain{position:absolute;
          background:linear-gradient(96deg,
            {{tokens.aurora.edge}} 0%, {{tokens.aurora.violet}} 16%,
            {{tokens.aurora.orchid}} 34%, {{tokens.aurora.magenta}} 52%,
            {{tokens.aurora.orchid}} 68%, {{tokens.aurora.violet}} 84%,
            {{tokens.aurora.cool}} 100%);
          -webkit-mask-image:radial-gradient(closest-side ellipse at 50% 52%,
            #000 0%, #000d 26%, #0007 54%, #0000 86%);
          mask-image:radial-gradient(closest-side ellipse at 50% 52%,
            #000 0%, #000d 26%, #0007 54%, #0000 86%);}
        /* The vertical rays a real curtain shows, at the edge of visible. */
        .rays{position:absolute;
          background:repeating-linear-gradient(94deg,
            #ffffff14 0px, #ffffff14 2px, #0000 2px, #0000 9px);
          -webkit-mask-image:radial-gradient(closest-side ellipse at 50% 52%,
            #000 0%, #0009 40%, #0000 82%);
          mask-image:radial-gradient(closest-side ellipse at 50% 52%,
            #000 0%, #0009 40%, #0000 82%);}
        .grain{position:absolute;inset:0;opacity:.28;mix-blend-mode:soft-light;
          background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
          background-size:200px 200px;}
          .c1{left:-16%;top:-26%;width:132%;height:60%;transform:rotate(-9deg);}
          .c2{left:-12%;bottom:-32%;width:126%;height:54%;transform:rotate(-4deg);opacity:.66;}
          .slab{position:absolute;left:0;top:26%;width:68%;height:44%;
            border-radius:0 999px 999px 0;
            background:{{tokens.palette.ink}}59;
            border:1px solid {{tokens.palette.surface}}2e;border-left:none;}
        </style>
        <div class="ground"></div>
        <div class="curtain c1"></div><div class="rays c1"></div>
        <div class="curtain c2"></div>
        <div class="grain"></div>
        <div class="slab"></div>

voice:
  feel: luminous, fluid, futuristic but warm
  density: medium
  prefers:
    - a hero moment early
    - optimistic, forward-looking language
    - clean section dividers that lean on the gradient
  avoid:
    - heavy dense tables
    - muddy dark-on-dark text
    - more than three or four accent colours in one slide
  headline_style: >
    Bold and confident. "Light Is the Renderer" over "What Is Ray Tracing?". Let
    the gradient be loud; keep the words calm.
  body_style: |
    Full sentences. Short paragraphs. Let the mesh breathe — do not crowd it.