themes/neumorphism.yaml
Rama main · réplica de lectura del repositorio original.
name: neumorphism
label: Neumorphism
summary: Soft UI with dual shadows and same-colour surfaces — calm, minimal.
tokens:
palette:
bg: "#E3E7EE"
surface: "#F3F6FA"
ink: "#3B4453"
ink_muted: "#7E8898"
accent: "#5A7DF0"
accent_alt: "#9FAED8"
rule: "#D4DAE4"
on_accent: "#0A0A0A"
surfaces:
title:
bg: "#3B4453"
ink: "#FFFFFF"
muted: "#B7C0CF"
accent: "#5A7DF0"
section:
bg: "#5A7DF0"
ink: "#FFFFFF"
muted: "#F8F9FE"
dark:
bg: "#232830"
surface: "#2B313B"
ink: "#E3E7EE"
ink_muted: "#98A2B2"
accent: "#7E9BFF"
accent_alt: "#8FA0C8"
rule: "#FFFFFF1A"
on_accent: "#FFFFFF"
type:
display:
family: Manrope
weight: 700
size: 38
line: 1.1
tracking: -0.5
heading:
family: Manrope
weight: 700
size: 29
line: 1.15
tracking: -0.3
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: Manrope
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.32
pill: 0.4
chip: 0.12
border:
width: 0
color: "#00000000"
card_pad: 0.3
card_fill:
color: "#E3E7EE"
transparency: 88
# Composition — src/composition.js owns the vocabulary; every axis
# left out here is the shared default.
layout:
title:
composition: top
section:
composition: centred
heading:
align: centre
opening: none
plate:
enabled: true
html: >
<style>
.bg{position:absolute;inset:0;background:
linear-gradient(150deg, {{tokens.palette.bg}} 0%, {{tokens.palette.rule}} 100%);}
.field{position:absolute;left:{{panel.x}}px;top:{{panel.y}}px;width:{{panel.w}}px;height:{{panel.h}}px;
border-radius:48px;background:{{tokens.palette.bg}};
box-shadow:
-40px -40px 72px {{tokens.palette.surface}}e6,
40px 40px 72px {{tokens.palette.ink}}59,
inset -20px -20px 40px {{tokens.palette.ink}}40,
inset 20px 20px 40px {{tokens.palette.surface}}e6;}
</style>
<div class="bg"></div>
<div class="field"></div>
surfaces:
# Soft UI is one colour lit from one direction. The title and section
# surfaces were carrying radial accent glows borrowed from the soft-glow
# themes, which is the precise opposite of what this style is: a glow is
# light coming out of the surface, and neumorphism is light falling
# across it. Both are now the same material as the content field —
# same-colour ground, form entirely from a raised or recessed edge.
title: |
<style>
.ground{position:absolute;inset:0;
background:linear-gradient(150deg, {{tokens.surfaces.title.bg}} 0%, {{tokens.palette.ink}} 100%);}
/* A slab lifted off the ground, holding the title. */
.slab{position:absolute;left:0;top:22%;width:74%;height:52%;
border-radius:0 56px 56px 0;
background:{{tokens.surfaces.title.bg}};
box-shadow:
28px 28px 56px #00000059,
-18px -18px 44px {{tokens.palette.ink_muted}}3d,
inset 2px 2px 3px {{tokens.palette.ink_muted}}59,
inset -2px -2px 3px #00000047;}
/* A channel machined right across the panel, entering at one edge and
leaving at the other. Stopping short of an edge makes it an object
sitting on the surface; running the full width makes it something
cut into it, which is the whole idea. Kept below the slab so the
two forms read as one plane at different depths. */
.cut{position:absolute;left:-6%;bottom:11%;width:112%;height:10%;
border-radius:7px;transform:rotate(-7deg);
background:{{tokens.surfaces.title.bg}};
box-shadow:
inset 9px 9px 18px #00000075,
inset -9px -9px 18px {{tokens.palette.ink_muted}}47;}
</style>
<div class="ground"></div>
<div class="slab"></div>
<div class="cut"></div>
section: |
<style>
.ground{position:absolute;inset:0;
background:linear-gradient(150deg, {{tokens.surfaces.section.bg}} 0%, {{tokens.palette.accent}} 100%);}
.slab{position:absolute;left:0;top:24%;width:70%;height:50%;
border-radius:0 999px 999px 0;
background:{{tokens.surfaces.section.bg}};
box-shadow:
26px 26px 52px {{tokens.palette.ink}}4d,
-16px -16px 40px #ffffff33,
inset 2px 2px 3px #ffffff4d,
inset -2px -2px 3px {{tokens.palette.ink}}3d;}
/* The same channel, edge to edge, below the slab and clear of the
crest. The light inset runs weaker than the dark one: matched
evenly on a mid-tone ground the bright edge wins and the channel
reads as a ridge standing proud rather than a groove cut in. */
.cut{position:absolute;left:-6%;bottom:9%;width:112%;height:10%;
border-radius:7px;transform:rotate(-7deg);
background:{{tokens.surfaces.section.bg}};
box-shadow:
inset 10px 10px 20px {{tokens.palette.ink}}80,
inset -8px -8px 16px #ffffff2e;}
</style>
<div class="ground"></div>
<div class="slab"></div>
<div class="cut"></div>
shadow:
card:
type: outer
blur: 18
offset: 4
angle: 90
color: 5A7DF0
opacity: 0.12
voice:
feel: calm, minimal, quiet, software that recedes
density: low
prefers:
- generous whitespace
- one idea per slide
- soft, understated emphasis
avoid:
- loud gradients or saturated colour
- dense bullet walls
- anything that shouts
headline_style: >
Short, calm, confident. "Soft Interfaces" over "An Introduction to Soft
Interfaces". Fewer words than you think you need.
body_style: |
Full sentences, quiet tone. Give the surface room to breathe.