themes/isometric-dark.yaml
Rama main · réplica de lectura del repositorio original.
name: isometric-dark
label: Isometric Dark
summary: Obsidian slate with a faint 3D-wireframe grid — architectural and precise.
tokens:
palette:
bg: "#12151C"
surface: "#1A1E28"
ink: "#E8EAEF"
ink_muted: "#9BA1AE"
accent: "#2E7FFF"
accent_alt: "#2E6BD6"
rule: "#FFFFFF1C"
on_accent: "#0D1117"
surfaces:
title:
bg: "#0D1117"
ink: "#E8EAEF"
muted: "#8B93A4"
accent: "#3D9BFF"
section:
bg: "#1A3A6E"
# Was #0D1117 — near-black ink on a dark blue ground, 1.69:1. The section
# title was effectively unreadable on every deck this theme rendered.
ink: "#EAF0FA"
muted: "#A8C4F0"
dark:
bg: "#0D1017"
surface: "#141820"
ink: "#E8EAEF"
ink_muted: "#8F96A5"
accent: "#4FA6FF"
accent_alt: "#2E6BD6"
rule: "#FFFFFF1A"
on_accent: "#0D1117"
type:
display:
family: Space Grotesk
weight: 700
size: 40
line: 1.08
tracking: -0.6
heading:
family: Space Grotesk
weight: 600
size: 29
line: 1.15
tracking: -0.3
subhead:
family: Inter
weight: 400
size: 15
line: 1.4
tracking: 0
body:
family: Inter
weight: 400
size: 13
line: 1.6
tracking: 0
caption:
family: Inter
weight: 500
size: 10
line: 1.35
tracking: 0.3
eyebrow:
family: Space Grotesk
weight: 600
size: 10
line: 1.2
tracking: 2
transform: upper
stat:
family: Space Grotesk
weight: 700
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.62
title_y: 1.3
body_y: 2.55
shape:
radius:
card: 0.12
pill: 0.4
chip: 0.06
border:
width: 1
color: "#FFFFFF24"
card_pad: 0.3
card_fill:
color: "#1A1E28"
transparency: 0
shadow:
card:
type: outer
blur: 16
offset: 4
angle: 90
color: "000000"
opacity: 0.45
# Composition — src/composition.js owns the vocabulary; every axis
# left out here is the shared default.
layout:
title:
composition: top
section:
composition: numeral
heading:
opening: numeral
content:
frame: sidebar
list:
marker: arrow
plate:
enabled: true
# Three axes, and a ground under all of them.
#
# The grid was two sets of lines at 30 and 150 degrees, which draws a
# diamond lattice rather than an isometric one — an isometric projection has
# a third, vertical axis, and without it the surface reads flat. All three
# are here now, the verticals weaker than the diagonals so the plane still
# recedes.
#
# Every surface also paints its own ground. The grid draws lines onto
# transparency and the vignette only darkened the edges, so the middle of a
# plate was never painted at all. On content slides the panel happened to
# cover the hole; on the title nothing did, and the slide rasterised white
# with near-white title text on it at 1.2:1 — an unreadable title slide on
# every deck using this theme.
html: |
<style>
.ground{position:absolute;inset:0;background:{{tokens.palette.bg}};}
.grid{position:absolute;inset:0;background:
linear-gradient(30deg, transparent 46%, {{tokens.palette.accent}}22 46% 47%, transparent 47%),
linear-gradient(150deg, transparent 46%, {{tokens.palette.accent}}22 46% 47%, transparent 47%),
linear-gradient(90deg, transparent 49.4%, {{tokens.palette.accent}}14 49.4% 50.2%, transparent 50.2%);
background-size: 86px 74px, 86px 74px, 86px 74px;}
.vignette{position:absolute;inset:0;background:
radial-gradient(120% 100% at 50% 0%, transparent 45%, {{tokens.palette.bg}} 100%);}
.field{position:absolute;left:{{panel.x}}px;top:{{panel.y}}px;width:{{panel.w}}px;height:{{panel.h}}px;
background:{{tokens.palette.surface}}f0;border:1px solid {{tokens.palette.accent}}3d;border-radius:12px;
box-shadow:0 20px 52px #00000066;}
</style>
<div class="ground"></div>
<div class="grid"></div>
<div class="vignette"></div>
<div class="field"></div>
surfaces:
title: |
<style>
.ground{position:absolute;inset:0;background:{{tokens.surfaces.title.bg}};}
.grid{position:absolute;inset:0;background:
linear-gradient(30deg, transparent 46%, {{tokens.palette.accent}}33 46% 47%, transparent 47%),
linear-gradient(150deg, transparent 46%, {{tokens.palette.accent}}33 46% 47%, transparent 47%),
linear-gradient(90deg, transparent 49.4%, {{tokens.palette.accent}}1f 49.4% 50.2%, transparent 50.2%);
background-size: 86px 74px, 86px 74px, 86px 74px;}
/* The grid resolves out of the dark rather than being cut off by it:
brightest along the upper band, gone by the lower third, so the
title has unlit slate to sit on. */
.fade{position:absolute;inset:0;background:
linear-gradient(180deg, transparent 0%, {{tokens.surfaces.title.bg}}66 42%, {{tokens.surfaces.title.bg}} 78%);}
.edge{position:absolute;left:0;top:64%;width:38%;height:2px;
background:{{tokens.surfaces.title.accent}};}
</style>
<div class="ground"></div>
<div class="grid"></div>
<div class="fade"></div>
<div class="edge"></div>
section: |
<style>
.ground{position:absolute;inset:0;background:
linear-gradient(30deg, {{tokens.surfaces.section.bg}} 0%, {{tokens.palette.accent_alt}} 100%);}
.grid{position:absolute;inset:0;background:
linear-gradient(30deg, transparent 46%, #FFFFFF2E 46% 47%, transparent 47%),
linear-gradient(150deg, transparent 46%, #FFFFFF2E 46% 47%, transparent 47%),
linear-gradient(90deg, transparent 49.4%, #FFFFFF1A 49.4% 50.2%, transparent 50.2%);
background-size: 86px 74px, 86px 74px, 86px 74px;}
/* A plate of slate laid on the grid, squared off — this theme draws
right angles, so its divider does not get a rounded end. */
.slab{position:absolute;left:0;top:26%;width:64%;height:44%;
background:{{tokens.palette.bg}}b3;
border-top:1px solid {{tokens.palette.accent}}59;
border-right:1px solid {{tokens.palette.accent}}59;
border-bottom:1px solid {{tokens.palette.accent}}59;}
</style>
<div class="ground"></div>
<div class="grid"></div>
<div class="slab"></div>
voice:
feel: precise, engineered, architectural, calm
density: medium
prefers:
- measured, technical language
- a systems view — how the parts fit
- figures over adjectives
avoid:
- glow, neon, gradients over content
- playful or warm phrasing
- decoration that distracts from the grid
headline_style: >
Label it like a blueprint. "THE RENDER PIPELINE, FRAME BY FRAME". Clear,
technical, exact.
body_style: |
Short precise sentences. Name the system, state its behaviour, stop.