themes/claymorphism.yaml
Rama main · réplica de lectura del repositorio original.
name: claymorphism
label: Claymorphism
summary: Soft extruded clay panels with inner shadows — warm, rounded, playful.
tokens:
palette:
bg: "#F4EBDE"
surface: "#EFD8C0"
ink: "#463B30"
ink_muted: "#8B7B68"
accent: "#E07A5F"
accent_alt: "#F2CC8F"
rule: "#E7D6BE"
on_accent: "#0A0A0A"
# The pebbles' clay, pre-blended toward the ground.
#
# At full accent strength they read as bright markers stuck onto the slide
# rather than as more of the same material. Lowering their opacity is the
# wrong lever — a pebble's whole shape comes from its shadows and inner rim,
# and opacity fades those with it, flattening the object into a stain. So the
# colour is mixed toward the background instead: still clay, still lit, just
# not shouting.
clay:
pebble_a: "#ECBCA9" # accent, 42% into the ground
pebble_b: "#F3DCB6" # accent_alt, 50% into the ground
pebble_on_section: "#EAA779"
surfaces:
# Clay is a light material. A dark brown title surface under two accent
# glows read as mud, and contradicted every other slide in the deck.
title:
bg: "#F6E3D3"
ink: "#463B30"
muted: "#746555" # the team and guide lines are caption size; 3.3:1 was not enough
accent: "#D6634A"
# White on the accent terracotta measured 2.95:1 — a divider headline just
# under the large-text floor, and its standfirst well under. Deepened until
# the mark carries; the hue is the same clay.
section:
bg: "#B1604B"
ink: "#FFFFFF"
muted: "#F6DED6"
dark:
bg: "#2A2118"
surface: "#3D3225"
ink: "#F2E8D8"
ink_muted: "#B3A286"
accent: "#E07A5F"
accent_alt: "#E8BC82"
rule: "#FFFFFF1A"
on_accent: "#FFFFFF"
type:
display:
family: Poppins
weight: 700
size: 36
line: 1.12
tracking: -0.4
heading:
family: Poppins
weight: 600
size: 28
line: 1.18
tracking: -0.2
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: Poppins
weight: 700
size: 52
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.55
pill: 0.4
chip: 0.14
border:
width: 0
color: "#00000000"
card_pad: 0.3
card_fill:
color: "#EFD8C0"
transparency: 18
shadow:
card:
type: outer
blur: 20
offset: 7
angle: 90
color: 463B30
opacity: 0.16
# 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
plate:
enabled: true
# Clay's depth is geometry, not luminosity: a large soft drop shadow with a
# bright inner rim reads as a thick extruded slab. The radial accent washes
# this used to carry made it glow instead, which is the same trick three
# other themes already use and is not what this style is.
html: >
<style>
.ground{position:absolute;inset:0;
background:linear-gradient(168deg, {{tokens.palette.bg}} 0%, {{tokens.palette.surface}} 100%);}
.pebble{position:absolute;border-radius:50%;
background:{{tokens.clay.pebble_b}};
box-shadow:0 18px 30px {{tokens.palette.ink}}24, inset 0 8px 14px #FFFFFF80, inset 0 -10px 18px {{tokens.palette.ink}}1f;}
.p1{left:-6%;top:-14%;width:26%;height:38%;}
.p2{right:-4%;bottom:-16%;width:22%;height:34%;background:{{tokens.clay.pebble_a}};}
.board{position:absolute;left:{{panel.x}}px;top:{{panel.y}}px;
width:{{panel.w}}px;height:{{panel.h}}px;
border-radius:56px;
background:{{tokens.palette.surface}};
box-shadow:
0 26px 50px {{tokens.palette.ink}}2b,
inset 0 12px 18px #FFFFFF9e,
inset 0 -14px 22px {{tokens.palette.ink}}26;}
</style>
<div class="ground"></div>
<div class="pebble p1"></div>
<div class="pebble p2"></div>
<div class="board"></div>
surfaces:
title: >
<style>
.ground{position:absolute;inset:0;
background:linear-gradient(168deg, #FBF1E6 0%, {{tokens.surfaces.title.bg}} 100%);}
.slab{position:absolute;left:6%;top:16%;width:88%;height:68%;border-radius:72px;
background:{{tokens.palette.surface}};
box-shadow:
0 34px 60px {{tokens.palette.ink}}30,
inset 0 16px 24px #FFFFFFad,
inset 0 -18px 28px {{tokens.palette.ink}}24;}
.pebble{position:absolute;border-radius:50%;
box-shadow:0 16px 26px {{tokens.palette.ink}}26, inset 0 8px 12px #FFFFFF8c, inset 0 -9px 16px {{tokens.palette.ink}}1f;}
.a{right:9%;top:9%;width:15%;height:24%;background:{{tokens.clay.pebble_a}};}
.b{left:10%;bottom:7%;width:10%;height:16%;background:{{tokens.clay.pebble_b}};}
</style>
<div class="ground"></div>
<div class="slab"></div>
<div class="pebble a"></div>
<div class="pebble b"></div>
section: >
<style>
.ground{position:absolute;inset:0;
background:linear-gradient(168deg, {{tokens.palette.bg}} 0%, {{tokens.palette.surface}} 100%);}
.slab{position:absolute;left:0;top:14%;width:74%;height:72%;
border-radius:0 96px 96px 0;
background:{{tokens.surfaces.section.bg}};
box-shadow:
0 30px 56px {{tokens.palette.ink}}33,
inset 0 14px 22px #FFFFFF5c,
inset 0 -16px 26px {{tokens.palette.ink}}2b;}
.pebble{position:absolute;right:8%;top:30%;width:14%;height:24%;border-radius:50%;
background:{{tokens.clay.pebble_on_section}};
box-shadow:0 18px 28px {{tokens.palette.ink}}26, inset 0 8px 12px #FFFFFF8c, inset 0 -9px 16px {{tokens.palette.ink}}1f;}
</style>
<div class="ground"></div>
<div class="slab"></div>
<div class="pebble"></div>
voice:
feel: warm, playful, tactile, handmade
density: medium
prefers:
- friendly, approachable language
- rounded card breakdowns
- a single strong takeaway
avoid:
- cold corporate phrasing
- dense tables that fight the soft shapes
- sharp contrast edges
headline_style: >
Friendly and concrete. "Clay, One Mould at a Time" over "Introduction to
Claymorphism". Keep the warmth, lose the filler.
body_style: |
Full sentences, plain words. Explain like you are showing a colleague.