themes/gradient-mesh-dark.yaml
Rama main · réplica de lectura del repositorio original.
name: gradient-mesh-dark
label: Gradient Mesh Dark
summary: A rich dark aurora — deep plum through teal to amber. Premium keynote.
tokens:
palette:
bg: "#171226"
surface: "#231A33"
ink: "#EFE9F7"
ink_muted: "#A99FC2"
accent: "#7A5CF0"
accent_alt: "#37C8C0"
rule: "#3A3050"
on_accent: "#FFFFFF"
# The curtain's hue travel. The theme is described as plum through teal to
# amber and its palette carried neither plum nor amber, so the background
# could only ever be violet and teal. These are the stops that make the
# description true; the palette proper stays two accents, because the
# renderer draws text and shapes from that and it should not grow a colour it
# has nowhere to use.
aurora:
edge: "#1B1430"
plum: "#6B2E7A"
violet: "#7A5CF0"
teal: "#37C8C0"
amber: "#E8A33D"
surfaces:
title:
bg: "#0F0B1C"
ink: "#EFE9F7"
muted: "#9C8FC0"
accent: "#37C8C0"
section:
bg: "#7A5CF0"
ink: "#FFFFFF"
muted: "#D6CDFB"
dark:
bg: "#0F0B1C"
surface: "#1B1429"
ink: "#EFE9F7"
ink_muted: "#9C8FC0"
accent: "#8B6DFF"
accent_alt: "#4AD3CB"
rule: "#312A4A"
on_accent: "#0F0B1C"
type:
display:
family: Syne
weight: 700
size: 38
line: 1.1
tracking: -0.5
heading:
family: Syne
weight: 600
size: 28
line: 1.15
tracking: -0.3
subhead:
family: Manrope
weight: 400
size: 14
line: 1.5
tracking: 0
body:
family: Manrope
weight: 400
size: 12.5
line: 1.6
tracking: 0
caption:
family: Manrope
weight: 500
size: 10
line: 1.35
tracking: 0.2
eyebrow:
family: Manrope
weight: 700
size: 10
line: 1.2
tracking: 1.6
transform: upper
stat:
family: Syne
weight: 700
size: 54
line: 1
tracking: -1
grid:
# Room for the panel the plate draws past the content box, as on every
# other plate theme.
margin:
top: 0.7
right: 0.78
bottom: 0.62
left: 0.78
gutter: 0.3
columns: 12
band:
eyebrow_y: 0.62
title_y: 1.3
body_y: 2.55
shape:
radius:
card: 0.16
pill: 0.4
chip: 0.08
border:
width: 1
color: "#FFFFFF1A"
card_pad: 0.3
shadow:
card:
type: outer
blur: 16
offset: 4
angle: 90
color: 0F0B1C
opacity: 0.35
# Composition — src/composition.js owns the vocabulary; every axis
# left out here is the shared default.
layout:
title:
composition: centred
section:
composition: centred
heading:
align: centre
opening: none
content:
frame: inset
plate:
enabled: true
# A dark keynote, so the content sits on a dark sheet rather than a white
# page. That is also what keeps the three curtain themes apart: this one
# reads through a dark pane, aurora-mesh puts an opaque light page on the
# colour, and glassmorphism frosts crisp shapes behind translucent glass.
# Same technique, three materials.
html: |
<style>
.ground{position:absolute;inset:0;
background:linear-gradient(150deg, {{tokens.palette.bg}} 0%, {{tokens.aurora.edge}} 100%);}
/* One sheet of light whose colour travels along it, masked into shape
rather than faded out — fading dissolves the hue into the ground
before it reaches the edge, and the travel is the point. Blurred
blobs cannot do this: each blob is one hue, so what happens between
two of them is an overlap, not a shift. */
.curtain{position:absolute;
background:linear-gradient(97deg,
{{tokens.aurora.edge}} 0%, {{tokens.aurora.plum}} 14%,
{{tokens.aurora.violet}} 32%, {{tokens.aurora.teal}} 54%,
{{tokens.aurora.amber}} 74%, {{tokens.aurora.plum}} 92%,
{{tokens.aurora.edge}} 100%);
-webkit-mask-image:radial-gradient(closest-side ellipse at 50% 50%,
#000 0%, #000 28%, #000c 56%, #0006 78%, #0000 96%);
mask-image:radial-gradient(closest-side ellipse at 50% 50%,
#000 0%, #000 28%, #000c 56%, #0006 78%, #0000 96%);}
.rays{position:absolute;
background:repeating-linear-gradient(95deg,
#ffffff12 0px, #ffffff12 2px, #0000 2px, #0000 10px);
-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:.26;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:-28%;width:134%;height:84%;transform:rotate(-9deg);}
.c2{left:-12%;bottom:-38%;width:128%;height:72%;transform:rotate(-4deg);opacity:.7;}
.pane{position:absolute;left:{{panel.x}}px;top:{{panel.y}}px;width:{{panel.w}}px;height:{{panel.h}}px;
border-radius:18px;background:{{tokens.palette.bg}}d9;
border:1px solid #ffffff1f;
box-shadow:0 26px 64px #00000059;}
</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="pane"></div>
surfaces:
title: |
<style>
.ground{position:absolute;inset:0;
background:linear-gradient(155deg, {{tokens.surfaces.title.bg}} 0%, {{tokens.aurora.edge}} 100%);}
/* One sheet of light whose colour travels along it, masked into shape
rather than faded out — fading dissolves the hue into the ground
before it reaches the edge, and the travel is the point. Blurred
blobs cannot do this: each blob is one hue, so what happens between
two of them is an overlap, not a shift. */
.curtain{position:absolute;
background:linear-gradient(97deg,
{{tokens.aurora.edge}} 0%, {{tokens.aurora.plum}} 14%,
{{tokens.aurora.violet}} 32%, {{tokens.aurora.teal}} 54%,
{{tokens.aurora.amber}} 74%, {{tokens.aurora.plum}} 92%,
{{tokens.aurora.edge}} 100%);
-webkit-mask-image:radial-gradient(closest-side ellipse at 50% 50%,
#000 0%, #000 28%, #000c 56%, #0006 78%, #0000 96%);
mask-image:radial-gradient(closest-side ellipse at 50% 50%,
#000 0%, #000 28%, #000c 56%, #0006 78%, #0000 96%);}
.rays{position:absolute;
background:repeating-linear-gradient(95deg,
#ffffff12 0px, #ffffff12 2px, #0000 2px, #0000 10px);
-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:.26;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;}
/* Held back on the title. Lit corner to corner the slide stops being
a dark keynote and becomes a colour field, and this theme's whole
claim is the dark. The curtain sits high and the ground keeps the
lower half. */
.c1{left:-18%;top:-40%;width:138%;height:78%;transform:rotate(-10deg);opacity:.82;}
.c2{left:-14%;bottom:-52%;width:132%;height:64%;transform:rotate(-4deg);opacity:.42;}
.rule{position:absolute;left:0;top:70%;width:44%;height:2px;
background:{{tokens.palette.accent_alt}}99;}
</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(150deg, {{tokens.aurora.edge}} 0%, {{tokens.palette.bg}} 120%);}
/* One sheet of light whose colour travels along it, masked into shape
rather than faded out — fading dissolves the hue into the ground
before it reaches the edge, and the travel is the point. Blurred
blobs cannot do this: each blob is one hue, so what happens between
two of them is an overlap, not a shift. */
.curtain{position:absolute;
background:linear-gradient(97deg,
{{tokens.aurora.edge}} 0%, {{tokens.aurora.plum}} 14%,
{{tokens.aurora.violet}} 32%, {{tokens.aurora.teal}} 54%,
{{tokens.aurora.amber}} 74%, {{tokens.aurora.plum}} 92%,
{{tokens.aurora.edge}} 100%);
-webkit-mask-image:radial-gradient(closest-side ellipse at 50% 50%,
#000 0%, #000 28%, #000c 56%, #0006 78%, #0000 96%);
mask-image:radial-gradient(closest-side ellipse at 50% 50%,
#000 0%, #000 28%, #000c 56%, #0006 78%, #0000 96%);}
.rays{position:absolute;
background:repeating-linear-gradient(95deg,
#ffffff12 0px, #ffffff12 2px, #0000 2px, #0000 10px);
-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:.26;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:-24%;width:134%;height:80%;transform:rotate(-9deg);}
.c2{left:-12%;bottom:-36%;width:128%;height:70%;transform:rotate(-4deg);opacity:.72;}
.slab{position:absolute;left:0;top:26%;width:66%;height:44%;
border-radius:0 999px 999px 0;
background:{{tokens.aurora.edge}}b3;
border:1px solid #ffffff26;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: dramatic, premium, confident, immersive
density: medium
prefers:
- a bold keynote statement
- a strong open and a strong close
- visuals over walls of text
avoid:
- flat, bored, neutral tone
- dense paragraphs
- pastel or washed-out imagery
headline_style: >
Bold and cinematic. "The Pipeline After Dark" over "Rendering". Make it feel
like the headline of a keynote.
body_style: |
Confident full sentences. State the claim, then the evidence, briefly.