themes/soft-glass-light.yaml
Rama main · réplica de lectura del repositorio original.
name: soft-glass-light
label: Soft Glass Light
summary: Warm frosted glass — oat and amber, soft and calm.
tokens:
palette:
bg: "#EFE7D8"
surface: "#FDF9F1"
ink: "#3D3226"
ink_muted: "#8A7A67"
accent: "#C98A3B"
accent_alt: "#B2574C"
rule: "#DCCEB8"
on_accent: "#0A0A0A"
surfaces:
title:
bg: "#3D3226"
ink: "#FDF9F1"
muted: "#C9BBA6"
accent: "#D9A45C"
section:
bg: "#B2574C"
ink: "#FDF9F1"
muted: "#F0D8D3"
dark:
bg: "#241D14"
surface: "#332A1E"
ink: "#F4EDDF"
ink_muted: "#B0A08B"
accent: "#C98A3B"
accent_alt: "#C26357"
rule: "#4A3E2E"
on_accent: "#F4EDDF"
type:
display:
family: Fraunces
weight: 500
size: 40
line: 1.1
tracking: -0.4
heading:
family: Fraunces
weight: 500
size: 30
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: Fraunces
weight: 500
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.66
title_y: 1.36
body_y: 2.62
shape:
radius:
card: 0.34
pill: 0.45
chip: 0.14
border:
width: 1
color: "#FDF9F180"
card_pad: 0.3
card_fill:
color: "#FDF9F1"
transparency: 44
shadow:
card:
type: outer
blur: 20
offset: 5
angle: 90
color: 3D3226
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: band
heading:
align: centre
opening: none
content:
frame: inset
plate:
enabled: true
# Glass, like glassmorphism — and deliberately not the same glass.
#
# Both themes had the same fault: blurred blobs behind a frosted panel, so
# the frost had nothing to frost and the slide became haze. Both are fixed
# the same way, by putting something with a hard edge behind the glass.
#
# What is behind it differs, or the two are one design in two palettes.
# Glassmorphism sets circles on a cool ground; this is warm and orthogonal —
# long rectangular bars at a slight tilt, like light falling through a
# window onto a table. Same material, different room.
html: |
<style>
.ground{position:absolute;inset:0;
background:linear-gradient(150deg, {{tokens.palette.bg}} 0%, {{tokens.palette.rule}} 100%);}
/* Strips that cross the whole frame, entering one edge and leaving the
other. A bar that stops short reads as an object placed on the
slide; one that runs the full width reads as light laid across it —
and, because the panel sits over the middle, the same strip is
hard-edged out at the margins and soft where it passes behind the
glass. That one strip being both at once is the material explaining
itself, which a shape tucked in a corner can never do. */
.bar{position:absolute;border-radius:5px;transform:rotate(-7deg);}
.k1{left:-8%;top:12%;width:116%;height:11%;background:{{tokens.palette.accent}};opacity:.3;}
.k2{left:-8%;bottom:14%;width:116%;height:8%;background:{{tokens.palette.accent_alt}};opacity:.24;}
.frost{position:absolute;left:{{panel.x}}px;top:{{panel.y}}px;width:{{panel.w}}px;height:{{panel.h}}px;
border-radius:30px;background:{{tokens.palette.surface}}52;
backdrop-filter:blur(26px) saturate(120%);-webkit-backdrop-filter:blur(26px) saturate(120%);
border:1px solid {{tokens.palette.surface}}a6;
box-shadow:0 16px 48px {{tokens.palette.ink}}26;}
</style>
<div class="ground"></div>
<div class="bar k1"></div><div class="bar k2"></div>
<div class="frost"></div>
surfaces:
title: |
<style>
.ground{position:absolute;inset:0;
background:linear-gradient(155deg, {{tokens.surfaces.title.bg}} 0%, {{tokens.palette.ink}} 100%);}
/* The pane covers the left of the frame, so a strip crossing the
whole width is sharp beside the title and soft behind it — the
clearest reading of the material this theme gets. */
.bar{position:absolute;border-radius:5px;transform:rotate(-7deg);}
.k1{left:-8%;top:16%;width:116%;height:14%;background:{{tokens.palette.accent}};opacity:.5;}
.k2{left:-8%;bottom:16%;width:116%;height:10%;background:{{tokens.palette.accent_alt}};opacity:.4;}
/* Glass over the left of the frame, where the title sits: the bars
stay hard-edged beside it and go soft behind it. */
.pane{position:absolute;left:0;top:0;width:60%;height:100%;
background:{{tokens.surfaces.title.bg}}52;
backdrop-filter:blur(30px) saturate(115%);-webkit-backdrop-filter:blur(30px) saturate(115%);
border-right:1px solid {{tokens.palette.surface}}2e;}
</style>
<div class="ground"></div>
<div class="bar k1"></div><div class="bar k2"></div>
<div class="pane"></div>
section: |
<style>
.ground{position:absolute;inset:0;
background:linear-gradient(152deg, {{tokens.surfaces.section.bg}} 0%, {{tokens.palette.accent_alt}} 100%);}
.bar{position:absolute;border-radius:5px;transform:rotate(-7deg);}
.k1{left:-8%;top:12%;width:116%;height:13%;background:{{tokens.palette.surface}};opacity:.24;}
.k2{left:-8%;bottom:13%;width:116%;height:9%;background:{{tokens.palette.surface}};opacity:.18;}
.band{position:absolute;left:0;top:24%;width:70%;height:48%;
border-radius:0 999px 999px 0;
background:{{tokens.palette.surface}}24;
backdrop-filter:blur(26px) saturate(115%);-webkit-backdrop-filter:blur(26px) saturate(115%);
border:1px solid {{tokens.palette.surface}}3d;border-left:none;}
</style>
<div class="ground"></div>
<div class="bar k1"></div><div class="bar k2"></div>
<div class="band"></div>
voice:
feel: calm, tactile, warm, crafted
density: medium
prefers:
- soft card breakdowns
- a gentle confident register
- short lines that read through frost
avoid:
- cold digital language
- dense paragraphs
- stark high-contrast design
headline_style: >
Warm and specific. "Soft Light, Clear Thinking" over "An Introduction".
Calm, crafted, unhurried.
body_style: |
Gentle full sentences. Say the warm thing, then the true thing.