themes/retro-crt.yaml
Rama main · réplica de lectura del repositorio original.
# Retro CRT — phosphor glow, scanlines and a screen vignette.
#
# The tube is one curved piece of glass, and the plate has to read as that.
# Every layer is therefore concentric on the same centre: the phosphor bloom,
# the sheen on the glass and the vignette that darkens the corners are the
# same curvature seen three ways. The earlier plate put a blurred ellipse at
# 20%/14% and a bloom at 50%/40%, so two unrelated smears crossed the screen
# and the result read as a stain rather than a tube.
name: retro-crt
label: Retro CRT
summary: A phosphor-green CRT tube — scanlines, glow, screen vignette.
tokens:
palette:
bg: "#0B120B" # off-tube black
surface: "#0F180F"
ink: "#C9FFCE" # phosphor green
ink_muted: "#83B288" # sized against the lit band, not the dark rim
accent: "#33FF5C" # bright phosphor
accent_alt: "#FFE14A" # amber secondary
rule: "#1F3A22"
on_accent: "#0B120B"
surfaces:
title: { bg: "#050A05", ink: "#C9FFCE", muted: "#93C298", accent: "#33FF5C" }
section: { bg: "#1A3A1E", ink: "#C9FFCE", muted: "#99CE9E" }
dark:
bg: "#050A05"
surface: "#0C140C"
ink: "#C9FFCE"
ink_muted: "#83B288"
accent: "#3BFF68"
accent_alt: "#FFE14A"
rule: "#1A3320"
on_accent: "#050A05"
type:
display: { family: "IBM Plex Mono", weight: 700, size: 38, line: 1.1, tracking: 1.0 }
heading: { family: "IBM Plex Mono", weight: 700, size: 28, line: 1.15, tracking: 0.8 }
subhead: { family: "IBM Plex Mono", weight: 400, size: 14, line: 1.5, tracking: 0 }
body: { family: "IBM Plex Mono", weight: 400, size: 12.5, line: 1.6, tracking: 0 }
caption: { family: "IBM Plex Mono", weight: 400, size: 10, line: 1.35, tracking: 0.2 }
eyebrow: { family: "IBM Plex Mono", weight: 700, size: 10, line: 1.2, tracking: 2.0, transform: upper }
stat: { family: "IBM Plex Mono", weight: 700, size: 54, line: 1.0, tracking: 0 }
grid:
margin: { top: 0.66, right: 0.75, bottom: 0.58, left: 0.75 }
gutter: 0.30
columns: 12
band: { eyebrow_y: 0.66, title_y: 1.36, body_y: 2.62 }
shape:
radius: { card: 0.06, pill: 0.40, chip: 0.04 }
border: { width: 1, color: "#2A4A30" }
card_pad: 0.30
shadow:
card: { type: outer, blur: 8, offset: 2, angle: 90, color: "000000", opacity: 0.5 }
# 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: bar
list:
marker: arrow
plate:
enabled: true
html: |
<style>
/* The glass itself: brightest where the beam lands, falling to the
unlit tube at the rim. One gradient, one centre. */
.tube{position:absolute;inset:0;background:
radial-gradient(118% 104% at 50% 52%,
{{tokens.palette.surface}} 0%, {{tokens.palette.bg}} 62%, #040704 100%);}
/* Phosphor bloom. Wide and weak — a beam lights the screen, it does
not sit on it as an object, so there is no blur and no hard edge. */
.beam{position:absolute;inset:0;background:
radial-gradient(62% 52% at 50% 52%,
{{tokens.palette.accent}}30 0%, {{tokens.palette.accent}}14 40%, transparent 76%);}
/* Every other line, across the whole screen rather than fading out
where the ground goes dark. */
.scan{position:absolute;inset:0;
background:repeating-linear-gradient(0deg,
rgba(0,0,0,.34) 0 1.5px, rgba(0,0,0,0) 1.5px 3.5px);}
/* The reflection that says "glass": one soft diagonal, top-left. */
.sheen{position:absolute;inset:0;background:
linear-gradient(118deg,
rgba(255,255,255,.055) 0%, rgba(255,255,255,.014) 28%, rgba(255,255,255,0) 48%);}
.vig{position:absolute;inset:0;background:
radial-gradient(110% 104% at 50% 52%, rgba(0,0,0,0) 52%, rgba(0,0,0,.5) 100%);}
</style>
<div class="tube"></div>
<div class="beam"></div>
<div class="scan"></div>
<div class="sheen"></div>
<div class="vig"></div>
surfaces:
title: |
<style>
/* The title is the tube warming up: the same geometry, the beam
pushed to where the type sits so the lit area holds the words
rather than the empty band above them. */
.tube{position:absolute;inset:0;background:
radial-gradient(120% 108% at 46% 62%,
{{tokens.palette.surface}} 0%, {{tokens.surfaces.title.bg}} 60%, #030603 100%);}
.beam{position:absolute;inset:0;background:
radial-gradient(70% 60% at 46% 62%,
{{tokens.palette.accent}}4a 0%, {{tokens.palette.accent}}1c 40%, transparent 76%);}
.scan{position:absolute;inset:0;
background:repeating-linear-gradient(0deg,
rgba(0,0,0,.34) 0 1.5px, rgba(0,0,0,0) 1.5px 3.5px);}
.sheen{position:absolute;inset:0;background:
linear-gradient(118deg,
rgba(255,255,255,.07) 0%, rgba(255,255,255,.018) 26%, rgba(255,255,255,0) 46%);}
.vig{position:absolute;inset:0;background:
radial-gradient(112% 106% at 46% 62%, rgba(0,0,0,0) 48%, rgba(0,0,0,.52) 100%);}
</style>
<div class="tube"></div>
<div class="beam"></div>
<div class="scan"></div>
<div class="sheen"></div>
<div class="vig"></div>
section: |
<style>
/* A divider is the beam at full drive — the same tube, brighter. */
.tube{position:absolute;inset:0;background:
radial-gradient(118% 106% at 50% 50%,
{{tokens.surfaces.section.bg}} 0%, {{tokens.palette.bg}} 78%, #040704 100%);}
.beam{position:absolute;inset:0;background:
radial-gradient(58% 50% at 50% 50%,
{{tokens.palette.accent}}3c 0%, {{tokens.palette.accent}}16 44%, transparent 78%);}
.scan{position:absolute;inset:0;
background:repeating-linear-gradient(0deg,
rgba(0,0,0,.32) 0 1.5px, rgba(0,0,0,0) 1.5px 3.5px);}
.sheen{position:absolute;inset:0;background:
linear-gradient(118deg,
rgba(255,255,255,.06) 0%, rgba(255,255,255,.015) 27%, rgba(255,255,255,0) 47%);}
.vig{position:absolute;inset:0;background:
radial-gradient(110% 104% at 50% 50%, rgba(0,0,0,0) 50%, rgba(0,0,0,.46) 100%);}
</style>
<div class="tube"></div>
<div class="beam"></div>
<div class="scan"></div>
<div class="sheen"></div>
<div class="vig"></div>
voice:
feel: retro, precise, immersive, playful-tech
density: medium
prefers:
- system and hardware framing
- a playful-but-exact register
- short lines, terminal energy
avoid:
- corporate prose
- long paragraphs
- soft warm language
headline_style: >
Like a boot message. "PIPELINE ONLINE // 60FPS" over "Rendering".
Caps-able, terse, techy.
body_style: >
Compact and complete. Each line a fact; no filler lines.