themes/sunset.yaml
Rama main · réplica de lectura del repositorio original.
name: sunset
label: Sunset Golden Hour
summary: A warm amber-to-rose-to-violet golden-hour mesh.
tokens:
palette:
bg: "#F7E9D8"
surface: "#FFF9F0"
ink: "#4A2B24"
ink_muted: "#8A6456"
accent: "#D2691E"
accent_alt: "#B23A6B"
rule: "#E9D2BC"
on_accent: "#0A0A0A"
# The sky, top to bottom. Golden hour is a vertical gradient — dusk overhead
# falling through rose and amber to a bright band at the horizon — so these
# are stops on one sky rather than separate light sources. The violet the
# summary promises lives here; the palette proper stays warm, because that is
# what the renderer draws text and shapes from.
sky:
dusk: "#5B3A6E"
rose: "#B23A6B"
amber: "#D2691E"
gold: "#F0A45C"
haze: "#FFD9A8"
surfaces:
title:
bg: "#4A2B24"
ink: "#FFF9F0"
muted: "#D8B7A4"
accent: "#F0A45C"
section:
bg: "#B23A6B"
ink: "#FFF9F0"
muted: "#F5CBDD"
dark:
bg: "#2B1B1E"
surface: "#3A2527"
ink: "#F7E9D8"
ink_muted: "#B99A8A"
accent: "#D2691E"
accent_alt: "#C94A7C"
rule: "#5A3E3E"
on_accent: "#F7E9D8"
type:
display:
family: Fraunces
weight: 600
size: 38
line: 1.12
tracking: -0.4
heading:
family: Fraunces
weight: 600
size: 29
line: 1.18
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: Fraunces
weight: 600
size: 52
line: 1.05
tracking: -1
grid:
# Room for the page 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.14
pill: 0.4
chip: 0.08
border:
width: 1
color: "#FFF9F080"
card_pad: 0.3
shadow:
card:
type: outer
blur: 12
offset: 3
angle: 90
color: 4A2B24
opacity: 0.1
# Composition — src/composition.js owns the vocabulary; every axis
# left out here is the shared default.
layout:
title:
composition: centred
section:
composition: rules
heading:
align: centre
opening: none
content:
frame: inset
list:
marker: dash
plate:
enabled: true
# A sky, not a mesh.
#
# This was blurred blobs over stacked radials, like every other soft theme,
# which is a strange way to draw the one thing everybody has actually seen.
# Golden hour is a vertical gradient: dusk overhead, falling through rose
# and amber to a bright band just above the horizon, with the sun sitting
# in that band. That is a horizontal composition, and it is what keeps this
# theme distinct from the aurora ones — their light runs diagonally across
# the frame, this one is layered top to bottom.
#
# The one soft glow here is the sun, which has earned it.
html: |
<style>
.sky{position:absolute;inset:0;background:linear-gradient(178deg,
{{tokens.sky.dusk}} 0%, {{tokens.sky.rose}} 26%, {{tokens.sky.amber}} 52%,
{{tokens.sky.gold}} 74%, {{tokens.sky.haze}} 100%);}
/* Not a disc. A disc reads as an object stuck on the slide and draws
the eye to a hard circular edge; the last light of the day is a
broad warmth in one corner. Anchored past the corner so no part of
its outline is on the slide. */
.sun{position:absolute;right:-20%;bottom:-38%;width:64%;height:104%;border-radius:50%;
background:radial-gradient(closest-side circle,
{{tokens.sky.haze}}a6 0%, {{tokens.sky.gold}}5c 46%, {{tokens.sky.gold}}00 100%);}
.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;}
.page{position:absolute;left:{{panel.x}}px;top:{{panel.y}}px;width:{{panel.w}}px;height:{{panel.h}}px;
border-radius:20px;background:{{tokens.palette.surface}}f2;
box-shadow:0 22px 56px {{tokens.palette.ink}}33;}
</style>
<div class="sky"></div>
<div class="sun"></div>
<div class="grain"></div>
<div class="page"></div>
surfaces:
title: |
<style>
/* The bright end of the sky is compressed into the bottom third,
where a horizon actually is. Spread evenly it put gold and haze
straight through the band the title occupies: white title text
measured 2.2:1 there and the subtitle 1.2:1, which is not a look,
it is unreadable. */
.sky{position:absolute;inset:0;background:linear-gradient(178deg,
{{tokens.surfaces.title.bg}} 0%, {{tokens.sky.dusk}} 30%,
{{tokens.sky.rose}} 62%, {{tokens.sky.amber}} 84%,
{{tokens.sky.gold}} 94%, {{tokens.sky.haze}} 100%);}
/* The sun sits low and right, clear of the text column. */
.sun{position:absolute;right:-22%;bottom:-42%;width:66%;height:108%;border-radius:50%;
background:radial-gradient(closest-side circle,
{{tokens.sky.haze}}b8 0%, {{tokens.sky.gold}}66 46%, {{tokens.sky.gold}}00 100%);}
/* The horizon. One hard line in a slide made entirely of gradient is
what stops it reading as vapour. */
.horizon{position:absolute;left:0;bottom:14%;width:100%;height:1.5px;
background:{{tokens.palette.surface}}59;}
.grain{position:absolute;inset:0;opacity:.3;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;}
</style>
<div class="sky"></div>
<div class="sun"></div>
<div class="horizon"></div>
<div class="grain"></div>
section: |
<style>
.sky{position:absolute;inset:0;background:linear-gradient(178deg,
{{tokens.sky.dusk}} 0%, {{tokens.surfaces.section.bg}} 44%,
{{tokens.sky.amber}} 86%, {{tokens.sky.gold}} 100%);}
.sun{position:absolute;right:-20%;bottom:-40%;width:64%;height:104%;border-radius:50%;
background:radial-gradient(closest-side circle,
{{tokens.sky.haze}}a6 0%, {{tokens.sky.gold}}5c 46%, {{tokens.sky.gold}}00 100%);}
/* A band of sky the section title sits in, edge to edge — layered,
like the rest of this theme, rather than a shape floating on it. */
.band{position:absolute;left:0;top:28%;width:100%;height:40%;
background:{{tokens.palette.ink}}47;
border-top:1px solid {{tokens.palette.surface}}3d;
border-bottom:1px solid {{tokens.palette.surface}}3d;}
.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;}
</style>
<div class="sky"></div>
<div class="sun"></div>
<div class="band"></div>
<div class="grain"></div>
voice:
feel: warm, golden, cinematic, expansive
density: medium
prefers:
- a warm, confident narrative
- a hero statistic or a strong opening image
- an ending that lingers
avoid:
- cold clinical phrasing
- overcrowded slides
- flat, grey vocabulary
headline_style: >
Evocative but exact. "Light at the End of the Pipeline" over "Rendering".
Warm, cinematic, specific.
body_style: |
Full warm sentences. Lead with the feeling, land on the fact.