themes/aurora-mesh.yaml
Rama main · réplica de lectura del repositorio original.
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.