mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-11-12 20:47:30 +00:00
feat(skills): 6 hand-crafted design.html templates with tokenized palettes
Replace generated designs for vellum, 8-bit-orbit, daisy-days, studio, soft-editorial, and pink-script with hand-crafted bespoke designs. Palette hex values tokenized to __PRIMARY__/__SECONDARY__/__TERTIARY__/__ACCENT__ for picker substitution. Each design matches its template's visual character. Total hand-crafted: 8 (block-frame, broadside, + these 6) Generated: 26 remaining Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Vance Ingalls
co-authored by
Claude Opus 4.6
Claude Opus 4.6
parent
ce6c1a86d9
commit
1ee518eda9
@@ -5,301 +5,736 @@
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
||||
<title>__NAME__ — Design System</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link href="https://fonts.googleapis.com/css2?__FONT_LINK_EXTRA__&display=swap" rel="stylesheet" />
|
||||
<script type="importmap">
|
||||
{"imports":{"three":"https://cdn.jsdelivr.net/npm/three@0.167.0/build/three.module.js","three/addons/":"https://cdn.jsdelivr.net/npm/three@0.167.0/examples/jsm/"}}
|
||||
</script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&family=Silkscreen:wght@400;700&display=swap" rel="stylesheet" />
|
||||
|
||||
<style id="ds-tokens">
|
||||
/* 8-BIT ORBIT TOKENS — CRT arcade palette. */
|
||||
:root{
|
||||
--primary:__PRIMARY__; --secondary:__SECONDARY__; --tertiary:__TERTIARY__; --accent:__ACCENT__;
|
||||
--hairline:color-mix(in srgb,var(--primary) 12%,transparent);
|
||||
--f-disp:"system-ui",sans-serif; --f-mono:"monospace",monospace;
|
||||
--pad-x:clamp(24px,5vw,88px); --pad-y:clamp(40px,6vh,100px);
|
||||
--void:#06091A; --hud:#0E1638;
|
||||
--cyan:#4ADDE5; --magenta:#FF52A2; --lemon:#FFE74A; --lime:#7CFF6B;
|
||||
--ink:#F3F2EA;
|
||||
--ink-dim:#8C9BC9;
|
||||
--ink-fade:#46568A;
|
||||
--grid:#1A2453;
|
||||
--hairline:#1F2C5E;
|
||||
|
||||
--f-disp:"Press Start 2P",monospace;
|
||||
--f-body:"VT323",monospace;
|
||||
--f-label:"Silkscreen",monospace;
|
||||
|
||||
--glow-pink:0 0 4px #FF52A2,0 0 12px rgba(255,82,162,.7),0 0 24px rgba(255,82,162,.4);
|
||||
--glow-cyan:0 0 4px #4ADDE5,0 0 12px rgba(74,221,229,.7),0 0 24px rgba(74,221,229,.4);
|
||||
--glow-lemon:0 0 4px #FFE74A,0 0 12px rgba(255,231,74,.6);
|
||||
|
||||
--pad-x:clamp(24px,5vw,80px);
|
||||
--pad-y:clamp(48px,7vh,120px);
|
||||
}
|
||||
</style>
|
||||
|
||||
<style>
|
||||
*,*::before,*::after{box-sizing:border-box}
|
||||
html,body{margin:0;padding:0;background:var(--secondary)}
|
||||
body{color:var(--primary);font:400 14px/1.6 "monospace",monospace;-webkit-font-smoothing:antialiased;overflow-x:hidden}
|
||||
::selection{background:var(--accent);color:var(--secondary)}
|
||||
*,*::before,*::after{box-sizing:border-box;image-rendering:pixelated}
|
||||
html,body{margin:0;padding:0;background:var(--void)}
|
||||
body{color:var(--ink);font:400 18px/1.45 var(--f-body);overflow-x:hidden}
|
||||
::selection{background:var(--magenta);color:var(--ink)}
|
||||
|
||||
#design-bg{position:fixed;inset:0;width:100%;height:100%;z-index:-2;opacity:.55;pointer-events:none}
|
||||
#bg-veil{position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 30% 20%,transparent 0%,var(--secondary) 75%)}
|
||||
/* CRT scanlines overlay */
|
||||
body::before{
|
||||
content:"";position:fixed;inset:0;z-index:200;pointer-events:none;
|
||||
background:repeating-linear-gradient(180deg,
|
||||
transparent 0px,
|
||||
transparent 2px,
|
||||
rgba(0,0,0,0.25) 3px,
|
||||
rgba(0,0,0,0.25) 4px);
|
||||
mix-blend-mode:multiply;
|
||||
}
|
||||
/* Faint CRT glow vignette */
|
||||
body::after{
|
||||
content:"";position:fixed;inset:0;z-index:201;pointer-events:none;
|
||||
background:radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,0.5) 100%);
|
||||
}
|
||||
|
||||
.rail{position:fixed;top:0;left:0;right:0;height:44px;display:flex;align-items:center;justify-content:space-between;padding:0 var(--pad-x);background:color-mix(in srgb,var(--secondary) 78%,transparent);backdrop-filter:blur(14px);border-bottom:1px solid rgba(128,128,128,.15);z-index:100;font:500 11px/1 "monospace",monospace;letter-spacing:.14em;text-transform:uppercase}
|
||||
.rail .brand{color:var(--accent);display:inline-flex;align-items:center;gap:10px;font:900 14px/1 "system-ui",sans-serif}
|
||||
.rail .brand .dot{width:9px;height:9px;background:var(--accent);}
|
||||
.rail nav{display:flex;gap:28px}
|
||||
.rail nav a{color:var(--primary);text-decoration:none;transition:all .15s}
|
||||
.rail nav a:hover{color:var(--accent)}
|
||||
@media(max-width:880px){.rail nav{display:none}}
|
||||
/* Pixel grid background, fixed */
|
||||
.bg-grid{position:fixed;inset:0;z-index:-1;pointer-events:none;
|
||||
background-image:
|
||||
linear-gradient(rgba(74,221,229,0.04) 1px,transparent 1px),
|
||||
linear-gradient(90deg,rgba(74,221,229,0.04) 1px,transparent 1px);
|
||||
background-size:32px 32px;
|
||||
background-position:0 0;
|
||||
}
|
||||
|
||||
/* Top HUD rail */
|
||||
.hud{
|
||||
position:fixed;top:0;left:0;right:0;height:48px;
|
||||
display:flex;align-items:center;justify-content:space-between;
|
||||
padding:0 var(--pad-x);
|
||||
background:var(--secondary);
|
||||
border-bottom:2px solid var(--cyan);
|
||||
box-shadow:0 0 0 1px var(--secondary),0 2px 0 var(--magenta),0 0 24px rgba(74,221,229,0.2);
|
||||
z-index:100;
|
||||
font:400 12px/1 var(--f-disp);
|
||||
letter-spacing:.04em;
|
||||
color:var(--cyan);
|
||||
text-shadow:0 0 6px rgba(74,221,229,0.7);
|
||||
}
|
||||
.hud .brand{display:inline-flex;align-items:center;gap:14px}
|
||||
.hud .brand .pix{width:14px;height:14px;background:var(--magenta);box-shadow:0 -4px 0 var(--magenta),4px 0 0 var(--magenta),-4px 0 0 var(--magenta),0 4px 0 var(--magenta),0 0 12px rgba(255,82,162,0.6)}
|
||||
.hud nav{display:flex;gap:18px;font:400 10px/1 var(--f-disp)}
|
||||
.hud nav a{color:var(--ink-dim);text-decoration:none;transition:color .1s}
|
||||
.hud nav a:hover{color:var(--magenta);text-shadow:0 0 6px rgba(255,82,162,0.7)}
|
||||
.hud .right{display:flex;align-items:center;gap:14px;font:400 10px/1 var(--f-disp)}
|
||||
.hud .right .live{color:var(--lime);text-shadow:0 0 6px rgba(124,255,107,0.6)}
|
||||
.hud .right .live::before{content:"●";margin-right:6px;animation:blink 1.4s steps(2) infinite}
|
||||
@keyframes blink{50%{opacity:0}}
|
||||
@media(max-width:760px){.hud nav{display:none}}
|
||||
|
||||
/* Sections */
|
||||
section{position:relative;padding:var(--pad-y) var(--pad-x)}
|
||||
.section-head{display:grid;grid-template-columns:9em 1fr;gap:clamp(24px,4vw,56px);align-items:baseline;border-top:1px solid rgba(128,128,128,.15);padding-top:28px;margin-bottom:clamp(36px,5vh,64px)}
|
||||
.section-head .num{font:500 12px/1 "monospace",monospace;letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}
|
||||
.section-head h2{font:900 clamp(36px,6vw,84px)/.92 "system-ui",sans-serif;letter-spacing:-.035em;margin:0;text-transform:lowercase}
|
||||
.section-head .lede{grid-column:2;max-width:60ch;margin-top:18px;font-size:15px;line-height:1.6color:var(--primary);opacity:.65}
|
||||
.section-head{display:grid;grid-template-columns:11em 1fr;gap:clamp(24px,4vw,56px);align-items:end;border-top:2px solid var(--grid);padding-top:32px;margin-bottom:clamp(40px,6vh,72px)}
|
||||
.section-head .num{
|
||||
font:400 11px/1 var(--f-disp);
|
||||
color:var(--magenta);
|
||||
text-shadow:var(--glow-pink);
|
||||
letter-spacing:.04em;
|
||||
}
|
||||
.section-head h2{
|
||||
font:400 clamp(40px,6.5vw,92px)/1 var(--f-disp);
|
||||
letter-spacing:.01em;
|
||||
margin:0;
|
||||
color:var(--ink);
|
||||
text-shadow:4px 4px 0 var(--magenta),8px 8px 0 var(--secondary);
|
||||
}
|
||||
.section-head h2 .cyan{color:var(--cyan);text-shadow:4px 4px 0 var(--secondary)}
|
||||
.section-head .lede{grid-column:2;max-width:54ch;margin-top:18px;font:400 22px/1.5 var(--f-body);color:var(--ink-dim)}
|
||||
|
||||
.cover{background:var(--accent);color:var(--secondary)};min-height:100vh;padding:80px var(--pad-x) 48px;display:grid;grid-template-rows:auto 1fr auto}
|
||||
.cover-headline{align-self:end;margin:0;font:900 clamp(80px,17vw,280px)/.82 "system-ui",sans-serif;letter-spacing:-.04em;text-transform:lowercase}
|
||||
.cover-foot{margin-top:48px;padding-top:20px;border-top:1px solid rgba(128,128,128,.15);display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
|
||||
.cover-foot .cell{display:flex;flex-direction:column;gap:6px}
|
||||
.cover-foot .k{font:500 10px/1 "monospace",monospace;letter-spacing:.1em;text-transform:uppercase;opacity:.55}
|
||||
.cover-foot .v{font:500 13px/1.4 "monospace",monospace}
|
||||
.cover-foot .v.big{font:800 28px/1 "system-ui",sans-serif;letter-spacing:-.02em}
|
||||
@media(max-width:760px){.cover-foot{grid-template-columns:1fr 1fr}}
|
||||
/* Cover */
|
||||
.cover{min-height:100vh;padding:80px var(--pad-x) 48px;display:grid;grid-template-rows:auto 1fr auto;position:relative;overflow:hidden}
|
||||
.cover-chrome{display:flex;justify-content:space-between;align-items:flex-start;font:400 10px/1 var(--f-disp);color:var(--cyan)}
|
||||
.cover-chrome .blink{color:var(--magenta);animation:blink 1.2s steps(2) infinite}
|
||||
|
||||
.manifesto{padding:clamp(60px,9vh,120px) var(--pad-x);border-bottom:1px solid rgba(128,128,128,.15)}
|
||||
.manifesto-grid{display:grid;grid-template-columns:9em 1fr;gap:clamp(24px,4vw,56px);align-items:start;max-width:1400px;margin:0 auto}
|
||||
.manifesto-grid .num{font:500 12px/1 "monospace",monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
|
||||
.manifesto p{font:700 clamp(28px,3.8vw,56px)/1.05 "system-ui",sans-serif;letter-spacing:-.025em;max-width:22ch;margin:0;text-transform:lowercase}
|
||||
.manifesto p em{font-style:normal;color:var(--accent)}
|
||||
.cover-headline{
|
||||
align-self:center;
|
||||
margin:0;
|
||||
font:400 clamp(72px,15vw,240px)/.9 var(--f-disp);
|
||||
letter-spacing:.01em;
|
||||
color:var(--ink);
|
||||
text-shadow:
|
||||
6px 6px 0 var(--magenta),
|
||||
12px 12px 0 var(--cyan),
|
||||
0 0 32px rgba(74,221,229,0.3);
|
||||
}
|
||||
.cover-headline .cyan{color:var(--cyan);text-shadow:6px 6px 0 var(--magenta),0 0 32px rgba(255,82,162,0.4)}
|
||||
.cover-headline .magenta{color:var(--magenta);text-shadow:6px 6px 0 var(--cyan),0 0 32px rgba(255,82,162,0.4)}
|
||||
|
||||
.palette{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:rgba(128,128,128,.1);border:1px solid rgba(128,128,128,.15)}
|
||||
.swatch{padding:28px 24px;aspect-ratio:3/4;display:flex;flex-direction:column;justify-content:space-between;border-radius:0;transition:all .2s}
|
||||
.swatch:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,0,0,.15)}
|
||||
.swatch .role{font:500 11px/1 "monospace",monospace;letter-spacing:.1em;text-transform:uppercase}
|
||||
.swatch .name{font:900 clamp(28px,3.4vw,48px)/.92 "system-ui",sans-serif;letter-spacing:-.025em;text-transform:lowercase;margin-top:auto}
|
||||
.swatch .hex{font:500 12px/1 "monospace",monospace;margin-top:8px}
|
||||
.swatch .usage{font:400 11px/1.5 "monospace",monospace;margin-top:6px;opacity:.65}
|
||||
.swatch--primary{background:var(--primary);color:var(--secondary)}
|
||||
.swatch--secondary{background:var(--secondary);color:var(--primary)}
|
||||
.swatch--tertiary{background:var(--tertiary);color:var(--primary)}
|
||||
.swatch--accent{background:var(--accent);color:var(--secondary)}
|
||||
.press-start{
|
||||
margin-top:32px;
|
||||
text-align:center;
|
||||
font:400 14px/1.6 var(--f-disp);
|
||||
color:var(--lemon);
|
||||
text-shadow:var(--glow-lemon);
|
||||
letter-spacing:.04em;
|
||||
animation:blink 1.4s steps(2) infinite
|
||||
}
|
||||
|
||||
.cover-foot{margin-top:48px;display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:2px solid var(--cyan);box-shadow:0 0 0 1px var(--secondary),4px 4px 0 var(--magenta)}
|
||||
.cover-foot .cell{padding:18px 22px;border-right:1px solid var(--hairline);display:flex;flex-direction:column;gap:6px;background:var(--hud)}
|
||||
.cover-foot .cell:last-child{border-right:0}
|
||||
.cover-foot .k{font:400 9px/1 var(--f-disp);letter-spacing:.04em;color:var(--magenta);text-shadow:0 0 4px rgba(255,82,162,0.6)}
|
||||
.cover-foot .v{font:400 22px/1.2 var(--f-body);color:var(--cyan);text-shadow:var(--glow-cyan)}
|
||||
.cover-foot .v.big{font:400 14px/1 var(--f-disp);letter-spacing:.04em;color:var(--lemon)}
|
||||
@media(max-width:760px){.cover-foot{grid-template-columns:1fr 1fr}.cover-foot .cell:nth-child(2){border-right:0}.cover-foot .cell:nth-child(-n+2){border-bottom:1px solid var(--hairline)}}
|
||||
|
||||
/* Manifesto */
|
||||
.manifesto{padding:clamp(60px,9vh,120px) var(--pad-x);border-top:2px solid var(--grid);border-bottom:2px solid var(--grid);background:var(--hud)}
|
||||
.manifesto-grid{display:grid;grid-template-columns:11em 1fr;gap:clamp(24px,4vw,56px);align-items:start}
|
||||
.manifesto-grid .num{font:400 11px/1 var(--f-disp);color:var(--magenta);text-shadow:var(--glow-pink);letter-spacing:.04em}
|
||||
.manifesto p{font:400 clamp(28px,4vw,48px)/1.2 var(--f-disp);max-width:22ch;margin:0;color:var(--ink);letter-spacing:.01em;line-height:1.3}
|
||||
.manifesto p em{font-style:normal;color:var(--cyan);text-shadow:var(--glow-cyan)}
|
||||
.manifesto p strong{font-weight:400;color:var(--magenta);text-shadow:var(--glow-pink)}
|
||||
|
||||
/* Palette */
|
||||
.palette{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
|
||||
@media(max-width:880px){.palette{grid-template-columns:repeat(2,1fr)}}
|
||||
.swatch{aspect-ratio:3/4;padding:0;display:flex;flex-direction:column;border:3px solid var(--ink);box-shadow:6px 6px 0 var(--secondary),12px 12px 0 var(--magenta);position:relative;transition:transform .1s steps(2)}
|
||||
.swatch:hover{transform:translate(-3px,-3px)}
|
||||
.swatch .role-bar{padding:8px 14px;font:400 9px/1 var(--f-disp);letter-spacing:.04em;border-bottom:3px solid var(--ink);display:flex;justify-content:space-between;align-items:center}
|
||||
.swatch .role-bar .x{width:10px;height:10px;background:currentColor;box-shadow:0 -3px 0 currentColor,3px 0 0 currentColor,-3px 0 0 currentColor,0 3px 0 currentColor}
|
||||
.swatch .fill{flex:1;display:flex;flex-direction:column;justify-content:flex-end;padding:18px}
|
||||
.swatch .name{font:400 28px/1 var(--f-disp);letter-spacing:.01em;margin-top:auto}
|
||||
.swatch .hex{font:400 22px/1 var(--f-body);margin-top:14px}
|
||||
.swatch .usage{font:400 18px/1.4 var(--f-body);margin-top:6px;opacity:.85}
|
||||
.swatch--paper{background:var(--ink);color:var(--secondary)}
|
||||
.swatch--paper .role-bar{background:var(--secondary);color:var(--cyan)}
|
||||
.swatch--void{background:var(--secondary);color:var(--ink)}
|
||||
.swatch--void .role-bar{background:var(--ink);color:var(--secondary)}
|
||||
.swatch--cyan{background:var(--cyan);color:var(--secondary)}
|
||||
.swatch--cyan .role-bar{background:var(--secondary);color:var(--cyan);text-shadow:var(--glow-cyan)}
|
||||
.swatch--magenta{background:var(--magenta);color:var(--secondary)}
|
||||
.swatch--magenta .role-bar{background:var(--secondary);color:var(--magenta);text-shadow:var(--glow-pink)}
|
||||
|
||||
.specimen{max-width:1400px;margin:0 auto;display:flex;flex-direction:column}
|
||||
.spec-row{display:grid;grid-template-columns:11em 1fr;gap:32px;padding:28px 0;border-top:1px solid rgba(128,128,128,.15);align-items:baseline}
|
||||
.spec-row:first-child{border:0;padding-top:0}
|
||||
.spec-row .meta{font:500 11px/1.4 "monospace",monospace;letter-spacing:.1em;text-transform:uppercase;display:flex;flex-direction:column;gap:4px;color:var(--primary);opacity:.4}
|
||||
.spec-row .meta b{color:var(--accent);font:400 22px/1 "system-ui",sans-serif}
|
||||
.spec-display{font:900 clamp(56px,10vw,152px)/.88 "system-ui",sans-serif;letter-spacing:-.04em;text-transform:lowercase}
|
||||
.spec-h1{font:800 clamp(40px,7vw,104px)/.9 "system-ui",sans-serif;letter-spacing:-.03em;text-transform:lowercase}
|
||||
.spec-h2{font:700 clamp(28px,4.2vw,64px)/1 "system-ui",sans-serif;letter-spacing:-.02em}
|
||||
.spec-lead{font:500 clamp(18px,2vw,26px)/1.45 "system-ui",sans-serif}
|
||||
.spec-body{font:400 17px/1.65 "system-ui",sans-serif;max-width:60ch}
|
||||
.spec-label{font:500 13px/1 "monospace",monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
|
||||
/* Type specimen */
|
||||
.specimen{display:flex;flex-direction:column;border:2px solid var(--cyan);background:var(--hud)}
|
||||
.spec-row{display:grid;grid-template-columns:14em 1fr;gap:32px;padding:32px 36px;border-bottom:1px solid var(--grid);align-items:baseline}
|
||||
.spec-row:last-child{border:0}
|
||||
.spec-row .meta{font:400 10px/1.5 var(--f-disp);color:var(--cyan);letter-spacing:.04em;display:flex;flex-direction:column;gap:8px}
|
||||
.spec-row .meta b{color:var(--magenta);font-weight:400;text-shadow:var(--glow-pink)}
|
||||
.spec-display{font:400 clamp(48px,9vw,128px)/.95 var(--f-disp);letter-spacing:.01em;color:var(--ink);text-shadow:4px 4px 0 var(--magenta)}
|
||||
.spec-h1{font:400 clamp(32px,6vw,72px)/1 var(--f-disp);letter-spacing:.01em;color:var(--cyan);text-shadow:var(--glow-cyan)}
|
||||
.spec-h2{font:400 clamp(24px,4vw,48px)/1.1 var(--f-disp);color:var(--ink)}
|
||||
.spec-lead{font:400 clamp(22px,2.2vw,32px)/1.4 var(--f-body);color:var(--ink)}
|
||||
.spec-body{font:400 22px/1.5 var(--f-body);color:var(--ink);max-width:60ch}
|
||||
.spec-label{font:400 12px/1 var(--f-disp);letter-spacing:.04em;color:var(--lemon);text-shadow:var(--glow-lemon)}
|
||||
|
||||
.surface-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:48px;max-width:1400px;margin:0 auto}
|
||||
/* Surface */
|
||||
.surface-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:32px}
|
||||
@media(max-width:880px){.surface-grid{grid-template-columns:1fr}}
|
||||
.demo-card{background:var(--primary);color:var(--secondary);border-radius:0;padding:28px;box-shadow:0 4px 16px rgba(0,0,0,.12);display:flex;flex-direction:column;gap:18px}
|
||||
.demo-card .tag{align-self:flex-start;font:500 10px/1 "monospace",monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);border:1px solid var(--accent);padding:4px 8px}
|
||||
.demo-card h3{margin:0;font:900 36px/1 "system-ui",sans-serif;letter-spacing:-.02em;text-transform:lowercase}
|
||||
.demo-card p{margin:0;font:400 15px/1.6 "system-ui",sans-serif;opacity:.7}
|
||||
.tokens{list-style:none;padding:0;margin:0;border-top:1px solid rgba(128,128,128,.15)}
|
||||
.tokens li{display:grid;grid-template-columns:1fr auto auto;gap:18px;align-items:center;padding:18px 0;border-bottom:1px solid rgba(128,128,128,.15)}
|
||||
.demo-card{background:var(--secondary);color:var(--ink);border:3px solid var(--cyan);box-shadow:6px 6px 0 var(--magenta);padding:28px 32px;display:flex;flex-direction:column;gap:18px;position:relative}
|
||||
.demo-card::before{content:"";position:absolute;top:8px;left:8px;right:8px;bottom:8px;border:1px solid var(--cyan);opacity:.3;pointer-events:none}
|
||||
.demo-card .card-label{align-self:flex-start;font:400 10px/1 var(--f-disp);color:var(--magenta);background:var(--secondary);padding:6px 10px;border:2px solid var(--magenta);box-shadow:3px 3px 0 var(--cyan);text-shadow:var(--glow-pink);letter-spacing:.04em}
|
||||
.demo-card h3{margin:0;font:400 28px/1.1 var(--f-disp);letter-spacing:.01em;color:var(--cyan);text-shadow:var(--glow-cyan)}
|
||||
.demo-card p{margin:0;font:400 20px/1.55 var(--f-body);color:var(--ink-dim)}
|
||||
.demo-card .stat-row{display:flex;align-items:flex-end;gap:18px;padding-top:14px;border-top:1px solid var(--grid)}
|
||||
.demo-card .stat-row .num{font:400 56px/1 var(--f-disp);color:var(--lemon);text-shadow:var(--glow-lemon);letter-spacing:.01em}
|
||||
.demo-card .stat-row .pct{font:400 18px/1 var(--f-disp);color:var(--ink-dim);margin-bottom:6px}
|
||||
.tokens{list-style:none;padding:0;margin:0;border:2px solid var(--cyan);background:var(--hud)}
|
||||
.tokens li{display:grid;grid-template-columns:1fr auto auto;gap:18px;align-items:center;padding:14px 22px;border-bottom:1px solid var(--grid)}
|
||||
.tokens li:last-child{border:0}
|
||||
.tokens .name{font:500 12px/1 "monospace",monospace;letter-spacing:.1em;text-transform:uppercase;opacity:.6}
|
||||
.tokens .val{font:800 20px/1 "system-ui",sans-serif}
|
||||
.tokens .bar{height:6px;background:var(--accent)}
|
||||
.tokens .name{font:400 11px/1 var(--f-disp);color:var(--cyan);letter-spacing:.04em}
|
||||
.tokens .val{font:400 22px/1 var(--f-body);color:var(--lemon)}
|
||||
.tokens .bar{height:8px;background:var(--magenta);box-shadow:0 0 8px rgba(255,82,162,.6)}
|
||||
|
||||
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:48px;max-width:1400px;margin:0 auto}
|
||||
/* Motion */
|
||||
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:32px}
|
||||
@media(max-width:880px){.two-col{grid-template-columns:1fr}}
|
||||
.panel{border:1px solid rgba(128,128,128,.15);background:color-mix(in srgb,var(--secondary) 70%,transparent)};padding:36px;border-radius:0;display:flex;flex-direction:column;gap:22px}
|
||||
.panel .label-row{font:500 11px/1 "monospace",monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
|
||||
.panel h4{margin:0;font:800 32px/1 "system-ui",sans-serif;text-transform:lowercase}
|
||||
.panel p{margin:0;font:400 13px/1.7 "system-ui",sans-serif;opacity:.65;max-width:38ch}
|
||||
.panel{background:var(--hud);border:2px solid var(--magenta);box-shadow:6px 6px 0 var(--cyan);padding:32px;display:flex;flex-direction:column;gap:18px}
|
||||
.panel .label-row{font:400 10px/1 var(--f-disp);color:var(--cyan);letter-spacing:.04em;text-shadow:var(--glow-cyan)}
|
||||
.panel h4{margin:0;font:400 28px/1.1 var(--f-disp);color:var(--magenta);text-shadow:var(--glow-pink)}
|
||||
.panel p{margin:0;font:400 20px/1.55 var(--f-body);color:var(--ink-dim);max-width:40ch}
|
||||
.panel pre{margin:0;padding:14px 18px;background:var(--void);border:1px solid var(--grid);font:400 18px/1.5 var(--f-body);color:var(--cyan);overflow-x:auto}
|
||||
|
||||
.bg-preview{border:1px solid rgba(128,128,128,.15);aspect-ratio:4/3;position:relative;overflow:hidden;background:var(--secondary);border-radius:0}
|
||||
.bg-preview canvas{width:100%;height:100%;display:block}
|
||||
.bg-preview .badge{position:absolute;bottom:12px;left:12px;font:500 10px/1 "monospace",monospace;letter-spacing:.1em;text-transform:uppercase;background:color-mix(in srgb,var(--secondary) 75%,transparent);padding:6px 10px;backdrop-filter:blur(8px)}
|
||||
|
||||
details.code-block{border:1px solid rgba(128,128,128,.15);background:color-mix(in srgb,var(--secondary) 60%,transparent)};margin-top:12px;border-radius:0}
|
||||
details.code-block summary{cursor:pointer;padding:14px 18px;list-style:none;font:500 11px/1 "monospace",monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);display:flex;justify-content:space-between}
|
||||
details.code-block summary::-webkit-details-marker{display:none}
|
||||
details.code-block summary::after{content:"+";font:900 18px/1 "system-ui",sans-serif;color:var(--accent)}
|
||||
details.code-block[open] summary::after{content:"\2212"}
|
||||
details.code-block pre{margin:0;padding:16px;border-top:1px solid rgba(128,128,128,.15);font:11px/1.6 "monospace",monospace;color:var(--primary);opacity:.65;background:transparent;overflow-x:auto;white-space:pre-wrap;word-break:break-word;max-height:320px;overflow-y:auto}
|
||||
|
||||
.rules-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;max-width:1400px;margin:0 auto}
|
||||
/* Guidelines */
|
||||
.rules-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px}
|
||||
@media(max-width:880px){.rules-grid{grid-template-columns:1fr}}
|
||||
.rules-col{}
|
||||
.rules-col.do{}
|
||||
.rules-col.dont{}
|
||||
.rules-col h3{font:900 56px/1 "system-ui",sans-serif;letter-spacing:-.03em;margin:0 0 28px;text-transform:lowercase}
|
||||
.rules-col.do h3{color:var(--accent)}
|
||||
.rules-col.dont h3{opacity:.4}
|
||||
.rules-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0px}
|
||||
.rules-col li{display:grid;grid-template-columns:2em 1fr;gap:8px;padding:16px 0;border-top:1px solid rgba(128,128,128,.15);font:500 18px/1.45 "system-ui",sans-serif}
|
||||
.rules-col li::before{font:800 22px/1.2 "system-ui",sans-serif;align-self:start;}
|
||||
.rules-col.do li::before{content:"+";color:var(--accent)}
|
||||
.rules-col.dont li::before{content:"\2014";opacity:.4}
|
||||
.rules-col{border:3px solid;padding:32px;background:var(--hud)}
|
||||
.rules-col.do{border-color:var(--cyan);box-shadow:6px 6px 0 var(--magenta)}
|
||||
.rules-col.dont{border-color:var(--magenta);box-shadow:6px 6px 0 var(--grid)}
|
||||
.rules-col h3{font:400 36px/1 var(--f-disp);margin:0 0 24px;letter-spacing:.01em}
|
||||
.rules-col.do h3{color:var(--cyan);text-shadow:var(--glow-cyan)}
|
||||
.rules-col.dont h3{color:var(--magenta);text-shadow:var(--glow-pink)}
|
||||
.rules-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
|
||||
.rules-col li{display:grid;grid-template-columns:2em 1fr;gap:14px;padding:12px 0;border-top:1px solid var(--grid);font:400 19px/1.45 var(--f-body);color:var(--ink)}
|
||||
.rules-col li::before{font:400 10px/1.3 var(--f-disp);align-self:center;text-align:center;letter-spacing:.04em;padding:6px 0;border:2px solid currentColor}
|
||||
.rules-col.do li::before{content:"OK";color:var(--cyan);background:transparent}
|
||||
.rules-col.dont li::before{content:"NO";color:var(--magenta)}
|
||||
|
||||
.templates-wrap{background:color-mix(in srgb,var(--secondary) 96%,var(--accent))}
|
||||
.templates-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:1400px;margin:0 auto}
|
||||
/* Templates */
|
||||
.templates-wrap{border-top:2px solid var(--grid)}
|
||||
.templates-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
|
||||
@media(max-width:1100px){.templates-grid{grid-template-columns:repeat(2,1fr)}}
|
||||
@media(max-width:720px){.templates-grid{grid-template-columns:1fr}}
|
||||
.tmpl{background:var(--secondary);border:1px solid rgba(128,128,128,.15);overflow:hidden;border-radius:0;transition:all .2s}
|
||||
.tmpl:hover{border-color:var(--accent);transform:translateY(-2px)}
|
||||
.tmpl-thumb{width:100%;aspect-ratio:16/9;overflow:hidden;position:relative;background:#050505;border-bottom:1px solid rgba(128,128,128,.15)}
|
||||
.tmpl{background:var(--secondary);border:3px solid var(--ink);box-shadow:6px 6px 0 var(--magenta);overflow:hidden;transition:transform .12s steps(2),box-shadow .12s steps(2)}
|
||||
.tmpl:hover{transform:translate(-3px,-3px);box-shadow:9px 9px 0 var(--magenta)}
|
||||
.tmpl-thumb{width:100%;aspect-ratio:16/9;overflow:hidden;position:relative;background:var(--void);border-bottom:2px solid var(--cyan)}
|
||||
.tmpl-thumb .scale-wrap{width:1920px;height:1080px;transform-origin:top left}
|
||||
.tmpl-foot{display:flex;justify-content:space-between;padding:14px 18px;font:500 11px/1 "monospace",monospace;letter-spacing:.14em;text-transform:uppercase}
|
||||
.tmpl-foot .idx{color:var(--accent)}
|
||||
.tmpl-foot{display:flex;justify-content:space-between;align-items:center;padding:12px 18px;font:400 10px/1 var(--f-disp);letter-spacing:.04em;background:var(--hud)}
|
||||
.tmpl-foot .name{color:var(--cyan)}
|
||||
.tmpl-foot .idx{color:var(--magenta);background:var(--secondary);padding:4px 8px;border:1px solid var(--magenta)}
|
||||
|
||||
footer.endcap{background:var(--accent);color:var(--secondary);padding:80px var(--pad-x) 60px;display:grid;grid-template-columns:1fr auto;gap:48px;align-items:end}
|
||||
footer.endcap .endmark{font:900 clamp(60px,13vw,220px)/.85 "system-ui",sans-serif;letter-spacing:-.04em;text-transform:lowercase;margin:0}
|
||||
footer.endcap .meta{font:500 12px/2 "monospace",monospace;letter-spacing:.1em;text-transform:uppercase;opacity:.6;text-align:right}
|
||||
footer.endcap .meta b{opacity:1;color:var(--accent)}
|
||||
/* Endcap */
|
||||
footer.endcap{padding:80px var(--pad-x) 56px;border-top:2px solid var(--magenta);background:var(--secondary);position:relative}
|
||||
footer.endcap::before{content:"";position:absolute;top:-2px;left:0;right:0;height:2px;background:repeating-linear-gradient(90deg,var(--cyan) 0 12px,var(--magenta) 12px 24px,var(--lemon) 24px 36px,var(--lime) 36px 48px)}
|
||||
footer.endcap .grid{display:grid;grid-template-columns:1fr auto;gap:48px;align-items:end}
|
||||
footer.endcap .endmark{margin:0;font:400 clamp(48px,11vw,160px)/.95 var(--f-disp);letter-spacing:.02em;color:var(--magenta);text-shadow:6px 6px 0 var(--cyan),0 0 24px rgba(255,82,162,0.4)}
|
||||
footer.endcap .endmark .blink{color:var(--lemon);text-shadow:6px 6px 0 var(--magenta);animation:blink 1.4s steps(2) infinite}
|
||||
footer.endcap .meta{font:400 12px/1.8 var(--f-disp);letter-spacing:.04em;color:var(--ink-dim);text-align:right}
|
||||
footer.endcap .meta b{color:var(--cyan);font-weight:400}
|
||||
</style>
|
||||
|
||||
<!-- ════════════════════════════════════════════════════════════
|
||||
8-BIT ORBIT TEMPLATE STYLES — 1920×1080 arcade slides.
|
||||
════════════════════════════════════════════════════════════ -->
|
||||
<style id="template-css">
|
||||
__TEMPLATE_CSS__
|
||||
.ds-slide-frame{
|
||||
--p-bg:#0A1429; --p-hud:#0E1638; --p-grid:#1A2453; --p-line:#1F2C5E;
|
||||
--p-ink:#F3F2EA; --p-dim:#8C9BC9; --p-fade:#46568A;
|
||||
--p-cyan:#4ADDE5; --p-magenta:#FF52A2; --p-lemon:#FFE74A; --p-lime:#7CFF6B;
|
||||
--p-f-disp:"Press Start 2P",monospace;
|
||||
--p-f-body:"VT323",monospace;
|
||||
--p-f-label:"Silkscreen",monospace;
|
||||
--p-glow-c:0 0 6px rgba(74,221,229,.8),0 0 18px rgba(74,221,229,.4);
|
||||
--p-glow-m:0 0 6px rgba(255,82,162,.8),0 0 18px rgba(255,82,162,.4);
|
||||
--p-glow-l:0 0 6px rgba(255,231,74,.8),0 0 18px rgba(255,231,74,.4);
|
||||
width:1920px;height:1080px;position:relative;overflow:hidden
|
||||
}
|
||||
.ds-slide-frame *{box-sizing:border-box;image-rendering:pixelated}
|
||||
.ds-slide-frame .slide{
|
||||
width:1920px;height:1080px;position:relative;
|
||||
padding:80px 96px;
|
||||
display:grid;grid-template-rows:auto 1fr auto;
|
||||
overflow:hidden;
|
||||
background:var(--p-bg);color:var(--p-ink);
|
||||
font-family:var(--p-f-body);
|
||||
background-image:
|
||||
linear-gradient(rgba(74,221,229,0.04) 1px,transparent 1px),
|
||||
linear-gradient(90deg,rgba(74,221,229,0.04) 1px,transparent 1px);
|
||||
background-size:32px 32px
|
||||
}
|
||||
.ds-slide-frame .slide::after{
|
||||
content:"";position:absolute;inset:0;pointer-events:none;
|
||||
background:repeating-linear-gradient(180deg,transparent 0 3px,rgba(0,0,0,0.18) 4px 5px);
|
||||
}
|
||||
.ds-slide-frame .slide-chrome,.ds-slide-frame .slide-foot{display:flex;justify-content:space-between;align-items:center;font:400 18px/1 var(--p-f-disp);letter-spacing:.04em;color:var(--p-cyan);text-shadow:var(--p-glow-c)}
|
||||
.ds-slide-frame .slide-chrome{padding:12px 20px;border:2px solid var(--p-cyan);background:var(--p-hud);box-shadow:4px 4px 0 var(--p-magenta);margin-bottom:48px}
|
||||
.ds-slide-frame .slide-foot{padding:12px 20px;border:2px solid var(--p-magenta);background:var(--p-hud);box-shadow:4px 4px 0 var(--p-cyan);margin-top:48px;color:var(--p-magenta);text-shadow:var(--p-glow-m)}
|
||||
.ds-slide-frame .slide-foot .accent{color:var(--p-lemon);text-shadow:var(--p-glow-l)}
|
||||
.ds-slide-frame .display{font:400 220px/.9 var(--p-f-disp);letter-spacing:.01em;color:var(--p-ink);text-shadow:8px 8px 0 var(--p-magenta),16px 16px 0 var(--p-cyan)}
|
||||
.ds-slide-frame .display .cyan{color:var(--p-cyan);text-shadow:8px 8px 0 var(--p-magenta)}
|
||||
.ds-slide-frame .display .magenta{color:var(--p-magenta);text-shadow:8px 8px 0 var(--p-cyan)}
|
||||
.ds-slide-frame .h1{font:400 120px/1 var(--p-f-disp);letter-spacing:.01em;color:var(--p-cyan);text-shadow:var(--p-glow-c)}
|
||||
.ds-slide-frame .h2{font:400 72px/1.05 var(--p-f-disp);letter-spacing:.01em;color:var(--p-ink);text-shadow:4px 4px 0 var(--p-magenta)}
|
||||
.ds-slide-frame .h3{font:400 42px/1.15 var(--p-f-disp);letter-spacing:.01em;color:var(--p-cyan);text-shadow:var(--p-glow-c)}
|
||||
.ds-slide-frame .lead{font:400 36px/1.45 var(--p-f-body);color:var(--p-ink)}
|
||||
.ds-slide-frame .body{font:400 28px/1.55 var(--p-f-body);color:var(--p-ink)}
|
||||
.ds-slide-frame .label{font:400 16px/1 var(--p-f-disp);letter-spacing:.04em;color:var(--p-magenta);text-shadow:var(--p-glow-m)}
|
||||
.ds-slide-frame .accent{color:var(--p-magenta);text-shadow:var(--p-glow-m)}
|
||||
.ds-slide-frame .muted{color:var(--p-dim)}
|
||||
|
||||
/* slide--cover (title screen) */
|
||||
.ds-slide-frame .slide--cover .slide-chrome,.ds-slide-frame .slide--cover .slide-foot{display:none}
|
||||
.ds-slide-frame .slide--cover{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:48px;padding:80px}
|
||||
.ds-slide-frame .cover-tagline{font:400 32px/1.3 var(--p-f-body);color:var(--p-dim);max-width:30ch}
|
||||
.ds-slide-frame .press-start{font:400 24px/1 var(--p-f-disp);color:var(--p-lemon);text-shadow:var(--p-glow-l);letter-spacing:.04em}
|
||||
.ds-slide-frame .high-score{display:flex;gap:64px;font:400 16px/1 var(--p-f-disp);color:var(--p-cyan);letter-spacing:.04em;padding-top:32px;border-top:2px solid var(--p-grid)}
|
||||
.ds-slide-frame .high-score b{color:var(--p-magenta);font-weight:400}
|
||||
|
||||
/* slide--loading */
|
||||
.ds-slide-frame .slide--loading .slide-body{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:48px;text-align:center}
|
||||
.ds-slide-frame .loading-text{font:400 64px/1 var(--p-f-disp);letter-spacing:.01em;color:var(--p-ink);text-shadow:4px 4px 0 var(--p-magenta)}
|
||||
.ds-slide-frame .loading-percent{font:400 144px/1 var(--p-f-disp);color:var(--p-lemon);text-shadow:var(--p-glow-l),6px 6px 0 var(--p-magenta);letter-spacing:.02em}
|
||||
.ds-slide-frame .loading-bar{width:80%;max-width:1200px;height:48px;border:4px solid var(--p-cyan);padding:4px;background:var(--p-hud);position:relative;box-shadow:6px 6px 0 var(--p-magenta)}
|
||||
.ds-slide-frame .loading-bar .fill{width:74%;height:100%;background:repeating-linear-gradient(90deg,var(--p-magenta) 0 24px,var(--p-cyan) 24px 48px);box-shadow:0 0 18px rgba(255,82,162,.4)}
|
||||
.ds-slide-frame .loading-label{font:400 24px/1 var(--p-f-disp);color:var(--p-cyan);text-shadow:var(--p-glow-c);letter-spacing:.04em}
|
||||
|
||||
/* slide--hud (stats grid) */
|
||||
.ds-slide-frame .slide--hud .slide-body{display:flex;flex-direction:column;justify-content:center;gap:48px}
|
||||
.ds-slide-frame .hud-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:3px solid var(--p-cyan);background:var(--p-hud)}
|
||||
.ds-slide-frame .hud-cell{padding:32px;border-right:2px solid var(--p-grid);display:flex;flex-direction:column;gap:18px;position:relative}
|
||||
.ds-slide-frame .hud-cell:last-child{border-right:0}
|
||||
.ds-slide-frame .hud-cell::before{content:"";position:absolute;top:8px;right:8px;width:12px;height:12px;background:var(--p-lime);box-shadow:0 0 8px rgba(124,255,107,.6);animation:blink 1.6s steps(2) infinite}
|
||||
.ds-slide-frame .hud-cell .lbl{font:400 16px/1 var(--p-f-disp);color:var(--p-magenta);text-shadow:var(--p-glow-m);letter-spacing:.04em}
|
||||
.ds-slide-frame .hud-cell .val{font:400 96px/1 var(--p-f-disp);color:var(--p-lemon);text-shadow:var(--p-glow-l);letter-spacing:.02em}
|
||||
.ds-slide-frame .hud-cell .desc{font:400 22px/1.4 var(--p-f-body);color:var(--p-dim)}
|
||||
.ds-slide-frame .hud-cell .bar{display:flex;gap:4px;margin-top:auto}
|
||||
.ds-slide-frame .hud-cell .bar span{flex:1;height:14px;background:var(--p-cyan);box-shadow:0 0 6px rgba(74,221,229,.5)}
|
||||
.ds-slide-frame .hud-cell .bar span.off{background:var(--p-grid);box-shadow:none}
|
||||
|
||||
/* slide--dialog (quote) */
|
||||
.ds-slide-frame .slide--dialog .slide-body{display:flex;flex-direction:column;justify-content:center;padding:48px}
|
||||
.ds-slide-frame .dialog-box{border:4px solid var(--p-magenta);background:var(--p-hud);padding:64px 72px;box-shadow:8px 8px 0 var(--p-cyan);position:relative;max-width:1500px}
|
||||
.ds-slide-frame .dialog-box::before{content:"";position:absolute;top:-22px;left:64px;width:32px;height:32px;background:var(--p-magenta);border-top:4px solid var(--p-cyan)}
|
||||
.ds-slide-frame .dialog-tag{position:absolute;top:-24px;right:48px;font:400 16px/1 var(--p-f-disp);color:var(--p-magenta);text-shadow:var(--p-glow-m);background:var(--p-bg);padding:4px 14px;letter-spacing:.04em}
|
||||
.ds-slide-frame .dialog-text{font:400 56px/1.3 var(--p-f-disp);letter-spacing:.01em;color:var(--p-ink);margin-bottom:32px}
|
||||
.ds-slide-frame .dialog-text .cyan{color:var(--p-cyan);text-shadow:var(--p-glow-c)}
|
||||
.ds-slide-frame .dialog-name{font:400 24px/1 var(--p-f-disp);color:var(--p-lemon);text-shadow:var(--p-glow-l);letter-spacing:.04em}
|
||||
|
||||
/* slide--chart (waveform) */
|
||||
.ds-slide-frame .slide--chart .slide-body{display:flex;flex-direction:column;gap:32px}
|
||||
.ds-slide-frame .chart-header{display:flex;justify-content:space-between;align-items:baseline}
|
||||
.ds-slide-frame .chart-body{flex:1;border:2px solid var(--p-cyan);background:var(--p-hud);padding:32px;position:relative;min-height:480px;display:flex;flex-direction:column;justify-content:flex-end}
|
||||
.ds-slide-frame .chart-bars{display:flex;align-items:flex-end;gap:24px;height:400px;padding-left:48px;border-left:2px solid var(--p-grid);border-bottom:2px solid var(--p-grid)}
|
||||
.ds-slide-frame .chart-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:14px;height:100%;justify-content:flex-end}
|
||||
.ds-slide-frame .chart-val{font:400 24px/1 var(--p-f-disp);color:var(--p-cyan);text-shadow:var(--p-glow-c)}
|
||||
.ds-slide-frame .chart-bar{width:100%;background:repeating-linear-gradient(0deg,var(--p-cyan) 0 16px,var(--p-bg) 16px 18px);box-shadow:0 0 18px rgba(74,221,229,.3)}
|
||||
.ds-slide-frame .chart-bar.hi{background:repeating-linear-gradient(0deg,var(--p-magenta) 0 16px,var(--p-bg) 16px 18px);box-shadow:0 0 18px rgba(255,82,162,.4)}
|
||||
.ds-slide-frame .chart-bar.hi+.chart-x{color:var(--p-magenta);text-shadow:var(--p-glow-m)}
|
||||
.ds-slide-frame .chart-x{font:400 16px/1 var(--p-f-disp);color:var(--p-dim);letter-spacing:.04em;margin-top:6px}
|
||||
|
||||
/* slide--inventory (catalogue) */
|
||||
.ds-slide-frame .slide--inventory .slide-body{display:grid;grid-template-columns:1fr 2fr;gap:64px;align-items:start}
|
||||
.ds-slide-frame .inv-head{display:flex;flex-direction:column;gap:24px;padding-top:12px}
|
||||
.ds-slide-frame .inv-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
|
||||
.ds-slide-frame .inv-item{border:2px solid var(--p-cyan);padding:18px 22px;background:var(--p-hud);display:flex;flex-direction:column;gap:8px;box-shadow:4px 4px 0 var(--p-grid);position:relative}
|
||||
.ds-slide-frame .inv-item .ico{position:absolute;top:14px;right:14px;width:24px;height:24px;background:var(--p-magenta);box-shadow:0 -8px 0 var(--p-magenta),8px 0 0 var(--p-magenta),-8px 0 0 var(--p-magenta),0 8px 0 var(--p-magenta),0 0 12px rgba(255,82,162,.5)}
|
||||
.ds-slide-frame .inv-item .num{font:400 14px/1 var(--p-f-disp);color:var(--p-magenta);text-shadow:var(--p-glow-m);letter-spacing:.04em}
|
||||
.ds-slide-frame .inv-item .name{font:400 24px/1.1 var(--p-f-disp);color:var(--p-cyan);text-shadow:var(--p-glow-c)}
|
||||
.ds-slide-frame .inv-item .desc{font:400 20px/1.4 var(--p-f-body);color:var(--p-dim)}
|
||||
|
||||
/* slide--menu (action choices) */
|
||||
.ds-slide-frame .slide--menu .slide-body{display:flex;flex-direction:column;justify-content:center;gap:32px;align-items:flex-start}
|
||||
.ds-slide-frame .menu-prompt{font:400 32px/1.3 var(--p-f-disp);color:var(--p-cyan);text-shadow:var(--p-glow-c);letter-spacing:.01em;max-width:30ch}
|
||||
.ds-slide-frame .menu-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:18px;width:100%;max-width:1200px}
|
||||
.ds-slide-frame .menu-list li{display:grid;grid-template-columns:auto 1fr auto;gap:24px;align-items:center;padding:20px 28px;border:2px solid var(--p-cyan);background:var(--p-hud);box-shadow:4px 4px 0 var(--p-magenta);font:400 28px/1.2 var(--p-f-disp);letter-spacing:.01em;color:var(--p-ink)}
|
||||
.ds-slide-frame .menu-list li::before{content:"▸";color:var(--p-magenta);font-size:28px;text-shadow:var(--p-glow-m)}
|
||||
.ds-slide-frame .menu-list li .meta{font:400 18px/1 var(--p-f-body);color:var(--p-dim)}
|
||||
|
||||
/* slide--map (split visual) */
|
||||
.ds-slide-frame .slide--map .slide-body{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:stretch}
|
||||
.ds-slide-frame .map-frame{aspect-ratio:4/5;border:3px solid var(--p-magenta);background:var(--p-hud);position:relative;overflow:hidden;box-shadow:6px 6px 0 var(--p-cyan);
|
||||
background-image:
|
||||
linear-gradient(rgba(255,82,162,0.12) 1px,transparent 1px),
|
||||
linear-gradient(90deg,rgba(255,82,162,0.12) 1px,transparent 1px),
|
||||
radial-gradient(circle at 60% 40%,rgba(255,82,162,0.4),transparent 35%);
|
||||
background-size:48px 48px,48px 48px,100% 100%
|
||||
}
|
||||
.ds-slide-frame .map-frame .pin{position:absolute;width:20px;height:20px;background:var(--p-lemon);box-shadow:0 -6px 0 var(--p-lemon),6px 0 0 var(--p-lemon),-6px 0 0 var(--p-lemon),0 6px 0 var(--p-lemon),0 0 16px rgba(255,231,74,.8);animation:blink 1.4s steps(2) infinite}
|
||||
.ds-slide-frame .map-frame .pin.p1{top:38%;left:58%}
|
||||
.ds-slide-frame .map-frame .pin.p2{top:22%;left:30%;background:var(--p-cyan);box-shadow:0 -6px 0 var(--p-cyan),6px 0 0 var(--p-cyan),-6px 0 0 var(--p-cyan),0 6px 0 var(--p-cyan),0 0 16px rgba(74,221,229,.8);animation-delay:.3s}
|
||||
.ds-slide-frame .map-frame .pin.p3{top:62%;left:42%;background:var(--p-magenta);box-shadow:0 -6px 0 var(--p-magenta),6px 0 0 var(--p-magenta),-6px 0 0 var(--p-magenta),0 6px 0 var(--p-magenta),0 0 16px rgba(255,82,162,.8);animation-delay:.6s}
|
||||
.ds-slide-frame .map-frame .corners::before,.ds-slide-frame .map-frame .corners::after{content:"";position:absolute;width:48px;height:48px;border:3px solid var(--p-cyan)}
|
||||
.ds-slide-frame .map-frame .corners::before{top:12px;left:12px;border-right:0;border-bottom:0}
|
||||
.ds-slide-frame .map-frame .corners::after{bottom:12px;right:12px;border-left:0;border-top:0}
|
||||
.ds-slide-frame .map-caption{font:400 18px/1 var(--p-f-disp);color:var(--p-magenta);text-shadow:var(--p-glow-m);letter-spacing:.04em;margin-top:18px}
|
||||
.ds-slide-frame .map-text{display:flex;flex-direction:column;gap:24px;justify-content:center}
|
||||
|
||||
/* slide--versus (combat) */
|
||||
.ds-slide-frame .slide--versus .slide-body{display:grid;grid-template-columns:1fr auto 1fr;gap:48px;align-items:center}
|
||||
.ds-slide-frame .vs-panel{border:3px solid;padding:32px;background:var(--p-hud);display:flex;flex-direction:column;gap:18px}
|
||||
.ds-slide-frame .vs-panel.left{border-color:var(--p-cyan);box-shadow:-6px 6px 0 var(--p-cyan)}
|
||||
.ds-slide-frame .vs-panel.right{border-color:var(--p-magenta);box-shadow:6px 6px 0 var(--p-magenta)}
|
||||
.ds-slide-frame .vs-panel .player{font:400 16px/1 var(--p-f-disp);letter-spacing:.04em}
|
||||
.ds-slide-frame .vs-panel.left .player{color:var(--p-cyan);text-shadow:var(--p-glow-c)}
|
||||
.ds-slide-frame .vs-panel.right .player{color:var(--p-magenta);text-shadow:var(--p-glow-m)}
|
||||
.ds-slide-frame .vs-panel h3{margin:0;font:400 42px/1.05 var(--p-f-disp);color:var(--p-ink);letter-spacing:.01em}
|
||||
.ds-slide-frame .vs-panel ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
|
||||
.ds-slide-frame .vs-panel li{font:400 22px/1.4 var(--p-f-body);color:var(--p-ink);padding-left:1.2em;position:relative}
|
||||
.ds-slide-frame .vs-panel li::before{content:"►";position:absolute;left:0;color:currentColor;opacity:.7}
|
||||
.ds-slide-frame .vs-panel.left li::before{color:var(--p-cyan)}
|
||||
.ds-slide-frame .vs-panel.right li::before{color:var(--p-magenta)}
|
||||
.ds-slide-frame .vs-mark{font:400 96px/1 var(--p-f-disp);color:var(--p-lemon);text-shadow:var(--p-glow-l),6px 6px 0 var(--p-magenta);letter-spacing:.04em;animation:blink 1s steps(2) infinite}
|
||||
|
||||
/* slide--gameover (end) */
|
||||
.ds-slide-frame .slide--gameover .slide-chrome,.ds-slide-frame .slide--gameover .slide-foot{display:none}
|
||||
.ds-slide-frame .slide--gameover{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:48px;padding:80px}
|
||||
.ds-slide-frame .gameover-mark{font:400 200px/.9 var(--p-f-disp);letter-spacing:.02em;color:var(--p-magenta);text-shadow:8px 8px 0 var(--p-cyan),0 0 32px rgba(255,82,162,.4)}
|
||||
.ds-slide-frame .gameover-mark .blink{animation:blink 1s steps(2) infinite;color:var(--p-lemon);text-shadow:8px 8px 0 var(--p-magenta)}
|
||||
.ds-slide-frame .gameover-sub{font:400 32px/1.3 var(--p-f-body);color:var(--p-ink);max-width:40ch}
|
||||
.ds-slide-frame .gameover-prompt{font:400 24px/1 var(--p-f-disp);color:var(--p-lemon);text-shadow:var(--p-glow-l);letter-spacing:.04em;animation:blink 1.4s steps(2) infinite;padding-top:32px;border-top:2px solid var(--p-grid);width:60%}
|
||||
__TEMPLATE_CSS_PLACEHOLDER__
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<canvas id="design-bg"></canvas>
|
||||
<div id="bg-veil"></div>
|
||||
|
||||
<div class="rail">
|
||||
<div class="brand"><span class="dot"></span>__NAME__</div>
|
||||
<nav><a href="#palette">01</a><a href="#type">02</a><a href="#surface">03</a><a href="#motion">04</a><a href="#background">05</a><a href="#guidelines">06</a><a href="#templates">07</a></nav>
|
||||
<body>
|
||||
<div class="bg-grid"></div>
|
||||
|
||||
<!-- HUD rail -->
|
||||
<div class="hud">
|
||||
<div class="brand"><span class="pix"></span><span>8-Bit Orbit</span></div>
|
||||
<nav>
|
||||
<a href="#palette">01.Palette</a>
|
||||
<a href="#type">02.Type</a>
|
||||
<a href="#surface">03.Surface</a>
|
||||
<a href="#motion">04.Motion</a>
|
||||
<a href="#guidelines">05.Rules</a>
|
||||
<a href="#templates">06.Frames</a>
|
||||
</nav>
|
||||
<div class="right"><span class="live">Online</span><span>v1.0</span></div>
|
||||
</div>
|
||||
|
||||
<header class="cover">
|
||||
<h1 class="cover-headline">__NAME_LINE1____NAME_LINE2__.</h1>
|
||||
<!-- COVER -->
|
||||
<header class="cover" data-screen-label="00 Cover">
|
||||
<div class="cover-chrome">
|
||||
<div>SYS_LOAD · № 004</div>
|
||||
<div><span class="blink">●</span> READY</div>
|
||||
</div>
|
||||
<h1 class="cover-headline">8-BIT<br><span class="cyan">ORBIT.</span></h1>
|
||||
<div class="press-start">▸ PRESS START</div>
|
||||
<div class="cover-foot">
|
||||
<div class="cell"><span class="k">Template</span><span class="v">8-bit-orbit</span></div>
|
||||
<div class="cell"><span class="k">Type</span><span class="v big">system-ui</span></div>
|
||||
<div class="cell"><span class="k">Accent</span><span class="v">__ACCENT_LABEL__</span></div>
|
||||
<div class="cell"><span class="k">Doc</span><span class="v">07 sections · __SLIDE_COUNT__ templates</span></div>
|
||||
<div class="cell"><span class="k">DISCIPLINE</span><span class="v">Gaming · Web3 · Indie</span></div>
|
||||
<div class="cell"><span class="k">DISPLAY TYPE</span><span class="v big">PRESS START 2P</span></div>
|
||||
<div class="cell"><span class="k">ACCENT</span><span class="v">CYAN + MAGENTA</span></div>
|
||||
<div class="cell"><span class="k">BUILD</span><span class="v big">06 · 10 FRAMES</span></div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section class="manifesto">
|
||||
<!-- MANIFESTO -->
|
||||
<section class="manifesto" data-screen-label="00 Manifesto">
|
||||
<div class="manifesto-grid">
|
||||
<div class="num">— Manifesto</div>
|
||||
<p>Pixel-art neon arcade aesthetic on a deep navy void.</p>
|
||||
<div class="num">// MANIFESTO</div>
|
||||
<p>type is <em>display</em>. color is <strong>signal</strong>. the page is a <em>CRT</em>. nothing is anti-aliased.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="palette">
|
||||
<!-- 01 PALETTE -->
|
||||
<section id="palette" data-screen-label="01 Palette">
|
||||
<div class="section-head">
|
||||
<div class="num">01 — Palette</div>
|
||||
<h2>four colors.</h2>
|
||||
<p class="lede">__PALETTE_LEDE__</p>
|
||||
<div class="num">01 // PALETTE</div>
|
||||
<h2>FOUR<br/><span class="cyan">PIXELS.</span></h2>
|
||||
<p class="lede">Deep navy as the void. Cream paper for legible HUD text. Cyan for friendlies, magenta for hostiles. No anti-aliasing, no in-between.</p>
|
||||
</div>
|
||||
<div class="palette">
|
||||
<div class="swatch swatch--primary"><div class="role">Primary</div><div><div class="name">__PRIMARY_NAME__</div><div class="hex">__PRIMARY__</div><div class="usage">Ink on dark.</div></div></div>
|
||||
<div class="swatch swatch--secondary"><div class="role">Secondary</div><div><div class="name">__SECONDARY_NAME__</div><div class="hex">__SECONDARY__</div><div class="usage">Canvas.</div></div></div>
|
||||
<div class="swatch swatch--tertiary"><div class="role">Tertiary</div><div><div class="name">__TERTIARY_NAME__</div><div class="hex">__TERTIARY__</div><div class="usage">Muted. Borders.</div></div></div>
|
||||
<div class="swatch swatch--accent"><div class="role">Accent</div><div><div class="name">__ACCENT_NAME__</div><div class="hex">__ACCENT__</div><div class="usage">Signal. Reserved.</div></div></div>
|
||||
<div class="swatch swatch--paper"><div class="role-bar"><span>01 // PAPER</span><span class="x"></span></div><div class="fill"><div class="name">CREAM</div><div class="hex">__PRIMARY__</div><div class="usage">Legible body type on dark.</div></div></div>
|
||||
<div class="swatch swatch--void"><div class="role-bar"><span>02 // VOID</span><span class="x"></span></div><div class="fill"><div class="name">DEEP</div><div class="hex">__SECONDARY__</div><div class="usage">The canvas. The CRT off-state.</div></div></div>
|
||||
<div class="swatch swatch--cyan"><div class="role-bar"><span>03 // PLAYER</span><span class="x"></span></div><div class="fill"><div class="name">CYAN</div><div class="hex">__TERTIARY__</div><div class="usage">Friendly signal. UI primary.</div></div></div>
|
||||
<div class="swatch swatch--magenta"><div class="role-bar"><span>04 // ENEMY</span><span class="x"></span></div><div class="fill"><div class="name">MAGENTA</div><div class="hex">__ACCENT__</div><div class="usage">Hostile signal. Alert states.</div></div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="type">
|
||||
<!-- 02 TYPE -->
|
||||
<section id="type" data-screen-label="02 Type">
|
||||
<div class="section-head">
|
||||
<div class="num">02 — Typography</div>
|
||||
<h2>type scale.</h2>
|
||||
<div class="num">02 // TYPOGRAPHY</div>
|
||||
<h2>PIXELS,<br/><span class="cyan">ALL THE WAY DOWN.</span></h2>
|
||||
<p class="lede">Press Start 2P carries display + headlines. VT323 runs body — a real terminal face, never anti-aliased. Silkscreen for the smallest chrome.</p>
|
||||
</div>
|
||||
<div class="specimen">
|
||||
<div class="spec-row"><div class="meta"><span>Display</span><b>system-ui</b></div><div class="spec-display">hello world.</div></div>
|
||||
<div class="spec-row"><div class="meta"><span>H1</span><b>system-ui</b></div><div class="spec-h1">chapter one</div></div>
|
||||
<div class="spec-row"><div class="meta"><span>H2</span><b>system-ui</b></div><div class="spec-h2">Slide headlines.</div></div>
|
||||
<div class="spec-row"><div class="meta"><span>Body</span><b>system-ui</b></div><p class="spec-body">Body copy below 24px is forbidden in video compositions.</p></div>
|
||||
<div class="spec-row"><div class="meta"><span>Label</span><b>monospace</b></div><div class="spec-label">// chrome · labels · metadata</div></div>
|
||||
<div class="spec-row"><div class="meta"><span>DISPLAY</span><b>Press Start 2P</b><span>11vw · letter-spacing 0.01em</span></div><div class="spec-display">HELLO WORLD.</div></div>
|
||||
<div class="spec-row"><div class="meta"><span>HEADING 01</span><b>Press Start 2P</b><span>6vw · cyan + glow</span></div><div class="spec-h1">CHAPTER 1</div></div>
|
||||
<div class="spec-row"><div class="meta"><span>HEADING 02</span><b>Press Start 2P</b><span>4vw · drop shadow</span></div><div class="spec-h2">SLIDE TITLE</div></div>
|
||||
<div class="spec-row"><div class="meta"><span>LEAD</span><b>VT323 400</b><span>2.2vw · terminal face</span></div><div class="spec-lead">The lead carries the brief in a single screen of CRT text.</div></div>
|
||||
<div class="spec-row"><div class="meta"><span>BODY</span><b>VT323 400</b><span>22px · 1.5 · 60ch</span></div><p class="spec-body">PACK MY BOX WITH FIVE DOZEN LIQUOR JUGS. The body face is VT323 — a faithful terminal font. Use it for everything readable. Body copy below 24px is forbidden in 1080p compositions.</p></div>
|
||||
<div class="spec-row"><div class="meta"><span>LABEL</span><b>Press Start 2P</b><span>12px · 0.04em · lemon</span></div><div class="spec-label">// HUD · STATS · COIN: 0042</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="surface">
|
||||
<!-- 03 SURFACE -->
|
||||
<section id="surface" data-screen-label="03 Surface">
|
||||
<div class="section-head">
|
||||
<div class="num">03 — Surface</div>
|
||||
<h2>corners. depth.</h2>
|
||||
<div class="num">03 // SURFACE</div>
|
||||
<h2>PIXEL<br/><span class="cyan">BORDERS.</span></h2>
|
||||
<p class="lede">3-pixel solid borders. Offset shadows in stepped colours — never blurred. Glow is reserved for accent text only.</p>
|
||||
</div>
|
||||
<div class="surface-grid">
|
||||
<div class="demo-card">
|
||||
<span class="tag">// example</span>
|
||||
<h3>example card.</h3>
|
||||
<p>Configured corners, padding, shadow.</p>
|
||||
<span class="card-label">// CARD · DEMO</span>
|
||||
<h3>EXAMPLE CARD.</h3>
|
||||
<p>Configured border, padding, and stepped shadow. Glow is rare — only on text that wants to be remembered. Surfaces stay flat; the CRT does the lifting.</p>
|
||||
<div class="stat-row"><div class="num">042</div><div class="pct">% READ-RATE</div></div>
|
||||
</div>
|
||||
<ul class="tokens">
|
||||
<li><span class="name">Corners</span><span class="val">__CORNER_RADIUS__</span><span class="bar" style="width:8px"></span></li>
|
||||
<li><span class="name">Padding</span><span class="val">__PADDING__</span><span class="bar" style="width:32px"></span></li>
|
||||
<li><span class="name">Gap</span><span class="val">__GAP__</span><span class="bar" style="width:32px"></span></li>
|
||||
<li><span class="name">Elevation</span><span class="val">__ELEVATION__</span><span class="bar" style="width:18px"></span></li>
|
||||
<li><span class="name">Density</span><span class="val">__DENSITY__</span><span class="bar" style="width:48px"></span></li>
|
||||
<li><span class="name">// BORDER</span><span class="val">3 PX</span><span class="bar" style="width:36px"></span></li>
|
||||
<li><span class="name">// RADIUS</span><span class="val">0 PX</span><span class="bar" style="width:6px"></span></li>
|
||||
<li><span class="name">// SHADOW</span><span class="val">6 6 0</span><span class="bar" style="width:44px"></span></li>
|
||||
<li><span class="name">// PADDING</span><span class="val">28 PX</span><span class="bar" style="width:36px"></span></li>
|
||||
<li><span class="name">// GLOW</span><span class="val">accent only</span><span class="bar" style="width:24px"></span></li>
|
||||
<li><span class="name">// DENSITY</span><span class="val">HIGH</span><span class="bar" style="width:52px"></span></li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="motion">
|
||||
<!-- 04 MOTION -->
|
||||
<section id="motion" data-screen-label="04 Motion">
|
||||
<div class="section-head">
|
||||
<div class="num">04 — Motion</div>
|
||||
<h2>__EASING_HEADLINE__</h2>
|
||||
<p class="lede">__EASING_LEDE__</p>
|
||||
<div class="num">04 // MOTION</div>
|
||||
<h2>STEPPED.<br/><span class="cyan">NEVER SMOOTH.</span></h2>
|
||||
<p class="lede">Motion is quantized — every frame snaps. Use steps() easings to keep the 30Hz CRT feeling. Glow may pulse on a 1-second blink.</p>
|
||||
</div>
|
||||
<div class="two-col">
|
||||
<div class="panel">
|
||||
<div class="label-row">// easing</div>
|
||||
<h4>__EASING_NAME__</h4>
|
||||
<p>__EASING_DESC__</p>
|
||||
<pre>__EASING_VALUE__</pre>
|
||||
<span class="label-row">// EASING</span>
|
||||
<h4>steps(8)</h4>
|
||||
<p>Default. Eight discrete frames from A to B — no in-between. The page snaps like a sprite move. Use for entrances, transitions, hover states.</p>
|
||||
<pre>transition: transform .25s steps(8);
|
||||
animation: blink 1.4s steps(2) infinite;</pre>
|
||||
</div>
|
||||
<div class="panel">
|
||||
<div class="label-row">// duration</div>
|
||||
<h4>__DURATION_DEFAULT__</h4>
|
||||
<p>__DURATION_DESC__</p>
|
||||
<pre>__DURATION_VALUES__</pre>
|
||||
<span class="label-row">// TIMING</span>
|
||||
<h4>1.4s BLINK</h4>
|
||||
<p>The cursor blink — 1.4 seconds, two steps. Apply it to alerts, prompts, and anything waiting for input.</p>
|
||||
<pre>--dur-blink: 1.4s;
|
||||
--dur-step: .25s;
|
||||
--dur-load: 3.0s;</pre>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="background">
|
||||
<!-- 05 GUIDELINES -->
|
||||
<section id="guidelines" data-screen-label="05 Guidelines">
|
||||
<div class="section-head">
|
||||
<div class="num">05 — Background</div>
|
||||
<h2>__BG_HEADLINE__</h2>
|
||||
<p class="lede">__BG_LEDE__</p>
|
||||
</div>
|
||||
<div class="two-col">
|
||||
<div class="bg-preview"><canvas id="bg-preview-canvas"></canvas><span class="badge">// __BG_BADGE__</span></div>
|
||||
<div style="display:flex;flex-direction:column;gap:8px">
|
||||
<ul class="tokens" style="border-top:none">
|
||||
<li><span class="name">Geometry</span><span class="val">__BG_TYPE__</span><span class="bar" style="width:36px"></span></li>
|
||||
<li><span class="name">Density</span><span class="val">__BG_DENSITY__</span><span class="bar" style="width:42px"></span></li>
|
||||
<li><span class="name">Speed</span><span class="val">__BG_SPEED__</span><span class="bar" style="width:18px"></span></li>
|
||||
<li><span class="name">Strength</span><span class="val">__BG_STRENGTH__</span><span class="bar" style="width:52px"></span></li>
|
||||
<li><span class="name">Grain</span><span class="val">__BG_GRAIN__</span><span class="bar" style="width:24px"></span></li>
|
||||
</ul>
|
||||
<details class="code-block"><summary>// shader config</summary>
|
||||
<pre>__SHADER_CONFIG__</pre>
|
||||
</details>
|
||||
<details class="code-block"><summary>// vertex shader</summary>
|
||||
<pre id="vtx-src">__SHADER_VERTEX__</pre>
|
||||
</details>
|
||||
<details class="code-block"><summary>// fragment shader</summary>
|
||||
<pre id="frg-src">__SHADER_FRAGMENT__</pre>
|
||||
</details>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="guidelines">
|
||||
<div class="section-head">
|
||||
<div class="num">06 — Guidelines</div>
|
||||
<h2>do and don’t.</h2>
|
||||
<div class="num">05 // RULES</div>
|
||||
<h2>OK.<br/><span class="cyan">NO.</span></h2>
|
||||
<p class="lede">The CRT enforces these. Break any and the illusion collapses.</p>
|
||||
</div>
|
||||
<div class="rules-grid">
|
||||
<div class="rules-col do"><h3>do.</h3><ul>__DOS__</ul></div>
|
||||
<div class="rules-col dont"><h3>don't.</h3><ul>__DONTS__</ul></div>
|
||||
<div class="rules-col do"><h3>OK.</h3><ul>
|
||||
<li>Render every border 3px solid, every shadow stepped, never blurred.</li>
|
||||
<li>Use cyan for friendly signal, magenta for hostile or accent.</li>
|
||||
<li>Set every face in Press Start 2P, VT323, or Silkscreen.</li>
|
||||
<li>Quantize all motion with steps() easings.</li>
|
||||
<li>Reserve glow text-shadow for the one element that matters.</li>
|
||||
</ul></div>
|
||||
<div class="rules-col dont"><h3>NO.</h3><ul>
|
||||
<li>Anti-alias borders or shadows. Hard pixels only.</li>
|
||||
<li>Use rounded corners, gradients, or anti-aliased SVG.</li>
|
||||
<li>Apply glow to body text — only to accent display.</li>
|
||||
<li>Use smooth cubic-bezier easings — the CRT runs in steps.</li>
|
||||
<li>Use pure black for the canvas — always the navy variant.</li>
|
||||
</ul></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="templates" class="templates-wrap">
|
||||
<!-- 06 TEMPLATES -->
|
||||
<section id="templates" class="templates-wrap" data-screen-label="06 Templates">
|
||||
<div class="section-head">
|
||||
<div class="num">07 — Templates</div>
|
||||
<h2>__SLIDE_COUNT_WORD__<br/>frames.</h2>
|
||||
<div class="num">06 // FRAMES</div>
|
||||
<h2>TEN<br/><span class="cyan">SCREENS.</span></h2>
|
||||
<p class="lede">The full template library at 1920×1080. Each thumbnail is the live slide, scaled.</p>
|
||||
</div>
|
||||
<div class="templates-grid" id="templates-grid"></div>
|
||||
</section>
|
||||
|
||||
<template id="tmpl-source">
|
||||
__SLIDE_CARDS__
|
||||
|
||||
<div class="tmpl" data-idx="01"><div class="tmpl-thumb"><div class="scale-wrap"><div class="ds-slide-frame">
|
||||
<section class="slide slide--cover">
|
||||
<h1 class="display"><span class="cyan">{{text}}</span><br>{{headline}}</h1>
|
||||
<p class="cover-tagline">{{body}}</p>
|
||||
<div class="press-start">▸ {{text}}</div>
|
||||
<div class="high-score"><span>HI-SCORE <b>{{number}}</b></span><span>BUILD <b>{{number}}</b></span><span>CR <b>{{number}}</b></span></div>
|
||||
</section>
|
||||
</div></div></div><div class="tmpl-foot"><span class="name">cover</span><span class="idx">01/10</span></div></div>
|
||||
|
||||
<div class="tmpl" data-idx="02"><div class="tmpl-thumb"><div class="scale-wrap"><div class="ds-slide-frame">
|
||||
<section class="slide slide--loading">
|
||||
<header class="slide-chrome"><span>{{label}}</span><span>{{label}}</span></header>
|
||||
<div class="slide-body">
|
||||
<div class="loading-text">{{headline}}</div>
|
||||
<div class="loading-percent">{{number}}<span style="font-size:.5em;color:var(--p-cyan);text-shadow:var(--p-glow-c)">%</span></div>
|
||||
<div class="loading-bar"><div class="fill"></div></div>
|
||||
<div class="loading-label">{{body}}</div>
|
||||
</div>
|
||||
<footer class="slide-foot"><span>{{label}}</span><span class="accent">{{label}}</span></footer>
|
||||
</section>
|
||||
</div></div></div><div class="tmpl-foot"><span class="name">loading</span><span class="idx">02/10</span></div></div>
|
||||
|
||||
<div class="tmpl" data-idx="03"><div class="tmpl-thumb"><div class="scale-wrap"><div class="ds-slide-frame">
|
||||
<section class="slide slide--hud">
|
||||
<header class="slide-chrome"><span>{{label}}</span><span>{{label}}</span></header>
|
||||
<div class="slide-body">
|
||||
<h2 class="h2">{{headline}}</h2>
|
||||
<div class="hud-grid">
|
||||
<div class="hud-cell"><span class="lbl">{{label}}</span><span class="val">{{number}}</span><span class="desc">{{body}}</span><div class="bar"><span></span><span></span><span></span><span></span><span></span><span></span><span class="off"></span><span class="off"></span></div></div>
|
||||
<div class="hud-cell"><span class="lbl">{{label}}</span><span class="val">{{number}}</span><span class="desc">{{body}}</span><div class="bar"><span></span><span></span><span></span><span></span><span></span><span class="off"></span><span class="off"></span><span class="off"></span></div></div>
|
||||
<div class="hud-cell"><span class="lbl">{{label}}</span><span class="val">{{number}}</span><span class="desc">{{body}}</span><div class="bar"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div></div>
|
||||
</div>
|
||||
</div>
|
||||
<footer class="slide-foot"><span>{{label}}</span><span class="accent">{{label}}</span></footer>
|
||||
</section>
|
||||
</div></div></div><div class="tmpl-foot"><span class="name">hud</span><span class="idx">03/10</span></div></div>
|
||||
|
||||
<div class="tmpl" data-idx="04"><div class="tmpl-thumb"><div class="scale-wrap"><div class="ds-slide-frame">
|
||||
<section class="slide slide--dialog">
|
||||
<header class="slide-chrome"><span>{{label}}</span><span>{{label}}</span></header>
|
||||
<div class="slide-body">
|
||||
<div class="dialog-box">
|
||||
<span class="dialog-tag">{{label}}</span>
|
||||
<div class="dialog-text">{{body}}</div>
|
||||
<div class="dialog-name">— {{text}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<footer class="slide-foot"><span>{{label}}</span><span class="accent">{{label}}</span></footer>
|
||||
</section>
|
||||
</div></div></div><div class="tmpl-foot"><span class="name">dialog</span><span class="idx">04/10</span></div></div>
|
||||
|
||||
<div class="tmpl" data-idx="05"><div class="tmpl-thumb"><div class="scale-wrap"><div class="ds-slide-frame">
|
||||
<section class="slide slide--chart">
|
||||
<header class="slide-chrome"><span>{{label}}</span><span>{{label}}</span></header>
|
||||
<div class="slide-body">
|
||||
<div class="chart-header"><h2 class="h2">{{headline}}</h2><span class="label">{{label}}</span></div>
|
||||
<div class="chart-body">
|
||||
<div class="chart-bars">
|
||||
<div class="chart-col"><span class="chart-val">{{number}}</span><div class="chart-bar" style="height:32%"></div><span class="chart-x">{{label}}</span></div>
|
||||
<div class="chart-col"><span class="chart-val">{{number}}</span><div class="chart-bar" style="height:50%"></div><span class="chart-x">{{label}}</span></div>
|
||||
<div class="chart-col"><span class="chart-val">{{number}}</span><div class="chart-bar" style="height:68%"></div><span class="chart-x">{{label}}</span></div>
|
||||
<div class="chart-col"><span class="chart-val">{{number}}</span><div class="chart-bar hi" style="height:88%"></div><span class="chart-x">{{label}}</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<footer class="slide-foot"><span>{{label}}</span><span class="accent">{{label}}</span></footer>
|
||||
</section>
|
||||
</div></div></div><div class="tmpl-foot"><span class="name">chart</span><span class="idx">05/10</span></div></div>
|
||||
|
||||
<div class="tmpl" data-idx="06"><div class="tmpl-thumb"><div class="scale-wrap"><div class="ds-slide-frame">
|
||||
<section class="slide slide--inventory">
|
||||
<header class="slide-chrome"><span>{{label}}</span><span>{{label}}</span></header>
|
||||
<div class="slide-body">
|
||||
<div class="inv-head">
|
||||
<span class="label">{{label}}</span>
|
||||
<h3 class="h3">{{headline}}</h3>
|
||||
<p class="lead muted">{{body}}</p>
|
||||
</div>
|
||||
<div class="inv-grid">
|
||||
<div class="inv-item"><div class="ico"></div><span class="num">{{number}}</span><span class="name">{{headline}}</span><span class="desc">{{body}}</span></div>
|
||||
<div class="inv-item"><div class="ico"></div><span class="num">{{number}}</span><span class="name">{{headline}}</span><span class="desc">{{body}}</span></div>
|
||||
<div class="inv-item"><div class="ico"></div><span class="num">{{number}}</span><span class="name">{{headline}}</span><span class="desc">{{body}}</span></div>
|
||||
<div class="inv-item"><div class="ico"></div><span class="num">{{number}}</span><span class="name">{{headline}}</span><span class="desc">{{body}}</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<footer class="slide-foot"><span>{{label}}</span><span class="accent">{{label}}</span></footer>
|
||||
</section>
|
||||
</div></div></div><div class="tmpl-foot"><span class="name">inventory</span><span class="idx">06/10</span></div></div>
|
||||
|
||||
<div class="tmpl" data-idx="07"><div class="tmpl-thumb"><div class="scale-wrap"><div class="ds-slide-frame">
|
||||
<section class="slide slide--menu">
|
||||
<header class="slide-chrome"><span>{{label}}</span><span>{{label}}</span></header>
|
||||
<div class="slide-body">
|
||||
<p class="menu-prompt">{{headline}}</p>
|
||||
<ul class="menu-list">
|
||||
<li>{{text}}<span class="meta">{{label}}</span></li>
|
||||
<li>{{text}}<span class="meta">{{label}}</span></li>
|
||||
<li>{{text}}<span class="meta">{{label}}</span></li>
|
||||
<li>{{text}}<span class="meta">{{label}}</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
<footer class="slide-foot"><span>{{label}}</span><span class="accent">{{label}}</span></footer>
|
||||
</section>
|
||||
</div></div></div><div class="tmpl-foot"><span class="name">menu</span><span class="idx">07/10</span></div></div>
|
||||
|
||||
<div class="tmpl" data-idx="08"><div class="tmpl-thumb"><div class="scale-wrap"><div class="ds-slide-frame">
|
||||
<section class="slide slide--map">
|
||||
<header class="slide-chrome"><span>{{label}}</span><span>{{label}}</span></header>
|
||||
<div class="slide-body">
|
||||
<div>
|
||||
<div class="map-frame"><div class="corners"></div><div class="pin p1"></div><div class="pin p2"></div><div class="pin p3"></div></div>
|
||||
<div class="map-caption">▸ {{label}}</div>
|
||||
</div>
|
||||
<div class="map-text">
|
||||
<span class="label">{{label}}</span>
|
||||
<h3 class="h2">{{headline}}</h3>
|
||||
<p class="body">{{body}}</p>
|
||||
</div>
|
||||
</div>
|
||||
<footer class="slide-foot"><span>{{label}}</span><span class="accent">{{label}}</span></footer>
|
||||
</section>
|
||||
</div></div></div><div class="tmpl-foot"><span class="name">map</span><span class="idx">08/10</span></div></div>
|
||||
|
||||
<div class="tmpl" data-idx="09"><div class="tmpl-thumb"><div class="scale-wrap"><div class="ds-slide-frame">
|
||||
<section class="slide slide--versus">
|
||||
<header class="slide-chrome"><span>{{label}}</span><span>{{label}}</span></header>
|
||||
<div class="slide-body">
|
||||
<div class="vs-panel left">
|
||||
<span class="player">P1 // {{label}}</span>
|
||||
<h3>{{headline}}</h3>
|
||||
<ul><li>{{body}}</li><li>{{body}}</li><li>{{body}}</li></ul>
|
||||
</div>
|
||||
<div class="vs-mark">VS</div>
|
||||
<div class="vs-panel right">
|
||||
<span class="player">P2 // {{label}}</span>
|
||||
<h3>{{headline}}</h3>
|
||||
<ul><li>{{body}}</li><li>{{body}}</li><li>{{body}}</li></ul>
|
||||
</div>
|
||||
</div>
|
||||
<footer class="slide-foot"><span>{{label}}</span><span class="accent">{{label}}</span></footer>
|
||||
</section>
|
||||
</div></div></div><div class="tmpl-foot"><span class="name">versus</span><span class="idx">09/10</span></div></div>
|
||||
|
||||
<div class="tmpl" data-idx="10"><div class="tmpl-thumb"><div class="scale-wrap"><div class="ds-slide-frame">
|
||||
<section class="slide slide--gameover">
|
||||
<div class="gameover-mark">GAME<br/><span class="blink">{{text}}</span></div>
|
||||
<div class="gameover-sub">{{body}}</div>
|
||||
<div class="gameover-prompt">▸ {{text}}</div>
|
||||
</section>
|
||||
</div></div></div><div class="tmpl-foot"><span class="name">gameover</span><span class="idx">10/10</span></div></div>
|
||||
|
||||
</template>
|
||||
|
||||
<footer class="endcap">
|
||||
<h2 class="endmark">end.</h2>
|
||||
<div class="meta">
|
||||
<div><b>__NAME__</b> · v1</div>
|
||||
<div>system-ui / monospace</div>
|
||||
<div>__DATE__</div>
|
||||
<footer class="endcap" data-screen-label="07 End">
|
||||
<div class="grid">
|
||||
<h2 class="endmark">GAME<br><span class="blink">OVER.</span></h2>
|
||||
<div class="meta">
|
||||
<div><b>8-BIT ORBIT</b> // V1.0</div>
|
||||
<div>PRESS START 2P / VT323</div>
|
||||
<div>BUILD: MMXXVI.05</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
@@ -312,7 +747,5 @@ __SLIDE_CARDS__
|
||||
})();
|
||||
</script>
|
||||
|
||||
__SHADER_SCRIPT__
|
||||
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
||||
@@ -5,301 +5,559 @@
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
||||
<title>__NAME__ — Design System</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link href="https://fonts.googleapis.com/css2?__FONT_LINK_EXTRA__&display=swap" rel="stylesheet" />
|
||||
<script type="importmap">
|
||||
{"imports":{"three":"https://cdn.jsdelivr.net/npm/three@0.167.0/build/three.module.js","three/addons/":"https://cdn.jsdelivr.net/npm/three@0.167.0/examples/jsm/"}}
|
||||
</script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Caveat:wght@400;600;700&family=Quicksand:wght@400;500;600;700&display=swap" rel="stylesheet" />
|
||||
|
||||
<style id="ds-tokens">
|
||||
:root{
|
||||
--primary:__PRIMARY__; --secondary:__SECONDARY__; --tertiary:__TERTIARY__; --accent:__ACCENT__;
|
||||
--hairline:color-mix(in srgb,var(--primary) 12%,transparent);
|
||||
--f-disp:"system-ui",sans-serif; --f-mono:"monospace",monospace;
|
||||
--pad-x:clamp(24px,5vw,88px); --pad-y:clamp(40px,6vh,100px);
|
||||
--cream:#FCF1D8; --ink:#2A2624;
|
||||
--sage:#BBD0A4; --blush:#F4B5C9; --sun:#F7D060; --sky:#B4D9F4;
|
||||
--ink-dim:color-mix(in srgb,var(--ink) 65%,var(--cream));
|
||||
--ink-fade:color-mix(in srgb,var(--ink) 32%,var(--cream));
|
||||
--hairline:color-mix(in srgb,var(--ink) 14%,transparent);
|
||||
--f-disp:"DM Serif Display",serif;
|
||||
--f-hand:"Caveat",cursive;
|
||||
--f-body:"Quicksand",sans-serif;
|
||||
--pad-x:clamp(28px,6vw,96px); --pad-y:clamp(48px,7vh,120px);
|
||||
}
|
||||
</style>
|
||||
|
||||
<style>
|
||||
*,*::before,*::after{box-sizing:border-box}
|
||||
html,body{margin:0;padding:0;background:var(--secondary)}
|
||||
body{color:var(--primary);font:400 14px/1.6 "monospace",monospace;-webkit-font-smoothing:antialiased;overflow-x:hidden}
|
||||
::selection{background:var(--accent);color:var(--secondary)}
|
||||
html,body{margin:0;padding:0;background:var(--cream)}
|
||||
body{color:var(--ink);font:500 15px/1.65 var(--f-body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
|
||||
::selection{background:var(--blush);color:var(--ink)}
|
||||
|
||||
#design-bg{position:fixed;inset:0;width:100%;height:100%;z-index:-2;opacity:.85;pointer-events:none}
|
||||
#bg-veil{position:fixed;inset:0;z-index:-1;pointer-events:none;background:none}
|
||||
/* Hand-drawn daisy SVG, repurposable */
|
||||
.daisy{display:inline-block;vertical-align:middle}
|
||||
|
||||
.rail{position:fixed;top:0;left:0;right:0;height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 var(--pad-x);background:var(--primary);border-bottom:1px solid rgba(128,128,128,.15);z-index:100;font:500 12px/1 "monospace",monospace;letter-spacing:.06em;text-transform:uppercase}
|
||||
.rail .brand{color:var(--accent);display:inline-flex;align-items:center;gap:10px;font:400 22px/1 "system-ui",sans-serif}
|
||||
.rail .brand .dot{width:22px;height:22px;background:var(--accent);}
|
||||
.rail nav{display:flex;gap:6px}
|
||||
.rail nav a{color:var(--secondary);text-decoration:none;transition:all .15s}
|
||||
.rail nav a:hover{color:var(--accent)}
|
||||
@media(max-width:880px){.rail nav{display:none}}
|
||||
/* Rail */
|
||||
.rail{position:fixed;top:0;left:0;right:0;height:52px;display:flex;align-items:center;justify-content:space-between;padding:0 var(--pad-x);background:color-mix(in srgb,var(--cream) 88%,transparent);backdrop-filter:blur(14px);border-bottom:1px solid var(--hairline);z-index:100;font:600 12px/1 var(--f-body);letter-spacing:.06em}
|
||||
.rail .brand{display:inline-flex;align-items:center;gap:12px;color:var(--ink)}
|
||||
.rail .brand b{font-family:var(--f-disp);font-weight:400;font-size:24px;letter-spacing:.005em;color:var(--ink)}
|
||||
.rail .brand .daisy{width:24px;height:24px}
|
||||
.rail nav{display:flex;gap:24px;font-family:var(--f-hand);font-size:20px;font-weight:600}
|
||||
.rail nav a{color:var(--ink-dim);text-decoration:none;transition:color .15s}
|
||||
.rail nav a:hover{color:var(--blush)}
|
||||
.rail .meta{font-family:var(--f-hand);font-size:20px;font-weight:600;color:var(--ink-fade)}
|
||||
@media(max-width:760px){.rail nav{display:none}}
|
||||
|
||||
section{position:relative;padding:var(--pad-y) var(--pad-x)}
|
||||
.section-head{display:grid;grid-template-columns:9em 1fr;gap:clamp(24px,4vw,56px);align-items:baseline;border-top:1px solid rgba(128,128,128,.15);padding-top:28px;margin-bottom:clamp(36px,5vh,64px)}
|
||||
.section-head .num{font:500 12px/1 "monospace",monospace;letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}
|
||||
.section-head h2{font:900 clamp(36px,6vw,84px)/.92 "system-ui",sans-serif;letter-spacing:-.035em;margin:0;text-transform:lowercase}
|
||||
.section-head .lede{grid-column:2;max-width:60ch;margin-top:18px;font-size:15px;line-height:1.6}
|
||||
.section-head{display:grid;grid-template-columns:11em 1fr;gap:clamp(24px,4vw,56px);align-items:end;border-top:1px dashed var(--hairline);padding-top:36px;margin-bottom:clamp(40px,6vh,72px);position:relative}
|
||||
.section-head .num{font-family:var(--f-hand);font-size:28px;font-weight:600;color:var(--blush);transform:rotate(-3deg);justify-self:start}
|
||||
.section-head h2{margin:0;font:400 clamp(56px,9vw,120px)/.95 var(--f-disp);letter-spacing:-.005em;color:var(--ink)}
|
||||
.section-head h2 em{font-style:italic;color:var(--blush)}
|
||||
.section-head .lede{grid-column:2;max-width:54ch;margin-top:18px;font:500 16px/1.7 var(--f-body);color:var(--ink-dim)}
|
||||
|
||||
.cover{background:var(--primary);color:var(--secondary)};min-height:100vh;padding:110px var(--pad-x) 60px;display:flex;flex-direction:column;justify-content:center}
|
||||
.cover-headline{margin:0;font:900 clamp(64px,13vw,200px)/.88 "system-ui",sans-serif;letter-spacing:-.04em;text-transform:uppercase}
|
||||
.cover-foot{margin-top:56px;padding-top:28px;border-top:1px solid rgba(128,128,128,.15);display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
|
||||
.cover-foot .cell{display:flex;flex-direction:column;gap:6px}
|
||||
.cover-foot .k{font:500 11px/1 "monospace",monospace;letter-spacing:.1em;text-transform:uppercase;opacity:.55}
|
||||
.cover-foot .v{font:500 13px/1.4 "monospace",monospace}
|
||||
.cover-foot .v.big{font:800 32px/1 "system-ui",sans-serif;letter-spacing:-.02em}
|
||||
/* Floating decorations (per-section) */
|
||||
.deco-star{position:absolute;width:32px;height:32px;color:var(--sun)}
|
||||
.deco-rainbow{position:absolute;width:80px;height:40px}
|
||||
|
||||
/* Cover */
|
||||
.cover{min-height:100vh;padding:84px var(--pad-x) 56px;display:grid;grid-template-rows:auto 1fr auto;position:relative;overflow:hidden}
|
||||
.cover-chrome{display:flex;justify-content:space-between;font-family:var(--f-hand);font-size:24px;font-weight:600;color:var(--ink-fade)}
|
||||
.cover-chrome .accent{color:var(--blush)}
|
||||
.cover-headline{align-self:center;margin:0;font:italic 400 clamp(72px,14vw,220px)/.92 var(--f-disp);letter-spacing:-.015em;color:var(--ink);text-align:center}
|
||||
.cover-headline em{font-style:normal;color:var(--blush)}
|
||||
.cover-sub{text-align:center;font-family:var(--f-hand);font-size:36px;font-weight:600;color:var(--ink-dim);margin-top:16px}
|
||||
.cover-foot{margin-top:48px;display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
|
||||
.cover-foot .cell{padding:20px 22px;background:#fff;border-radius:16px;border:1px solid var(--hairline);display:flex;flex-direction:column;gap:6px;position:relative}
|
||||
.cover-foot .cell:nth-child(1){background:color-mix(in srgb,var(--blush) 40%,#fff);transform:rotate(-1.5deg)}
|
||||
.cover-foot .cell:nth-child(2){background:color-mix(in srgb,var(--sage) 40%,#fff);transform:rotate(1deg)}
|
||||
.cover-foot .cell:nth-child(3){background:color-mix(in srgb,var(--sun) 40%,#fff);transform:rotate(-1deg)}
|
||||
.cover-foot .cell:nth-child(4){background:color-mix(in srgb,var(--sky) 50%,#fff);transform:rotate(1.5deg)}
|
||||
.cover-foot .k{font:600 10px/1.4 var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim)}
|
||||
.cover-foot .v{font:400 20px/1.2 var(--f-disp);letter-spacing:-.005em}
|
||||
.cover-foot .v.hand{font-family:var(--f-hand);font-weight:700;font-size:24px;letter-spacing:0}
|
||||
.cover-foot .v.plain{font:600 13px/1.4 var(--f-body);letter-spacing:.04em}
|
||||
@media(max-width:760px){.cover-foot{grid-template-columns:1fr 1fr}}
|
||||
.cover-deco{position:absolute;pointer-events:none}
|
||||
.cover-deco.d1{top:120px;left:5%;width:80px;height:80px;color:var(--blush);transform:rotate(15deg)}
|
||||
.cover-deco.d2{top:30%;right:8%;width:60px;height:60px;color:var(--sage)}
|
||||
.cover-deco.d3{bottom:200px;left:12%;width:48px;height:48px;color:var(--sun);transform:rotate(-12deg)}
|
||||
.cover-deco.d4{bottom:160px;right:14%;width:96px;height:48px;color:var(--sky)}
|
||||
|
||||
.manifesto{padding:clamp(60px,9vh,120px) var(--pad-x);border-bottom:1px solid rgba(128,128,128,.15)}
|
||||
.manifesto-grid{display:grid;grid-template-columns:9em 1fr;gap:clamp(24px,4vw,56px);align-items:start;max-width:1400px;margin:0 auto}
|
||||
.manifesto-grid .num{font:500 12px/1 "monospace",monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
|
||||
.manifesto p{font:700 clamp(28px,3.8vw,56px)/1.05 "system-ui",sans-serif;letter-spacing:-.025em;max-width:22ch;margin:0;text-transform:lowercase}
|
||||
.manifesto p em{font-style:normal;color:var(--accent)}
|
||||
/* Manifesto */
|
||||
.manifesto{padding:clamp(60px,9vh,120px) var(--pad-x);background:color-mix(in srgb,var(--blush) 28%,var(--cream));position:relative;overflow:hidden}
|
||||
.manifesto-grid{display:grid;grid-template-columns:11em 1fr;gap:clamp(24px,4vw,56px);align-items:start;position:relative;z-index:1}
|
||||
.manifesto-grid .num{font-family:var(--f-hand);font-size:32px;font-weight:600;color:var(--ink);transform:rotate(-3deg)}
|
||||
.manifesto p{font:italic 400 clamp(32px,4.5vw,68px)/1.15 var(--f-disp);max-width:24ch;margin:0;color:var(--ink)}
|
||||
.manifesto p em{font-style:normal;background:#fff;padding:0 .15em;border-radius:8px;display:inline-block;transform:rotate(-1deg);color:var(--blush)}
|
||||
.manifesto p strong{font-style:normal;font-weight:400;color:var(--sage);font-family:var(--f-hand)}
|
||||
|
||||
.palette{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:rgba(128,128,128,.1);border:1px solid rgba(128,128,128,.15)}
|
||||
.swatch{padding:28px 24px;aspect-ratio:3/4;display:flex;flex-direction:column;justify-content:space-between;border-radius:20px;transition:all .2s}
|
||||
.swatch:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,0,0,.15)}
|
||||
.swatch .role{font:500 11px/1 "monospace",monospace;letter-spacing:.1em;text-transform:uppercase}
|
||||
.swatch .name{font:900 clamp(28px,3.4vw,48px)/.92 "system-ui",sans-serif;letter-spacing:-.025em;text-transform:lowercase;margin-top:auto}
|
||||
.swatch .hex{font:500 12px/1 "monospace",monospace;margin-top:8px}
|
||||
.swatch .usage{font:400 11px/1.5 "monospace",monospace;margin-top:6px;opacity:.65}
|
||||
.swatch--primary{background:var(--primary);color:var(--secondary)}
|
||||
.swatch--secondary{background:var(--secondary);color:var(--primary)}
|
||||
.swatch--tertiary{background:var(--tertiary);color:var(--primary)}
|
||||
.swatch--accent{background:var(--accent);color:var(--secondary)}
|
||||
/* Palette */
|
||||
.palette{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
|
||||
@media(max-width:880px){.palette{grid-template-columns:repeat(2,1fr)}}
|
||||
.swatch{aspect-ratio:3/4;padding:24px;display:flex;flex-direction:column;justify-content:space-between;border-radius:24px;border:2px solid var(--ink);position:relative;transition:transform .25s cubic-bezier(.16,1,.3,1)}
|
||||
.swatch:hover{transform:translateY(-6px) rotate(-1deg)}
|
||||
.swatch:nth-child(1){transform:rotate(-1.5deg)}
|
||||
.swatch:nth-child(2){transform:rotate(1deg)}
|
||||
.swatch:nth-child(3){transform:rotate(-1deg)}
|
||||
.swatch:nth-child(4){transform:rotate(1.5deg)}
|
||||
.swatch:nth-child(1):hover{transform:rotate(-1.5deg) translateY(-6px)}
|
||||
.swatch:nth-child(2):hover{transform:rotate(1deg) translateY(-6px)}
|
||||
.swatch:nth-child(3):hover{transform:rotate(-1deg) translateY(-6px)}
|
||||
.swatch:nth-child(4):hover{transform:rotate(1.5deg) translateY(-6px)}
|
||||
.swatch .role{font-family:var(--f-hand);font-size:22px;font-weight:700;align-self:flex-start;padding:4px 12px;background:#fff;border-radius:999px;border:2px solid var(--ink)}
|
||||
.swatch .name{font:400 clamp(28px,3.4vw,52px)/.95 var(--f-disp);letter-spacing:-.005em;margin-top:auto}
|
||||
.swatch .hex{font:600 13px/1 var(--f-body);letter-spacing:.06em;margin-top:8px}
|
||||
.swatch .usage{font:500 13px/1.55 var(--f-body);margin-top:6px;opacity:.8;max-width:22ch}
|
||||
.swatch--cream{background:var(--cream)}
|
||||
.swatch--ink{background:var(--ink);color:var(--cream)}
|
||||
.swatch--ink .role{background:var(--cream);color:var(--ink)}
|
||||
.swatch--sage{background:var(--sage)}
|
||||
.swatch--blush{background:var(--blush)}
|
||||
|
||||
.specimen{max-width:1400px;margin:0 auto;display:flex;flex-direction:column}
|
||||
.spec-row{display:grid;grid-template-columns:11em 1fr;gap:32px;padding:28px 0;border-top:1px solid rgba(128,128,128,.15);align-items:baseline}
|
||||
.spec-row:first-child{border:0;padding-top:0}
|
||||
.spec-row .meta{font:500 11px/1.4 "monospace",monospace;letter-spacing:.1em;text-transform:uppercase;display:flex;flex-direction:column;gap:4px;color:var(--primary);opacity:.4}
|
||||
.spec-row .meta b{color:var(--accent);font:400 22px/1 "system-ui",sans-serif}
|
||||
.spec-display{font:900 clamp(56px,10vw,152px)/.88 "system-ui",sans-serif;letter-spacing:-.04em;text-transform:lowercase}
|
||||
.spec-h1{font:800 clamp(40px,7vw,104px)/.9 "system-ui",sans-serif;letter-spacing:-.03em;text-transform:lowercase}
|
||||
.spec-h2{font:700 clamp(28px,4.2vw,64px)/1 "system-ui",sans-serif;letter-spacing:-.02em}
|
||||
.spec-lead{font:500 clamp(18px,2vw,26px)/1.45 "system-ui",sans-serif}
|
||||
.spec-body{font:400 17px/1.65 "system-ui",sans-serif;max-width:60ch}
|
||||
.spec-label{font:500 13px/1 "monospace",monospace;letter-spacing:.1em;text-transform:uppercase}
|
||||
/* Type specimen */
|
||||
.specimen{display:flex;flex-direction:column;border:2px solid var(--ink);border-radius:24px;background:#fff;overflow:hidden}
|
||||
.spec-row{display:grid;grid-template-columns:13em 1fr;gap:32px;padding:32px 36px;border-bottom:1px dashed var(--hairline);align-items:baseline}
|
||||
.spec-row:last-child{border:0}
|
||||
.spec-row .meta{font:600 11px/1.5 var(--f-body);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-dim);display:flex;flex-direction:column;gap:6px}
|
||||
.spec-row .meta b{color:var(--blush);font-weight:700;font-family:var(--f-hand);font-size:22px;letter-spacing:0;text-transform:none}
|
||||
.spec-display{font:italic 400 clamp(56px,10vw,148px)/.92 var(--f-disp);letter-spacing:-.015em;color:var(--ink)}
|
||||
.spec-display em{font-style:normal;color:var(--blush)}
|
||||
.spec-h1{font:400 clamp(40px,7vw,96px)/.95 var(--f-disp);letter-spacing:-.005em;color:var(--ink)}
|
||||
.spec-h2{font:italic 400 clamp(28px,4vw,56px)/1.1 var(--f-disp);color:var(--sage)}
|
||||
.spec-hand{font-family:var(--f-hand);font-weight:700;font-size:clamp(36px,5vw,72px);line-height:1;color:var(--blush)}
|
||||
.spec-lead{font:500 clamp(18px,2.2vw,26px)/1.5 var(--f-body);color:var(--ink);max-width:38ch}
|
||||
.spec-body{font:500 16px/1.7 var(--f-body);color:var(--ink);max-width:60ch}
|
||||
|
||||
.surface-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:48px;max-width:1400px;margin:0 auto}
|
||||
/* Surface */
|
||||
.surface-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:32px}
|
||||
@media(max-width:880px){.surface-grid{grid-template-columns:1fr}}
|
||||
.demo-card{background:var(--primary);color:var(--secondary);border-radius:20px;padding:28px;box-shadow:0 4px 16px rgba(0,0,0,.12);display:flex;flex-direction:column;gap:18px}
|
||||
.demo-card .tag{align-self:flex-start;font:500 10px/1 "monospace",monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);border:1px solid var(--accent);padding:4px 8px}
|
||||
.demo-card h3{margin:0;font:900 36px/1 "system-ui",sans-serif;letter-spacing:-.02em;text-transform:lowercase}
|
||||
.demo-card p{margin:0;font:400 15px/1.6 "system-ui",sans-serif;opacity:.7}
|
||||
.tokens{list-style:none;padding:0;margin:0;border-top:1px solid rgba(128,128,128,.15)}
|
||||
.tokens li{display:grid;grid-template-columns:1fr auto auto;gap:18px;align-items:center;padding:18px 0;border-bottom:1px solid rgba(128,128,128,.15)}
|
||||
.demo-card{background:#fff;color:var(--ink);padding:32px;display:flex;flex-direction:column;gap:16px;border-radius:24px;border:2px solid var(--ink);position:relative;transform:rotate(-1deg)}
|
||||
.demo-card::before{content:"";position:absolute;top:-16px;right:32px;width:56px;height:56px;background:var(--sun);border-radius:50%;border:2px solid var(--ink)}
|
||||
.demo-card .tag{align-self:flex-start;font-family:var(--f-hand);font-size:22px;font-weight:700;padding:4px 14px;background:var(--blush);border-radius:999px;border:2px solid var(--ink);color:var(--ink)}
|
||||
.demo-card h3{margin:0;font:400 44px/1 var(--f-disp);letter-spacing:-.005em}
|
||||
.demo-card p{margin:0;font:500 14px/1.7 var(--f-body);color:var(--ink-dim)}
|
||||
.demo-card .num-stat{font:italic 400 88px/1 var(--f-disp);color:var(--blush);letter-spacing:-.015em}
|
||||
.tokens{list-style:none;padding:0;margin:0;border:2px solid var(--ink);border-radius:24px;background:#fff;overflow:hidden;transform:rotate(1deg)}
|
||||
.tokens li{display:grid;grid-template-columns:1fr auto auto;gap:18px;align-items:center;padding:18px 24px;border-bottom:1px dashed var(--hairline)}
|
||||
.tokens li:last-child{border:0}
|
||||
.tokens .name{font:500 12px/1 "monospace",monospace;letter-spacing:.1em;text-transform:uppercase;opacity:.6}
|
||||
.tokens .val{font:800 20px/1 "system-ui",sans-serif}
|
||||
.tokens .bar{height:6px;background:var(--accent)}
|
||||
.tokens .name{font:600 12px/1 var(--f-body);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-dim)}
|
||||
.tokens .val{font:400 22px/1 var(--f-disp);color:var(--ink)}
|
||||
.tokens .bar{height:8px;background:var(--blush);border-radius:999px}
|
||||
|
||||
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:48px;max-width:1400px;margin:0 auto}
|
||||
/* Motion */
|
||||
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:32px}
|
||||
@media(max-width:880px){.two-col{grid-template-columns:1fr}}
|
||||
.panel{border:1px solid rgba(128,128,128,.15);background:color-mix(in srgb,var(--secondary) 70%,transparent)};padding:36px;border-radius:20px;display:flex;flex-direction:column;gap:22px}
|
||||
.panel .label-row{font:500 11px/1 "monospace",monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
|
||||
.panel h4{margin:0;font:800 32px/1 "system-ui",sans-serif;text-transform:lowercase}
|
||||
.panel p{margin:0;font:400 13px/1.7 "system-ui",sans-serif;opacity:.65;max-width:38ch}
|
||||
.panel{background:#fff;border:2px solid var(--ink);border-radius:24px;padding:32px;display:flex;flex-direction:column;gap:18px}
|
||||
.panel:first-child{background:color-mix(in srgb,var(--sky) 30%,#fff);transform:rotate(-.6deg)}
|
||||
.panel:last-child{background:color-mix(in srgb,var(--sage) 30%,#fff);transform:rotate(.6deg)}
|
||||
.panel .label-row{font-family:var(--f-hand);font-size:22px;font-weight:700;color:var(--ink);align-self:flex-start}
|
||||
.panel h4{margin:0;font:400 36px/1 var(--f-disp);color:var(--ink)}
|
||||
.panel p{margin:0;font:500 14px/1.7 var(--f-body);color:var(--ink-dim);max-width:38ch}
|
||||
.panel pre{margin:0;padding:14px 18px;border:2px solid var(--ink);background:#fff;font:500 12px/1.6 ui-monospace,monospace;color:var(--ink);overflow-x:auto;border-radius:12px}
|
||||
|
||||
.bg-preview{border:1px solid rgba(128,128,128,.15);aspect-ratio:4/3;position:relative;overflow:hidden;background:var(--secondary);border-radius:20px}
|
||||
.bg-preview canvas{width:100%;height:100%;display:block}
|
||||
.bg-preview .badge{position:absolute;bottom:12px;left:12px;font:500 10px/1 "monospace",monospace;letter-spacing:.1em;text-transform:uppercase;background:color-mix(in srgb,var(--secondary) 75%,transparent);padding:6px 10px;backdrop-filter:blur(8px)}
|
||||
|
||||
details.code-block{border:1px solid rgba(128,128,128,.15);background:color-mix(in srgb,var(--secondary) 60%,transparent)};margin-top:12px;border-radius:20px}
|
||||
details.code-block summary{cursor:pointer;padding:14px 18px;list-style:none;font:500 11px/1 "monospace",monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);display:flex;justify-content:space-between}
|
||||
details.code-block summary::-webkit-details-marker{display:none}
|
||||
details.code-block summary::after{content:"+";font:900 18px/1 "system-ui",sans-serif;color:var(--accent)}
|
||||
details.code-block[open] summary::after{content:"\2212"}
|
||||
details.code-block pre{margin:0;padding:16px;border-top:1px solid rgba(128,128,128,.15);font:11px/1.6 "monospace",monospace;color:var(--primary);opacity:.65;background:transparent;overflow-x:auto;white-space:pre-wrap;word-break:break-word;max-height:320px;overflow-y:auto}
|
||||
|
||||
.rules-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;max-width:1400px;margin:0 auto}
|
||||
/* Guidelines */
|
||||
.rules-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px}
|
||||
@media(max-width:880px){.rules-grid{grid-template-columns:1fr}}
|
||||
.rules-col{}
|
||||
.rules-col.do{}
|
||||
.rules-col.dont{}
|
||||
.rules-col h3{font:900 56px/1 "system-ui",sans-serif;letter-spacing:-.03em;margin:0 0 28px;text-transform:lowercase}
|
||||
.rules-col.do h3{color:var(--accent)}
|
||||
.rules-col.dont h3{opacity:.4}
|
||||
.rules-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0px}
|
||||
.rules-col li{display:grid;grid-template-columns:2em 1fr;gap:8px;padding:16px 0;border-top:1px solid rgba(128,128,128,.15);font:500 18px/1.45 "system-ui",sans-serif}
|
||||
.rules-col li::before{font:800 22px/1.2 "system-ui",sans-serif;align-self:start;}
|
||||
.rules-col.do li::before{content:"+";color:var(--accent)}
|
||||
.rules-col.dont li::before{content:"\2014";opacity:.4}
|
||||
.rules-col{padding:32px;border-radius:24px;border:2px solid var(--ink)}
|
||||
.rules-col.do{background:color-mix(in srgb,var(--sage) 40%,#fff);transform:rotate(-.6deg)}
|
||||
.rules-col.dont{background:color-mix(in srgb,var(--blush) 40%,#fff);transform:rotate(.6deg)}
|
||||
.rules-col h3{font:italic 400 56px/1 var(--f-disp);margin:0 0 24px;letter-spacing:-.005em;color:var(--ink)}
|
||||
.rules-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
|
||||
.rules-col li{display:grid;grid-template-columns:2.4em 1fr;gap:14px;padding:14px 16px;background:#fff;border:2px solid var(--ink);border-radius:14px;font:500 15px/1.5 var(--f-body)}
|
||||
.rules-col li::before{font-family:var(--f-hand);font-weight:700;font-size:28px;line-height:1;align-self:center;text-align:center}
|
||||
.rules-col.do li::before{content:"yes!";color:var(--sage)}
|
||||
.rules-col.dont li::before{content:"no.";color:var(--blush);font-size:22px}
|
||||
|
||||
.templates-wrap{background:color-mix(in srgb,var(--secondary) 96%,var(--accent))}
|
||||
.templates-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:1400px;margin:0 auto}
|
||||
/* Templates */
|
||||
.templates-wrap{border-top:1px dashed var(--hairline);background:color-mix(in srgb,var(--sun) 14%,var(--cream))}
|
||||
.templates-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
|
||||
@media(max-width:1100px){.templates-grid{grid-template-columns:repeat(2,1fr)}}
|
||||
@media(max-width:720px){.templates-grid{grid-template-columns:1fr}}
|
||||
.tmpl{background:var(--secondary);border:1px solid rgba(128,128,128,.15);overflow:hidden;border-radius:20px;transition:all .2s}
|
||||
.tmpl:hover{border-color:var(--accent);transform:translateY(-2px)}
|
||||
.tmpl-thumb{width:100%;aspect-ratio:16/9;overflow:hidden;position:relative;background:#050505;border-bottom:1px solid rgba(128,128,128,.15)}
|
||||
.tmpl{background:#fff;border:2px solid var(--ink);border-radius:18px;overflow:hidden;transition:transform .2s cubic-bezier(.16,1,.3,1)}
|
||||
.tmpl:hover{transform:translateY(-3px) rotate(-.5deg)}
|
||||
.tmpl-thumb{width:100%;aspect-ratio:16/9;overflow:hidden;position:relative;background:var(--cream)}
|
||||
.tmpl-thumb .scale-wrap{width:1920px;height:1080px;transform-origin:top left}
|
||||
.tmpl-foot{display:flex;justify-content:space-between;padding:14px 18px;font:500 11px/1 "monospace",monospace;letter-spacing:.14em;text-transform:uppercase}
|
||||
.tmpl-foot .idx{color:var(--accent)}
|
||||
.tmpl-foot{display:flex;justify-content:space-between;align-items:center;padding:12px 18px;border-top:2px dashed var(--hairline)}
|
||||
.tmpl-foot .name{color:var(--ink);font:400 22px/1 var(--f-disp);letter-spacing:-.005em}
|
||||
.tmpl-foot .idx{font-family:var(--f-hand);font-size:20px;font-weight:700;color:var(--blush)}
|
||||
|
||||
footer.endcap{background:var(--accent);color:var(--secondary);padding:80px var(--pad-x) 60px;display:grid;grid-template-columns:1fr auto;gap:48px;align-items:end}
|
||||
footer.endcap .endmark{font:900 clamp(60px,13vw,220px)/.85 "system-ui",sans-serif;letter-spacing:-.04em;text-transform:lowercase;margin:0}
|
||||
footer.endcap .meta{font:500 12px/2 "monospace",monospace;letter-spacing:.1em;text-transform:uppercase;opacity:.6;text-align:right}
|
||||
footer.endcap .meta b{opacity:1;color:var(--accent)}
|
||||
/* Endcap */
|
||||
footer.endcap{padding:96px var(--pad-x) 56px;background:color-mix(in srgb,var(--sky) 30%,var(--cream));border-top:1px dashed var(--hairline);display:grid;grid-template-columns:1fr auto;gap:48px;align-items:end}
|
||||
footer.endcap .endmark{font:italic 400 clamp(56px,13vw,220px)/.85 var(--f-disp);letter-spacing:-.015em;margin:0;color:var(--ink)}
|
||||
footer.endcap .endmark em{font-style:normal;color:var(--blush)}
|
||||
footer.endcap .meta{font-family:var(--f-hand);font-size:24px;font-weight:600;text-align:right;color:var(--ink-dim);line-height:1.6}
|
||||
footer.endcap .meta b{color:var(--ink);font-family:var(--f-disp);font-weight:400;font-size:20px}
|
||||
</style>
|
||||
|
||||
<style id="template-css">
|
||||
__TEMPLATE_CSS__
|
||||
.ds-slide-frame{
|
||||
--d-cream:#FCF1D8; --d-ink:#2A2624; --d-sage:#BBD0A4; --d-blush:#F4B5C9;
|
||||
--d-sun:#F7D060; --d-sky:#B4D9F4;
|
||||
--d-ink-2:color-mix(in srgb,#2A2624 65%,#FCF1D8);
|
||||
--d-ink-3:color-mix(in srgb,#2A2624 32%,#FCF1D8);
|
||||
--d-line:color-mix(in srgb,#2A2624 14%,transparent);
|
||||
--d-f-disp:"DM Serif Display",serif;
|
||||
--d-f-hand:"Caveat",cursive;
|
||||
--d-f-body:"Quicksand",sans-serif;
|
||||
width:1920px;height:1080px;position:relative;overflow:hidden
|
||||
}
|
||||
.ds-slide-frame *{box-sizing:border-box}
|
||||
.ds-slide-frame .slide{width:1920px;height:1080px;position:relative;padding:96px 120px;display:grid;grid-template-rows:auto 1fr auto;overflow:hidden;background:var(--d-cream);color:var(--d-ink);font-family:var(--d-f-body)}
|
||||
.ds-slide-frame .slide-chrome,.ds-slide-frame .slide-foot{display:flex;justify-content:space-between;align-items:center;font:600 16px/1 var(--d-f-body);letter-spacing:.14em;text-transform:uppercase;color:var(--d-ink-3)}
|
||||
.ds-slide-frame .slide-chrome{padding-bottom:18px;border-bottom:1px dashed var(--d-line);margin-bottom:40px}
|
||||
.ds-slide-frame .slide-foot{padding-top:18px;border-top:1px dashed var(--d-line);margin-top:40px}
|
||||
.ds-slide-frame .slide-chrome .accent,.ds-slide-frame .slide-foot .accent{color:var(--d-blush)}
|
||||
.ds-slide-frame .display{font:italic 400 240px/.92 var(--d-f-disp);letter-spacing:-.018em;color:var(--d-ink)}
|
||||
.ds-slide-frame .display em{font-style:normal;color:var(--d-blush)}
|
||||
.ds-slide-frame .h1{font:400 144px/.95 var(--d-f-disp);letter-spacing:-.012em;color:var(--d-ink)}
|
||||
.ds-slide-frame .h1 em{font-style:italic;color:var(--d-blush)}
|
||||
.ds-slide-frame .h2{font:400 88px/1.05 var(--d-f-disp);letter-spacing:-.005em;color:var(--d-ink)}
|
||||
.ds-slide-frame .h2 em{font-style:italic;color:var(--d-blush)}
|
||||
.ds-slide-frame .h3{font:italic 400 56px/1.15 var(--d-f-disp);color:var(--d-sage)}
|
||||
.ds-slide-frame .hand{font:700 64px/1 var(--d-f-hand);color:var(--d-blush);letter-spacing:0}
|
||||
.ds-slide-frame .lead{font:500 32px/1.5 var(--d-f-body);color:var(--d-ink)}
|
||||
.ds-slide-frame .body{font:500 24px/1.7 var(--d-f-body);color:var(--d-ink)}
|
||||
.ds-slide-frame .label{font:700 24px/1 var(--d-f-hand);color:var(--d-blush);background:#fff;padding:4px 14px;border-radius:999px;border:2px solid var(--d-ink);display:inline-block}
|
||||
.ds-slide-frame .accent{color:var(--d-blush)}
|
||||
.ds-slide-frame .muted{color:var(--d-ink-2)}
|
||||
|
||||
.ds-slide-frame .slide--cover .slide-chrome,.ds-slide-frame .slide--cover .slide-foot{display:none}
|
||||
.ds-slide-frame .slide--cover{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:36px;position:relative}
|
||||
.ds-slide-frame .cover-deco-1{position:absolute;top:80px;left:120px;width:80px;height:80px;color:var(--d-blush);transform:rotate(15deg)}
|
||||
.ds-slide-frame .cover-deco-2{position:absolute;top:140px;right:160px;width:64px;height:64px;color:var(--d-sage)}
|
||||
.ds-slide-frame .cover-deco-3{position:absolute;bottom:120px;left:160px;width:96px;height:48px;color:var(--d-sky)}
|
||||
.ds-slide-frame .cover-deco-4{position:absolute;bottom:160px;right:200px;width:56px;height:56px;color:var(--d-sun);transform:rotate(-12deg)}
|
||||
|
||||
.ds-slide-frame .slide--chapter .slide-chrome,.ds-slide-frame .slide--chapter .slide-foot{display:none}
|
||||
.ds-slide-frame .slide--chapter{display:flex;flex-direction:column;justify-content:center;gap:32px;padding:96px 160px;background:color-mix(in srgb,var(--d-blush) 35%,var(--d-cream))}
|
||||
.ds-slide-frame .chap-num{font:700 36px/1 var(--d-f-hand);color:var(--d-ink);transform:rotate(-2deg);align-self:flex-start}
|
||||
|
||||
.ds-slide-frame .slide--note .slide-chrome,.ds-slide-frame .slide--note .slide-foot{display:none}
|
||||
.ds-slide-frame .slide--note{display:flex;flex-direction:column;justify-content:center;padding:120px 200px;gap:48px;background:color-mix(in srgb,var(--d-sage) 35%,var(--d-cream))}
|
||||
.ds-slide-frame .note-text{font:700 96px/1.05 var(--d-f-hand);color:var(--d-ink);max-width:80%}
|
||||
.ds-slide-frame .note-attr{font:italic 400 36px/1 var(--d-f-disp);color:var(--d-ink-2);padding-top:24px;border-top:2px dashed var(--d-line);max-width:480px}
|
||||
|
||||
.ds-slide-frame .slide--cards .slide-body{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;padding-top:32px;align-items:start}
|
||||
.ds-slide-frame .pcard{background:#fff;border:3px solid var(--d-ink);border-radius:24px;padding:32px;display:flex;flex-direction:column;gap:14px;position:relative}
|
||||
.ds-slide-frame .pcard:nth-child(1){transform:rotate(-1.5deg);background:color-mix(in srgb,var(--d-blush) 40%,#fff)}
|
||||
.ds-slide-frame .pcard:nth-child(2){transform:rotate(1deg);background:color-mix(in srgb,var(--d-sage) 40%,#fff)}
|
||||
.ds-slide-frame .pcard:nth-child(3){transform:rotate(-1deg);background:color-mix(in srgb,var(--d-sun) 40%,#fff)}
|
||||
.ds-slide-frame .pcard::before{content:"";position:absolute;top:-20px;right:32px;width:48px;height:48px;border-radius:50%;border:3px solid var(--d-ink)}
|
||||
.ds-slide-frame .pcard:nth-child(1)::before{background:var(--d-blush)}
|
||||
.ds-slide-frame .pcard:nth-child(2)::before{background:var(--d-sage)}
|
||||
.ds-slide-frame .pcard:nth-child(3)::before{background:var(--d-sun)}
|
||||
.ds-slide-frame .pcard .tag{font:700 22px/1 var(--d-f-hand);color:var(--d-ink);align-self:flex-start}
|
||||
.ds-slide-frame .pcard h3{margin:0;font:400 40px/1.05 var(--d-f-disp);letter-spacing:-.005em;color:var(--d-ink)}
|
||||
.ds-slide-frame .pcard p{margin:0;font:500 20px/1.55 var(--d-f-body);color:var(--d-ink)}
|
||||
|
||||
.ds-slide-frame .slide--stats .slide-body{display:flex;flex-direction:column;justify-content:center;gap:48px;padding-top:32px}
|
||||
.ds-slide-frame .stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
|
||||
.ds-slide-frame .stat-card{background:#fff;border:3px solid var(--d-ink);border-radius:24px;padding:32px;display:flex;flex-direction:column;gap:14px;text-align:center;align-items:center}
|
||||
.ds-slide-frame .stat-card:nth-child(1){transform:rotate(-1.5deg)}
|
||||
.ds-slide-frame .stat-card:nth-child(2){transform:rotate(1deg)}
|
||||
.ds-slide-frame .stat-card:nth-child(3){transform:rotate(-1deg)}
|
||||
.ds-slide-frame .stat-card .v{font:italic 400 144px/1 var(--d-f-disp);letter-spacing:-.02em;color:var(--d-blush)}
|
||||
.ds-slide-frame .stat-card .l{font:500 24px/1.4 var(--d-f-body);color:var(--d-ink);max-width:18ch}
|
||||
.ds-slide-frame .stat-card .n{font:700 22px/1 var(--d-f-hand);color:var(--d-sage)}
|
||||
|
||||
.ds-slide-frame .slide--list .slide-body{display:grid;grid-template-columns:1fr 1.6fr;gap:80px;align-items:start;padding-top:32px}
|
||||
.ds-slide-frame .list-head{display:flex;flex-direction:column;gap:22px}
|
||||
.ds-slide-frame .list-items{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:18px}
|
||||
.ds-slide-frame .list-items li{display:grid;grid-template-columns:auto 1fr;gap:24px;align-items:start;padding:22px 28px;background:#fff;border:3px solid var(--d-ink);border-radius:18px}
|
||||
.ds-slide-frame .list-items li:nth-child(1){background:color-mix(in srgb,var(--d-blush) 35%,#fff);transform:rotate(-.5deg)}
|
||||
.ds-slide-frame .list-items li:nth-child(2){background:color-mix(in srgb,var(--d-sage) 35%,#fff);transform:rotate(.5deg)}
|
||||
.ds-slide-frame .list-items li:nth-child(3){background:color-mix(in srgb,var(--d-sun) 35%,#fff);transform:rotate(-.5deg)}
|
||||
.ds-slide-frame .list-items li:nth-child(4){background:color-mix(in srgb,var(--d-sky) 45%,#fff);transform:rotate(.5deg)}
|
||||
.ds-slide-frame .list-items .num{font:700 56px/1 var(--d-f-hand);color:var(--d-ink)}
|
||||
.ds-slide-frame .list-items .h{font:400 32px/1.1 var(--d-f-disp);color:var(--d-ink);display:block;margin-bottom:4px}
|
||||
.ds-slide-frame .list-items .d{font:500 20px/1.55 var(--d-f-body);color:var(--d-ink-2);display:block}
|
||||
|
||||
.ds-slide-frame .slide--end .slide-chrome,.ds-slide-frame .slide--end .slide-foot{display:none}
|
||||
.ds-slide-frame .slide--end{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:120px;gap:48px;background:color-mix(in srgb,var(--d-sky) 35%,var(--d-cream))}
|
||||
.ds-slide-frame .end-mark{font:italic 400 240px/.9 var(--d-f-disp);letter-spacing:-.018em;color:var(--d-ink)}
|
||||
.ds-slide-frame .end-mark em{font-style:normal;color:var(--d-blush)}
|
||||
.ds-slide-frame .end-sub{font:700 56px/1 var(--d-f-hand);color:var(--d-ink-2)}
|
||||
</style>
|
||||
|
||||
<!-- Reusable SVG daisy (per-slide-frame instances reference these via use, but inline copies are simpler) -->
|
||||
</head>
|
||||
<body>
|
||||
<canvas id="design-bg"></canvas>
|
||||
<div id="bg-veil"></div>
|
||||
|
||||
<!-- ───────────── NAV ───────────── -->
|
||||
<div class="rail">
|
||||
<div class="brand"><span class="dot"></span>__NAME__</div>
|
||||
<nav><a href="#palette">01</a><a href="#type">02</a><a href="#surface">03</a><a href="#motion">04</a><a href="#background">05</a><a href="#guidelines">06</a><a href="#templates">07</a></nav>
|
||||
<div class="brand">
|
||||
<svg class="daisy" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="12" cy="12" r="3.5" fill="#F7D060" stroke="#2A2624" stroke-width="1.4"/>
|
||||
<ellipse cx="12" cy="3.5" rx="2.5" ry="4" fill="#fff" stroke="#2A2624" stroke-width="1.4"/>
|
||||
<ellipse cx="12" cy="20.5" rx="2.5" ry="4" fill="#fff" stroke="#2A2624" stroke-width="1.4"/>
|
||||
<ellipse cx="3.5" cy="12" rx="4" ry="2.5" fill="#fff" stroke="#2A2624" stroke-width="1.4"/>
|
||||
<ellipse cx="20.5" cy="12" rx="4" ry="2.5" fill="#fff" stroke="#2A2624" stroke-width="1.4"/>
|
||||
<ellipse cx="6.2" cy="6.2" rx="2.8" ry="3.6" fill="#fff" stroke="#2A2624" stroke-width="1.4" transform="rotate(-45 6.2 6.2)"/>
|
||||
<ellipse cx="17.8" cy="17.8" rx="2.8" ry="3.6" fill="#fff" stroke="#2A2624" stroke-width="1.4" transform="rotate(-45 17.8 17.8)"/>
|
||||
<ellipse cx="17.8" cy="6.2" rx="3.6" ry="2.8" fill="#fff" stroke="#2A2624" stroke-width="1.4" transform="rotate(-45 17.8 6.2)"/>
|
||||
<ellipse cx="6.2" cy="17.8" rx="3.6" ry="2.8" fill="#fff" stroke="#2A2624" stroke-width="1.4" transform="rotate(-45 6.2 17.8)"/>
|
||||
</svg>
|
||||
<b>Daisy Days</b>
|
||||
</div>
|
||||
<nav>
|
||||
<a href="#palette">palette</a>
|
||||
<a href="#type">type</a>
|
||||
<a href="#surface">surface</a>
|
||||
<a href="#motion">motion</a>
|
||||
<a href="#guidelines">rules</a>
|
||||
<a href="#templates">templates</a>
|
||||
</nav>
|
||||
<div class="meta">spring 2026</div>
|
||||
</div>
|
||||
|
||||
<header class="cover">
|
||||
<h1 class="cover-headline">__NAME_LINE1____NAME_LINE2__.</h1>
|
||||
<!-- ───────────── COVER ───────────── -->
|
||||
<header class="cover" data-screen-label="00 Cover">
|
||||
<!-- decorations -->
|
||||
<svg class="cover-deco d1" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M12 2 L14 9 L21 11 L14 13 L12 22 L10 13 L3 11 L10 9 Z" stroke="#2A2624" stroke-width="1.4" stroke-linejoin="round" fill="currentColor"/>
|
||||
</svg>
|
||||
<svg class="cover-deco d2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="12" cy="12" r="3" fill="#F7D060" stroke="#2A2624" stroke-width="1.4"/>
|
||||
<circle cx="12" cy="4" r="2.8" fill="currentColor" stroke="#2A2624" stroke-width="1.4"/>
|
||||
<circle cx="12" cy="20" r="2.8" fill="currentColor" stroke="#2A2624" stroke-width="1.4"/>
|
||||
<circle cx="4" cy="12" r="2.8" fill="currentColor" stroke="#2A2624" stroke-width="1.4"/>
|
||||
<circle cx="20" cy="12" r="2.8" fill="currentColor" stroke="#2A2624" stroke-width="1.4"/>
|
||||
</svg>
|
||||
<svg class="cover-deco d3" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M12 3 L13.5 9 L19.5 9.5 L15 13.5 L16.8 19.5 L12 16 L7.2 19.5 L9 13.5 L4.5 9.5 L10.5 9 Z" stroke="#2A2624" stroke-width="1.4" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
<svg class="cover-deco d4" viewBox="0 0 60 30" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M5 28 Q30 -5 55 28" stroke="#F4B5C9" stroke-width="5" fill="none" stroke-linecap="round"/>
|
||||
<path d="M10 28 Q30 0 50 28" stroke="#F7D060" stroke-width="5" fill="none" stroke-linecap="round"/>
|
||||
<path d="M15 28 Q30 5 45 28" stroke="#BBD0A4" stroke-width="5" fill="none" stroke-linecap="round"/>
|
||||
<path d="M20 28 Q30 10 40 28" stroke="#B4D9F4" stroke-width="5" fill="none" stroke-linecap="round"/>
|
||||
</svg>
|
||||
|
||||
<div class="cover-chrome">
|
||||
<div>design system № 008</div>
|
||||
<div class="accent">a friendly little system ☘</div>
|
||||
</div>
|
||||
<h1 class="cover-headline">daisy <em>days</em>.</h1>
|
||||
<p class="cover-sub">— a cheerful, handmade-feeling deck system —</p>
|
||||
<div class="cover-foot">
|
||||
<div class="cell"><span class="k">Template</span><span class="v">daisy-days</span></div>
|
||||
<div class="cell"><span class="k">Type</span><span class="v big">system-ui</span></div>
|
||||
<div class="cell"><span class="k">Accent</span><span class="v">__ACCENT_LABEL__</span></div>
|
||||
<div class="cell"><span class="k">Doc</span><span class="v">07 sections · __SLIDE_COUNT__ templates</span></div>
|
||||
<div class="cell"><span class="k">Discipline</span><span class="v">Kids · Wellness · Craft</span></div>
|
||||
<div class="cell"><span class="k">Display</span><span class="v hand">DM Serif italic</span></div>
|
||||
<div class="cell"><span class="k">Mood</span><span class="v">Pastel, sunny, soft</span></div>
|
||||
<div class="cell"><span class="k">Volume</span><span class="v plain">06 sections · 07 frames</span></div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section class="manifesto">
|
||||
<!-- ───────────── MANIFESTO ───────────── -->
|
||||
<section class="manifesto" data-screen-label="00 Manifesto">
|
||||
<div class="manifesto-grid">
|
||||
<div class="num">— Manifesto</div>
|
||||
<p>Cheerful pastel deck with hand-drawn daisies, stars, and rainbows. Friendly, soft, and warm.</p>
|
||||
<div class="num">— manifesto</div>
|
||||
<p>the page is a <em>garden</em>. type is <strong>warm</strong>. nothing is sharp; everything is <em>handmade</em>.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="palette">
|
||||
<!-- ───────────── PALETTE ───────────── -->
|
||||
<section id="palette" data-screen-label="01 Palette">
|
||||
<div class="section-head">
|
||||
<div class="num">01 — Palette</div>
|
||||
<h2>four colors.</h2>
|
||||
<p class="lede">__PALETTE_LEDE__</p>
|
||||
<div class="num">i — palette</div>
|
||||
<h2>Four <em>seasons</em>,<br/>all friendly.</h2>
|
||||
<p class="lede">Warm cream paper. Soft dark ink. Two pastel accents that share a slide easily — sage for calm, blush for warmth. Sun and sky stand by for a third note.</p>
|
||||
</div>
|
||||
<div class="palette">
|
||||
<div class="swatch swatch--primary"><div class="role">Primary</div><div><div class="name">__PRIMARY_NAME__</div><div class="hex">__PRIMARY__</div><div class="usage">Canvas.</div></div></div>
|
||||
<div class="swatch swatch--secondary"><div class="role">Secondary</div><div><div class="name">__SECONDARY_NAME__</div><div class="hex">__SECONDARY__</div><div class="usage">Ink.</div></div></div>
|
||||
<div class="swatch swatch--tertiary"><div class="role">Tertiary</div><div><div class="name">__TERTIARY_NAME__</div><div class="hex">__TERTIARY__</div><div class="usage">Muted. Borders.</div></div></div>
|
||||
<div class="swatch swatch--accent"><div class="role">Accent</div><div><div class="name">__ACCENT_NAME__</div><div class="hex">__ACCENT__</div><div class="usage">Signal. Reserved.</div></div></div>
|
||||
<div class="swatch swatch--cream"><div class="role">i · cream</div><div><div class="name">cream.</div><div class="hex">__PRIMARY__</div><div class="usage">Warm paper canvas.</div></div></div>
|
||||
<div class="swatch swatch--ink"><div class="role">ii · ink</div><div><div class="name">ink.</div><div class="hex">__SECONDARY__</div><div class="usage">Warm dark for type and outlines.</div></div></div>
|
||||
<div class="swatch swatch--sage"><div class="role">iii · sage</div><div><div class="name">sage.</div><div class="hex">__TERTIARY__</div><div class="usage">Calm, leafy, optimistic.</div></div></div>
|
||||
<div class="swatch swatch--blush"><div class="role">iv · blush</div><div><div class="name">blush.</div><div class="hex">__ACCENT__</div><div class="usage">The warm voice. Hearts and headlines.</div></div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="type">
|
||||
<!-- ───────────── TYPE ───────────── -->
|
||||
<section id="type" data-screen-label="02 Type">
|
||||
<div class="section-head">
|
||||
<div class="num">02 — Typography</div>
|
||||
<h2>type scale.</h2>
|
||||
<div class="num">ii — typography</div>
|
||||
<h2>A serif,<br/>a <em>script</em>, a sans.</h2>
|
||||
<p class="lede">DM Serif Display carries headlines — warm and italic-friendly. Caveat handles the handwritten asides. Quicksand keeps the body rounded and readable.</p>
|
||||
</div>
|
||||
<div class="specimen">
|
||||
<div class="spec-row"><div class="meta"><span>Display</span><b>system-ui</b></div><div class="spec-display">hello world.</div></div>
|
||||
<div class="spec-row"><div class="meta"><span>H1</span><b>system-ui</b></div><div class="spec-h1">chapter one</div></div>
|
||||
<div class="spec-row"><div class="meta"><span>H2</span><b>system-ui</b></div><div class="spec-h2">Slide headlines.</div></div>
|
||||
<div class="spec-row"><div class="meta"><span>Body</span><b>system-ui</b></div><p class="spec-body">Body copy below 24px is forbidden in video compositions.</p></div>
|
||||
<div class="spec-row"><div class="meta"><span>Label</span><b>monospace</b></div><div class="spec-label">// chrome · labels · metadata</div></div>
|
||||
<div class="spec-row"><div class="meta"><span>Display</span><b>DM Serif italic</b><span>10vw · −0.015em</span></div><div class="spec-display"><em>sunny</em> days.</div></div>
|
||||
<div class="spec-row"><div class="meta"><span>Heading 1</span><b>DM Serif Display</b><span>7vw</span></div><div class="spec-h1">chapter one</div></div>
|
||||
<div class="spec-row"><div class="meta"><span>Heading 2</span><b>DM Serif italic</b><span>4vw · sage</span></div><div class="spec-h2">A subheading sets the day.</div></div>
|
||||
<div class="spec-row"><div class="meta"><span>Hand</span><b>Caveat 700</b><span>5vw · blush</span></div><div class="spec-hand">a friendly note —</div></div>
|
||||
<div class="spec-row"><div class="meta"><span>Lead</span><b>Quicksand 500</b><span>2vw</span></div><div class="spec-lead">The lead carries the brief in one bright, hopeful breath.</div></div>
|
||||
<div class="spec-row"><div class="meta"><span>Body</span><b>Quicksand 500</b><span>16px · 60ch</span></div><p class="spec-body">Pack my box with five dozen liquor jugs. Body type is Quicksand 500 — rounded but never childish. Use Caveat for asides and margin notes; use serif italic for emphasis in a sentence.</p></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="surface">
|
||||
<!-- ───────────── SURFACE ───────────── -->
|
||||
<section id="surface" data-screen-label="03 Surface">
|
||||
<div class="section-head">
|
||||
<div class="num">03 — Surface</div>
|
||||
<h2>corners. depth.</h2>
|
||||
<div class="num">iii — surface</div>
|
||||
<h2>Soft <em>corners</em>.<br/>A little tilt.</h2>
|
||||
<p class="lede">Cards round generously — 18–24px. A 2px ink outline holds everything together. Every surface tilts ±1.5° — never flat.</p>
|
||||
</div>
|
||||
<div class="surface-grid">
|
||||
<div class="demo-card">
|
||||
<span class="tag">// example</span>
|
||||
<span class="tag">a friendly card!</span>
|
||||
<h3>example card.</h3>
|
||||
<p>Configured corners, padding, shadow.</p>
|
||||
<p>2px ink outline, 24px corners, a small tilt. A daisy circle on the top corner for warmth. Surfaces never align exactly — that's the whole point.</p>
|
||||
<div class="num-stat">+42%</div>
|
||||
</div>
|
||||
<ul class="tokens">
|
||||
<li><span class="name">Corners</span><span class="val">__CORNER_RADIUS__</span><span class="bar" style="width:8px"></span></li>
|
||||
<li><span class="name">Padding</span><span class="val">__PADDING__</span><span class="bar" style="width:32px"></span></li>
|
||||
<li><span class="name">Gap</span><span class="val">__GAP__</span><span class="bar" style="width:32px"></span></li>
|
||||
<li><span class="name">Elevation</span><span class="val">__ELEVATION__</span><span class="bar" style="width:18px"></span></li>
|
||||
<li><span class="name">Density</span><span class="val">__DENSITY__</span><span class="bar" style="width:48px"></span></li>
|
||||
<li><span class="name">Corners</span><span class="val">24 px</span><span class="bar" style="width:44px"></span></li>
|
||||
<li><span class="name">Outline</span><span class="val">2 px ink</span><span class="bar" style="width:16px"></span></li>
|
||||
<li><span class="name">Padding</span><span class="val">28 px</span><span class="bar" style="width:36px"></span></li>
|
||||
<li><span class="name">Tilt</span><span class="val">±1.5°</span><span class="bar" style="width:18px"></span></li>
|
||||
<li><span class="name">Density</span><span class="val">Comfortable</span><span class="bar" style="width:48px"></span></li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="motion">
|
||||
<!-- ───────────── MOTION ───────────── -->
|
||||
<section id="motion" data-screen-label="04 Motion">
|
||||
<div class="section-head">
|
||||
<div class="num">04 — Motion</div>
|
||||
<h2>__EASING_HEADLINE__</h2>
|
||||
<p class="lede">__EASING_LEDE__</p>
|
||||
<div class="num">iv — motion</div>
|
||||
<h2>Bouncy.<br/><em>Hopeful.</em></h2>
|
||||
<p class="lede">Elements arrive with a small bounce — overshoot, then settle. Like flowers nodding in a breeze.</p>
|
||||
</div>
|
||||
<div class="two-col">
|
||||
<div class="panel">
|
||||
<div class="label-row">// easing</div>
|
||||
<h4>__EASING_NAME__</h4>
|
||||
<p>__EASING_DESC__</p>
|
||||
<pre>__EASING_VALUE__</pre>
|
||||
<span class="label-row">— easing —</span>
|
||||
<h4>back.out(1.2)</h4>
|
||||
<p>Gentle overshoot, soft landing. Use for entrances of cards, headlines, and decorative SVG.</p>
|
||||
<pre>cubic-bezier(0.34, 1.36, 0.64, 1)</pre>
|
||||
</div>
|
||||
<div class="panel">
|
||||
<div class="label-row">// duration</div>
|
||||
<h4>__DURATION_DEFAULT__</h4>
|
||||
<p>__DURATION_DESC__</p>
|
||||
<pre>__DURATION_VALUES__</pre>
|
||||
<span class="label-row">— duration —</span>
|
||||
<h4>0.9s</h4>
|
||||
<p>Slides resolve in 0.9 seconds. Cards bounce in 0.6. Hovers in 0.2.</p>
|
||||
<pre>--dur-slide: 0.9s
|
||||
--dur-enter: 0.6s
|
||||
--dur-hover: 0.2s</pre>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="background">
|
||||
<!-- ───────────── GUIDELINES ───────────── -->
|
||||
<section id="guidelines" data-screen-label="05 Guidelines">
|
||||
<div class="section-head">
|
||||
<div class="num">05 — Background</div>
|
||||
<h2>__BG_HEADLINE__</h2>
|
||||
<p class="lede">__BG_LEDE__</p>
|
||||
</div>
|
||||
<div class="two-col">
|
||||
<div class="bg-preview"><canvas id="bg-preview-canvas"></canvas><span class="badge">// __BG_BADGE__</span></div>
|
||||
<div style="display:flex;flex-direction:column;gap:8px">
|
||||
<ul class="tokens" style="border-top:none">
|
||||
<li><span class="name">Geometry</span><span class="val">__BG_TYPE__</span><span class="bar" style="width:36px"></span></li>
|
||||
<li><span class="name">Density</span><span class="val">__BG_DENSITY__</span><span class="bar" style="width:42px"></span></li>
|
||||
<li><span class="name">Speed</span><span class="val">__BG_SPEED__</span><span class="bar" style="width:18px"></span></li>
|
||||
<li><span class="name">Strength</span><span class="val">__BG_STRENGTH__</span><span class="bar" style="width:52px"></span></li>
|
||||
<li><span class="name">Grain</span><span class="val">__BG_GRAIN__</span><span class="bar" style="width:24px"></span></li>
|
||||
</ul>
|
||||
<details class="code-block"><summary>// shader config</summary>
|
||||
<pre>__SHADER_CONFIG__</pre>
|
||||
</details>
|
||||
<details class="code-block"><summary>// vertex shader</summary>
|
||||
<pre id="vtx-src">__SHADER_VERTEX__</pre>
|
||||
</details>
|
||||
<details class="code-block"><summary>// fragment shader</summary>
|
||||
<pre id="frg-src">__SHADER_FRAGMENT__</pre>
|
||||
</details>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="guidelines">
|
||||
<div class="section-head">
|
||||
<div class="num">06 — Guidelines</div>
|
||||
<h2>do and don’t.</h2>
|
||||
<div class="num">v — guidelines</div>
|
||||
<h2>Yes please.<br/><em>No thank you.</em></h2>
|
||||
<p class="lede">A short list of rules. The garden softens the moment any are broken.</p>
|
||||
</div>
|
||||
<div class="rules-grid">
|
||||
<div class="rules-col do"><h3>do.</h3><ul>__DOS__</ul></div>
|
||||
<div class="rules-col dont"><h3>don't.</h3><ul>__DONTS__</ul></div>
|
||||
<div class="rules-col do">
|
||||
<h3>yes please.</h3>
|
||||
<ul>
|
||||
<li>Use sage and blush together — they share happily.</li>
|
||||
<li>Round every corner at least 18px.</li>
|
||||
<li>Outline every card in 2px ink.</li>
|
||||
<li>Tilt cards ±1.5°. Never perfectly aligned.</li>
|
||||
<li>Scatter daisies, stars, and rainbows freely.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="rules-col dont">
|
||||
<h3>no thank you.</h3>
|
||||
<ul>
|
||||
<li>Use sharp 0px corners. The page should feel kind.</li>
|
||||
<li>Set type in heavy condensed sans — it fights the mood.</li>
|
||||
<li>Apply harsh drop-shadows. Outlines only.</li>
|
||||
<li>Use cool grey. Tint everything warm.</li>
|
||||
<li>Lock cards to a strict grid.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="templates" class="templates-wrap">
|
||||
<!-- ───────────── TEMPLATES ───────────── -->
|
||||
<section id="templates" class="templates-wrap" data-screen-label="06 Templates">
|
||||
<div class="section-head">
|
||||
<div class="num">07 — Templates</div>
|
||||
<h2>__SLIDE_COUNT_WORD__<br/>frames.</h2>
|
||||
<div class="num">vi — templates</div>
|
||||
<h2>Seven<br/><em>little garden plots.</em></h2>
|
||||
<p class="lede">The full library at 1920×1080. Each thumbnail is the live slide, scaled.</p>
|
||||
</div>
|
||||
<div class="templates-grid" id="templates-grid"></div>
|
||||
</section>
|
||||
|
||||
<template id="tmpl-source">
|
||||
__SLIDE_CARDS__
|
||||
|
||||
<div class="tmpl" data-idx="01"><div class="tmpl-thumb"><div class="scale-wrap"><div class="ds-slide-frame">
|
||||
<section class="slide slide--cover">
|
||||
<svg class="cover-deco-1" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M12 2 L14 9 L21 11 L14 13 L12 22 L10 13 L3 11 L10 9 Z" stroke="#2A2624" stroke-width="1.2" fill="currentColor"/></svg>
|
||||
<svg class="cover-deco-2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="12" r="3" fill="#F7D060" stroke="#2A2624" stroke-width="1.2"/><circle cx="12" cy="4" r="2.8" fill="currentColor" stroke="#2A2624" stroke-width="1.2"/><circle cx="12" cy="20" r="2.8" fill="currentColor" stroke="#2A2624" stroke-width="1.2"/><circle cx="4" cy="12" r="2.8" fill="currentColor" stroke="#2A2624" stroke-width="1.2"/><circle cx="20" cy="12" r="2.8" fill="currentColor" stroke="#2A2624" stroke-width="1.2"/></svg>
|
||||
<svg class="cover-deco-3" viewBox="0 0 60 30" xmlns="http://www.w3.org/2000/svg"><path d="M5 28 Q30 -5 55 28" stroke="#F4B5C9" stroke-width="5" fill="none"/><path d="M10 28 Q30 0 50 28" stroke="#F7D060" stroke-width="5" fill="none"/><path d="M15 28 Q30 5 45 28" stroke="#BBD0A4" stroke-width="5" fill="none"/></svg>
|
||||
<svg class="cover-deco-4" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M12 3 L13.5 9 L19.5 9.5 L15 13.5 L16.8 19.5 L12 16 L7.2 19.5 L9 13.5 L4.5 9.5 L10.5 9 Z" stroke="#2A2624" stroke-width="1.2"/></svg>
|
||||
<h1 class="display">{{headline}}</h1>
|
||||
<p class="hand">— {{text}} —</p>
|
||||
<p class="lead">{{body}}</p>
|
||||
</section>
|
||||
</div></div></div><div class="tmpl-foot"><span class="name">cover</span><span class="idx">i / vii</span></div></div>
|
||||
|
||||
<div class="tmpl" data-idx="02"><div class="tmpl-thumb"><div class="scale-wrap"><div class="ds-slide-frame">
|
||||
<section class="slide slide--chapter">
|
||||
<div class="chap-num">~ {{label}} ~</div>
|
||||
<h2 class="h1">{{headline}}</h2>
|
||||
<p class="lead">{{body}}</p>
|
||||
</section>
|
||||
</div></div></div><div class="tmpl-foot"><span class="name">chapter</span><span class="idx">ii / vii</span></div></div>
|
||||
|
||||
<div class="tmpl" data-idx="03"><div class="tmpl-thumb"><div class="scale-wrap"><div class="ds-slide-frame">
|
||||
<section class="slide slide--note">
|
||||
<div class="note-text">"{{body}}"</div>
|
||||
<div class="note-attr">— {{text}}, {{label}}</div>
|
||||
</section>
|
||||
</div></div></div><div class="tmpl-foot"><span class="name">note</span><span class="idx">iii / vii</span></div></div>
|
||||
|
||||
<div class="tmpl" data-idx="04"><div class="tmpl-thumb"><div class="scale-wrap"><div class="ds-slide-frame">
|
||||
<section class="slide slide--cards">
|
||||
<header class="slide-chrome"><span>{{label}}</span><span class="accent">{{label}}</span></header>
|
||||
<div class="slide-body">
|
||||
<div class="pcard"><span class="tag">{{text}}</span><h3>{{headline}}</h3><p>{{body}}</p></div>
|
||||
<div class="pcard"><span class="tag">{{text}}</span><h3>{{headline}}</h3><p>{{body}}</p></div>
|
||||
<div class="pcard"><span class="tag">{{text}}</span><h3>{{headline}}</h3><p>{{body}}</p></div>
|
||||
</div>
|
||||
<footer class="slide-foot"><span>{{label}}</span><span>{{number}}</span></footer>
|
||||
</section>
|
||||
</div></div></div><div class="tmpl-foot"><span class="name">cards</span><span class="idx">iv / vii</span></div></div>
|
||||
|
||||
<div class="tmpl" data-idx="05"><div class="tmpl-thumb"><div class="scale-wrap"><div class="ds-slide-frame">
|
||||
<section class="slide slide--stats">
|
||||
<header class="slide-chrome"><span>{{label}}</span><span class="accent">{{label}}</span></header>
|
||||
<div class="slide-body">
|
||||
<h2 class="h2"><em>{{headline}}</em></h2>
|
||||
<div class="stats-grid">
|
||||
<div class="stat-card"><span class="v">{{number}}</span><span class="l">{{body}}</span><span class="n">{{label}}</span></div>
|
||||
<div class="stat-card"><span class="v">{{number}}</span><span class="l">{{body}}</span><span class="n">{{label}}</span></div>
|
||||
<div class="stat-card"><span class="v">{{number}}</span><span class="l">{{body}}</span><span class="n">{{label}}</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<footer class="slide-foot"><span>{{label}}</span><span>{{number}}</span></footer>
|
||||
</section>
|
||||
</div></div></div><div class="tmpl-foot"><span class="name">stats</span><span class="idx">v / vii</span></div></div>
|
||||
|
||||
<div class="tmpl" data-idx="06"><div class="tmpl-thumb"><div class="scale-wrap"><div class="ds-slide-frame">
|
||||
<section class="slide slide--list">
|
||||
<header class="slide-chrome"><span>{{label}}</span><span class="accent">{{label}}</span></header>
|
||||
<div class="slide-body">
|
||||
<div class="list-head"><span class="label">{{label}}</span><h3 class="h3">{{headline}}</h3><p class="body muted">{{body}}</p></div>
|
||||
<ul class="list-items">
|
||||
<li><span class="num">{{number}}.</span><div><span class="h">{{headline}}</span><span class="d">{{body}}</span></div></li>
|
||||
<li><span class="num">{{number}}.</span><div><span class="h">{{headline}}</span><span class="d">{{body}}</span></div></li>
|
||||
<li><span class="num">{{number}}.</span><div><span class="h">{{headline}}</span><span class="d">{{body}}</span></div></li>
|
||||
<li><span class="num">{{number}}.</span><div><span class="h">{{headline}}</span><span class="d">{{body}}</span></div></li>
|
||||
</ul>
|
||||
</div>
|
||||
<footer class="slide-foot"><span>{{label}}</span><span>{{number}}</span></footer>
|
||||
</section>
|
||||
</div></div></div><div class="tmpl-foot"><span class="name">list</span><span class="idx">vi / vii</span></div></div>
|
||||
|
||||
<div class="tmpl" data-idx="07"><div class="tmpl-thumb"><div class="scale-wrap"><div class="ds-slide-frame">
|
||||
<section class="slide slide--end">
|
||||
<h2 class="end-mark">{{text}} <em>{{text}}</em></h2>
|
||||
<p class="end-sub">— {{body}} —</p>
|
||||
</section>
|
||||
</div></div></div><div class="tmpl-foot"><span class="name">end</span><span class="idx">vii / vii</span></div></div>
|
||||
|
||||
</template>
|
||||
|
||||
<footer class="endcap">
|
||||
<h2 class="endmark">end.</h2>
|
||||
<footer class="endcap" data-screen-label="07 End">
|
||||
<h2 class="endmark">thank you <em>!</em></h2>
|
||||
<div class="meta">
|
||||
<div><b>__NAME__</b> · v1</div>
|
||||
<div>system-ui / monospace</div>
|
||||
<div>__DATE__</div>
|
||||
<div><b>Daisy Days</b></div>
|
||||
<div>DM Serif Display / Caveat / Quicksand</div>
|
||||
<div>Compiled May 2026 ☘</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
@@ -312,7 +570,5 @@ __SLIDE_CARDS__
|
||||
})();
|
||||
</script>
|
||||
|
||||
__SHADER_SCRIPT__
|
||||
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
||||
@@ -5,301 +5,428 @@
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
||||
<title>__NAME__ — Design System</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link href="https://fonts.googleapis.com/css2?__FONT_LINK_EXTRA__&display=swap" rel="stylesheet" />
|
||||
<script type="importmap">
|
||||
{"imports":{"three":"https://cdn.jsdelivr.net/npm/three@0.167.0/build/three.module.js","three/addons/":"https://cdn.jsdelivr.net/npm/three@0.167.0/examples/jsm/"}}
|
||||
</script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />
|
||||
|
||||
<style id="ds-tokens">
|
||||
:root{
|
||||
--primary:__PRIMARY__; --secondary:__SECONDARY__; --tertiary:__TERTIARY__; --accent:__ACCENT__;
|
||||
--ink-dim:color-mix(in srgb,var(--primary) 50%,var(--secondary));
|
||||
--ink-fade:color-mix(in srgb,var(--primary) 22%,var(--secondary));
|
||||
--hairline:color-mix(in srgb,var(--primary) 12%,transparent);
|
||||
--f-disp:"system-ui",sans-serif; --f-mono:"monospace",monospace;
|
||||
--pad-x:clamp(24px,5vw,88px); --pad-y:clamp(40px,6vh,100px);
|
||||
--f-disp:"Instrument Serif",serif;
|
||||
--f-body:"Inter",sans-serif;
|
||||
--f-mono:"JetBrains Mono",monospace;
|
||||
--pad-x:clamp(28px,6vw,108px); --pad-y:clamp(48px,7vh,120px);
|
||||
}
|
||||
</style>
|
||||
|
||||
<style>
|
||||
*,*::before,*::after{box-sizing:border-box}
|
||||
html,body{margin:0;padding:0;background:var(--secondary)}
|
||||
body{color:var(--primary);font:400 14px/1.6 "monospace",monospace;-webkit-font-smoothing:antialiased;overflow-x:hidden}
|
||||
::selection{background:var(--accent);color:var(--secondary)}
|
||||
body{color:var(--primary);font:300 14px/1.7 var(--f-body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
|
||||
::selection{background:var(--accent);color:var(--primary)}
|
||||
|
||||
#design-bg{position:fixed;inset:0;width:100%;height:100%;z-index:-2;opacity:.85;pointer-events:none}
|
||||
#bg-veil{position:fixed;inset:0;z-index:-1;pointer-events:none;background:none}
|
||||
|
||||
.rail{position:fixed;top:0;left:0;right:0;height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 var(--pad-x);background:var(--primary);border-bottom:1px solid rgba(128,128,128,.15);z-index:100;font:500 12px/1 "monospace",monospace;letter-spacing:.06em;text-transform:uppercase}
|
||||
.rail .brand{color:var(--accent);display:inline-flex;align-items:center;gap:10px;font:400 22px/1 "system-ui",sans-serif}
|
||||
.rail .brand .dot{width:22px;height:22px;background:var(--accent);}
|
||||
.rail nav{display:flex;gap:6px}
|
||||
.rail nav a{color:var(--secondary);text-decoration:none;transition:all .15s}
|
||||
/* Top rail */
|
||||
.rail{position:fixed;top:0;left:0;right:0;height:48px;display:flex;align-items:center;justify-content:space-between;padding:0 var(--pad-x);background:color-mix(in srgb,var(--secondary) 86%,transparent);backdrop-filter:blur(14px);border-bottom:1px solid var(--hairline);z-index:100;font:300 11px/1 var(--f-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-dim)}
|
||||
.rail .brand{display:inline-flex;align-items:center;gap:14px;color:var(--accent)}
|
||||
.rail .brand b{font-family:var(--f-disp);font-style:italic;font-weight:400;letter-spacing:0;text-transform:none;font-size:20px;color:var(--accent)}
|
||||
.rail .brand .dot{width:6px;height:6px;background:var(--accent);border-radius:50%;display:inline-block;box-shadow:0 0 12px rgba(255,63,141,.7)}
|
||||
.rail nav{display:flex;gap:28px}
|
||||
.rail nav a{color:var(--ink-dim);text-decoration:none;transition:color .2s}
|
||||
.rail nav a:hover{color:var(--accent)}
|
||||
@media(max-width:880px){.rail nav{display:none}}
|
||||
.rail .time{font-family:var(--f-disp);font-style:italic;font-size:14px;letter-spacing:0;text-transform:none;color:var(--ink-fade)}
|
||||
@media(max-width:760px){.rail nav{display:none}}
|
||||
|
||||
/* Sections */
|
||||
section{position:relative;padding:var(--pad-y) var(--pad-x)}
|
||||
.section-head{display:grid;grid-template-columns:9em 1fr;gap:clamp(24px,4vw,56px);align-items:baseline;border-top:1px solid rgba(128,128,128,.15);padding-top:28px;margin-bottom:clamp(36px,5vh,64px)}
|
||||
.section-head .num{font:500 12px/1 "monospace",monospace;letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}
|
||||
.section-head h2{font:900 clamp(36px,6vw,84px)/.92 "system-ui",sans-serif;letter-spacing:-.035em;margin:0;text-transform:lowercase}
|
||||
.section-head .lede{grid-column:2;max-width:60ch;margin-top:18px;font-size:15px;line-height:1.6}
|
||||
.section-head{display:grid;grid-template-columns:11em 1fr;gap:clamp(24px,4vw,64px);align-items:baseline;border-top:1px solid var(--hairline);padding-top:36px;margin-bottom:clamp(48px,7vh,96px)}
|
||||
.section-head .num{font:500 11px/1 var(--f-mono);letter-spacing:.22em;text-transform:uppercase;color:var(--accent)}
|
||||
.section-head h2{font:italic 400 clamp(56px,9vw,128px)/.92 var(--f-disp);letter-spacing:-.015em;margin:0;color:var(--primary)}
|
||||
.section-head h2 em{font-style:normal;color:var(--accent)}
|
||||
.section-head .lede{grid-column:2;max-width:52ch;margin-top:24px;font:300 17px/1.7 var(--f-body);color:var(--ink-dim)}
|
||||
|
||||
.cover{background:var(--primary);color:var(--secondary)};min-height:100vh;padding:110px var(--pad-x) 60px;display:flex;flex-direction:column;justify-content:center}
|
||||
.cover-headline{margin:0;font:900 clamp(64px,13vw,200px)/.88 "system-ui",sans-serif;letter-spacing:-.04em;text-transform:uppercase}
|
||||
.cover-foot{margin-top:56px;padding-top:28px;border-top:1px solid rgba(128,128,128,.15);display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
|
||||
.cover-foot .cell{display:flex;flex-direction:column;gap:6px}
|
||||
.cover-foot .k{font:500 11px/1 "monospace",monospace;letter-spacing:.1em;text-transform:uppercase;opacity:.55}
|
||||
.cover-foot .v{font:500 13px/1.4 "monospace",monospace}
|
||||
.cover-foot .v.big{font:800 32px/1 "system-ui",sans-serif;letter-spacing:-.02em}
|
||||
/* Cover */
|
||||
.cover{min-height:100vh;padding:96px var(--pad-x) 56px;display:grid;grid-template-rows:auto 1fr auto;position:relative}
|
||||
.cover-chrome{display:flex;justify-content:space-between;font:500 11px/1 var(--f-mono);letter-spacing:.22em;text-transform:uppercase;color:var(--ink-fade)}
|
||||
.cover-chrome .accent{color:var(--accent)}
|
||||
.cover-headline{align-self:end;margin:0;font:italic 400 clamp(80px,18vw,320px)/.88 var(--f-disp);letter-spacing:-.03em;color:var(--primary)}
|
||||
.cover-headline em{font-style:normal;color:var(--accent)}
|
||||
.cover-headline .dot{color:var(--accent);font-style:normal}
|
||||
.cover-foot{margin-top:56px;display:grid;grid-template-columns:repeat(4,1fr);gap:32px;padding-top:24px;border-top:1px solid var(--hairline)}
|
||||
.cover-foot .cell{display:flex;flex-direction:column;gap:8px}
|
||||
.cover-foot .k{font:500 10px/1.4 var(--f-mono);letter-spacing:.22em;text-transform:uppercase;color:var(--ink-fade)}
|
||||
.cover-foot .v{font:italic 400 22px/1.2 var(--f-disp);color:var(--accent)}
|
||||
.cover-foot .v.plain{font-family:var(--f-body);font-style:normal;font-weight:500;font-size:14px;letter-spacing:.05em;color:var(--primary)}
|
||||
@media(max-width:760px){.cover-foot{grid-template-columns:1fr 1fr}}
|
||||
|
||||
.manifesto{padding:clamp(60px,9vh,120px) var(--pad-x);border-bottom:1px solid rgba(128,128,128,.15)}
|
||||
.manifesto-grid{display:grid;grid-template-columns:9em 1fr;gap:clamp(24px,4vw,56px);align-items:start;max-width:1400px;margin:0 auto}
|
||||
.manifesto-grid .num{font:500 12px/1 "monospace",monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
|
||||
.manifesto p{font:700 clamp(28px,3.8vw,56px)/1.05 "system-ui",sans-serif;letter-spacing:-.025em;max-width:22ch;margin:0;text-transform:lowercase}
|
||||
/* Manifesto */
|
||||
.manifesto{padding:clamp(60px,10vh,140px) var(--pad-x);border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);position:relative}
|
||||
.manifesto-grid{display:grid;grid-template-columns:11em 1fr;gap:clamp(24px,4vw,64px);align-items:start}
|
||||
.manifesto-grid .num{font:500 11px/1 var(--f-mono);letter-spacing:.22em;text-transform:uppercase;color:var(--accent)}
|
||||
.manifesto p{font:italic 400 clamp(28px,3.6vw,56px)/1.2 var(--f-disp);max-width:30ch;margin:0;color:var(--primary)}
|
||||
.manifesto p em{font-style:normal;color:var(--accent)}
|
||||
|
||||
.palette{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:rgba(128,128,128,.1);border:1px solid rgba(128,128,128,.15)}
|
||||
.swatch{padding:28px 24px;aspect-ratio:3/4;display:flex;flex-direction:column;justify-content:space-between;border-radius:0;transition:all .2s}
|
||||
.swatch:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,0,0,.15)}
|
||||
.swatch .role{font:500 11px/1 "monospace",monospace;letter-spacing:.1em;text-transform:uppercase}
|
||||
.swatch .name{font:900 clamp(28px,3.4vw,48px)/.92 "system-ui",sans-serif;letter-spacing:-.025em;text-transform:lowercase;margin-top:auto}
|
||||
.swatch .hex{font:500 12px/1 "monospace",monospace;margin-top:8px}
|
||||
.swatch .usage{font:400 11px/1.5 "monospace",monospace;margin-top:6px;opacity:.65}
|
||||
.swatch--primary{background:var(--primary);color:var(--secondary)}
|
||||
.swatch--secondary{background:var(--secondary);color:var(--primary)}
|
||||
.swatch--tertiary{background:var(--tertiary);color:var(--primary)}
|
||||
.swatch--accent{background:var(--accent);color:var(--secondary)}
|
||||
/* Palette */
|
||||
.palette{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--hairline);border:1px solid var(--hairline)}
|
||||
.swatch{aspect-ratio:3/4;padding:32px 28px;display:flex;flex-direction:column;justify-content:space-between;transition:transform .4s cubic-bezier(.16,1,.3,1)}
|
||||
.swatch:hover{transform:translateY(-4px)}
|
||||
.swatch .role{font:500 11px/1 var(--f-mono);letter-spacing:.22em;text-transform:uppercase}
|
||||
.swatch .name{font:italic 400 clamp(28px,3.6vw,56px)/1 var(--f-disp);letter-spacing:-.005em;margin-top:auto}
|
||||
.swatch .hex{font:500 12px/1 var(--f-mono);letter-spacing:.06em;margin-top:10px}
|
||||
.swatch .usage{font:300 13px/1.6 var(--f-body);margin-top:6px;opacity:.7;max-width:22ch}
|
||||
.swatch--paper{background:var(--primary);color:var(--secondary)}
|
||||
.swatch--paper .role{color:color-mix(in srgb,var(--secondary) 65%,transparent)}
|
||||
.swatch--noir{background:var(--secondary);color:var(--primary)}
|
||||
.swatch--noir .role{color:var(--ink-fade)}
|
||||
.swatch--shadow{background:var(--tertiary);color:var(--primary)}
|
||||
.swatch--shadow .role{color:color-mix(in srgb,var(--primary) 65%,transparent)}
|
||||
.swatch--rouge{background:var(--accent);color:var(--secondary)}
|
||||
.swatch--rouge .role{color:color-mix(in srgb,var(--secondary) 70%,transparent)}
|
||||
@media(max-width:880px){.palette{grid-template-columns:repeat(2,1fr)}}
|
||||
|
||||
.specimen{max-width:1400px;margin:0 auto;display:flex;flex-direction:column}
|
||||
.spec-row{display:grid;grid-template-columns:11em 1fr;gap:32px;padding:28px 0;border-top:1px solid rgba(128,128,128,.15);align-items:baseline}
|
||||
/* Type specimen */
|
||||
.specimen{display:flex;flex-direction:column}
|
||||
.spec-row{display:grid;grid-template-columns:12em 1fr;gap:36px;padding:32px 0;border-top:1px solid var(--hairline);align-items:baseline}
|
||||
.spec-row:first-child{border:0;padding-top:0}
|
||||
.spec-row .meta{font:500 11px/1.4 "monospace",monospace;letter-spacing:.1em;text-transform:uppercase;display:flex;flex-direction:column;gap:4px;color:var(--primary);opacity:.4}
|
||||
.spec-row .meta b{color:var(--accent);font:400 22px/1 "system-ui",sans-serif}
|
||||
.spec-display{font:900 clamp(56px,10vw,152px)/.88 "system-ui",sans-serif;letter-spacing:-.04em;text-transform:lowercase}
|
||||
.spec-h1{font:800 clamp(40px,7vw,104px)/.9 "system-ui",sans-serif;letter-spacing:-.03em;text-transform:lowercase}
|
||||
.spec-h2{font:700 clamp(28px,4.2vw,64px)/1 "system-ui",sans-serif;letter-spacing:-.02em}
|
||||
.spec-lead{font:500 clamp(18px,2vw,26px)/1.45 "system-ui",sans-serif}
|
||||
.spec-body{font:400 17px/1.65 "system-ui",sans-serif;max-width:60ch}
|
||||
.spec-label{font:500 13px/1 "monospace",monospace;letter-spacing:.1em;text-transform:uppercase}
|
||||
.spec-row .meta{font:500 11px/1.5 var(--f-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-fade);display:flex;flex-direction:column;gap:6px}
|
||||
.spec-row .meta b{color:var(--accent);font-weight:500;font-family:var(--f-disp);font-style:italic;font-size:18px;letter-spacing:0;text-transform:none}
|
||||
.spec-display{font:italic 400 clamp(64px,11vw,168px)/.92 var(--f-disp);letter-spacing:-.02em;color:var(--primary)}
|
||||
.spec-display em{font-style:normal;color:var(--accent)}
|
||||
.spec-h1{font:italic 400 clamp(44px,7vw,108px)/.95 var(--f-disp);letter-spacing:-.01em;color:var(--accent)}
|
||||
.spec-h2{font:italic 400 clamp(28px,4.2vw,64px)/1.1 var(--f-disp);color:var(--primary)}
|
||||
.spec-lead{font:400 clamp(18px,2vw,26px)/1.55 var(--f-body);color:var(--primary);max-width:38ch}
|
||||
.spec-body{font:300 16px/1.7 var(--f-body);color:var(--primary);max-width:60ch}
|
||||
.spec-label{font:500 12px/1 var(--f-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}
|
||||
|
||||
.surface-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:48px;max-width:1400px;margin:0 auto}
|
||||
/* Surface */
|
||||
.surface-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:56px}
|
||||
@media(max-width:880px){.surface-grid{grid-template-columns:1fr}}
|
||||
.demo-card{background:var(--primary);color:var(--secondary);border-radius:0;padding:28px;box-shadow:0 4px 16px rgba(0,0,0,.12);display:flex;flex-direction:column;gap:18px}
|
||||
.demo-card .tag{align-self:flex-start;font:500 10px/1 "monospace",monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);border:1px solid var(--accent);padding:4px 8px}
|
||||
.demo-card h3{margin:0;font:900 36px/1 "system-ui",sans-serif;letter-spacing:-.02em;text-transform:lowercase}
|
||||
.demo-card p{margin:0;font:400 15px/1.6 "system-ui",sans-serif;opacity:.7}
|
||||
.tokens{list-style:none;padding:0;margin:0;border-top:1px solid rgba(128,128,128,.15)}
|
||||
.tokens li{display:grid;grid-template-columns:1fr auto auto;gap:18px;align-items:center;padding:18px 0;border-bottom:1px solid rgba(128,128,128,.15)}
|
||||
.tokens li:last-child{border:0}
|
||||
.tokens .name{font:500 12px/1 "monospace",monospace;letter-spacing:.1em;text-transform:uppercase;opacity:.6}
|
||||
.tokens .val{font:800 20px/1 "system-ui",sans-serif}
|
||||
.tokens .bar{height:6px;background:var(--accent)}
|
||||
.demo-card{background:var(--primary);color:var(--secondary);padding:36px 40px;display:flex;flex-direction:column;gap:18px;border:1px solid color-mix(in srgb,var(--secondary) 12%,transparent)}
|
||||
.demo-card .tag{align-self:flex-start;font:500 10px/1 var(--f-mono);letter-spacing:.22em;text-transform:uppercase;color:var(--accent);padding:6px 0;border-top:1px solid var(--accent);border-bottom:1px solid var(--accent)}
|
||||
.demo-card h3{margin:0;font:italic 400 44px/1 var(--f-disp);letter-spacing:-.015em;color:var(--secondary)}
|
||||
.demo-card p{margin:0;font:400 14px/1.7 var(--f-body);color:color-mix(in srgb,var(--secondary) 70%,transparent)}
|
||||
.demo-card .num-stat{font:italic 400 88px/1 var(--f-disp);color:var(--accent);letter-spacing:-.02em}
|
||||
.tokens{list-style:none;padding:0;margin:0;border-top:1px solid var(--hairline)}
|
||||
.tokens li{display:grid;grid-template-columns:1fr auto auto;gap:24px;align-items:center;padding:20px 0;border-bottom:1px solid var(--hairline)}
|
||||
.tokens .name{font:500 11px/1 var(--f-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-dim)}
|
||||
.tokens .val{font:italic 400 24px/1 var(--f-disp);color:var(--accent)}
|
||||
.tokens .bar{height:1px;background:var(--accent)}
|
||||
|
||||
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:48px;max-width:1400px;margin:0 auto}
|
||||
/* Motion */
|
||||
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:48px}
|
||||
@media(max-width:880px){.two-col{grid-template-columns:1fr}}
|
||||
.panel{border:1px solid rgba(128,128,128,.15);background:color-mix(in srgb,var(--secondary) 70%,transparent)};padding:36px;border-radius:0;display:flex;flex-direction:column;gap:22px}
|
||||
.panel .label-row{font:500 11px/1 "monospace",monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
|
||||
.panel h4{margin:0;font:800 32px/1 "system-ui",sans-serif;text-transform:lowercase}
|
||||
.panel p{margin:0;font:400 13px/1.7 "system-ui",sans-serif;opacity:.65;max-width:38ch}
|
||||
.panel{border:1px solid var(--hairline);padding:40px;display:flex;flex-direction:column;gap:22px;background:color-mix(in srgb,var(--secondary) 86%,var(--accent))}
|
||||
.panel h4{margin:0;font:italic 400 36px/1 var(--f-disp);color:var(--accent)}
|
||||
.panel .label-row{font:500 11px/1 var(--f-mono);letter-spacing:.22em;text-transform:uppercase;color:var(--ink-fade)}
|
||||
.panel p{margin:0;font:300 14px/1.75 var(--f-body);color:var(--ink-dim);max-width:38ch}
|
||||
.panel pre{margin:0;padding:14px 18px;border:1px solid var(--hairline);background:color-mix(in srgb,var(--secondary) 60%,transparent);font:400 12px/1.6 var(--f-mono);color:var(--accent);overflow-x:auto}
|
||||
|
||||
.bg-preview{border:1px solid rgba(128,128,128,.15);aspect-ratio:4/3;position:relative;overflow:hidden;background:var(--secondary);border-radius:0}
|
||||
.bg-preview canvas{width:100%;height:100%;display:block}
|
||||
.bg-preview .badge{position:absolute;bottom:12px;left:12px;font:500 10px/1 "monospace",monospace;letter-spacing:.1em;text-transform:uppercase;background:color-mix(in srgb,var(--secondary) 75%,transparent);padding:6px 10px;backdrop-filter:blur(8px)}
|
||||
|
||||
details.code-block{border:1px solid rgba(128,128,128,.15);background:color-mix(in srgb,var(--secondary) 60%,transparent)};margin-top:12px;border-radius:0}
|
||||
details.code-block summary{cursor:pointer;padding:14px 18px;list-style:none;font:500 11px/1 "monospace",monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);display:flex;justify-content:space-between}
|
||||
details.code-block summary::-webkit-details-marker{display:none}
|
||||
details.code-block summary::after{content:"+";font:900 18px/1 "system-ui",sans-serif;color:var(--accent)}
|
||||
details.code-block[open] summary::after{content:"\2212"}
|
||||
details.code-block pre{margin:0;padding:16px;border-top:1px solid rgba(128,128,128,.15);font:11px/1.6 "monospace",monospace;color:var(--primary);opacity:.65;background:transparent;overflow-x:auto;white-space:pre-wrap;word-break:break-word;max-height:320px;overflow-y:auto}
|
||||
|
||||
.rules-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;max-width:1400px;margin:0 auto}
|
||||
/* Guidelines */
|
||||
.rules-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px}
|
||||
@media(max-width:880px){.rules-grid{grid-template-columns:1fr}}
|
||||
.rules-col{}
|
||||
.rules-col.do{}
|
||||
.rules-col.dont{}
|
||||
.rules-col h3{font:900 56px/1 "system-ui",sans-serif;letter-spacing:-.03em;margin:0 0 28px;text-transform:lowercase}
|
||||
.rules-col h3{font:italic 400 60px/1 var(--f-disp);margin:0 0 28px;letter-spacing:-.01em}
|
||||
.rules-col.do h3{color:var(--accent)}
|
||||
.rules-col.dont h3{opacity:.4}
|
||||
.rules-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0px}
|
||||
.rules-col li{display:grid;grid-template-columns:2em 1fr;gap:8px;padding:16px 0;border-top:1px solid rgba(128,128,128,.15);font:500 18px/1.45 "system-ui",sans-serif}
|
||||
.rules-col li::before{font:800 22px/1.2 "system-ui",sans-serif;align-self:start;}
|
||||
.rules-col.do li::before{content:"+";color:var(--accent)}
|
||||
.rules-col.dont li::before{content:"\2014";opacity:.4}
|
||||
.rules-col.dont h3{color:var(--ink-fade)}
|
||||
.rules-col ul{list-style:none;margin:0;padding:0}
|
||||
.rules-col li{display:grid;grid-template-columns:2.4em 1fr;gap:12px;padding:18px 0;border-top:1px solid var(--hairline);font:400 16px/1.55 var(--f-body)}
|
||||
.rules-col li::before{font:italic 400 22px/1.2 var(--f-disp);align-self:start}
|
||||
.rules-col.do li::before{content:"·";color:var(--accent);font-size:48px;line-height:.6}
|
||||
.rules-col.dont li::before{content:"×";color:var(--ink-fade)}
|
||||
.rules-col.dont li{color:var(--ink-dim)}
|
||||
|
||||
.templates-wrap{background:color-mix(in srgb,var(--secondary) 96%,var(--accent))}
|
||||
.templates-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:1400px;margin:0 auto}
|
||||
/* Templates */
|
||||
.templates-wrap{border-top:1px solid var(--hairline)}
|
||||
.templates-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
|
||||
@media(max-width:1100px){.templates-grid{grid-template-columns:repeat(2,1fr)}}
|
||||
@media(max-width:720px){.templates-grid{grid-template-columns:1fr}}
|
||||
.tmpl{background:var(--secondary);border:1px solid rgba(128,128,128,.15);overflow:hidden;border-radius:0;transition:all .2s}
|
||||
.tmpl{background:var(--secondary);border:1px solid var(--hairline);overflow:hidden;transition:border-color .25s,transform .3s cubic-bezier(.16,1,.3,1)}
|
||||
.tmpl:hover{border-color:var(--accent);transform:translateY(-2px)}
|
||||
.tmpl-thumb{width:100%;aspect-ratio:16/9;overflow:hidden;position:relative;background:#050505;border-bottom:1px solid rgba(128,128,128,.15)}
|
||||
.tmpl-thumb{width:100%;aspect-ratio:16/9;overflow:hidden;position:relative;background:#0a0a0a}
|
||||
.tmpl-thumb .scale-wrap{width:1920px;height:1080px;transform-origin:top left}
|
||||
.tmpl-foot{display:flex;justify-content:space-between;padding:14px 18px;font:500 11px/1 "monospace",monospace;letter-spacing:.14em;text-transform:uppercase}
|
||||
.tmpl-foot{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-top:1px solid var(--hairline);font:500 11px/1 var(--f-mono);letter-spacing:.18em;text-transform:uppercase}
|
||||
.tmpl-foot .name{color:var(--primary);font-family:var(--f-disp);font-style:italic;font-weight:400;font-size:18px;letter-spacing:0;text-transform:none}
|
||||
.tmpl-foot .idx{color:var(--accent)}
|
||||
|
||||
footer.endcap{background:var(--accent);color:var(--secondary);padding:80px var(--pad-x) 60px;display:grid;grid-template-columns:1fr auto;gap:48px;align-items:end}
|
||||
footer.endcap .endmark{font:900 clamp(60px,13vw,220px)/.85 "system-ui",sans-serif;letter-spacing:-.04em;text-transform:lowercase;margin:0}
|
||||
footer.endcap .meta{font:500 12px/2 "monospace",monospace;letter-spacing:.1em;text-transform:uppercase;opacity:.6;text-align:right}
|
||||
footer.endcap .meta b{opacity:1;color:var(--accent)}
|
||||
/* Endcap */
|
||||
footer.endcap{padding:80px var(--pad-x) 56px;border-top:1px solid var(--hairline);display:grid;grid-template-columns:1fr auto;gap:48px;align-items:end}
|
||||
footer.endcap .endmark{font:italic 400 clamp(60px,14vw,240px)/.85 var(--f-disp);letter-spacing:-.025em;margin:0;color:var(--primary)}
|
||||
footer.endcap .endmark em{font-style:normal;color:var(--accent)}
|
||||
footer.endcap .meta{font:500 11px/2 var(--f-mono);letter-spacing:.22em;text-transform:uppercase;color:var(--ink-fade);text-align:right}
|
||||
footer.endcap .meta b{color:var(--accent);font-family:var(--f-disp);font-style:italic;font-weight:400;letter-spacing:0;text-transform:none;font-size:14px}
|
||||
</style>
|
||||
|
||||
<style id="template-css">
|
||||
__TEMPLATE_CSS__
|
||||
.ds-slide-frame{
|
||||
--p-bg:#0A0A0A; --p-paper:#F4ECE0; --p-pink:#FF3F8D; --p-shadow:#4A4744;
|
||||
--p-ink-2:color-mix(in srgb,#F4ECE0 50%,#0A0A0A);
|
||||
--p-ink-3:color-mix(in srgb,#F4ECE0 22%,#0A0A0A);
|
||||
--p-line:color-mix(in srgb,#F4ECE0 14%,transparent);
|
||||
--p-f-disp:"Instrument Serif",serif;
|
||||
--p-f-body:"Inter",sans-serif;
|
||||
--p-f-mono:"JetBrains Mono",monospace;
|
||||
width:1920px;height:1080px;position:relative;overflow:hidden
|
||||
}
|
||||
.ds-slide-frame *{box-sizing:border-box}
|
||||
.ds-slide-frame .slide{width:1920px;height:1080px;position:relative;padding:96px 144px;display:grid;grid-template-rows:auto 1fr auto;overflow:hidden;background:var(--p-bg);color:var(--p-paper);font-family:var(--p-f-body)}
|
||||
.ds-slide-frame .slide-chrome,.ds-slide-frame .slide-foot{display:flex;justify-content:space-between;align-items:center;font:500 16px/1 var(--p-f-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--p-ink-3)}
|
||||
.ds-slide-frame .slide-chrome{padding-bottom:20px;border-bottom:1px solid var(--p-line);margin-bottom:40px}
|
||||
.ds-slide-frame .slide-foot{padding-top:20px;border-top:1px solid var(--p-line);margin-top:40px}
|
||||
.ds-slide-frame .slide-chrome .accent,.ds-slide-frame .slide-foot .accent{color:var(--p-pink)}
|
||||
.ds-slide-frame .display{font:italic 400 280px/.88 var(--p-f-disp);letter-spacing:-.03em;color:var(--p-paper)}
|
||||
.ds-slide-frame .display em{font-style:normal;color:var(--p-pink)}
|
||||
.ds-slide-frame .h1{font:italic 400 164px/.9 var(--p-f-disp);letter-spacing:-.025em;color:var(--p-pink)}
|
||||
.ds-slide-frame .h2{font:italic 400 96px/1.05 var(--p-f-disp);letter-spacing:-.02em;color:var(--p-paper)}
|
||||
.ds-slide-frame .h2 em{font-style:normal;color:var(--p-pink)}
|
||||
.ds-slide-frame .h3{font:italic 400 56px/1.15 var(--p-f-disp);color:var(--p-pink)}
|
||||
.ds-slide-frame .lead{font:400 32px/1.5 var(--p-f-body);color:var(--p-paper)}
|
||||
.ds-slide-frame .body{font:300 24px/1.65 var(--p-f-body);color:var(--p-paper)}
|
||||
.ds-slide-frame .label{font:500 16px/1 var(--p-f-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--p-pink)}
|
||||
.ds-slide-frame .muted{color:var(--p-ink-2)}
|
||||
.ds-slide-frame .accent{color:var(--p-pink)}
|
||||
|
||||
.ds-slide-frame .slide--cover .slide-chrome,.ds-slide-frame .slide--cover .slide-foot{display:none}
|
||||
.ds-slide-frame .slide--cover{display:flex;flex-direction:column;justify-content:flex-end}
|
||||
.ds-slide-frame .cover-top{display:flex;justify-content:space-between;align-items:flex-start;font:500 16px/1 var(--p-f-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--p-ink-3);margin-bottom:auto}
|
||||
.ds-slide-frame .cover-top .accent{color:var(--p-pink)}
|
||||
.ds-slide-frame .cover-body{display:flex;flex-direction:column;gap:36px}
|
||||
|
||||
.ds-slide-frame .slide--chapter .slide-chrome,.ds-slide-frame .slide--chapter .slide-foot{display:none}
|
||||
.ds-slide-frame .slide--chapter{display:flex;flex-direction:column;justify-content:center;gap:32px;padding:96px 200px}
|
||||
.ds-slide-frame .chap-num{font:500 18px/1 var(--p-f-mono);letter-spacing:.22em;text-transform:uppercase;color:var(--p-pink)}
|
||||
.ds-slide-frame .chap-rule{width:120px;height:1px;background:var(--p-pink)}
|
||||
|
||||
.ds-slide-frame .slide--statement .stmt-body{display:flex;flex-direction:column;justify-content:center;gap:32px}
|
||||
.ds-slide-frame .stmt-kicker{font:500 16px/1 var(--p-f-mono);letter-spacing:.22em;text-transform:uppercase;color:var(--p-pink)}
|
||||
|
||||
.ds-slide-frame .slide--quote .slide-chrome,.ds-slide-frame .slide--quote .slide-foot{display:none}
|
||||
.ds-slide-frame .slide--quote{display:flex;flex-direction:column;justify-content:center;padding:96px 280px;gap:40px}
|
||||
.ds-slide-frame .quote-mark{font:italic 400 260px/.5 var(--p-f-disp);color:var(--p-pink);height:130px}
|
||||
.ds-slide-frame .quote-text{font:italic 400 88px/1.15 var(--p-f-disp);letter-spacing:-.02em;color:var(--p-paper);max-width:88%}
|
||||
.ds-slide-frame .quote-attr{display:flex;flex-direction:column;gap:8px;padding-top:24px;border-top:1px solid var(--p-line);max-width:480px}
|
||||
.ds-slide-frame .quote-attr .nm{font:italic 400 32px/1 var(--p-f-disp);color:var(--p-pink)}
|
||||
.ds-slide-frame .quote-attr .src{font:500 16px/1.4 var(--p-f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--p-ink-3)}
|
||||
|
||||
.ds-slide-frame .slide--split .slide-body{display:grid;grid-template-columns:1fr 1fr;gap:96px;align-items:center;padding-top:32px}
|
||||
.ds-slide-frame .split-text{display:flex;flex-direction:column;gap:28px}
|
||||
.ds-slide-frame .split-plate{aspect-ratio:4/5;width:100%;border:1px solid var(--p-line);display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--p-bg) 80%,var(--p-pink));font:500 18px/1 var(--p-f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--p-ink-3)}
|
||||
|
||||
.ds-slide-frame .slide--stats .slide-body{display:flex;flex-direction:column;justify-content:center;gap:48px;padding-top:32px}
|
||||
.ds-slide-frame .stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:64px}
|
||||
.ds-slide-frame .stat-card{display:flex;flex-direction:column;gap:16px;padding-top:24px;border-top:1px solid var(--p-line)}
|
||||
.ds-slide-frame .stat-card .v{font:italic 400 144px/1 var(--p-f-disp);color:var(--p-pink);letter-spacing:-.025em}
|
||||
.ds-slide-frame .stat-card .l{font:400 26px/1.45 var(--p-f-body);color:var(--p-paper)}
|
||||
.ds-slide-frame .stat-card .n{font:500 14px/1 var(--p-f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--p-ink-3)}
|
||||
|
||||
.ds-slide-frame .slide--list .slide-body{display:grid;grid-template-columns:1fr 1.6fr;gap:96px;align-items:start;padding-top:32px}
|
||||
.ds-slide-frame .list-head{display:flex;flex-direction:column;gap:24px}
|
||||
.ds-slide-frame .list-items{list-style:none;padding:0;margin:0;display:flex;flex-direction:column}
|
||||
.ds-slide-frame .list-items li{display:grid;grid-template-columns:3em 1fr;gap:24px;padding:24px 0;border-top:1px solid var(--p-line);align-items:baseline;counter-increment:idx}
|
||||
.ds-slide-frame .list-items{counter-reset:idx}
|
||||
.ds-slide-frame .list-items li::before{content:counter(idx,decimal-leading-zero);font:italic 400 32px/1 var(--p-f-disp);color:var(--p-pink)}
|
||||
.ds-slide-frame .list-items .it-h{font:italic 400 36px/1.15 var(--p-f-disp);color:var(--p-paper);display:block;margin-bottom:6px}
|
||||
.ds-slide-frame .list-items .it-d{font:300 22px/1.5 var(--p-f-body);color:var(--p-ink-2);display:block}
|
||||
|
||||
.ds-slide-frame .slide--end .slide-chrome,.ds-slide-frame .slide--end .slide-foot{display:none}
|
||||
.ds-slide-frame .slide--end{display:flex;flex-direction:column;justify-content:center;padding:120px 144px;gap:48px}
|
||||
.ds-slide-frame .end-mark{font:italic 400 280px/.9 var(--p-f-disp);letter-spacing:-.025em;color:var(--p-pink)}
|
||||
.ds-slide-frame .end-meta{display:flex;gap:48px;font:500 14px/1.5 var(--p-f-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--p-ink-3);padding-top:24px;border-top:1px solid var(--p-line)}
|
||||
.ds-slide-frame .end-meta b{color:var(--p-pink);font-weight:500}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<canvas id="design-bg"></canvas>
|
||||
<div id="bg-veil"></div>
|
||||
|
||||
<div class="rail">
|
||||
<div class="brand"><span class="dot"></span>__NAME__</div>
|
||||
<nav><a href="#palette">01</a><a href="#type">02</a><a href="#surface">03</a><a href="#motion">04</a><a href="#background">05</a><a href="#guidelines">06</a><a href="#templates">07</a></nav>
|
||||
<div class="brand"><span class="dot"></span><b>Pink Script</b></div>
|
||||
<nav>
|
||||
<a href="#palette">i.</a><a href="#type">ii.</a><a href="#surface">iii.</a><a href="#motion">iv.</a><a href="#guidelines">v.</a><a href="#templates">vi.</a>
|
||||
</nav>
|
||||
<div class="time">after hours · 2026</div>
|
||||
</div>
|
||||
|
||||
<header class="cover">
|
||||
<h1 class="cover-headline">__NAME_LINE1____NAME_LINE2__.</h1>
|
||||
<header class="cover" data-screen-label="00 Cover">
|
||||
<div class="cover-chrome">
|
||||
<div>Design System · № 005</div>
|
||||
<div class="accent">After hours · 2026</div>
|
||||
</div>
|
||||
<h1 class="cover-headline">pink <em>script</em><span class="dot">.</span></h1>
|
||||
<div class="cover-foot">
|
||||
<div class="cell"><span class="k">Template</span><span class="v">pink-script</span></div>
|
||||
<div class="cell"><span class="k">Type</span><span class="v big">system-ui</span></div>
|
||||
<div class="cell"><span class="k">Accent</span><span class="v">__ACCENT_LABEL__</span></div>
|
||||
<div class="cell"><span class="k">Doc</span><span class="v">07 sections · __SLIDE_COUNT__ templates</span></div>
|
||||
<div class="cell"><span class="k">Discipline</span><span class="v">Fashion · Nightlife · Luxe</span></div>
|
||||
<div class="cell"><span class="k">Display</span><span class="v">Instrument Serif <em>italic</em></span></div>
|
||||
<div class="cell"><span class="k">Signal</span><span class="v">Hot pink #FF3F8D</span></div>
|
||||
<div class="cell"><span class="k">Volume</span><span class="v plain">vi sections · ix slide types</span></div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section class="manifesto">
|
||||
<section class="manifesto" data-screen-label="00 Manifesto">
|
||||
<div class="manifesto-grid">
|
||||
<div class="num">— Manifesto</div>
|
||||
<p>Black canvas, hot pink accent, pearl-cream paper, Instrument Serif headlines: late-night editorial luxury.</p>
|
||||
<div class="num">— Manifesto</div>
|
||||
<p>the page is <em>nocturnal</em>. the type is <em>italic</em>. the accent is <em>worn</em>, never decorated.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="palette">
|
||||
<section id="palette" data-screen-label="01 Palette">
|
||||
<div class="section-head">
|
||||
<div class="num">01 — Palette</div>
|
||||
<h2>four colors.</h2>
|
||||
<p class="lede">__PALETTE_LEDE__</p>
|
||||
<div class="num">i — Palette</div>
|
||||
<h2>Four colours,<br/><em>after midnight.</em></h2>
|
||||
<p class="lede">Black canvas. Pearl-cream paper. A neutral shadow tone for muted chrome. Hot pink reserved for exactly the thing to remember.</p>
|
||||
</div>
|
||||
<div class="palette">
|
||||
<div class="swatch swatch--primary"><div class="role">Primary</div><div><div class="name">__PRIMARY_NAME__</div><div class="hex">__PRIMARY__</div><div class="usage">Canvas.</div></div></div>
|
||||
<div class="swatch swatch--secondary"><div class="role">Secondary</div><div><div class="name">__SECONDARY_NAME__</div><div class="hex">__SECONDARY__</div><div class="usage">Ink.</div></div></div>
|
||||
<div class="swatch swatch--tertiary"><div class="role">Tertiary</div><div><div class="name">__TERTIARY_NAME__</div><div class="hex">__TERTIARY__</div><div class="usage">Muted. Borders.</div></div></div>
|
||||
<div class="swatch swatch--accent"><div class="role">Accent</div><div><div class="name">__ACCENT_NAME__</div><div class="hex">__ACCENT__</div><div class="usage">Signal. Reserved.</div></div></div>
|
||||
<div class="swatch swatch--paper"><div class="role">i · pearl</div><div><div class="name">cream.</div><div class="hex">__PRIMARY__</div><div class="usage">Body type on noir. Rare and reserved.</div></div></div>
|
||||
<div class="swatch swatch--noir"><div class="role">ii · noir</div><div><div class="name">black.</div><div class="hex">__SECONDARY__</div><div class="usage">The canvas. Velvet, never void.</div></div></div>
|
||||
<div class="swatch swatch--shadow"><div class="role">iii · shadow</div><div><div class="name">slate.</div><div class="hex">__TERTIARY__</div><div class="usage">Muted chrome and dividers.</div></div></div>
|
||||
<div class="swatch swatch--rouge"><div class="role">iv · rouge</div><div><div class="name">hot.</div><div class="hex">__ACCENT__</div><div class="usage">The accent. One per slide, never more.</div></div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="type">
|
||||
<section id="type" data-screen-label="02 Type">
|
||||
<div class="section-head">
|
||||
<div class="num">02 — Typography</div>
|
||||
<h2>type scale.</h2>
|
||||
<div class="num">ii — Typography</div>
|
||||
<h2>Instrument italic,<br/><em>almost always.</em></h2>
|
||||
<p class="lede">Instrument Serif carries every headline in italic. Inter handles body in lowercase 300. JetBrains Mono runs the smallest labels.</p>
|
||||
</div>
|
||||
<div class="specimen">
|
||||
<div class="spec-row"><div class="meta"><span>Display</span><b>system-ui</b></div><div class="spec-display">hello world.</div></div>
|
||||
<div class="spec-row"><div class="meta"><span>H1</span><b>system-ui</b></div><div class="spec-h1">chapter one</div></div>
|
||||
<div class="spec-row"><div class="meta"><span>H2</span><b>system-ui</b></div><div class="spec-h2">Slide headlines.</div></div>
|
||||
<div class="spec-row"><div class="meta"><span>Body</span><b>system-ui</b></div><p class="spec-body">Body copy below 24px is forbidden in video compositions.</p></div>
|
||||
<div class="spec-row"><div class="meta"><span>Label</span><b>monospace</b></div><div class="spec-label">// chrome · labels · metadata</div></div>
|
||||
<div class="spec-row"><div class="meta"><span>Display</span><b>Instrument italic</b><span>11vw · −0.02em</span></div><div class="spec-display"><em>velvet</em> rope.</div></div>
|
||||
<div class="spec-row"><div class="meta"><span>Heading I</span><b>Instrument italic</b><span>7vw · pink</span></div><div class="spec-h1">chapter one</div></div>
|
||||
<div class="spec-row"><div class="meta"><span>Heading II</span><b>Instrument italic</b><span>4.2vw</span></div><div class="spec-h2">Slide titles set in italic serif.</div></div>
|
||||
<div class="spec-row"><div class="meta"><span>Lead</span><b>Inter 400</b><span>2vw · 1.55</span></div><div class="spec-lead">The lead carries the argument with restraint.</div></div>
|
||||
<div class="spec-row"><div class="meta"><span>Body</span><b>Inter 300</b><span>16px · 1.7 · 60ch</span></div><p class="spec-body">Pack my box with five dozen liquor jugs. Body text stays light — 300 weight, 1.7 line-height. Never bold. Never uppercase.</p></div>
|
||||
<div class="spec-row"><div class="meta"><span>Label</span><b>JetBrains Mono</b><span>12px · 0.22em</span></div><div class="spec-label">// after hours · 04 of 16 · table 11</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="surface">
|
||||
<section id="surface" data-screen-label="03 Surface">
|
||||
<div class="section-head">
|
||||
<div class="num">03 — Surface</div>
|
||||
<h2>corners. depth.</h2>
|
||||
<div class="num">iii — Surface</div>
|
||||
<h2>Velvet, <em>not</em><br/>plastic.</h2>
|
||||
<p class="lede">Hairline borders. No shadows. Surfaces emerge from the dark by tone alone — never by elevation.</p>
|
||||
</div>
|
||||
<div class="surface-grid">
|
||||
<div class="demo-card">
|
||||
<span class="tag">// example</span>
|
||||
<h3>example card.</h3>
|
||||
<p>Configured corners, padding, shadow.</p>
|
||||
<span class="tag">// table 11 · exempla</span>
|
||||
<h3><em>exempla.</em></h3>
|
||||
<p>One element bears the accent — never more. The card holds itself together with type, not chrome. Hairlines optional; shadows forbidden.</p>
|
||||
<div class="num-stat">+42%</div>
|
||||
</div>
|
||||
<ul class="tokens">
|
||||
<li><span class="name">Corners</span><span class="val">__CORNER_RADIUS__</span><span class="bar" style="width:8px"></span></li>
|
||||
<li><span class="name">Padding</span><span class="val">__PADDING__</span><span class="bar" style="width:32px"></span></li>
|
||||
<li><span class="name">Gap</span><span class="val">__GAP__</span><span class="bar" style="width:32px"></span></li>
|
||||
<li><span class="name">Elevation</span><span class="val">__ELEVATION__</span><span class="bar" style="width:18px"></span></li>
|
||||
<li><span class="name">Density</span><span class="val">__DENSITY__</span><span class="bar" style="width:48px"></span></li>
|
||||
<li><span class="name">Page margin</span><span class="val">144 px</span><span class="bar" style="width:64px"></span></li>
|
||||
<li><span class="name">Column gap</span><span class="val">96 px</span><span class="bar" style="width:44px"></span></li>
|
||||
<li><span class="name">Border</span><span class="val">1 px hairline</span><span class="bar" style="width:8px"></span></li>
|
||||
<li><span class="name">Shadow</span><span class="val"><em>none</em></span><span class="bar" style="width:0;opacity:.2"></span></li>
|
||||
<li><span class="name">Density</span><span class="val">Low</span><span class="bar" style="width:24px"></span></li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="motion">
|
||||
<section id="motion" data-screen-label="04 Motion">
|
||||
<div class="section-head">
|
||||
<div class="num">04 — Motion</div>
|
||||
<h2>__EASING_HEADLINE__</h2>
|
||||
<p class="lede">__EASING_LEDE__</p>
|
||||
<div class="num">iv — Motion</div>
|
||||
<h2>Smooth.<br/><em>Unhurried.</em></h2>
|
||||
<p class="lede">Motion is slow and inevitable. Long durations, gentle eases. Like a curtain drawn back.</p>
|
||||
</div>
|
||||
<div class="two-col">
|
||||
<div class="panel">
|
||||
<div class="label-row">// easing</div>
|
||||
<h4>__EASING_NAME__</h4>
|
||||
<p>__EASING_DESC__</p>
|
||||
<pre>__EASING_VALUE__</pre>
|
||||
<span class="label-row">// easing</span>
|
||||
<h4><em>quintic.out</em></h4>
|
||||
<p>Default. Long tail, soft landing. Use for entrances of headlines and major chrome.</p>
|
||||
<pre>cubic-bezier(0.22, 1, 0.36, 1)</pre>
|
||||
</div>
|
||||
<div class="panel">
|
||||
<div class="label-row">// duration</div>
|
||||
<h4>__DURATION_DEFAULT__</h4>
|
||||
<p>__DURATION_DESC__</p>
|
||||
<pre>__DURATION_VALUES__</pre>
|
||||
<span class="label-row">// duration</span>
|
||||
<h4><em>1.4s</em></h4>
|
||||
<p>Slides resolve in 1.4 seconds. Headlines enter in 0.8. Hovers in 0.4. Patience as a style.</p>
|
||||
<pre>--dur-slide: 1.4s
|
||||
--dur-enter: 0.8s
|
||||
--dur-hover: 0.4s</pre>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="background">
|
||||
<section id="guidelines" data-screen-label="05 Guidelines">
|
||||
<div class="section-head">
|
||||
<div class="num">05 — Background</div>
|
||||
<h2>__BG_HEADLINE__</h2>
|
||||
<p class="lede">__BG_LEDE__</p>
|
||||
</div>
|
||||
<div class="two-col">
|
||||
<div class="bg-preview"><canvas id="bg-preview-canvas"></canvas><span class="badge">// __BG_BADGE__</span></div>
|
||||
<div style="display:flex;flex-direction:column;gap:8px">
|
||||
<ul class="tokens" style="border-top:none">
|
||||
<li><span class="name">Geometry</span><span class="val">__BG_TYPE__</span><span class="bar" style="width:36px"></span></li>
|
||||
<li><span class="name">Density</span><span class="val">__BG_DENSITY__</span><span class="bar" style="width:42px"></span></li>
|
||||
<li><span class="name">Speed</span><span class="val">__BG_SPEED__</span><span class="bar" style="width:18px"></span></li>
|
||||
<li><span class="name">Strength</span><span class="val">__BG_STRENGTH__</span><span class="bar" style="width:52px"></span></li>
|
||||
<li><span class="name">Grain</span><span class="val">__BG_GRAIN__</span><span class="bar" style="width:24px"></span></li>
|
||||
</ul>
|
||||
<details class="code-block"><summary>// shader config</summary>
|
||||
<pre>__SHADER_CONFIG__</pre>
|
||||
</details>
|
||||
<details class="code-block"><summary>// vertex shader</summary>
|
||||
<pre id="vtx-src">__SHADER_VERTEX__</pre>
|
||||
</details>
|
||||
<details class="code-block"><summary>// fragment shader</summary>
|
||||
<pre id="frg-src">__SHADER_FRAGMENT__</pre>
|
||||
</details>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="guidelines">
|
||||
<div class="section-head">
|
||||
<div class="num">06 — Guidelines</div>
|
||||
<h2>do and don’t.</h2>
|
||||
<div class="num">v — Guidelines</div>
|
||||
<h2><em>Sic et</em><br/>non.</h2>
|
||||
<p class="lede">The rules are short. The system breaks the moment any are violated.</p>
|
||||
</div>
|
||||
<div class="rules-grid">
|
||||
<div class="rules-col do"><h3>do.</h3><ul>__DOS__</ul></div>
|
||||
<div class="rules-col dont"><h3>don't.</h3><ul>__DONTS__</ul></div>
|
||||
<div class="rules-col do">
|
||||
<h3><em>sic.</em></h3>
|
||||
<ul>
|
||||
<li>Use hot pink for one element per slide — the thing remembered.</li>
|
||||
<li>Set every headline in italic Instrument Serif.</li>
|
||||
<li>Keep body type lowercase and 300 weight.</li>
|
||||
<li>Run all chrome in JetBrains Mono — labels, metadata, page numbers.</li>
|
||||
<li>Tint neutrals warm; never cool grey.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="rules-col dont">
|
||||
<h3><em>non.</em></h3>
|
||||
<ul>
|
||||
<li>Introduce a second accent. Pink is the only voice.</li>
|
||||
<li>Use sans-serif for headlines — italics carry the page.</li>
|
||||
<li>Apply shadows or gradients. Surfaces stay flat.</li>
|
||||
<li>Use uppercase for body. Emphasis is italic.</li>
|
||||
<li>Crowd the margin. Density is daylight.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="templates" class="templates-wrap">
|
||||
<section id="templates" class="templates-wrap" data-screen-label="06 Templates">
|
||||
<div class="section-head">
|
||||
<div class="num">07 — Templates</div>
|
||||
<h2>__SLIDE_COUNT_WORD__<br/>frames.</h2>
|
||||
<div class="num">vi — Templates</div>
|
||||
<h2>Nine<br/><em>tables.</em></h2>
|
||||
<p class="lede">The full library at 1920×1080. Each thumbnail is the live slide, scaled.</p>
|
||||
</div>
|
||||
<div class="templates-grid" id="templates-grid"></div>
|
||||
</section>
|
||||
|
||||
<template id="tmpl-source">
|
||||
__SLIDE_CARDS__
|
||||
|
||||
<div class="tmpl" data-idx="01"><div class="tmpl-thumb"><div class="scale-wrap"><div class="ds-slide-frame">
|
||||
<section class="slide slide--cover"><div class="cover-top"><span>{{label}}</span><span class="accent">{{label}}</span></div><div class="cover-body"><h1 class="display">{{headline}}</h1><p class="lead">{{body}}</p></div></section>
|
||||
</div></div></div><div class="tmpl-foot"><span class="name">cover</span><span class="idx">i / ix</span></div></div>
|
||||
|
||||
<div class="tmpl" data-idx="02"><div class="tmpl-thumb"><div class="scale-wrap"><div class="ds-slide-frame">
|
||||
<section class="slide slide--chapter"><div class="chap-num">{{label}}</div><div class="chap-rule"></div><h2 class="h1">{{headline}}</h2><p class="lead">{{body}}</p></section>
|
||||
</div></div></div><div class="tmpl-foot"><span class="name">chapter</span><span class="idx">ii / ix</span></div></div>
|
||||
|
||||
<div class="tmpl" data-idx="03"><div class="tmpl-thumb"><div class="scale-wrap"><div class="ds-slide-frame">
|
||||
<section class="slide slide--statement"><header class="slide-chrome"><span>{{label}}</span><span class="accent">{{label}}</span></header><div class="stmt-body"><span class="stmt-kicker">{{label}}</span><h2 class="h1">{{headline}}</h2><p class="lead">{{body}}</p></div><footer class="slide-foot"><span>{{label}}</span><span>{{number}}</span></footer></section>
|
||||
</div></div></div><div class="tmpl-foot"><span class="name">statement</span><span class="idx">iii / ix</span></div></div>
|
||||
|
||||
<div class="tmpl" data-idx="04"><div class="tmpl-thumb"><div class="scale-wrap"><div class="ds-slide-frame">
|
||||
<section class="slide slide--quote"><div class="quote-mark">"</div><div class="quote-text">{{body}}</div><div class="quote-attr"><span class="nm">— {{text}}</span><span class="src">{{label}}</span></div></section>
|
||||
</div></div></div><div class="tmpl-foot"><span class="name">quote</span><span class="idx">iv / ix</span></div></div>
|
||||
|
||||
<div class="tmpl" data-idx="05"><div class="tmpl-thumb"><div class="scale-wrap"><div class="ds-slide-frame">
|
||||
<section class="slide slide--split"><header class="slide-chrome"><span>{{label}}</span><span class="accent">{{label}}</span></header><div class="slide-body"><div class="split-text"><span class="label">{{label}}</span><h2 class="h2"><em>{{headline}}</em></h2><p class="body">{{body}}</p></div><div class="split-plate">{{text}}</div></div><footer class="slide-foot"><span>{{label}}</span><span>{{number}}</span></footer></section>
|
||||
</div></div></div><div class="tmpl-foot"><span class="name">split</span><span class="idx">v / ix</span></div></div>
|
||||
|
||||
<div class="tmpl" data-idx="06"><div class="tmpl-thumb"><div class="scale-wrap"><div class="ds-slide-frame">
|
||||
<section class="slide slide--stats"><header class="slide-chrome"><span>{{label}}</span><span class="accent">{{label}}</span></header><div class="slide-body"><h2 class="h2"><em>{{headline}}</em></h2><div class="stats-grid"><div class="stat-card"><div class="v">{{number}}</div><div class="l">{{body}}</div><div class="n">{{label}}</div></div><div class="stat-card"><div class="v">{{number}}</div><div class="l">{{body}}</div><div class="n">{{label}}</div></div><div class="stat-card"><div class="v">{{number}}</div><div class="l">{{body}}</div><div class="n">{{label}}</div></div></div></div><footer class="slide-foot"><span>{{label}}</span><span>{{number}}</span></footer></section>
|
||||
</div></div></div><div class="tmpl-foot"><span class="name">stats</span><span class="idx">vi / ix</span></div></div>
|
||||
|
||||
<div class="tmpl" data-idx="07"><div class="tmpl-thumb"><div class="scale-wrap"><div class="ds-slide-frame">
|
||||
<section class="slide slide--list"><header class="slide-chrome"><span>{{label}}</span><span class="accent">{{label}}</span></header><div class="slide-body"><div class="list-head"><span class="label">{{label}}</span><h3 class="h3">{{headline}}</h3><p class="body muted">{{body}}</p></div><ul class="list-items"><li><div><span class="it-h">{{headline}}</span><span class="it-d">{{body}}</span></div></li><li><div><span class="it-h">{{headline}}</span><span class="it-d">{{body}}</span></div></li><li><div><span class="it-h">{{headline}}</span><span class="it-d">{{body}}</span></div></li><li><div><span class="it-h">{{headline}}</span><span class="it-d">{{body}}</span></div></li></ul></div><footer class="slide-foot"><span>{{label}}</span><span>{{number}}</span></footer></section>
|
||||
</div></div></div><div class="tmpl-foot"><span class="name">list</span><span class="idx">vii / ix</span></div></div>
|
||||
|
||||
<div class="tmpl" data-idx="08"><div class="tmpl-thumb"><div class="scale-wrap"><div class="ds-slide-frame">
|
||||
<section class="slide slide--split"><header class="slide-chrome"><span>{{label}}</span><span class="accent">{{label}}</span></header><div class="slide-body"><div class="split-plate">{{text}}</div><div class="split-text"><span class="label">{{label}}</span><h2 class="h2"><em>{{headline}}</em></h2><p class="body">{{body}}</p></div></div><footer class="slide-foot"><span>{{label}}</span><span>{{number}}</span></footer></section>
|
||||
</div></div></div><div class="tmpl-foot"><span class="name">portrait</span><span class="idx">viii / ix</span></div></div>
|
||||
|
||||
<div class="tmpl" data-idx="09"><div class="tmpl-thumb"><div class="scale-wrap"><div class="ds-slide-frame">
|
||||
<section class="slide slide--end"><div class="end-mark">{{text}}</div><p class="lead">{{body}}</p><div class="end-meta"><span><b>{{label}}</b></span><span>{{label}}</span><span>{{label}}</span></div></section>
|
||||
</div></div></div><div class="tmpl-foot"><span class="name">end</span><span class="idx">ix / ix</span></div></div>
|
||||
|
||||
</template>
|
||||
|
||||
<footer class="endcap">
|
||||
<h2 class="endmark">end.</h2>
|
||||
<footer class="endcap" data-screen-label="07 End">
|
||||
<h2 class="endmark"><em>fin.</em></h2>
|
||||
<div class="meta">
|
||||
<div><b>__NAME__</b> · v1</div>
|
||||
<div>system-ui / monospace</div>
|
||||
<div>__DATE__</div>
|
||||
<div><b>Pink Script</b> · after hours</div>
|
||||
<div>Instrument Serif / Inter</div>
|
||||
<div>Compiled May 2026</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
@@ -312,7 +439,5 @@ __SLIDE_CARDS__
|
||||
})();
|
||||
</script>
|
||||
|
||||
__SHADER_SCRIPT__
|
||||
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
||||
@@ -5,301 +5,425 @@
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
||||
<title>__NAME__ — Design System</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link href="https://fonts.googleapis.com/css2?__FONT_LINK_EXTRA__&display=swap" rel="stylesheet" />
|
||||
<script type="importmap">
|
||||
{"imports":{"three":"https://cdn.jsdelivr.net/npm/three@0.167.0/build/three.module.js","three/addons/":"https://cdn.jsdelivr.net/npm/three@0.167.0/examples/jsm/"}}
|
||||
</script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />
|
||||
|
||||
<style id="ds-tokens">
|
||||
:root{
|
||||
--primary:__PRIMARY__; --secondary:__SECONDARY__; --tertiary:__TERTIARY__; --accent:__ACCENT__;
|
||||
--hairline:color-mix(in srgb,var(--primary) 12%,transparent);
|
||||
--f-disp:"system-ui",sans-serif; --f-mono:"monospace",monospace;
|
||||
--pad-x:clamp(24px,5vw,88px); --pad-y:clamp(40px,6vh,100px);
|
||||
--sage:#9BAA8F; --blush:#D9A6A6; --lemon:#E8C76B;
|
||||
--ink-dim:color-mix(in srgb,var(--secondary) 65%,var(--primary));
|
||||
--ink-fade:color-mix(in srgb,var(--secondary) 35%,var(--primary));
|
||||
--hairline:color-mix(in srgb,var(--secondary) 14%,transparent);
|
||||
--f-disp:"Cormorant Garamond",serif;
|
||||
--f-body:"Cormorant Garamond",serif;
|
||||
--f-sans:"Inter",sans-serif;
|
||||
--f-mono:"JetBrains Mono",monospace;
|
||||
--pad-x:clamp(28px,6vw,108px); --pad-y:clamp(48px,7vh,120px);
|
||||
}
|
||||
</style>
|
||||
|
||||
<style>
|
||||
*,*::before,*::after{box-sizing:border-box}
|
||||
html,body{margin:0;padding:0;background:var(--secondary)}
|
||||
body{color:var(--primary);font:400 14px/1.6 "monospace",monospace;-webkit-font-smoothing:antialiased;overflow-x:hidden}
|
||||
::selection{background:var(--accent);color:var(--secondary)}
|
||||
html,body{margin:0;padding:0;background:var(--primary)}
|
||||
body{color:var(--secondary);font:400 15px/1.7 var(--f-body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
|
||||
::selection{background:var(--blush);color:var(--secondary)}
|
||||
|
||||
#design-bg{position:fixed;inset:0;width:100%;height:100%;z-index:-2;opacity:.85;pointer-events:none}
|
||||
#bg-veil{position:fixed;inset:0;z-index:-1;pointer-events:none;background:none}
|
||||
|
||||
.rail{position:fixed;top:0;left:0;right:0;height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 var(--pad-x);background:var(--primary);border-bottom:1px solid rgba(128,128,128,.15);z-index:100;font:500 12px/1 "monospace",monospace;letter-spacing:.06em;text-transform:uppercase}
|
||||
.rail .brand{color:var(--accent);display:inline-flex;align-items:center;gap:10px;font:400 22px/1 "system-ui",sans-serif}
|
||||
.rail .brand .dot{width:22px;height:22px;background:var(--accent);}
|
||||
.rail nav{display:flex;gap:6px}
|
||||
.rail nav a{color:var(--secondary);text-decoration:none;transition:all .15s}
|
||||
.rail nav a:hover{color:var(--accent)}
|
||||
@media(max-width:880px){.rail nav{display:none}}
|
||||
.rail{position:fixed;top:0;left:0;right:0;height:48px;display:flex;align-items:center;justify-content:space-between;padding:0 var(--pad-x);background:color-mix(in srgb,var(--primary) 86%,transparent);backdrop-filter:blur(14px);border-bottom:1px solid var(--hairline);z-index:100;font:500 11px/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-fade)}
|
||||
.rail .brand{display:inline-flex;align-items:center;gap:14px;color:var(--secondary)}
|
||||
.rail .brand b{font-family:var(--f-disp);font-style:italic;font-weight:500;letter-spacing:0;text-transform:none;font-size:22px;color:var(--secondary)}
|
||||
.rail .brand .dot{width:8px;height:8px;background:var(--blush);border-radius:50%;display:inline-block}
|
||||
.rail nav{display:flex;gap:28px}
|
||||
.rail nav a{color:var(--ink-fade);text-decoration:none;transition:color .2s}
|
||||
.rail nav a:hover{color:var(--secondary)}
|
||||
.rail .time{font-family:var(--f-disp);font-style:italic;font-size:14px;letter-spacing:.02em;text-transform:none;color:var(--ink-fade)}
|
||||
@media(max-width:760px){.rail nav{display:none}}
|
||||
|
||||
section{position:relative;padding:var(--pad-y) var(--pad-x)}
|
||||
.section-head{display:grid;grid-template-columns:9em 1fr;gap:clamp(24px,4vw,56px);align-items:baseline;border-top:1px solid rgba(128,128,128,.15);padding-top:28px;margin-bottom:clamp(36px,5vh,64px)}
|
||||
.section-head .num{font:500 12px/1 "monospace",monospace;letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}
|
||||
.section-head h2{font:900 clamp(36px,6vw,84px)/.92 "system-ui",sans-serif;letter-spacing:-.035em;margin:0;text-transform:lowercase}
|
||||
.section-head .lede{grid-column:2;max-width:60ch;margin-top:18px;font-size:15px;line-height:1.6}
|
||||
.section-head{display:grid;grid-template-columns:11em 1fr;gap:clamp(24px,4vw,64px);align-items:baseline;border-top:1px solid var(--hairline);padding-top:36px;margin-bottom:clamp(48px,7vh,96px)}
|
||||
.section-head .num{font:500 11px/1 var(--f-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--sage)}
|
||||
.section-head h2{font:italic 500 clamp(48px,8vw,112px)/.95 var(--f-disp);letter-spacing:-.005em;margin:0;color:var(--secondary)}
|
||||
.section-head h2 em{font-style:normal;color:var(--blush)}
|
||||
.section-head .lede{grid-column:2;max-width:54ch;margin-top:24px;font:400 18px/1.7 var(--f-body);font-style:italic;color:var(--ink-dim)}
|
||||
|
||||
.cover{background:var(--primary);color:var(--secondary)};min-height:100vh;padding:110px var(--pad-x) 60px;display:flex;flex-direction:column;justify-content:center}
|
||||
.cover-headline{margin:0;font:900 clamp(64px,13vw,200px)/.88 "system-ui",sans-serif;letter-spacing:-.04em;text-transform:uppercase}
|
||||
.cover-foot{margin-top:56px;padding-top:28px;border-top:1px solid rgba(128,128,128,.15);display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
|
||||
.cover-foot .cell{display:flex;flex-direction:column;gap:6px}
|
||||
.cover-foot .k{font:500 11px/1 "monospace",monospace;letter-spacing:.1em;text-transform:uppercase;opacity:.55}
|
||||
.cover-foot .v{font:500 13px/1.4 "monospace",monospace}
|
||||
.cover-foot .v.big{font:800 32px/1 "system-ui",sans-serif;letter-spacing:-.02em}
|
||||
/* Cover */
|
||||
.cover{min-height:100vh;padding:96px var(--pad-x) 56px;display:grid;grid-template-rows:auto 1fr auto;position:relative}
|
||||
.cover-chrome{display:flex;justify-content:space-between;font:500 11px/1 var(--f-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-fade)}
|
||||
.cover-chrome .accent{color:var(--blush)}
|
||||
.cover-headline{align-self:end;margin:0;font:italic 500 clamp(72px,16vw,260px)/.92 var(--f-disp);letter-spacing:-.02em;color:var(--secondary)}
|
||||
.cover-headline em{font-style:normal;color:var(--blush)}
|
||||
.cover-foot{margin-top:56px;display:grid;grid-template-columns:repeat(4,1fr);gap:32px;padding-top:24px;border-top:1px solid var(--hairline)}
|
||||
.cover-foot .cell{display:flex;flex-direction:column;gap:8px}
|
||||
.cover-foot .k{font:500 10px/1.4 var(--f-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-fade)}
|
||||
.cover-foot .v{font:italic 500 22px/1.2 var(--f-disp);color:var(--secondary)}
|
||||
.cover-foot .v em{font-style:normal;color:var(--blush)}
|
||||
.cover-foot .v.plain{font-family:var(--f-sans);font-style:normal;font-weight:500;font-size:14px;color:var(--secondary)}
|
||||
@media(max-width:760px){.cover-foot{grid-template-columns:1fr 1fr}}
|
||||
|
||||
.manifesto{padding:clamp(60px,9vh,120px) var(--pad-x);border-bottom:1px solid rgba(128,128,128,.15)}
|
||||
.manifesto-grid{display:grid;grid-template-columns:9em 1fr;gap:clamp(24px,4vw,56px);align-items:start;max-width:1400px;margin:0 auto}
|
||||
.manifesto-grid .num{font:500 12px/1 "monospace",monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
|
||||
.manifesto p{font:700 clamp(28px,3.8vw,56px)/1.05 "system-ui",sans-serif;letter-spacing:-.025em;max-width:22ch;margin:0;text-transform:lowercase}
|
||||
.manifesto p em{font-style:normal;color:var(--accent)}
|
||||
/* Manifesto */
|
||||
.manifesto{padding:clamp(60px,10vh,140px) var(--pad-x);border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);background:color-mix(in srgb,var(--blush) 18%,var(--primary))}
|
||||
.manifesto-grid{display:grid;grid-template-columns:11em 1fr;gap:clamp(24px,4vw,64px);align-items:start}
|
||||
.manifesto-grid .num{font:500 11px/1 var(--f-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--secondary)}
|
||||
.manifesto p{font:italic 500 clamp(28px,3.6vw,52px)/1.25 var(--f-disp);max-width:30ch;margin:0;color:var(--secondary)}
|
||||
.manifesto p em{font-style:normal;color:var(--sage)}
|
||||
.manifesto p strong{font-weight:500;font-style:normal;color:var(--lemon)}
|
||||
|
||||
.palette{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:rgba(128,128,128,.1);border:1px solid rgba(128,128,128,.15)}
|
||||
.swatch{padding:28px 24px;aspect-ratio:3/4;display:flex;flex-direction:column;justify-content:space-between;border-radius:0;transition:all .2s}
|
||||
.swatch:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,0,0,.15)}
|
||||
.swatch .role{font:500 11px/1 "monospace",monospace;letter-spacing:.1em;text-transform:uppercase}
|
||||
.swatch .name{font:900 clamp(28px,3.4vw,48px)/.92 "system-ui",sans-serif;letter-spacing:-.025em;text-transform:lowercase;margin-top:auto}
|
||||
.swatch .hex{font:500 12px/1 "monospace",monospace;margin-top:8px}
|
||||
.swatch .usage{font:400 11px/1.5 "monospace",monospace;margin-top:6px;opacity:.65}
|
||||
.swatch--primary{background:var(--primary);color:var(--secondary)}
|
||||
.swatch--secondary{background:var(--secondary);color:var(--primary)}
|
||||
.swatch--tertiary{background:var(--tertiary);color:var(--primary)}
|
||||
.swatch--accent{background:var(--accent);color:var(--secondary)}
|
||||
/* Palette */
|
||||
.palette{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--hairline);border:1px solid var(--hairline)}
|
||||
.swatch{aspect-ratio:3/4;padding:32px 28px;display:flex;flex-direction:column;justify-content:space-between;transition:transform .4s cubic-bezier(.16,1,.3,1)}
|
||||
.swatch:hover{transform:translateY(-4px)}
|
||||
.swatch .role{font:500 11px/1 var(--f-mono);letter-spacing:.2em;text-transform:uppercase}
|
||||
.swatch .name{font:italic 500 clamp(28px,3.6vw,52px)/1 var(--f-disp);letter-spacing:-.005em;margin-top:auto}
|
||||
.swatch .hex{font:500 12px/1 var(--f-mono);letter-spacing:.06em;margin-top:10px}
|
||||
.swatch .usage{font:400 13px/1.55 var(--f-body);font-style:italic;margin-top:6px;opacity:.75;max-width:22ch}
|
||||
.swatch--paper{background:var(--primary);color:var(--secondary)}
|
||||
.swatch--paper .role{color:var(--ink-fade)}
|
||||
.swatch--ink{background:var(--secondary);color:var(--primary)}
|
||||
.swatch--sage{background:var(--sage);color:var(--secondary)}
|
||||
.swatch--blush{background:var(--blush);color:var(--secondary)}
|
||||
@media(max-width:880px){.palette{grid-template-columns:repeat(2,1fr)}}
|
||||
|
||||
.specimen{max-width:1400px;margin:0 auto;display:flex;flex-direction:column}
|
||||
.spec-row{display:grid;grid-template-columns:11em 1fr;gap:32px;padding:28px 0;border-top:1px solid rgba(128,128,128,.15);align-items:baseline}
|
||||
/* Type specimen */
|
||||
.specimen{display:flex;flex-direction:column}
|
||||
.spec-row{display:grid;grid-template-columns:12em 1fr;gap:36px;padding:32px 0;border-top:1px solid var(--hairline);align-items:baseline}
|
||||
.spec-row:first-child{border:0;padding-top:0}
|
||||
.spec-row .meta{font:500 11px/1.4 "monospace",monospace;letter-spacing:.1em;text-transform:uppercase;display:flex;flex-direction:column;gap:4px;color:var(--primary);opacity:.4}
|
||||
.spec-row .meta b{color:var(--accent);font:400 22px/1 "system-ui",sans-serif}
|
||||
.spec-display{font:900 clamp(56px,10vw,152px)/.88 "system-ui",sans-serif;letter-spacing:-.04em;text-transform:lowercase}
|
||||
.spec-h1{font:800 clamp(40px,7vw,104px)/.9 "system-ui",sans-serif;letter-spacing:-.03em;text-transform:lowercase}
|
||||
.spec-h2{font:700 clamp(28px,4.2vw,64px)/1 "system-ui",sans-serif;letter-spacing:-.02em}
|
||||
.spec-lead{font:500 clamp(18px,2vw,26px)/1.45 "system-ui",sans-serif}
|
||||
.spec-body{font:400 17px/1.65 "system-ui",sans-serif;max-width:60ch}
|
||||
.spec-label{font:500 13px/1 "monospace",monospace;letter-spacing:.1em;text-transform:uppercase}
|
||||
.spec-row .meta{font:500 11px/1.5 var(--f-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-fade);display:flex;flex-direction:column;gap:6px}
|
||||
.spec-row .meta b{color:var(--blush);font-weight:500;font-family:var(--f-disp);font-style:italic;font-size:18px;letter-spacing:0;text-transform:none}
|
||||
.spec-display{font:italic 500 clamp(64px,11vw,152px)/.92 var(--f-disp);letter-spacing:-.015em;color:var(--secondary)}
|
||||
.spec-display em{font-style:normal;color:var(--blush)}
|
||||
.spec-h1{font:italic 500 clamp(44px,7vw,96px)/.95 var(--f-disp);color:var(--secondary)}
|
||||
.spec-h2{font:italic 500 clamp(28px,4vw,56px)/1.1 var(--f-disp);color:var(--sage)}
|
||||
.spec-lead{font:italic 400 clamp(20px,2.2vw,28px)/1.45 var(--f-disp);color:var(--secondary);max-width:38ch}
|
||||
.spec-body{font:400 16px/1.75 var(--f-body);color:var(--secondary);max-width:62ch}
|
||||
.spec-body .drop{float:left;font:italic 500 72px/.85 var(--f-disp);padding:6px 12px 0 0;color:var(--blush)}
|
||||
.spec-label{font:500 12px/1 var(--f-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--sage)}
|
||||
|
||||
.surface-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:48px;max-width:1400px;margin:0 auto}
|
||||
/* Surface */
|
||||
.surface-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:56px}
|
||||
@media(max-width:880px){.surface-grid{grid-template-columns:1fr}}
|
||||
.demo-card{background:var(--primary);color:var(--secondary);border-radius:0;padding:28px;box-shadow:0 4px 16px rgba(0,0,0,.12);display:flex;flex-direction:column;gap:18px}
|
||||
.demo-card .tag{align-self:flex-start;font:500 10px/1 "monospace",monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);border:1px solid var(--accent);padding:4px 8px}
|
||||
.demo-card h3{margin:0;font:900 36px/1 "system-ui",sans-serif;letter-spacing:-.02em;text-transform:lowercase}
|
||||
.demo-card p{margin:0;font:400 15px/1.6 "system-ui",sans-serif;opacity:.7}
|
||||
.tokens{list-style:none;padding:0;margin:0;border-top:1px solid rgba(128,128,128,.15)}
|
||||
.tokens li{display:grid;grid-template-columns:1fr auto auto;gap:18px;align-items:center;padding:18px 0;border-bottom:1px solid rgba(128,128,128,.15)}
|
||||
.tokens li:last-child{border:0}
|
||||
.tokens .name{font:500 12px/1 "monospace",monospace;letter-spacing:.1em;text-transform:uppercase;opacity:.6}
|
||||
.tokens .val{font:800 20px/1 "system-ui",sans-serif}
|
||||
.tokens .bar{height:6px;background:var(--accent)}
|
||||
.demo-card{background:#fff;color:var(--secondary);padding:36px 40px;display:flex;flex-direction:column;gap:18px;border:1px solid var(--hairline);box-shadow:0 1px 0 var(--hairline)}
|
||||
.demo-card .tag{align-self:flex-start;font:500 10px/1 var(--f-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--sage);padding:6px 0;border-top:1px solid var(--sage);border-bottom:1px solid var(--sage)}
|
||||
.demo-card h3{margin:0;font:italic 500 40px/1 var(--f-disp);letter-spacing:-.005em;color:var(--secondary)}
|
||||
.demo-card p{margin:0;font:400 14px/1.75 var(--f-body);color:var(--ink-dim)}
|
||||
.demo-card .num-stat{font:italic 500 80px/1 var(--f-disp);color:var(--blush);letter-spacing:-.01em}
|
||||
.tokens{list-style:none;padding:0;margin:0;border-top:1px solid var(--hairline)}
|
||||
.tokens li{display:grid;grid-template-columns:1fr auto auto;gap:24px;align-items:center;padding:20px 0;border-bottom:1px solid var(--hairline)}
|
||||
.tokens .name{font:500 11px/1 var(--f-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-dim)}
|
||||
.tokens .val{font:italic 500 22px/1 var(--f-disp);color:var(--secondary)}
|
||||
.tokens .bar{height:1px;background:var(--blush)}
|
||||
|
||||
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:48px;max-width:1400px;margin:0 auto}
|
||||
/* Motion */
|
||||
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:48px}
|
||||
@media(max-width:880px){.two-col{grid-template-columns:1fr}}
|
||||
.panel{border:1px solid rgba(128,128,128,.15);background:color-mix(in srgb,var(--secondary) 70%,transparent)};padding:36px;border-radius:0;display:flex;flex-direction:column;gap:22px}
|
||||
.panel .label-row{font:500 11px/1 "monospace",monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
|
||||
.panel h4{margin:0;font:800 32px/1 "system-ui",sans-serif;text-transform:lowercase}
|
||||
.panel p{margin:0;font:400 13px/1.7 "system-ui",sans-serif;opacity:.65;max-width:38ch}
|
||||
.panel{border:1px solid var(--hairline);padding:40px;display:flex;flex-direction:column;gap:22px;background:#fff}
|
||||
.panel h4{margin:0;font:italic 500 36px/1 var(--f-disp);color:var(--secondary)}
|
||||
.panel .label-row{font:500 11px/1 var(--f-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--sage)}
|
||||
.panel p{margin:0;font:400 14px/1.75 var(--f-body);color:var(--ink-dim);max-width:38ch}
|
||||
.panel pre{margin:0;padding:14px 18px;border:1px solid var(--hairline);background:color-mix(in srgb,var(--lemon) 15%,#fff);font:400 12px/1.6 var(--f-mono);color:var(--secondary);overflow-x:auto}
|
||||
|
||||
.bg-preview{border:1px solid rgba(128,128,128,.15);aspect-ratio:4/3;position:relative;overflow:hidden;background:var(--secondary);border-radius:0}
|
||||
.bg-preview canvas{width:100%;height:100%;display:block}
|
||||
.bg-preview .badge{position:absolute;bottom:12px;left:12px;font:500 10px/1 "monospace",monospace;letter-spacing:.1em;text-transform:uppercase;background:color-mix(in srgb,var(--secondary) 75%,transparent);padding:6px 10px;backdrop-filter:blur(8px)}
|
||||
|
||||
details.code-block{border:1px solid rgba(128,128,128,.15);background:color-mix(in srgb,var(--secondary) 60%,transparent)};margin-top:12px;border-radius:0}
|
||||
details.code-block summary{cursor:pointer;padding:14px 18px;list-style:none;font:500 11px/1 "monospace",monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);display:flex;justify-content:space-between}
|
||||
details.code-block summary::-webkit-details-marker{display:none}
|
||||
details.code-block summary::after{content:"+";font:900 18px/1 "system-ui",sans-serif;color:var(--accent)}
|
||||
details.code-block[open] summary::after{content:"\2212"}
|
||||
details.code-block pre{margin:0;padding:16px;border-top:1px solid rgba(128,128,128,.15);font:11px/1.6 "monospace",monospace;color:var(--primary);opacity:.65;background:transparent;overflow-x:auto;white-space:pre-wrap;word-break:break-word;max-height:320px;overflow-y:auto}
|
||||
|
||||
.rules-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;max-width:1400px;margin:0 auto}
|
||||
/* Guidelines */
|
||||
.rules-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px}
|
||||
@media(max-width:880px){.rules-grid{grid-template-columns:1fr}}
|
||||
.rules-col{}
|
||||
.rules-col.do{}
|
||||
.rules-col.dont{}
|
||||
.rules-col h3{font:900 56px/1 "system-ui",sans-serif;letter-spacing:-.03em;margin:0 0 28px;text-transform:lowercase}
|
||||
.rules-col.do h3{color:var(--accent)}
|
||||
.rules-col.dont h3{opacity:.4}
|
||||
.rules-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0px}
|
||||
.rules-col li{display:grid;grid-template-columns:2em 1fr;gap:8px;padding:16px 0;border-top:1px solid rgba(128,128,128,.15);font:500 18px/1.45 "system-ui",sans-serif}
|
||||
.rules-col li::before{font:800 22px/1.2 "system-ui",sans-serif;align-self:start;}
|
||||
.rules-col.do li::before{content:"+";color:var(--accent)}
|
||||
.rules-col.dont li::before{content:"\2014";opacity:.4}
|
||||
.rules-col h3{font:italic 500 60px/1 var(--f-disp);margin:0 0 28px;letter-spacing:-.005em}
|
||||
.rules-col.do h3{color:var(--sage)}
|
||||
.rules-col.dont h3{color:var(--ink-fade)}
|
||||
.rules-col ul{list-style:none;margin:0;padding:0}
|
||||
.rules-col li{display:grid;grid-template-columns:2.2em 1fr;gap:12px;padding:18px 0;border-top:1px solid var(--hairline);font:400 16px/1.6 var(--f-body)}
|
||||
.rules-col li::before{font:italic 500 22px/1.2 var(--f-disp);align-self:start}
|
||||
.rules-col.do li::before{content:"❀";color:var(--blush);font-style:normal}
|
||||
.rules-col.dont li::before{content:"✕";color:var(--ink-fade);font-style:normal;font-size:18px}
|
||||
.rules-col.dont li{color:var(--ink-dim)}
|
||||
|
||||
.templates-wrap{background:color-mix(in srgb,var(--secondary) 96%,var(--accent))}
|
||||
.templates-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:1400px;margin:0 auto}
|
||||
/* Templates */
|
||||
.templates-wrap{border-top:1px solid var(--hairline);background:color-mix(in srgb,var(--sage) 8%,var(--primary))}
|
||||
.templates-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
|
||||
@media(max-width:1100px){.templates-grid{grid-template-columns:repeat(2,1fr)}}
|
||||
@media(max-width:720px){.templates-grid{grid-template-columns:1fr}}
|
||||
.tmpl{background:var(--secondary);border:1px solid rgba(128,128,128,.15);overflow:hidden;border-radius:0;transition:all .2s}
|
||||
.tmpl:hover{border-color:var(--accent);transform:translateY(-2px)}
|
||||
.tmpl-thumb{width:100%;aspect-ratio:16/9;overflow:hidden;position:relative;background:#050505;border-bottom:1px solid rgba(128,128,128,.15)}
|
||||
.tmpl{background:#fff;border:1px solid var(--hairline);overflow:hidden;transition:border-color .25s,transform .3s cubic-bezier(.16,1,.3,1)}
|
||||
.tmpl:hover{border-color:var(--blush);transform:translateY(-2px)}
|
||||
.tmpl-thumb{width:100%;aspect-ratio:16/9;overflow:hidden;position:relative;background:var(--primary)}
|
||||
.tmpl-thumb .scale-wrap{width:1920px;height:1080px;transform-origin:top left}
|
||||
.tmpl-foot{display:flex;justify-content:space-between;padding:14px 18px;font:500 11px/1 "monospace",monospace;letter-spacing:.14em;text-transform:uppercase}
|
||||
.tmpl-foot .idx{color:var(--accent)}
|
||||
.tmpl-foot{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-top:1px solid var(--hairline);font:500 11px/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase}
|
||||
.tmpl-foot .name{color:var(--secondary);font-family:var(--f-disp);font-style:italic;font-weight:500;font-size:18px;letter-spacing:0;text-transform:none}
|
||||
.tmpl-foot .idx{color:var(--blush)}
|
||||
|
||||
footer.endcap{background:var(--accent);color:var(--secondary);padding:80px var(--pad-x) 60px;display:grid;grid-template-columns:1fr auto;gap:48px;align-items:end}
|
||||
footer.endcap .endmark{font:900 clamp(60px,13vw,220px)/.85 "system-ui",sans-serif;letter-spacing:-.04em;text-transform:lowercase;margin:0}
|
||||
footer.endcap .meta{font:500 12px/2 "monospace",monospace;letter-spacing:.1em;text-transform:uppercase;opacity:.6;text-align:right}
|
||||
footer.endcap .meta b{opacity:1;color:var(--accent)}
|
||||
/* Endcap */
|
||||
footer.endcap{padding:96px var(--pad-x) 56px;border-top:1px solid var(--hairline);display:grid;grid-template-columns:1fr auto;gap:48px;align-items:end;background:color-mix(in srgb,var(--lemon) 18%,var(--primary))}
|
||||
footer.endcap .endmark{font:italic 500 clamp(60px,14vw,240px)/.85 var(--f-disp);letter-spacing:-.015em;margin:0;color:var(--secondary)}
|
||||
footer.endcap .endmark em{font-style:normal;color:var(--blush)}
|
||||
footer.endcap .meta{font:500 11px/2 var(--f-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-fade);text-align:right}
|
||||
footer.endcap .meta b{color:var(--secondary);font-family:var(--f-disp);font-style:italic;font-weight:500;letter-spacing:0;text-transform:none;font-size:14px}
|
||||
</style>
|
||||
|
||||
<style id="template-css">
|
||||
__TEMPLATE_CSS__
|
||||
.ds-slide-frame{
|
||||
--s-bg:#F3EFE3; --s-ink:#2A2A28;
|
||||
--s-sage:#9BAA8F; --s-blush:#D9A6A6; --s-lemon:#E8C76B;
|
||||
--s-ink-2:color-mix(in srgb,#2A2A28 65%,#F3EFE3);
|
||||
--s-ink-3:color-mix(in srgb,#2A2A28 35%,#F3EFE3);
|
||||
--s-line:color-mix(in srgb,#2A2A28 14%,transparent);
|
||||
--s-f-disp:"Cormorant Garamond",serif;
|
||||
--s-f-body:"Cormorant Garamond",serif;
|
||||
--s-f-sans:"Inter",sans-serif;
|
||||
--s-f-mono:"JetBrains Mono",monospace;
|
||||
width:1920px;height:1080px;position:relative;overflow:hidden
|
||||
}
|
||||
.ds-slide-frame *{box-sizing:border-box}
|
||||
.ds-slide-frame .slide{width:1920px;height:1080px;position:relative;padding:108px 156px;display:grid;grid-template-rows:auto 1fr auto;overflow:hidden;background:var(--s-bg);color:var(--s-ink);font-family:var(--s-f-body)}
|
||||
.ds-slide-frame .slide-chrome,.ds-slide-frame .slide-foot{display:flex;justify-content:space-between;align-items:center;font:500 16px/1 var(--s-f-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--s-ink-3)}
|
||||
.ds-slide-frame .slide-chrome{padding-bottom:20px;border-bottom:1px solid var(--s-line);margin-bottom:40px}
|
||||
.ds-slide-frame .slide-foot{padding-top:20px;border-top:1px solid var(--s-line);margin-top:40px}
|
||||
.ds-slide-frame .slide-chrome .accent,.ds-slide-frame .slide-foot .accent{color:var(--s-blush)}
|
||||
.ds-slide-frame .display{font:italic 500 240px/.92 var(--s-f-disp);letter-spacing:-.018em;color:var(--s-ink)}
|
||||
.ds-slide-frame .display em{font-style:normal;color:var(--s-blush)}
|
||||
.ds-slide-frame .h1{font:italic 500 144px/.95 var(--s-f-disp);letter-spacing:-.012em;color:var(--s-ink)}
|
||||
.ds-slide-frame .h1 em{font-style:normal;color:var(--s-blush)}
|
||||
.ds-slide-frame .h2{font:italic 500 92px/1.05 var(--s-f-disp);letter-spacing:-.005em;color:var(--s-ink)}
|
||||
.ds-slide-frame .h2 em{font-style:normal;color:var(--s-blush)}
|
||||
.ds-slide-frame .h3{font:italic 500 56px/1.15 var(--s-f-disp);color:var(--s-sage)}
|
||||
.ds-slide-frame .lead{font:italic 400 34px/1.45 var(--s-f-disp);color:var(--s-ink)}
|
||||
.ds-slide-frame .body{font:400 24px/1.7 var(--s-f-body);color:var(--s-ink)}
|
||||
.ds-slide-frame .label{font:500 16px/1 var(--s-f-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--s-sage)}
|
||||
.ds-slide-frame .accent{color:var(--s-blush)}
|
||||
.ds-slide-frame .muted{color:var(--s-ink-2)}
|
||||
|
||||
.ds-slide-frame .slide--cover .slide-chrome,.ds-slide-frame .slide--cover .slide-foot{display:none}
|
||||
.ds-slide-frame .slide--cover{display:flex;flex-direction:column;justify-content:flex-end}
|
||||
.ds-slide-frame .cover-top{display:flex;justify-content:space-between;align-items:flex-start;font:500 16px/1 var(--s-f-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--s-ink-3);margin-bottom:auto}
|
||||
.ds-slide-frame .cover-body{display:flex;flex-direction:column;gap:32px}
|
||||
.ds-slide-frame .cover-rule{width:120px;height:1px;background:var(--s-blush)}
|
||||
|
||||
.ds-slide-frame .slide--chapter .slide-chrome,.ds-slide-frame .slide--chapter .slide-foot{display:none}
|
||||
.ds-slide-frame .slide--chapter{display:flex;flex-direction:column;justify-content:center;gap:32px;padding:108px 220px;background:color-mix(in srgb,var(--s-blush) 20%,var(--s-bg))}
|
||||
.ds-slide-frame .chap-num{font:500 18px/1 var(--s-f-mono);letter-spacing:.22em;text-transform:uppercase;color:var(--s-blush)}
|
||||
|
||||
.ds-slide-frame .slide--epigraph .slide-chrome,.ds-slide-frame .slide--epigraph .slide-foot{display:none}
|
||||
.ds-slide-frame .slide--epigraph{display:flex;flex-direction:column;justify-content:center;padding:120px 240px;gap:48px}
|
||||
.ds-slide-frame .epigraph-mark{font:italic 500 240px/.5 var(--s-f-disp);color:var(--s-blush);height:120px}
|
||||
.ds-slide-frame .epigraph-text{font:italic 500 80px/1.18 var(--s-f-disp);letter-spacing:-.01em;color:var(--s-ink);max-width:88%}
|
||||
.ds-slide-frame .epigraph-attr{display:flex;flex-direction:column;gap:8px;padding-top:24px;border-top:1px solid var(--s-line);max-width:480px}
|
||||
.ds-slide-frame .epigraph-attr .nm{font:italic 500 30px/1 var(--s-f-disp);color:var(--s-sage)}
|
||||
.ds-slide-frame .epigraph-attr .src{font:500 16px/1 var(--s-f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--s-ink-3)}
|
||||
|
||||
.ds-slide-frame .slide--feature .slide-body{display:grid;grid-template-columns:1fr 2fr;gap:96px;align-items:start;padding-top:32px}
|
||||
.ds-slide-frame .feat-side{display:flex;flex-direction:column;gap:22px}
|
||||
.ds-slide-frame .feat-body{display:flex;flex-direction:column;gap:28px}
|
||||
.ds-slide-frame .feat-body .body{column-count:1}
|
||||
.ds-slide-frame .drop{float:left;font:italic 500 124px/.85 var(--s-f-disp);padding:6px 16px 0 0;color:var(--s-blush)}
|
||||
|
||||
.ds-slide-frame .slide--catalog .slide-body{display:grid;grid-template-columns:1fr 1.6fr;gap:96px;align-items:start;padding-top:32px}
|
||||
.ds-slide-frame .cat-list{list-style:none;padding:0;margin:0;counter-reset:idx}
|
||||
.ds-slide-frame .cat-list li{display:grid;grid-template-columns:3em 1fr;gap:24px;padding:28px 0;border-top:1px solid var(--s-line);counter-increment:idx;align-items:baseline}
|
||||
.ds-slide-frame .cat-list li::before{content:counter(idx,lower-roman);font:italic 500 30px/1 var(--s-f-disp);color:var(--s-blush)}
|
||||
.ds-slide-frame .cat-list .h{font:italic 500 38px/1.15 var(--s-f-disp);color:var(--s-ink);display:block;margin-bottom:6px}
|
||||
.ds-slide-frame .cat-list .d{font:400 22px/1.55 var(--s-f-body);color:var(--s-ink-2);display:block}
|
||||
|
||||
.ds-slide-frame .slide--stats .slide-body{display:flex;flex-direction:column;justify-content:center;gap:48px;padding-top:32px}
|
||||
.ds-slide-frame .stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:64px}
|
||||
.ds-slide-frame .stat-card{display:flex;flex-direction:column;gap:14px;padding-top:24px;border-top:1px solid var(--s-line)}
|
||||
.ds-slide-frame .stat-card .v{font:italic 500 144px/1 var(--s-f-disp);color:var(--s-blush);letter-spacing:-.02em}
|
||||
.ds-slide-frame .stat-card .l{font:400 26px/1.45 var(--s-f-body);color:var(--s-ink)}
|
||||
.ds-slide-frame .stat-card .n{font:500 14px/1 var(--s-f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--s-sage)}
|
||||
|
||||
.ds-slide-frame .slide--diptych .slide-body{display:grid;grid-template-columns:1fr 1fr;gap:88px;align-items:center;padding-top:32px}
|
||||
.ds-slide-frame .dip-plate{aspect-ratio:4/5;width:100%;border:1px solid var(--s-line);display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--s-bg) 70%,var(--s-sage));font:500 18px/1 var(--s-f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--s-ink-3);position:relative}
|
||||
.ds-slide-frame .dip-text{display:flex;flex-direction:column;gap:28px}
|
||||
.ds-slide-frame .plate-cap{font:500 14px/1.5 var(--s-f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--s-ink-3);margin-top:12px}
|
||||
|
||||
.ds-slide-frame .slide--end .slide-chrome,.ds-slide-frame .slide--end .slide-foot{display:none}
|
||||
.ds-slide-frame .slide--end{display:flex;flex-direction:column;justify-content:center;padding:120px 156px;gap:48px;background:color-mix(in srgb,var(--s-lemon) 22%,var(--s-bg))}
|
||||
.ds-slide-frame .end-mark{font:italic 500 240px/.9 var(--s-f-disp);letter-spacing:-.018em;color:var(--s-ink)}
|
||||
.ds-slide-frame .end-mark em{font-style:normal;color:var(--s-blush)}
|
||||
.ds-slide-frame .end-meta{display:flex;gap:48px;font:500 14px/1.5 var(--s-f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--s-ink-3);padding-top:24px;border-top:1px solid var(--s-line)}
|
||||
.ds-slide-frame .end-meta b{color:var(--s-sage);font-weight:500}
|
||||
__TEMPLATE_CSS_PLACEHOLDER__
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<canvas id="design-bg"></canvas>
|
||||
<div id="bg-veil"></div>
|
||||
|
||||
<div class="rail">
|
||||
<div class="brand"><span class="dot"></span>__NAME__</div>
|
||||
<nav><a href="#palette">01</a><a href="#type">02</a><a href="#surface">03</a><a href="#motion">04</a><a href="#background">05</a><a href="#guidelines">06</a><a href="#templates">07</a></nav>
|
||||
<div class="brand"><span class="dot"></span><b>Soft Editorial</b></div>
|
||||
<nav>
|
||||
<a href="#palette">i.</a><a href="#type">ii.</a><a href="#surface">iii.</a><a href="#motion">iv.</a><a href="#guidelines">v.</a><a href="#templates">vi.</a>
|
||||
</nav>
|
||||
<div class="time">spring · 2026</div>
|
||||
</div>
|
||||
|
||||
<header class="cover">
|
||||
<h1 class="cover-headline">__NAME_LINE1____NAME_LINE2__.</h1>
|
||||
<header class="cover" data-screen-label="00 Cover">
|
||||
<div class="cover-chrome">
|
||||
<div>Design System · № 006</div>
|
||||
<div class="accent">A Sunday supplement · 2026</div>
|
||||
</div>
|
||||
<h1 class="cover-headline">soft <em>editorial</em>.</h1>
|
||||
<div class="cover-foot">
|
||||
<div class="cell"><span class="k">Template</span><span class="v">soft-editorial</span></div>
|
||||
<div class="cell"><span class="k">Type</span><span class="v big">system-ui</span></div>
|
||||
<div class="cell"><span class="k">Accent</span><span class="v">__ACCENT_LABEL__</span></div>
|
||||
<div class="cell"><span class="k">Doc</span><span class="v">07 sections · __SLIDE_COUNT__ templates</span></div>
|
||||
<div class="cell"><span class="k">Discipline</span><span class="v">Magazine · Gallery · Long-form</span></div>
|
||||
<div class="cell"><span class="k">Display</span><span class="v">Cormorant <em>italic</em></span></div>
|
||||
<div class="cell"><span class="k">Accents</span><span class="v">Sage · Blush · Lemon</span></div>
|
||||
<div class="cell"><span class="k">Volume</span><span class="v plain">vi sections · vii slide types</span></div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section class="manifesto">
|
||||
<section class="manifesto" data-screen-label="00 Manifesto">
|
||||
<div class="manifesto-grid">
|
||||
<div class="num">— Manifesto</div>
|
||||
<p>Cormorant Garamond serif on warm paper with sage, blush, and lemon accents.</p>
|
||||
<div class="num">— Manifesto</div>
|
||||
<p>the page is <em>sunlight</em>. the type is <strong>unhurried</strong>. the colours are <em>seasons</em>, not signals.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="palette">
|
||||
<section id="palette" data-screen-label="01 Palette">
|
||||
<div class="section-head">
|
||||
<div class="num">01 — Palette</div>
|
||||
<h2>four colors.</h2>
|
||||
<p class="lede">__PALETTE_LEDE__</p>
|
||||
<div class="num">i — Palette</div>
|
||||
<h2>Paper, ink,<br/>and <em>three seasons.</em></h2>
|
||||
<p class="lede">Warm paper canvas. Soft black ink. Three colour accents — sage, blush, and lemon — each used as the entire mood of a slide, never together in one composition.</p>
|
||||
</div>
|
||||
<div class="palette">
|
||||
<div class="swatch swatch--primary"><div class="role">Primary</div><div><div class="name">__PRIMARY_NAME__</div><div class="hex">__PRIMARY__</div><div class="usage">Canvas.</div></div></div>
|
||||
<div class="swatch swatch--secondary"><div class="role">Secondary</div><div><div class="name">__SECONDARY_NAME__</div><div class="hex">__SECONDARY__</div><div class="usage">Ink.</div></div></div>
|
||||
<div class="swatch swatch--tertiary"><div class="role">Tertiary</div><div><div class="name">__TERTIARY_NAME__</div><div class="hex">__TERTIARY__</div><div class="usage">Muted. Borders.</div></div></div>
|
||||
<div class="swatch swatch--accent"><div class="role">Accent</div><div><div class="name">__ACCENT_NAME__</div><div class="hex">__ACCENT__</div><div class="usage">Signal. Reserved.</div></div></div>
|
||||
<div class="swatch swatch--paper"><div class="role">i · paper</div><div><div class="name">cream.</div><div class="hex">__PRIMARY__</div><div class="usage">Warm canvas. Never white.</div></div></div>
|
||||
<div class="swatch swatch--ink"><div class="role">ii · ink</div><div><div class="name">soft.</div><div class="hex">__SECONDARY__</div><div class="usage">The body voice. Warm dark.</div></div></div>
|
||||
<div class="swatch swatch--sage"><div class="role">iii · sage</div><div><div class="name">sage.</div><div class="hex">__TERTIARY__</div><div class="usage">Chrome and quiet labels.</div></div></div>
|
||||
<div class="swatch swatch--blush"><div class="role">iv · blush</div><div><div class="name">blush.</div><div class="hex">__ACCENT__</div><div class="usage">The first accent. Warm and worn.</div></div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="type">
|
||||
<section id="type" data-screen-label="02 Type">
|
||||
<div class="section-head">
|
||||
<div class="num">02 — Typography</div>
|
||||
<h2>type scale.</h2>
|
||||
<div class="num">ii — Typography</div>
|
||||
<h2>Cormorant,<br/>set <em>generously.</em></h2>
|
||||
<p class="lede">Cormorant Garamond carries both display and body. Italics for emphasis, roman for accent words. Inter sans is reserved for the smallest UI, JetBrains Mono for chrome labels.</p>
|
||||
</div>
|
||||
<div class="specimen">
|
||||
<div class="spec-row"><div class="meta"><span>Display</span><b>system-ui</b></div><div class="spec-display">hello world.</div></div>
|
||||
<div class="spec-row"><div class="meta"><span>H1</span><b>system-ui</b></div><div class="spec-h1">chapter one</div></div>
|
||||
<div class="spec-row"><div class="meta"><span>H2</span><b>system-ui</b></div><div class="spec-h2">Slide headlines.</div></div>
|
||||
<div class="spec-row"><div class="meta"><span>Body</span><b>system-ui</b></div><p class="spec-body">Body copy below 24px is forbidden in video compositions.</p></div>
|
||||
<div class="spec-row"><div class="meta"><span>Label</span><b>monospace</b></div><div class="spec-label">// chrome · labels · metadata</div></div>
|
||||
<div class="spec-row"><div class="meta"><span>Display</span><b>Cormorant italic 500</b><span>11vw · −0.018em</span></div><div class="spec-display"><em>quiet</em> spring.</div></div>
|
||||
<div class="spec-row"><div class="meta"><span>Heading I</span><b>Cormorant italic 500</b><span>7vw</span></div><div class="spec-h1">chapter <em>one</em></div></div>
|
||||
<div class="spec-row"><div class="meta"><span>Heading II</span><b>Cormorant italic 500</b><span>4vw · sage</span></div><div class="spec-h2">A subheading sets the mood.</div></div>
|
||||
<div class="spec-row"><div class="meta"><span>Lead</span><b>Cormorant italic 400</b><span>2.2vw · 1.45</span></div><div class="spec-lead">The lead drifts across the page like a Sunday morning.</div></div>
|
||||
<div class="spec-row"><div class="meta"><span>Body</span><b>Cormorant 400</b><span>16px · 1.75 · 62ch</span></div><p class="spec-body"><span class="drop">T</span>he reader is unhurried — every line should reward the pace. Body copy below 24px is forbidden in any composition above 1080p. Set generously; let the page breathe. Italic carries emphasis; the accent colour is a season worn lightly.</p></div>
|
||||
<div class="spec-row"><div class="meta"><span>Label</span><b>JetBrains Mono 500</b><span>12px · 0.18em</span></div><div class="spec-label">// folio · chrome · pp. 04 / 16</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="surface">
|
||||
<section id="surface" data-screen-label="03 Surface">
|
||||
<div class="section-head">
|
||||
<div class="num">03 — Surface</div>
|
||||
<h2>corners. depth.</h2>
|
||||
<div class="num">iii — Surface</div>
|
||||
<h2>Paper, <em>then</em><br/>more paper.</h2>
|
||||
<p class="lede">Surfaces are nearly invisible — a hairline border, perhaps, but no shadows. The page is the surface; the canvas is the page.</p>
|
||||
</div>
|
||||
<div class="surface-grid">
|
||||
<div class="demo-card">
|
||||
<span class="tag">// example</span>
|
||||
<h3>example card.</h3>
|
||||
<p>Configured corners, padding, shadow.</p>
|
||||
<span class="tag">// exempla · card</span>
|
||||
<h3><em>exempla.</em></h3>
|
||||
<p>A surface is a marginal thing. A border, perhaps; a numeral, perhaps; otherwise the type alone must hold the page together. The accent is rationed: one season per slide.</p>
|
||||
<div class="num-stat">+42%</div>
|
||||
<p style="font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-fade);font-family:var(--f-mono);margin:0">// q on q · sample stat</p>
|
||||
</div>
|
||||
<ul class="tokens">
|
||||
<li><span class="name">Corners</span><span class="val">__CORNER_RADIUS__</span><span class="bar" style="width:8px"></span></li>
|
||||
<li><span class="name">Padding</span><span class="val">__PADDING__</span><span class="bar" style="width:32px"></span></li>
|
||||
<li><span class="name">Gap</span><span class="val">__GAP__</span><span class="bar" style="width:32px"></span></li>
|
||||
<li><span class="name">Elevation</span><span class="val">__ELEVATION__</span><span class="bar" style="width:18px"></span></li>
|
||||
<li><span class="name">Density</span><span class="val">__DENSITY__</span><span class="bar" style="width:48px"></span></li>
|
||||
<li><span class="name">Page margin</span><span class="val">156 px</span><span class="bar" style="width:64px"></span></li>
|
||||
<li><span class="name">Column gap</span><span class="val">96 px</span><span class="bar" style="width:44px"></span></li>
|
||||
<li><span class="name">Border</span><span class="val">1 px hairline</span><span class="bar" style="width:8px"></span></li>
|
||||
<li><span class="name">Shadow</span><span class="val"><em>none</em></span><span class="bar" style="width:0;opacity:.2"></span></li>
|
||||
<li><span class="name">Density</span><span class="val">Low</span><span class="bar" style="width:24px"></span></li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="motion">
|
||||
<section id="motion" data-screen-label="04 Motion">
|
||||
<div class="section-head">
|
||||
<div class="num">04 — Motion</div>
|
||||
<h2>__EASING_HEADLINE__</h2>
|
||||
<p class="lede">__EASING_LEDE__</p>
|
||||
<div class="num">iv — Motion</div>
|
||||
<h2>Slow.<br/><em>Considered.</em></h2>
|
||||
<p class="lede">Motion is patient. Long durations, gentle eases. The page should feel turned, not flicked.</p>
|
||||
</div>
|
||||
<div class="two-col">
|
||||
<div class="panel">
|
||||
<div class="label-row">// easing</div>
|
||||
<h4>__EASING_NAME__</h4>
|
||||
<p>__EASING_DESC__</p>
|
||||
<pre>__EASING_VALUE__</pre>
|
||||
<span class="label-row">// easing</span>
|
||||
<h4><em>quintic.out</em></h4>
|
||||
<p>Long tail, soft landing. Use for entrances of headlines and chrome.</p>
|
||||
<pre>cubic-bezier(0.22, 1, 0.36, 1)</pre>
|
||||
</div>
|
||||
<div class="panel">
|
||||
<div class="label-row">// duration</div>
|
||||
<h4>__DURATION_DEFAULT__</h4>
|
||||
<p>__DURATION_DESC__</p>
|
||||
<pre>__DURATION_VALUES__</pre>
|
||||
<span class="label-row">// duration</span>
|
||||
<h4><em>1.4s</em></h4>
|
||||
<p>Slides resolve in 1.4 seconds. Entrances in 0.8. Patience as a style.</p>
|
||||
<pre>--dur-slide: 1.4s
|
||||
--dur-enter: 0.8s
|
||||
--dur-hover: 0.4s</pre>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="background">
|
||||
<section id="guidelines" data-screen-label="05 Guidelines">
|
||||
<div class="section-head">
|
||||
<div class="num">05 — Background</div>
|
||||
<h2>__BG_HEADLINE__</h2>
|
||||
<p class="lede">__BG_LEDE__</p>
|
||||
</div>
|
||||
<div class="two-col">
|
||||
<div class="bg-preview"><canvas id="bg-preview-canvas"></canvas><span class="badge">// __BG_BADGE__</span></div>
|
||||
<div style="display:flex;flex-direction:column;gap:8px">
|
||||
<ul class="tokens" style="border-top:none">
|
||||
<li><span class="name">Geometry</span><span class="val">__BG_TYPE__</span><span class="bar" style="width:36px"></span></li>
|
||||
<li><span class="name">Density</span><span class="val">__BG_DENSITY__</span><span class="bar" style="width:42px"></span></li>
|
||||
<li><span class="name">Speed</span><span class="val">__BG_SPEED__</span><span class="bar" style="width:18px"></span></li>
|
||||
<li><span class="name">Strength</span><span class="val">__BG_STRENGTH__</span><span class="bar" style="width:52px"></span></li>
|
||||
<li><span class="name">Grain</span><span class="val">__BG_GRAIN__</span><span class="bar" style="width:24px"></span></li>
|
||||
</ul>
|
||||
<details class="code-block"><summary>// shader config</summary>
|
||||
<pre>__SHADER_CONFIG__</pre>
|
||||
</details>
|
||||
<details class="code-block"><summary>// vertex shader</summary>
|
||||
<pre id="vtx-src">__SHADER_VERTEX__</pre>
|
||||
</details>
|
||||
<details class="code-block"><summary>// fragment shader</summary>
|
||||
<pre id="frg-src">__SHADER_FRAGMENT__</pre>
|
||||
</details>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="guidelines">
|
||||
<div class="section-head">
|
||||
<div class="num">06 — Guidelines</div>
|
||||
<h2>do and don’t.</h2>
|
||||
<div class="num">v — Guidelines</div>
|
||||
<h2><em>Sic et</em><br/>non.</h2>
|
||||
<p class="lede">The rules are few. The page softens the moment any are violated.</p>
|
||||
</div>
|
||||
<div class="rules-grid">
|
||||
<div class="rules-col do"><h3>do.</h3><ul>__DOS__</ul></div>
|
||||
<div class="rules-col dont"><h3>don't.</h3><ul>__DONTS__</ul></div>
|
||||
<div class="rules-col do">
|
||||
<h3><em>sic.</em></h3>
|
||||
<ul>
|
||||
<li>Choose one season per slide: sage, blush, or lemon.</li>
|
||||
<li>Set every headline in italic Cormorant.</li>
|
||||
<li>Keep page margins generous — 156px, never less.</li>
|
||||
<li>Use mono only for chrome labels.</li>
|
||||
<li>Tint neutrals warm; never cool grey.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="rules-col dont">
|
||||
<h3><em>non.</em></h3>
|
||||
<ul>
|
||||
<li>Combine all three accents in one composition.</li>
|
||||
<li>Use sans-serif for body — Cormorant carries the page.</li>
|
||||
<li>Apply shadows or gradients. Surfaces stay flat.</li>
|
||||
<li>Use uppercase for body. Italic is emphasis.</li>
|
||||
<li>Crowd the margin. Density is the enemy of attention.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="templates" class="templates-wrap">
|
||||
<section id="templates" class="templates-wrap" data-screen-label="06 Templates">
|
||||
<div class="section-head">
|
||||
<div class="num">07 — Templates</div>
|
||||
<h2>__SLIDE_COUNT_WORD__<br/>frames.</h2>
|
||||
<div class="num">vi — Templates</div>
|
||||
<h2>Seven<br/><em>spreads.</em></h2>
|
||||
<p class="lede">The full library at 1920×1080. Each thumbnail is the live slide, scaled.</p>
|
||||
</div>
|
||||
<div class="templates-grid" id="templates-grid"></div>
|
||||
</section>
|
||||
|
||||
<template id="tmpl-source">
|
||||
__SLIDE_CARDS__
|
||||
|
||||
<div class="tmpl" data-idx="01"><div class="tmpl-thumb"><div class="scale-wrap"><div class="ds-slide-frame">
|
||||
<section class="slide slide--cover"><div class="cover-top"><span>{{label}}</span><span class="accent">{{label}}</span></div><div class="cover-body"><div class="cover-rule"></div><h1 class="display">{{headline}}</h1><p class="lead">{{body}}</p></div></section>
|
||||
</div></div></div><div class="tmpl-foot"><span class="name">cover</span><span class="idx">i / vii</span></div></div>
|
||||
|
||||
<div class="tmpl" data-idx="02"><div class="tmpl-thumb"><div class="scale-wrap"><div class="ds-slide-frame">
|
||||
<section class="slide slide--chapter"><div class="chap-num">{{label}}</div><h2 class="h1">{{headline}}</h2><p class="lead">{{body}}</p></section>
|
||||
</div></div></div><div class="tmpl-foot"><span class="name">chapter</span><span class="idx">ii / vii</span></div></div>
|
||||
|
||||
<div class="tmpl" data-idx="03"><div class="tmpl-thumb"><div class="scale-wrap"><div class="ds-slide-frame">
|
||||
<section class="slide slide--epigraph"><div class="epigraph-mark">"</div><div class="epigraph-text">{{body}}</div><div class="epigraph-attr"><span class="nm">— {{text}}</span><span class="src">{{label}}</span></div></section>
|
||||
</div></div></div><div class="tmpl-foot"><span class="name">epigraph</span><span class="idx">iii / vii</span></div></div>
|
||||
|
||||
<div class="tmpl" data-idx="04"><div class="tmpl-thumb"><div class="scale-wrap"><div class="ds-slide-frame">
|
||||
<section class="slide slide--feature"><header class="slide-chrome"><span>{{label}}</span><span class="accent">{{label}}</span></header><div class="slide-body"><div class="feat-side"><span class="label">{{label}}</span><h3 class="h3">{{headline}}</h3><p class="lead muted">{{body}}</p></div><div class="feat-body"><p class="body"><span class="drop">{{text}}</span>{{body}}</p><p class="body">{{body}}</p></div></div><footer class="slide-foot"><span>{{label}}</span><span>{{number}}</span></footer></section>
|
||||
</div></div></div><div class="tmpl-foot"><span class="name">feature</span><span class="idx">iv / vii</span></div></div>
|
||||
|
||||
<div class="tmpl" data-idx="05"><div class="tmpl-thumb"><div class="scale-wrap"><div class="ds-slide-frame">
|
||||
<section class="slide slide--catalog"><header class="slide-chrome"><span>{{label}}</span><span class="accent">{{label}}</span></header><div class="slide-body"><div class="feat-side"><span class="label">{{label}}</span><h3 class="h3">{{headline}}</h3><p class="lead muted">{{body}}</p></div><ul class="cat-list"><li><div><span class="h">{{headline}}</span><span class="d">{{body}}</span></div></li><li><div><span class="h">{{headline}}</span><span class="d">{{body}}</span></div></li><li><div><span class="h">{{headline}}</span><span class="d">{{body}}</span></div></li><li><div><span class="h">{{headline}}</span><span class="d">{{body}}</span></div></li></ul></div><footer class="slide-foot"><span>{{label}}</span><span>{{number}}</span></footer></section>
|
||||
</div></div></div><div class="tmpl-foot"><span class="name">catalog</span><span class="idx">v / vii</span></div></div>
|
||||
|
||||
<div class="tmpl" data-idx="06"><div class="tmpl-thumb"><div class="scale-wrap"><div class="ds-slide-frame">
|
||||
<section class="slide slide--diptych"><header class="slide-chrome"><span>{{label}}</span><span class="accent">{{label}}</span></header><div class="slide-body"><div><div class="dip-plate">{{text}}</div><p class="plate-cap">{{label}}</p></div><div class="dip-text"><span class="label">{{label}}</span><h2 class="h2"><em>{{headline}}</em></h2><p class="body">{{body}}</p></div></div><footer class="slide-foot"><span>{{label}}</span><span>{{number}}</span></footer></section>
|
||||
</div></div></div><div class="tmpl-foot"><span class="name">diptych</span><span class="idx">vi / vii</span></div></div>
|
||||
|
||||
<div class="tmpl" data-idx="07"><div class="tmpl-thumb"><div class="scale-wrap"><div class="ds-slide-frame">
|
||||
<section class="slide slide--end"><div class="end-mark"><em>{{text}}</em></div><p class="lead">{{body}}</p><div class="end-meta"><span><b>{{label}}</b></span><span>{{label}}</span><span>{{label}}</span></div></section>
|
||||
</div></div></div><div class="tmpl-foot"><span class="name">end</span><span class="idx">vii / vii</span></div></div>
|
||||
|
||||
</template>
|
||||
|
||||
<footer class="endcap">
|
||||
<h2 class="endmark">end.</h2>
|
||||
<footer class="endcap" data-screen-label="07 End">
|
||||
<h2 class="endmark"><em>fin.</em></h2>
|
||||
<div class="meta">
|
||||
<div><b>__NAME__</b> · v1</div>
|
||||
<div>system-ui / monospace</div>
|
||||
<div>__DATE__</div>
|
||||
<div><b>Soft Editorial</b> · vol. i</div>
|
||||
<div>Cormorant Garamond / Inter</div>
|
||||
<div>Compiled May 2026</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
@@ -312,7 +436,5 @@ __SLIDE_CARDS__
|
||||
})();
|
||||
</script>
|
||||
|
||||
__SHADER_SCRIPT__
|
||||
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
||||
@@ -5,301 +5,434 @@
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
||||
<title>__NAME__ — Design System</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link href="https://fonts.googleapis.com/css2?family=Barlow:wght@300;400;500;600;700;800;900&family=IBM+Plex+Mono:wght@300;400;500;600;700;800;900__FONT_LINK_EXTRA__&display=swap" rel="stylesheet" />
|
||||
<script type="importmap">
|
||||
{"imports":{"three":"https://cdn.jsdelivr.net/npm/three@0.167.0/build/three.module.js","three/addons/":"https://cdn.jsdelivr.net/npm/three@0.167.0/examples/jsm/"}}
|
||||
</script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Anton&family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet" />
|
||||
|
||||
<style id="ds-tokens">
|
||||
:root{
|
||||
--primary:__PRIMARY__; --secondary:__SECONDARY__; --tertiary:__TERTIARY__; --accent:__ACCENT__;
|
||||
--hairline:color-mix(in srgb,var(--primary) 12%,transparent);
|
||||
--f-disp:"Barlow",sans-serif; --f-mono:"IBM Plex Mono",monospace;
|
||||
--pad-x:clamp(24px,5vw,88px); --pad-y:clamp(40px,6vh,100px);
|
||||
--bg-2:#1A1A1A;
|
||||
--ink-dim:#9A9A9A;
|
||||
--ink-fade:#5A5A5A;
|
||||
--hairline:#262626;
|
||||
--f-disp:"Anton",sans-serif;
|
||||
--f-head:"Inter",sans-serif;
|
||||
--f-mono:"JetBrains Mono",monospace;
|
||||
--pad-x:clamp(28px,5vw,80px); --pad-y:clamp(48px,7vh,120px);
|
||||
}
|
||||
</style>
|
||||
|
||||
<style>
|
||||
*,*::before,*::after{box-sizing:border-box}
|
||||
html,body{margin:0;padding:0;background:var(--secondary)}
|
||||
body{color:var(--primary);font:400 14px/1.6 "IBM Plex Mono",monospace;-webkit-font-smoothing:antialiased;overflow-x:hidden}
|
||||
body{color:var(--primary);font:500 14px/1.55 var(--f-head);-webkit-font-smoothing:antialiased;overflow-x:hidden}
|
||||
::selection{background:var(--accent);color:var(--secondary)}
|
||||
|
||||
#design-bg{position:fixed;inset:0;width:100%;height:100%;z-index:-2;opacity:.55;pointer-events:none}
|
||||
#bg-veil{position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 30% 20%,transparent 0%,var(--secondary) 75%)}
|
||||
|
||||
.rail{position:fixed;top:0;left:0;right:0;height:44px;display:flex;align-items:center;justify-content:space-between;padding:0 var(--pad-x);background:color-mix(in srgb,var(--secondary) 78%,transparent);backdrop-filter:blur(14px);border-bottom:1px solid rgba(128,128,128,.15);z-index:100;font:500 11px/1 "IBM Plex Mono",monospace;letter-spacing:.14em;text-transform:uppercase}
|
||||
.rail .brand{color:var(--accent);display:inline-flex;align-items:center;gap:10px;font:900 14px/1 "Barlow",sans-serif}
|
||||
.rail .brand .dot{width:9px;height:9px;background:var(--accent);}
|
||||
.rail nav{display:flex;gap:28px}
|
||||
.rail nav a{color:var(--primary);text-decoration:none;transition:all .15s}
|
||||
.rail{position:fixed;top:0;left:0;right:0;height:52px;display:flex;align-items:center;justify-content:space-between;padding:0 var(--pad-x);background:var(--secondary);border-bottom:1px solid var(--hairline);z-index:100;font:600 11px/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-dim)}
|
||||
.rail .brand{display:inline-flex;align-items:center;gap:14px;color:var(--accent)}
|
||||
.rail .brand b{font-family:var(--f-disp);font-weight:400;letter-spacing:.005em;text-transform:uppercase;font-size:24px;color:var(--accent)}
|
||||
.rail .brand .square{width:14px;height:14px;background:var(--accent);display:inline-block}
|
||||
.rail nav{display:flex;gap:24px}
|
||||
.rail nav a{color:var(--ink-dim);text-decoration:none;transition:color .15s}
|
||||
.rail nav a:hover{color:var(--accent)}
|
||||
@media(max-width:880px){.rail nav{display:none}}
|
||||
.rail .meta{padding:6px 12px;border:1px solid var(--hairline);color:var(--primary)}
|
||||
@media(max-width:760px){.rail nav{display:none}}
|
||||
|
||||
section{position:relative;padding:var(--pad-y) var(--pad-x)}
|
||||
.section-head{display:grid;grid-template-columns:9em 1fr;gap:clamp(24px,4vw,56px);align-items:baseline;border-top:1px solid rgba(128,128,128,.15);padding-top:28px;margin-bottom:clamp(36px,5vh,64px)}
|
||||
.section-head .num{font:500 12px/1 "IBM Plex Mono",monospace;letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}
|
||||
.section-head h2{font:900 clamp(36px,6vw,84px)/.92 "Barlow",sans-serif;letter-spacing:-.035em;margin:0;text-transform:lowercase}
|
||||
.section-head .lede{grid-column:2;max-width:60ch;margin-top:18px;font-size:15px;line-height:1.6color:var(--primary);opacity:.65}
|
||||
.section-head{display:grid;grid-template-columns:11em 1fr;gap:clamp(24px,4vw,56px);align-items:end;border-top:1px solid var(--hairline);padding-top:32px;margin-bottom:clamp(40px,6vh,72px)}
|
||||
.section-head .num{display:inline-block;font:600 11px/1 var(--f-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--accent);padding:8px 14px;border:1px solid var(--accent);justify-self:start;background:var(--secondary)}
|
||||
.section-head h2{margin:0;font:400 clamp(56px,11vw,176px)/.9 var(--f-disp);letter-spacing:.005em;text-transform:uppercase;color:var(--primary)}
|
||||
.section-head h2 em{font-style:normal;color:var(--accent);background:var(--secondary);box-shadow:0 0 0 1px var(--accent)}
|
||||
.section-head .lede{grid-column:2;max-width:54ch;margin-top:18px;font:500 15px/1.65 var(--f-head);color:var(--ink-dim)}
|
||||
|
||||
.cover{background:var(--accent);color:var(--secondary)};min-height:100vh;padding:80px var(--pad-x) 48px;display:grid;grid-template-rows:auto 1fr auto}
|
||||
.cover-headline{align-self:end;margin:0;font:900 clamp(80px,17vw,280px)/.82 "Barlow",sans-serif;letter-spacing:-.04em;text-transform:lowercase}
|
||||
.cover-foot{margin-top:48px;padding-top:20px;border-top:1px solid rgba(128,128,128,.15);display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
|
||||
.cover-foot .cell{display:flex;flex-direction:column;gap:6px}
|
||||
.cover-foot .k{font:500 10px/1 "IBM Plex Mono",monospace;letter-spacing:.1em;text-transform:uppercase;opacity:.55}
|
||||
.cover-foot .v{font:500 13px/1.4 "IBM Plex Mono",monospace}
|
||||
.cover-foot .v.big{font:800 28px/1 "Barlow",sans-serif;letter-spacing:-.02em}
|
||||
/* Cover */
|
||||
.cover{min-height:100vh;padding:96px var(--pad-x) 56px;display:grid;grid-template-rows:auto 1fr auto;position:relative;overflow:hidden}
|
||||
.cover::before{content:"";position:absolute;top:0;left:0;right:0;height:6px;background:var(--accent)}
|
||||
.cover-chrome{display:flex;justify-content:space-between;font:600 11px/1 var(--f-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-dim)}
|
||||
.cover-chrome .accent{color:var(--accent)}
|
||||
.cover-headline{align-self:end;margin:0;font:400 clamp(96px,21vw,360px)/.85 var(--f-disp);letter-spacing:.002em;text-transform:uppercase;color:var(--primary)}
|
||||
.cover-headline em{font-style:normal;color:var(--secondary);background:var(--accent);padding:0 .04em;display:inline-block;line-height:.85}
|
||||
.cover-foot{margin-top:64px;display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--accent)}
|
||||
.cover-foot .cell{padding:22px 26px;border-right:1px solid var(--hairline);display:flex;flex-direction:column;gap:8px}
|
||||
.cover-foot .cell:last-child{border-right:0}
|
||||
.cover-foot .cell:nth-child(3n+1){background:var(--accent);color:var(--secondary)}
|
||||
.cover-foot .k{font:600 10px/1.4 var(--f-mono);letter-spacing:.18em;text-transform:uppercase}
|
||||
.cover-foot .v{font:400 28px/1 var(--f-disp);letter-spacing:.005em;text-transform:uppercase}
|
||||
.cover-foot .v.plain{font:600 14px/1.4 var(--f-head);letter-spacing:.04em;text-transform:none}
|
||||
@media(max-width:760px){.cover-foot{grid-template-columns:1fr 1fr}}
|
||||
|
||||
.manifesto{padding:clamp(60px,9vh,120px) var(--pad-x);border-bottom:1px solid rgba(128,128,128,.15)}
|
||||
.manifesto-grid{display:grid;grid-template-columns:9em 1fr;gap:clamp(24px,4vw,56px);align-items:start;max-width:1400px;margin:0 auto}
|
||||
.manifesto-grid .num{font:500 12px/1 "IBM Plex Mono",monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
|
||||
.manifesto p{font:700 clamp(28px,3.8vw,56px)/1.05 "Barlow",sans-serif;letter-spacing:-.025em;max-width:22ch;margin:0;text-transform:lowercase}
|
||||
.manifesto p em{font-style:normal;color:var(--accent)}
|
||||
/* Manifesto */
|
||||
.manifesto{padding:clamp(60px,9vh,120px) var(--pad-x);border-top:1px solid var(--accent);border-bottom:1px solid var(--accent);background:var(--accent);color:var(--secondary)}
|
||||
.manifesto-grid{display:grid;grid-template-columns:11em 1fr;gap:clamp(24px,4vw,56px);align-items:start}
|
||||
.manifesto-grid .num{display:inline-block;font:600 11px/1 var(--f-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--secondary);padding:8px 14px;border:1px solid var(--secondary);justify-self:start;background:var(--accent)}
|
||||
.manifesto p{font:400 clamp(40px,6vw,96px)/.95 var(--f-disp);letter-spacing:.005em;text-transform:uppercase;max-width:18ch;margin:0;color:var(--secondary)}
|
||||
.manifesto p em{font-style:normal;background:var(--secondary);color:var(--accent);padding:0 .08em;display:inline-block}
|
||||
|
||||
.palette{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:rgba(128,128,128,.1);border:1px solid rgba(128,128,128,.15)}
|
||||
.swatch{padding:28px 24px;aspect-ratio:3/4;display:flex;flex-direction:column;justify-content:space-between;border-radius:0;transition:all .2s}
|
||||
.swatch:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,0,0,.15)}
|
||||
.swatch .role{font:500 11px/1 "IBM Plex Mono",monospace;letter-spacing:.1em;text-transform:uppercase}
|
||||
.swatch .name{font:900 clamp(28px,3.4vw,48px)/.92 "Barlow",sans-serif;letter-spacing:-.025em;text-transform:lowercase;margin-top:auto}
|
||||
.swatch .hex{font:500 12px/1 "IBM Plex Mono",monospace;margin-top:8px}
|
||||
.swatch .usage{font:400 11px/1.5 "IBM Plex Mono",monospace;margin-top:6px;opacity:.65}
|
||||
.swatch--primary{background:var(--primary);color:var(--secondary)}
|
||||
.swatch--secondary{background:var(--secondary);color:var(--primary)}
|
||||
.swatch--tertiary{background:var(--tertiary);color:var(--primary)}
|
||||
.swatch--accent{background:var(--accent);color:var(--secondary)}
|
||||
@media(max-width:880px){.palette{grid-template-columns:repeat(2,1fr)}}
|
||||
/* Palette */
|
||||
.palette{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--accent)}
|
||||
.swatch{aspect-ratio:3/4;padding:24px;display:flex;flex-direction:column;justify-content:space-between;border-right:1px solid var(--hairline);transition:transform .15s}
|
||||
.swatch:last-child{border-right:0}
|
||||
.swatch:hover{transform:scale(1.02)}
|
||||
.swatch .role{font:600 11px/1 var(--f-mono);letter-spacing:.18em;text-transform:uppercase;padding:6px 10px;border:1px solid currentColor;align-self:flex-start}
|
||||
.swatch .name{font:400 clamp(36px,4.5vw,72px)/.95 var(--f-disp);letter-spacing:.005em;text-transform:uppercase;margin-top:auto}
|
||||
.swatch .hex{font:500 12px/1 var(--f-mono);letter-spacing:.06em;margin-top:10px}
|
||||
.swatch .usage{font:500 13px/1.55 var(--f-head);margin-top:6px;opacity:.8;max-width:22ch}
|
||||
.swatch--paper{background:var(--primary);color:var(--secondary)}
|
||||
.swatch--void{background:var(--secondary);color:var(--primary)}
|
||||
.swatch--grey{background:var(--tertiary);color:var(--secondary)}
|
||||
.swatch--volt{background:var(--accent);color:var(--secondary)}
|
||||
@media(max-width:880px){.palette{grid-template-columns:repeat(2,1fr)}.swatch:nth-child(2){border-right:0}.swatch:nth-child(-n+2){border-bottom:1px solid var(--hairline)}}
|
||||
|
||||
.specimen{max-width:1400px;margin:0 auto;display:flex;flex-direction:column}
|
||||
.spec-row{display:grid;grid-template-columns:11em 1fr;gap:32px;padding:28px 0;border-top:1px solid rgba(128,128,128,.15);align-items:baseline}
|
||||
.spec-row:first-child{border:0;padding-top:0}
|
||||
.spec-row .meta{font:500 11px/1.4 "IBM Plex Mono",monospace;letter-spacing:.1em;text-transform:uppercase;display:flex;flex-direction:column;gap:4px;color:var(--primary);opacity:.4}
|
||||
.spec-row .meta b{color:var(--accent);font:400 22px/1 "Barlow",sans-serif}
|
||||
.spec-display{font:900 clamp(56px,10vw,152px)/.88 "Barlow",sans-serif;letter-spacing:-.04em;text-transform:lowercase}
|
||||
.spec-h1{font:800 clamp(40px,7vw,104px)/.9 "Barlow",sans-serif;letter-spacing:-.03em;text-transform:lowercase}
|
||||
.spec-h2{font:700 clamp(28px,4.2vw,64px)/1 "Barlow",sans-serif;letter-spacing:-.02em}
|
||||
.spec-lead{font:500 clamp(18px,2vw,26px)/1.45 "Barlow",sans-serif}
|
||||
.spec-body{font:400 17px/1.65 "Barlow",sans-serif;max-width:60ch}
|
||||
.spec-label{font:500 13px/1 "IBM Plex Mono",monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
|
||||
/* Type specimen */
|
||||
.specimen{display:flex;flex-direction:column;border:1px solid var(--hairline)}
|
||||
.spec-row{display:grid;grid-template-columns:14em 1fr;gap:32px;padding:32px 36px;border-bottom:1px solid var(--hairline);align-items:baseline}
|
||||
.spec-row:last-child{border:0}
|
||||
.spec-row .meta{font:600 11px/1.5 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-dim);display:flex;flex-direction:column;gap:6px}
|
||||
.spec-row .meta b{color:var(--accent);font-weight:600}
|
||||
.spec-display{font:400 clamp(72px,13vw,200px)/.9 var(--f-disp);letter-spacing:.005em;text-transform:uppercase;color:var(--primary)}
|
||||
.spec-display em{font-style:normal;background:var(--accent);color:var(--secondary);padding:0 .05em}
|
||||
.spec-h1{font:400 clamp(48px,8vw,128px)/.95 var(--f-disp);letter-spacing:.005em;text-transform:uppercase;color:var(--accent)}
|
||||
.spec-h2{font:400 clamp(32px,5vw,80px)/1 var(--f-disp);letter-spacing:.005em;text-transform:uppercase;color:var(--primary)}
|
||||
.spec-lead{font:600 clamp(20px,2.2vw,32px)/1.4 var(--f-head);color:var(--primary)}
|
||||
.spec-body{font:500 16px/1.65 var(--f-head);color:var(--primary);max-width:60ch}
|
||||
.spec-label{font:600 12px/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
|
||||
|
||||
.surface-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:48px;max-width:1400px;margin:0 auto}
|
||||
/* Surface */
|
||||
.surface-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:32px}
|
||||
@media(max-width:880px){.surface-grid{grid-template-columns:1fr}}
|
||||
.demo-card{background:var(--primary);color:var(--secondary);border-radius:0;padding:28px;box-shadow:0 4px 16px rgba(0,0,0,.12);display:flex;flex-direction:column;gap:18px}
|
||||
.demo-card .tag{align-self:flex-start;font:500 10px/1 "IBM Plex Mono",monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);border:1px solid var(--accent);padding:4px 8px}
|
||||
.demo-card h3{margin:0;font:900 36px/1 "Barlow",sans-serif;letter-spacing:-.02em;text-transform:lowercase}
|
||||
.demo-card p{margin:0;font:400 15px/1.6 "Barlow",sans-serif;opacity:.7}
|
||||
.tokens{list-style:none;padding:0;margin:0;border-top:1px solid rgba(128,128,128,.15)}
|
||||
.tokens li{display:grid;grid-template-columns:1fr auto auto;gap:18px;align-items:center;padding:18px 0;border-bottom:1px solid rgba(128,128,128,.15)}
|
||||
.demo-card{background:var(--primary);color:var(--secondary);padding:32px;display:flex;flex-direction:column;gap:18px;position:relative;border:1px solid var(--accent)}
|
||||
.demo-card .marker{position:absolute;top:0;right:0;background:var(--accent);color:var(--secondary);padding:6px 14px;font:600 11px/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase}
|
||||
.demo-card .tag{align-self:flex-start;font:600 11px/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--secondary);padding:6px 12px;background:var(--accent)}
|
||||
.demo-card h3{margin:0;font:400 48px/.95 var(--f-disp);letter-spacing:.005em;text-transform:uppercase}
|
||||
.demo-card p{margin:0;font:500 14px/1.65 var(--f-head);color:#4A4A4A}
|
||||
.demo-card .num-stat{font:400 96px/.95 var(--f-disp);color:var(--secondary);letter-spacing:.005em}
|
||||
.demo-card .num-stat em{font-style:normal;color:var(--accent);background:var(--secondary);padding:0 .08em;display:inline-block}
|
||||
.tokens{list-style:none;padding:0;margin:0;border:1px solid var(--hairline)}
|
||||
.tokens li{display:grid;grid-template-columns:1fr auto auto;gap:18px;align-items:center;padding:18px 24px;border-bottom:1px solid var(--hairline)}
|
||||
.tokens li:last-child{border:0}
|
||||
.tokens .name{font:500 12px/1 "IBM Plex Mono",monospace;letter-spacing:.1em;text-transform:uppercase;opacity:.6}
|
||||
.tokens .val{font:800 20px/1 "Barlow",sans-serif}
|
||||
.tokens .name{font:600 12px/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-dim)}
|
||||
.tokens .val{font:400 24px/1 var(--f-disp);letter-spacing:.005em;text-transform:uppercase;color:var(--accent)}
|
||||
.tokens .bar{height:6px;background:var(--accent)}
|
||||
|
||||
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:48px;max-width:1400px;margin:0 auto}
|
||||
/* Motion */
|
||||
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:32px}
|
||||
@media(max-width:880px){.two-col{grid-template-columns:1fr}}
|
||||
.panel{border:1px solid rgba(128,128,128,.15);background:color-mix(in srgb,var(--secondary) 70%,transparent)};padding:36px;border-radius:0;display:flex;flex-direction:column;gap:22px}
|
||||
.panel .label-row{font:500 11px/1 "IBM Plex Mono",monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
|
||||
.panel h4{margin:0;font:800 32px/1 "Barlow",sans-serif;text-transform:lowercase}
|
||||
.panel p{margin:0;font:400 13px/1.7 "Barlow",sans-serif;opacity:.65;max-width:38ch}
|
||||
.panel{background:var(--bg-2);border:1px solid var(--hairline);padding:32px;display:flex;flex-direction:column;gap:18px}
|
||||
.panel .label-row{font:600 11px/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--accent);align-self:flex-start;padding:6px 12px;background:var(--secondary);border:1px solid var(--accent)}
|
||||
.panel h4{margin:0;font:400 40px/.95 var(--f-disp);letter-spacing:.005em;text-transform:uppercase;color:var(--primary)}
|
||||
.panel h4 em{font-style:normal;background:var(--accent);color:var(--secondary);padding:0 .08em;display:inline-block}
|
||||
.panel p{margin:0;font:500 14px/1.65 var(--f-head);color:var(--ink-dim);max-width:42ch}
|
||||
.panel pre{margin:0;padding:14px 18px;border:1px solid var(--hairline);background:var(--secondary);font:500 12px/1.6 var(--f-mono);color:var(--accent);overflow-x:auto}
|
||||
|
||||
.bg-preview{border:1px solid rgba(128,128,128,.15);aspect-ratio:4/3;position:relative;overflow:hidden;background:var(--secondary);border-radius:0}
|
||||
.bg-preview canvas{width:100%;height:100%;display:block}
|
||||
.bg-preview .badge{position:absolute;bottom:12px;left:12px;font:500 10px/1 "IBM Plex Mono",monospace;letter-spacing:.1em;text-transform:uppercase;background:color-mix(in srgb,var(--secondary) 75%,transparent);padding:6px 10px;backdrop-filter:blur(8px)}
|
||||
|
||||
details.code-block{border:1px solid rgba(128,128,128,.15);background:color-mix(in srgb,var(--secondary) 60%,transparent)};margin-top:12px;border-radius:0}
|
||||
details.code-block summary{cursor:pointer;padding:14px 18px;list-style:none;font:500 11px/1 "IBM Plex Mono",monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);display:flex;justify-content:space-between}
|
||||
details.code-block summary::-webkit-details-marker{display:none}
|
||||
details.code-block summary::after{content:"+";font:900 18px/1 "Barlow",sans-serif;color:var(--accent)}
|
||||
details.code-block[open] summary::after{content:"\2212"}
|
||||
details.code-block pre{margin:0;padding:16px;border-top:1px solid rgba(128,128,128,.15);font:11px/1.6 "IBM Plex Mono",monospace;color:var(--primary);opacity:.65;background:transparent;overflow-x:auto;white-space:pre-wrap;word-break:break-word;max-height:320px;overflow-y:auto}
|
||||
|
||||
.rules-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;max-width:1400px;margin:0 auto}
|
||||
/* Guidelines */
|
||||
.rules-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px}
|
||||
@media(max-width:880px){.rules-grid{grid-template-columns:1fr}}
|
||||
.rules-col{}
|
||||
.rules-col.do{}
|
||||
.rules-col.dont{}
|
||||
.rules-col h3{font:900 56px/1 "Barlow",sans-serif;letter-spacing:-.03em;margin:0 0 28px;text-transform:lowercase}
|
||||
.rules-col{border:1px solid;padding:32px;background:var(--bg-2)}
|
||||
.rules-col.do{border-color:var(--accent)}
|
||||
.rules-col.dont{border-color:var(--hairline)}
|
||||
.rules-col h3{font:400 64px/.95 var(--f-disp);margin:0 0 24px;letter-spacing:.005em;text-transform:uppercase}
|
||||
.rules-col.do h3{color:var(--accent)}
|
||||
.rules-col.dont h3{opacity:.4}
|
||||
.rules-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0px}
|
||||
.rules-col li{display:grid;grid-template-columns:2em 1fr;gap:8px;padding:16px 0;border-top:1px solid rgba(128,128,128,.15);font:500 18px/1.45 "Barlow",sans-serif}
|
||||
.rules-col li::before{font:800 22px/1.2 "Barlow",sans-serif;align-self:start;}
|
||||
.rules-col.do li::before{content:"+";color:var(--accent)}
|
||||
.rules-col.dont li::before{content:"\2014";opacity:.4}
|
||||
.rules-col.dont h3{color:var(--ink-fade)}
|
||||
.rules-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
|
||||
.rules-col li{display:grid;grid-template-columns:2.2em 1fr;gap:14px;padding:14px 16px;background:var(--secondary);border:1px solid var(--hairline);font:500 15px/1.5 var(--f-head);color:var(--primary)}
|
||||
.rules-col li::before{font:600 14px/1 var(--f-mono);align-self:center;text-align:center;letter-spacing:.04em;padding:6px 0}
|
||||
.rules-col.do li::before{content:"YES";color:var(--accent)}
|
||||
.rules-col.dont li::before{content:"NO";color:var(--ink-fade)}
|
||||
|
||||
.templates-wrap{background:color-mix(in srgb,var(--secondary) 96%,var(--accent))}
|
||||
.templates-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:1400px;margin:0 auto}
|
||||
/* Templates */
|
||||
.templates-wrap{background:var(--bg-2);border-top:1px solid var(--hairline)}
|
||||
.templates-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
|
||||
@media(max-width:1100px){.templates-grid{grid-template-columns:repeat(2,1fr)}}
|
||||
@media(max-width:720px){.templates-grid{grid-template-columns:1fr}}
|
||||
.tmpl{background:var(--secondary);border:1px solid rgba(128,128,128,.15);overflow:hidden;border-radius:0;transition:all .2s}
|
||||
.tmpl{background:var(--secondary);border:1px solid var(--hairline);overflow:hidden;transition:border-color .2s,transform .25s cubic-bezier(.16,1,.3,1)}
|
||||
.tmpl:hover{border-color:var(--accent);transform:translateY(-2px)}
|
||||
.tmpl-thumb{width:100%;aspect-ratio:16/9;overflow:hidden;position:relative;background:#050505;border-bottom:1px solid rgba(128,128,128,.15)}
|
||||
.tmpl-thumb{width:100%;aspect-ratio:16/9;overflow:hidden;position:relative;background:#050505}
|
||||
.tmpl-thumb .scale-wrap{width:1920px;height:1080px;transform-origin:top left}
|
||||
.tmpl-foot{display:flex;justify-content:space-between;padding:14px 18px;font:500 11px/1 "IBM Plex Mono",monospace;letter-spacing:.14em;text-transform:uppercase}
|
||||
.tmpl-foot .idx{color:var(--accent)}
|
||||
.tmpl-foot{display:flex;justify-content:space-between;align-items:center;padding:12px 18px;font:600 11px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase}
|
||||
.tmpl-foot .name{color:var(--primary);font-family:var(--f-disp);font-weight:400;font-size:20px;letter-spacing:.005em}
|
||||
.tmpl-foot .idx{color:var(--secondary);background:var(--accent);padding:4px 10px;font-weight:600}
|
||||
|
||||
footer.endcap{background:var(--accent);color:var(--secondary);padding:80px var(--pad-x) 60px;display:grid;grid-template-columns:1fr auto;gap:48px;align-items:end}
|
||||
footer.endcap .endmark{font:900 clamp(60px,13vw,220px)/.85 "Barlow",sans-serif;letter-spacing:-.04em;text-transform:lowercase;margin:0}
|
||||
footer.endcap .meta{font:500 12px/2 "IBM Plex Mono",monospace;letter-spacing:.1em;text-transform:uppercase;opacity:.6;text-align:right}
|
||||
footer.endcap .meta b{opacity:1;color:var(--accent)}
|
||||
/* Endcap */
|
||||
footer.endcap{padding:80px var(--pad-x) 56px;background:var(--accent);color:var(--secondary);display:grid;grid-template-columns:1fr auto;gap:48px;align-items:end}
|
||||
footer.endcap .endmark{font:400 clamp(60px,14vw,240px)/.85 var(--f-disp);letter-spacing:.005em;text-transform:uppercase;margin:0;color:var(--secondary)}
|
||||
footer.endcap .endmark em{font-style:normal;color:var(--accent);background:var(--secondary);padding:0 .08em;display:inline-block}
|
||||
footer.endcap .meta{font:600 11px/2 var(--f-mono);letter-spacing:.18em;text-transform:uppercase;text-align:right;color:var(--secondary)}
|
||||
footer.endcap .meta b{color:var(--secondary);background:var(--secondary);color:var(--accent);padding:2px 8px}
|
||||
</style>
|
||||
|
||||
<style id="template-css">
|
||||
__TEMPLATE_CSS__
|
||||
.ds-slide-frame{
|
||||
--t-bg:#050505; --t-fg:#FAFAF7; --t-volt:#F6FF1F; --t-grey:#ABABAB;
|
||||
--t-dim:#9A9A9A;
|
||||
--t-fade:#5A5A5A;
|
||||
--t-line:#262626;
|
||||
--t-bg-2:#1A1A1A;
|
||||
--t-f-disp:"Anton",sans-serif;
|
||||
--t-f-head:"Inter",sans-serif;
|
||||
--t-f-mono:"JetBrains Mono",monospace;
|
||||
width:1920px;height:1080px;position:relative;overflow:hidden
|
||||
}
|
||||
.ds-slide-frame *{box-sizing:border-box}
|
||||
.ds-slide-frame .slide{width:1920px;height:1080px;position:relative;padding:80px;display:grid;grid-template-rows:auto 1fr auto;overflow:hidden;background:var(--t-bg);color:var(--t-fg);font-family:var(--t-f-head)}
|
||||
.ds-slide-frame .slide-chrome,.ds-slide-frame .slide-foot{display:flex;justify-content:space-between;align-items:center;font:600 18px/1 var(--t-f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--t-dim)}
|
||||
.ds-slide-frame .slide-chrome{padding-bottom:18px;border-bottom:1px solid var(--t-line);margin-bottom:36px}
|
||||
.ds-slide-frame .slide-foot{padding-top:18px;border-top:1px solid var(--t-line);margin-top:36px}
|
||||
.ds-slide-frame .slide-chrome .accent,.ds-slide-frame .slide-foot .accent{color:var(--t-volt)}
|
||||
.ds-slide-frame .display{font:400 280px/.88 var(--t-f-disp);letter-spacing:.002em;text-transform:uppercase;color:var(--t-fg)}
|
||||
.ds-slide-frame .display em{font-style:normal;background:var(--t-volt);color:var(--t-bg);padding:0 .04em;display:inline-block;line-height:.88}
|
||||
.ds-slide-frame .h1{font:400 168px/.92 var(--t-f-disp);letter-spacing:.005em;text-transform:uppercase;color:var(--t-volt)}
|
||||
.ds-slide-frame .h2{font:400 104px/1 var(--t-f-disp);letter-spacing:.005em;text-transform:uppercase;color:var(--t-fg)}
|
||||
.ds-slide-frame .h2 em{font-style:normal;background:var(--t-volt);color:var(--t-bg);padding:0 .06em;display:inline-block;line-height:1}
|
||||
.ds-slide-frame .h3{font:400 60px/1.05 var(--t-f-disp);letter-spacing:.005em;text-transform:uppercase;color:var(--t-volt)}
|
||||
.ds-slide-frame .lead{font:600 36px/1.45 var(--t-f-head);color:var(--t-fg)}
|
||||
.ds-slide-frame .body{font:500 26px/1.6 var(--t-f-head);color:var(--t-fg)}
|
||||
.ds-slide-frame .label{font:600 16px/1 var(--t-f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--t-volt);background:var(--t-bg);padding:6px 12px;border:1px solid var(--t-volt);display:inline-block}
|
||||
.ds-slide-frame .accent{color:var(--t-volt)}
|
||||
.ds-slide-frame .muted{color:var(--t-dim)}
|
||||
|
||||
.ds-slide-frame .slide--cover .slide-chrome,.ds-slide-frame .slide--cover .slide-foot{display:none}
|
||||
.ds-slide-frame .slide--cover{display:flex;flex-direction:column;justify-content:flex-end;padding:80px}
|
||||
.ds-slide-frame .slide--cover::before{content:"";position:absolute;top:0;left:0;right:0;height:8px;background:var(--t-volt)}
|
||||
.ds-slide-frame .cover-top{display:flex;justify-content:space-between;align-items:flex-start;font:600 18px/1 var(--t-f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--t-dim);margin-bottom:auto;margin-top:24px}
|
||||
.ds-slide-frame .cover-top .accent{color:var(--t-volt)}
|
||||
.ds-slide-frame .cover-body{display:flex;flex-direction:column;gap:32px}
|
||||
|
||||
.ds-slide-frame .slide--chapter .slide-chrome,.ds-slide-frame .slide--chapter .slide-foot{display:none}
|
||||
.ds-slide-frame .slide--chapter{display:flex;flex-direction:column;justify-content:center;gap:32px;padding:80px 160px;background:var(--t-volt);color:var(--t-bg)}
|
||||
.ds-slide-frame .slide--chapter .chap-num{font:600 18px/1 var(--t-f-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--t-bg);background:var(--t-bg);color:var(--t-volt);padding:8px 14px;align-self:flex-start}
|
||||
.ds-slide-frame .slide--chapter .h1{color:var(--t-bg)}
|
||||
.ds-slide-frame .slide--chapter .lead{color:var(--t-bg)}
|
||||
|
||||
.ds-slide-frame .slide--statement .slide-body{display:flex;flex-direction:column;justify-content:center;gap:32px}
|
||||
|
||||
.ds-slide-frame .slide--split .slide-body{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;padding-top:32px}
|
||||
.ds-slide-frame .split-text{display:flex;flex-direction:column;gap:24px}
|
||||
.ds-slide-frame .split-plate{aspect-ratio:1;width:100%;background:var(--t-bg-2);border:1px solid var(--t-line);display:flex;align-items:center;justify-content:center;font:600 18px/1 var(--t-f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--t-dim);position:relative}
|
||||
.ds-slide-frame .split-plate::after{content:"";position:absolute;top:24px;right:24px;width:48px;height:48px;background:var(--t-volt)}
|
||||
|
||||
.ds-slide-frame .slide--stats .slide-body{display:flex;flex-direction:column;justify-content:center;gap:48px;padding-top:32px}
|
||||
.ds-slide-frame .stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--t-volt)}
|
||||
.ds-slide-frame .stat-card{padding:32px 28px;border-right:1px solid var(--t-line);display:flex;flex-direction:column;gap:12px}
|
||||
.ds-slide-frame .stat-card:last-child{border-right:0}
|
||||
.ds-slide-frame .stat-card:nth-child(2n){background:var(--t-bg-2)}
|
||||
.ds-slide-frame .stat-card .v{font:400 120px/.95 var(--t-f-disp);letter-spacing:.005em;color:var(--t-volt)}
|
||||
.ds-slide-frame .stat-card .l{font:500 22px/1.45 var(--t-f-head);color:var(--t-fg)}
|
||||
.ds-slide-frame .stat-card .n{font:600 14px/1 var(--t-f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--t-dim);margin-top:auto}
|
||||
|
||||
.ds-slide-frame .slide--list .slide-body{display:grid;grid-template-columns:1fr 1.6fr;gap:80px;align-items:start;padding-top:32px}
|
||||
.ds-slide-frame .list-head{display:flex;flex-direction:column;gap:22px}
|
||||
.ds-slide-frame .list-items{list-style:none;padding:0;margin:0;counter-reset:idx}
|
||||
.ds-slide-frame .list-items li{display:grid;grid-template-columns:3.5em 1fr;gap:24px;padding:24px 0;border-top:1px solid var(--t-line);counter-increment:idx;align-items:baseline}
|
||||
.ds-slide-frame .list-items li::before{content:counter(idx,decimal-leading-zero);font:400 52px/1 var(--t-f-disp);color:var(--t-volt);letter-spacing:.005em}
|
||||
.ds-slide-frame .list-items .h{font:400 44px/1.1 var(--t-f-disp);letter-spacing:.005em;text-transform:uppercase;color:var(--t-fg);display:block;margin-bottom:6px}
|
||||
.ds-slide-frame .list-items .d{font:500 22px/1.5 var(--t-f-head);color:var(--t-dim);display:block}
|
||||
|
||||
.ds-slide-frame .slide--quote .slide-chrome,.ds-slide-frame .slide--quote .slide-foot{display:none}
|
||||
.ds-slide-frame .slide--quote{display:flex;flex-direction:column;justify-content:center;padding:96px 200px;gap:48px}
|
||||
.ds-slide-frame .quote-mark{font:400 240px/.5 var(--t-f-disp);color:var(--t-volt);height:120px}
|
||||
.ds-slide-frame .quote-text{font:400 84px/1.05 var(--t-f-disp);letter-spacing:.005em;text-transform:uppercase;color:var(--t-fg)}
|
||||
.ds-slide-frame .quote-text em{font-style:normal;background:var(--t-volt);color:var(--t-bg);padding:0 .04em;display:inline-block;line-height:1.05}
|
||||
.ds-slide-frame .quote-attr{display:flex;flex-direction:column;gap:8px;padding-top:24px;border-top:1px solid var(--t-line);max-width:480px}
|
||||
.ds-slide-frame .quote-attr .nm{font:400 36px/1 var(--t-f-disp);letter-spacing:.005em;text-transform:uppercase;color:var(--t-volt)}
|
||||
.ds-slide-frame .quote-attr .src{font:600 16px/1 var(--t-f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--t-dim)}
|
||||
|
||||
.ds-slide-frame .slide--end .slide-chrome,.ds-slide-frame .slide--end .slide-foot{display:none}
|
||||
.ds-slide-frame .slide--end{display:flex;flex-direction:column;justify-content:center;padding:120px 144px;gap:48px;background:var(--t-volt);color:var(--t-bg)}
|
||||
.ds-slide-frame .slide--end .end-mark{font:400 280px/.88 var(--t-f-disp);letter-spacing:.005em;text-transform:uppercase}
|
||||
.ds-slide-frame .slide--end .end-mark em{font-style:normal;background:var(--t-bg);color:var(--t-volt);padding:0 .04em;display:inline-block;line-height:.88}
|
||||
.ds-slide-frame .slide--end .end-meta{display:flex;gap:48px;font:600 14px/1 var(--t-f-mono);letter-spacing:.16em;text-transform:uppercase;padding-top:24px;border-top:1px solid var(--t-bg)}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<canvas id="design-bg"></canvas>
|
||||
<div id="bg-veil"></div>
|
||||
|
||||
<div class="rail">
|
||||
<div class="brand"><span class="dot"></span>__NAME__</div>
|
||||
<nav><a href="#palette">01</a><a href="#type">02</a><a href="#surface">03</a><a href="#motion">04</a><a href="#background">05</a><a href="#guidelines">06</a><a href="#templates">07</a></nav>
|
||||
<div class="brand"><span class="square"></span><b>STUDIO</b></div>
|
||||
<nav>
|
||||
<a href="#palette">01</a><a href="#type">02</a><a href="#surface">03</a><a href="#motion">04</a><a href="#guidelines">05</a><a href="#templates">06</a>
|
||||
</nav>
|
||||
<div class="meta">V 1.0</div>
|
||||
</div>
|
||||
|
||||
<header class="cover">
|
||||
<h1 class="cover-headline">__NAME_LINE1____NAME_LINE2__.</h1>
|
||||
<header class="cover" data-screen-label="00 Cover">
|
||||
<div class="cover-chrome">
|
||||
<div>DESIGN SYSTEM · № 007</div>
|
||||
<div class="accent">▶ STUDIO 2026</div>
|
||||
</div>
|
||||
<h1 class="cover-headline">STU<em>DIO</em>.</h1>
|
||||
<div class="cover-foot">
|
||||
<div class="cell"><span class="k">Template</span><span class="v">studio</span></div>
|
||||
<div class="cell"><span class="k">Type</span><span class="v big">Barlow</span></div>
|
||||
<div class="cell"><span class="k">Accent</span><span class="v">__ACCENT_LABEL__</span></div>
|
||||
<div class="cell"><span class="k">Doc</span><span class="v">07 sections · __SLIDE_COUNT__ templates</span></div>
|
||||
<div class="cell"><span class="k">DISCIPLINE</span><span class="v">Studio · Agency · Brand</span></div>
|
||||
<div class="cell"><span class="k">DISPLAY</span><span class="v">Anton</span></div>
|
||||
<div class="cell"><span class="k">SIGNAL</span><span class="v">Volt #F6FF1F</span></div>
|
||||
<div class="cell"><span class="k">BUILD</span><span class="v plain">06 sections · 08 frames</span></div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section class="manifesto">
|
||||
<section class="manifesto" data-screen-label="00 Manifesto">
|
||||
<div class="manifesto-grid">
|
||||
<div class="num">— Manifesto</div>
|
||||
<p>Black canvas with electric-yellow type; high-voltage design studio aesthetic.</p>
|
||||
<div class="num">— MANIFESTO</div>
|
||||
<p>The page <em>shouts</em>. Type is <em>weapon</em>. Volt is one voice — but it is loud.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="palette">
|
||||
<section id="palette" data-screen-label="01 Palette">
|
||||
<div class="section-head">
|
||||
<div class="num">01 — Palette</div>
|
||||
<h2>four colors.</h2>
|
||||
<p class="lede">__PALETTE_LEDE__</p>
|
||||
<div class="num">01 — PALETTE</div>
|
||||
<h2>FOUR<br/><em>VOLTS.</em></h2>
|
||||
<p class="lede">Black canvas. Off-white type. Grey for chrome. Electric yellow as the only voice — and it is the loudest in any room it enters.</p>
|
||||
</div>
|
||||
<div class="palette">
|
||||
<div class="swatch swatch--primary"><div class="role">Primary</div><div><div class="name">__PRIMARY_NAME__</div><div class="hex">__PRIMARY__</div><div class="usage">Ink on dark.</div></div></div>
|
||||
<div class="swatch swatch--secondary"><div class="role">Secondary</div><div><div class="name">__SECONDARY_NAME__</div><div class="hex">__SECONDARY__</div><div class="usage">Canvas.</div></div></div>
|
||||
<div class="swatch swatch--tertiary"><div class="role">Tertiary</div><div><div class="name">__TERTIARY_NAME__</div><div class="hex">__TERTIARY__</div><div class="usage">Muted. Borders.</div></div></div>
|
||||
<div class="swatch swatch--accent"><div class="role">Accent</div><div><div class="name">__ACCENT_NAME__</div><div class="hex">__ACCENT__</div><div class="usage">Signal. Reserved.</div></div></div>
|
||||
<div class="swatch swatch--paper"><div class="role">01 // PAPER</div><div><div class="name">white.</div><div class="hex">__PRIMARY__</div><div class="usage">Off-white body type on black.</div></div></div>
|
||||
<div class="swatch swatch--void"><div class="role">02 // VOID</div><div><div class="name">black.</div><div class="hex">__SECONDARY__</div><div class="usage">The canvas. Near-pure, never grey.</div></div></div>
|
||||
<div class="swatch swatch--grey"><div class="role">03 // GREY</div><div><div class="name">grey.</div><div class="hex">__TERTIARY__</div><div class="usage">Chrome and muted labels.</div></div></div>
|
||||
<div class="swatch swatch--volt"><div class="role">04 // VOLT</div><div><div class="name">volt.</div><div class="hex">__ACCENT__</div><div class="usage">The signal. One element per slide.</div></div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="type">
|
||||
<section id="type" data-screen-label="02 Type">
|
||||
<div class="section-head">
|
||||
<div class="num">02 — Typography</div>
|
||||
<h2>type scale.</h2>
|
||||
<div class="num">02 — TYPE</div>
|
||||
<h2>ANTON<br/><em>UP.</em></h2>
|
||||
<p class="lede">Anton handles every headline — tall, condensed, always uppercase. Inter does body in 500 weight. JetBrains Mono runs chrome.</p>
|
||||
</div>
|
||||
<div class="specimen">
|
||||
<div class="spec-row"><div class="meta"><span>Display</span><b>Barlow</b></div><div class="spec-display">hello world.</div></div>
|
||||
<div class="spec-row"><div class="meta"><span>H1</span><b>Barlow</b></div><div class="spec-h1">chapter one</div></div>
|
||||
<div class="spec-row"><div class="meta"><span>H2</span><b>Barlow</b></div><div class="spec-h2">Slide headlines.</div></div>
|
||||
<div class="spec-row"><div class="meta"><span>Body</span><b>Barlow</b></div><p class="spec-body">Body copy below 24px is forbidden in video compositions.</p></div>
|
||||
<div class="spec-row"><div class="meta"><span>Label</span><b>IBM Plex Mono</b></div><div class="spec-label">// chrome · labels · metadata</div></div>
|
||||
<div class="spec-row"><div class="meta"><span>DISPLAY</span><b>Anton 400</b><span>13vw · uppercase</span></div><div class="spec-display">HELLO <em>WORLD</em>.</div></div>
|
||||
<div class="spec-row"><div class="meta"><span>H1</span><b>Anton 400</b><span>8vw · volt</span></div><div class="spec-h1">CHAPTER ONE</div></div>
|
||||
<div class="spec-row"><div class="meta"><span>H2</span><b>Anton 400</b><span>5vw</span></div><div class="spec-h2">SLIDE HEADLINES.</div></div>
|
||||
<div class="spec-row"><div class="meta"><span>LEAD</span><b>Inter 600</b><span>2vw</span></div><div class="spec-lead">The lead carries the brief in one decisive line.</div></div>
|
||||
<div class="spec-row"><div class="meta"><span>BODY</span><b>Inter 500</b><span>16px · 60ch</span></div><p class="spec-body">Pack my box with five dozen liquor jugs. Body type stays sentence-case Inter 500. Never bold; the page is already loud enough. Body copy below 24px is forbidden in video compositions — measured at 1080p.</p></div>
|
||||
<div class="spec-row"><div class="meta"><span>LABEL</span><b>JetBrains Mono 600</b><span>12px · 0.16em</span></div><div class="spec-label">// SECTION · LABEL · METADATA</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="surface">
|
||||
<section id="surface" data-screen-label="03 Surface">
|
||||
<div class="section-head">
|
||||
<div class="num">03 — Surface</div>
|
||||
<h2>corners. depth.</h2>
|
||||
<div class="num">03 — SURFACE</div>
|
||||
<h2>HARD<br/><em>EDGES.</em></h2>
|
||||
<p class="lede">Surfaces are 1px sharp. No corners. No shadows. Volt blocks frame the type, never decorate it.</p>
|
||||
</div>
|
||||
<div class="surface-grid">
|
||||
<div class="demo-card">
|
||||
<span class="tag">// example</span>
|
||||
<h3>example card.</h3>
|
||||
<p>Configured corners, padding, shadow.</p>
|
||||
<span class="marker">№ 1</span>
|
||||
<span class="tag">▶ CARD · EXAMPLE</span>
|
||||
<h3>EXAMPLE CARD.</h3>
|
||||
<p>Hard 1px border. Zero radius. One volt block carries the meaning. Everything else stays out of the way.</p>
|
||||
<div class="num-stat">+<em>42</em>%</div>
|
||||
</div>
|
||||
<ul class="tokens">
|
||||
<li><span class="name">Corners</span><span class="val">__CORNER_RADIUS__</span><span class="bar" style="width:8px"></span></li>
|
||||
<li><span class="name">Padding</span><span class="val">__PADDING__</span><span class="bar" style="width:32px"></span></li>
|
||||
<li><span class="name">Gap</span><span class="val">__GAP__</span><span class="bar" style="width:32px"></span></li>
|
||||
<li><span class="name">Elevation</span><span class="val">__ELEVATION__</span><span class="bar" style="width:18px"></span></li>
|
||||
<li><span class="name">Density</span><span class="val">__DENSITY__</span><span class="bar" style="width:48px"></span></li>
|
||||
<li><span class="name">// BORDER</span><span class="val">1 PX</span><span class="bar" style="width:24px"></span></li>
|
||||
<li><span class="name">// RADIUS</span><span class="val">0 PX</span><span class="bar" style="width:6px"></span></li>
|
||||
<li><span class="name">// SHADOW</span><span class="val">NONE</span><span class="bar" style="width:0;opacity:.2"></span></li>
|
||||
<li><span class="name">// PADDING</span><span class="val">32 PX</span><span class="bar" style="width:36px"></span></li>
|
||||
<li><span class="name">// DENSITY</span><span class="val">HIGH</span><span class="bar" style="width:52px"></span></li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="motion">
|
||||
<section id="motion" data-screen-label="04 Motion">
|
||||
<div class="section-head">
|
||||
<div class="num">04 — Motion</div>
|
||||
<h2>__EASING_HEADLINE__</h2>
|
||||
<p class="lede">__EASING_LEDE__</p>
|
||||
<div class="num">04 — MOTION</div>
|
||||
<h2>FAST.<br/><em>HARD.</em></h2>
|
||||
<p class="lede">Motion arrives fast and stops hard. No bounce, no overshoot — every entrance is a cut, not a fade.</p>
|
||||
</div>
|
||||
<div class="two-col">
|
||||
<div class="panel">
|
||||
<div class="label-row">// easing</div>
|
||||
<h4>__EASING_NAME__</h4>
|
||||
<p>__EASING_DESC__</p>
|
||||
<pre>__EASING_VALUE__</pre>
|
||||
<span class="label-row">▶ EASING</span>
|
||||
<h4>SNAP <em>OUT.</em></h4>
|
||||
<p>Aggressive head, hard stop. Use for headlines, volt blocks, any element that wants to land like a hammer.</p>
|
||||
<pre>cubic-bezier(0.32, 0, 0.16, 1)</pre>
|
||||
</div>
|
||||
<div class="panel">
|
||||
<div class="label-row">// duration</div>
|
||||
<h4>__DURATION_DEFAULT__</h4>
|
||||
<p>__DURATION_DESC__</p>
|
||||
<pre>__DURATION_VALUES__</pre>
|
||||
<span class="label-row">▶ DURATION</span>
|
||||
<h4>0.4 <em>SECONDS.</em></h4>
|
||||
<p>Slides cut in 0.4 seconds. Elements 0.25. Hovers 0.1. Studio runs fast.</p>
|
||||
<pre>--dur-slide: 0.4s
|
||||
--dur-enter: 0.25s
|
||||
--dur-hover: 0.1s</pre>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="background">
|
||||
<section id="guidelines" data-screen-label="05 Guidelines">
|
||||
<div class="section-head">
|
||||
<div class="num">05 — Background</div>
|
||||
<h2>__BG_HEADLINE__</h2>
|
||||
<p class="lede">__BG_LEDE__</p>
|
||||
</div>
|
||||
<div class="two-col">
|
||||
<div class="bg-preview"><canvas id="bg-preview-canvas"></canvas><span class="badge">// __BG_BADGE__</span></div>
|
||||
<div style="display:flex;flex-direction:column;gap:8px">
|
||||
<ul class="tokens" style="border-top:none">
|
||||
<li><span class="name">Geometry</span><span class="val">__BG_TYPE__</span><span class="bar" style="width:36px"></span></li>
|
||||
<li><span class="name">Density</span><span class="val">__BG_DENSITY__</span><span class="bar" style="width:42px"></span></li>
|
||||
<li><span class="name">Speed</span><span class="val">__BG_SPEED__</span><span class="bar" style="width:18px"></span></li>
|
||||
<li><span class="name">Strength</span><span class="val">__BG_STRENGTH__</span><span class="bar" style="width:52px"></span></li>
|
||||
<li><span class="name">Grain</span><span class="val">__BG_GRAIN__</span><span class="bar" style="width:24px"></span></li>
|
||||
</ul>
|
||||
<details class="code-block"><summary>// shader config</summary>
|
||||
<pre>__SHADER_CONFIG__</pre>
|
||||
</details>
|
||||
<details class="code-block"><summary>// vertex shader</summary>
|
||||
<pre id="vtx-src">__SHADER_VERTEX__</pre>
|
||||
</details>
|
||||
<details class="code-block"><summary>// fragment shader</summary>
|
||||
<pre id="frg-src">__SHADER_FRAGMENT__</pre>
|
||||
</details>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="guidelines">
|
||||
<div class="section-head">
|
||||
<div class="num">06 — Guidelines</div>
|
||||
<h2>do and don’t.</h2>
|
||||
<div class="num">05 — RULES</div>
|
||||
<h2>YES.<br/><em>NO.</em></h2>
|
||||
<p class="lede">The studio runs on these. Break any and the voltage drops.</p>
|
||||
</div>
|
||||
<div class="rules-grid">
|
||||
<div class="rules-col do"><h3>do.</h3><ul>__DOS__</ul></div>
|
||||
<div class="rules-col dont"><h3>don't.</h3><ul>__DONTS__</ul></div>
|
||||
<div class="rules-col do">
|
||||
<h3>YES.</h3>
|
||||
<ul>
|
||||
<li>Volt one element per slide — never two.</li>
|
||||
<li>Set every headline in Anton, uppercase.</li>
|
||||
<li>Run body in Inter 500. Never bold.</li>
|
||||
<li>Keep all borders 1px sharp, zero radius.</li>
|
||||
<li>Motion is fast (0.25–0.4s) and never bouncy.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="rules-col dont">
|
||||
<h3>NO.</h3>
|
||||
<ul>
|
||||
<li>Introduce a second accent. Volt is the only voice.</li>
|
||||
<li>Use rounded corners or any radius greater than 0.</li>
|
||||
<li>Apply shadows, gradients, or glows.</li>
|
||||
<li>Set headlines in serif or lowercase.</li>
|
||||
<li>Use easings with overshoot — Studio doesn't bounce.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="templates" class="templates-wrap">
|
||||
<section id="templates" class="templates-wrap" data-screen-label="06 Templates">
|
||||
<div class="section-head">
|
||||
<div class="num">07 — Templates</div>
|
||||
<h2>__SLIDE_COUNT_WORD__<br/>frames.</h2>
|
||||
<div class="num">06 — TEMPLATES</div>
|
||||
<h2>EIGHT<br/><em>FRAMES.</em></h2>
|
||||
<p class="lede">The full library at 1920×1080. Each thumbnail is the live slide, scaled.</p>
|
||||
</div>
|
||||
<div class="templates-grid" id="templates-grid"></div>
|
||||
</section>
|
||||
|
||||
<template id="tmpl-source">
|
||||
__SLIDE_CARDS__
|
||||
|
||||
<div class="tmpl" data-idx="01"><div class="tmpl-thumb"><div class="scale-wrap"><div class="ds-slide-frame">
|
||||
<section class="slide slide--cover"><div class="cover-top"><span>{{label}}</span><span class="accent">▶ {{label}}</span></div><div class="cover-body"><h1 class="display">{{headline}}</h1><p class="lead">{{body}}</p></div></section>
|
||||
</div></div></div><div class="tmpl-foot"><span class="name">cover</span><span class="idx">01/08</span></div></div>
|
||||
|
||||
<div class="tmpl" data-idx="02"><div class="tmpl-thumb"><div class="scale-wrap"><div class="ds-slide-frame">
|
||||
<section class="slide slide--chapter"><span class="chap-num">{{label}}</span><h2 class="h1">{{headline}}</h2><p class="lead">{{body}}</p></section>
|
||||
</div></div></div><div class="tmpl-foot"><span class="name">chapter</span><span class="idx">02/08</span></div></div>
|
||||
|
||||
<div class="tmpl" data-idx="03"><div class="tmpl-thumb"><div class="scale-wrap"><div class="ds-slide-frame">
|
||||
<section class="slide slide--statement"><header class="slide-chrome"><span>{{label}}</span><span class="accent">{{label}}</span></header><div class="slide-body"><span class="label">{{label}}</span><h2 class="h1">{{headline}}</h2><p class="lead">{{body}}</p></div><footer class="slide-foot"><span>{{label}}</span><span>{{number}}</span></footer></section>
|
||||
</div></div></div><div class="tmpl-foot"><span class="name">statement</span><span class="idx">03/08</span></div></div>
|
||||
|
||||
<div class="tmpl" data-idx="04"><div class="tmpl-thumb"><div class="scale-wrap"><div class="ds-slide-frame">
|
||||
<section class="slide slide--quote"><div class="quote-mark">"</div><div class="quote-text">{{body}}</div><div class="quote-attr"><span class="nm">— {{text}}</span><span class="src">{{label}}</span></div></section>
|
||||
</div></div></div><div class="tmpl-foot"><span class="name">quote</span><span class="idx">04/08</span></div></div>
|
||||
|
||||
<div class="tmpl" data-idx="05"><div class="tmpl-thumb"><div class="scale-wrap"><div class="ds-slide-frame">
|
||||
<section class="slide slide--split"><header class="slide-chrome"><span>{{label}}</span><span class="accent">{{label}}</span></header><div class="slide-body"><div class="split-text"><span class="label">{{label}}</span><h2 class="h2">{{headline}}</h2><p class="body">{{body}}</p></div><div class="split-plate">{{text}}</div></div><footer class="slide-foot"><span>{{label}}</span><span>{{number}}</span></footer></section>
|
||||
</div></div></div><div class="tmpl-foot"><span class="name">split</span><span class="idx">05/08</span></div></div>
|
||||
|
||||
<div class="tmpl" data-idx="06"><div class="tmpl-thumb"><div class="scale-wrap"><div class="ds-slide-frame">
|
||||
<section class="slide slide--stats"><header class="slide-chrome"><span>{{label}}</span><span class="accent">{{label}}</span></header><div class="slide-body"><h2 class="h2">{{headline}}</h2><div class="stats-grid"><div class="stat-card"><span class="v">{{number}}</span><span class="l">{{body}}</span><span class="n">{{label}}</span></div><div class="stat-card"><span class="v">{{number}}</span><span class="l">{{body}}</span><span class="n">{{label}}</span></div><div class="stat-card"><span class="v">{{number}}</span><span class="l">{{body}}</span><span class="n">{{label}}</span></div><div class="stat-card"><span class="v">{{number}}</span><span class="l">{{body}}</span><span class="n">{{label}}</span></div></div></div><footer class="slide-foot"><span>{{label}}</span><span>{{number}}</span></footer></section>
|
||||
</div></div></div><div class="tmpl-foot"><span class="name">stats</span><span class="idx">06/08</span></div></div>
|
||||
|
||||
<div class="tmpl" data-idx="07"><div class="tmpl-thumb"><div class="scale-wrap"><div class="ds-slide-frame">
|
||||
<section class="slide slide--list"><header class="slide-chrome"><span>{{label}}</span><span class="accent">{{label}}</span></header><div class="slide-body"><div class="list-head"><span class="label">{{label}}</span><h3 class="h3">{{headline}}</h3><p class="body muted">{{body}}</p></div><ul class="list-items"><li><div><span class="h">{{headline}}</span><span class="d">{{body}}</span></div></li><li><div><span class="h">{{headline}}</span><span class="d">{{body}}</span></div></li><li><div><span class="h">{{headline}}</span><span class="d">{{body}}</span></div></li></ul></div><footer class="slide-foot"><span>{{label}}</span><span>{{number}}</span></footer></section>
|
||||
</div></div></div><div class="tmpl-foot"><span class="name">list</span><span class="idx">07/08</span></div></div>
|
||||
|
||||
<div class="tmpl" data-idx="08"><div class="tmpl-thumb"><div class="scale-wrap"><div class="ds-slide-frame">
|
||||
<section class="slide slide--end"><h2 class="end-mark">{{headline}}</h2><p class="lead">{{body}}</p><div class="end-meta"><span>{{label}}</span><span>{{label}}</span><span>{{label}}</span></div></section>
|
||||
</div></div></div><div class="tmpl-foot"><span class="name">end</span><span class="idx">08/08</span></div></div>
|
||||
|
||||
</template>
|
||||
|
||||
<footer class="endcap">
|
||||
<h2 class="endmark">end.</h2>
|
||||
<footer class="endcap" data-screen-label="07 End">
|
||||
<h2 class="endmark">END <em>.</em></h2>
|
||||
<div class="meta">
|
||||
<div><b>__NAME__</b> · v1</div>
|
||||
<div>Barlow / IBM Plex Mono</div>
|
||||
<div>__DATE__</div>
|
||||
<div><b>STUDIO</b> · V 1.0</div>
|
||||
<div>ANTON / INTER</div>
|
||||
<div>BUILD MMXXVI.05</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
@@ -312,7 +445,5 @@ __SLIDE_CARDS__
|
||||
})();
|
||||
</script>
|
||||
|
||||
__SHADER_SCRIPT__
|
||||
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
||||
@@ -5,301 +5,608 @@
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
||||
<title>__NAME__ — Design System</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;500;600;700;800;900&family=Courier+Prime:wght@300;400;500;600;700;800;900&family=DM+Sans:wght@300;400;500;600;700;800;900__FONT_LINK_EXTRA__&display=swap" rel="stylesheet" />
|
||||
<script type="importmap">
|
||||
{"imports":{"three":"https://cdn.jsdelivr.net/npm/three@0.167.0/build/three.module.js","three/addons/":"https://cdn.jsdelivr.net/npm/three@0.167.0/examples/jsm/"}}
|
||||
</script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&family=Inter:wght@400;500&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />
|
||||
|
||||
<style id="ds-tokens">
|
||||
/* VELLUM TOKENS — scholarly navy + warm yellow italic. */
|
||||
:root{
|
||||
--primary:__PRIMARY__; --secondary:__SECONDARY__; --tertiary:__TERTIARY__; --accent:__ACCENT__;
|
||||
--hairline:color-mix(in srgb,var(--primary) 12%,transparent);
|
||||
--f-disp:"Cormorant Garamond",sans-serif; --f-mono:"Courier Prime",monospace;
|
||||
--pad-x:clamp(24px,5vw,88px); --pad-y:clamp(40px,6vh,100px);
|
||||
--ink:#FCFAF1; --ink-warm:#F4E2A4;
|
||||
--ink-dim:color-mix(in srgb,var(--primary) 55%,var(--secondary));
|
||||
--ink-fade:color-mix(in srgb,var(--primary) 28%,var(--secondary));
|
||||
--hairline:color-mix(in srgb,var(--primary) 14%,transparent);
|
||||
--f-disp:"Cormorant Garamond",serif;
|
||||
--f-body:"Cormorant Garamond",serif;
|
||||
--f-sans:"Inter",system-ui,sans-serif;
|
||||
--f-mono:"JetBrains Mono",ui-monospace,monospace;
|
||||
--pad-x:clamp(28px,6vw,108px); --pad-y:clamp(48px,7vh,120px);
|
||||
}
|
||||
</style>
|
||||
|
||||
<style>
|
||||
*,*::before,*::after{box-sizing:border-box}
|
||||
html,body{margin:0;padding:0;background:var(--secondary)}
|
||||
body{color:var(--primary);font:400 14px/1.6 "Courier Prime",monospace;-webkit-font-smoothing:antialiased;overflow-x:hidden}
|
||||
body{color:var(--primary);font:400 14px/1.7 var(--f-body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
|
||||
::selection{background:var(--accent);color:var(--secondary)}
|
||||
|
||||
#design-bg{position:fixed;inset:0;width:100%;height:100%;z-index:-2;opacity:.55;pointer-events:none}
|
||||
#bg-veil{position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 30% 20%,transparent 0%,var(--secondary) 75%)}
|
||||
/* Decorative paper-grain on body */
|
||||
body::before{
|
||||
content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
|
||||
background-image:radial-gradient(circle,rgba(244,226,164,0.025) 0.5px,transparent 0.5px);
|
||||
background-size:3px 3px;mix-blend-mode:overlay;
|
||||
}
|
||||
|
||||
.rail{position:fixed;top:0;left:0;right:0;height:44px;display:flex;align-items:center;justify-content:space-between;padding:0 var(--pad-x);background:color-mix(in srgb,var(--secondary) 78%,transparent);backdrop-filter:blur(14px);border-bottom:1px solid rgba(128,128,128,.15);z-index:100;font:500 11px/1 "Courier Prime",monospace;letter-spacing:.14em;text-transform:uppercase}
|
||||
.rail .brand{color:var(--accent);display:inline-flex;align-items:center;gap:10px;font:900 14px/1 "Cormorant Garamond",sans-serif}
|
||||
.rail .brand .dot{width:9px;height:9px;background:var(--accent);}
|
||||
/* Top rail */
|
||||
.rail{position:fixed;top:0;left:0;right:0;height:46px;display:flex;align-items:center;justify-content:space-between;padding:0 var(--pad-x);background:color-mix(in srgb,var(--secondary) 86%,transparent);backdrop-filter:blur(14px);border-bottom:1px solid var(--hairline);z-index:100;font:500 11px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim)}
|
||||
.rail .brand{display:inline-flex;align-items:center;gap:12px;color:var(--accent)}
|
||||
.rail .brand b{font-family:var(--f-disp);font-style:italic;font-weight:500;letter-spacing:0;text-transform:none;font-size:18px;color:var(--accent)}
|
||||
.rail .brand .sigil{width:10px;height:10px;background:var(--accent);transform:rotate(45deg);display:inline-block}
|
||||
.rail nav{display:flex;gap:28px}
|
||||
.rail nav a{color:var(--primary);text-decoration:none;transition:all .15s}
|
||||
.rail nav a{color:var(--ink-dim);text-decoration:none;transition:color .2s}
|
||||
.rail nav a:hover{color:var(--accent)}
|
||||
@media(max-width:880px){.rail nav{display:none}}
|
||||
.rail .meta{font-style:italic;font-family:var(--f-disp);font-size:13px;letter-spacing:.02em;text-transform:none;color:var(--ink-fade)}
|
||||
@media(max-width:760px){.rail nav{display:none}}
|
||||
|
||||
/* Sections */
|
||||
section{position:relative;padding:var(--pad-y) var(--pad-x)}
|
||||
.section-head{display:grid;grid-template-columns:9em 1fr;gap:clamp(24px,4vw,56px);align-items:baseline;border-top:1px solid rgba(128,128,128,.15);padding-top:28px;margin-bottom:clamp(36px,5vh,64px)}
|
||||
.section-head .num{font:500 12px/1 "Courier Prime",monospace;letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}
|
||||
.section-head h2{font:900 clamp(36px,6vw,84px)/.92 "Cormorant Garamond",sans-serif;letter-spacing:-.035em;margin:0;text-transform:lowercase}
|
||||
.section-head .lede{grid-column:2;max-width:60ch;margin-top:18px;font-size:15px;line-height:1.6color:var(--primary);opacity:.65}
|
||||
.section-head{display:grid;grid-template-columns:11em 1fr;gap:clamp(24px,4vw,64px);align-items:baseline;border-top:1px solid var(--hairline);padding-top:36px;margin-bottom:clamp(48px,7vh,96px)}
|
||||
.section-head .num{font:500 12px/1 var(--f-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}
|
||||
.section-head h2{font:italic 500 clamp(48px,8vw,108px)/.96 var(--f-disp);letter-spacing:-.01em;margin:0;color:var(--primary)}
|
||||
.section-head h2 em{font-style:normal;color:var(--accent)}
|
||||
.section-head .lede{grid-column:2;max-width:54ch;margin-top:24px;font:400 17px/1.7 var(--f-body);font-style:italic;color:var(--ink-dim)}
|
||||
.section-head .lede.plain{font-style:normal;font-family:var(--f-sans);font-size:14px;line-height:1.7}
|
||||
|
||||
.cover{background:var(--accent);color:var(--secondary)};min-height:100vh;padding:80px var(--pad-x) 48px;display:grid;grid-template-rows:auto 1fr auto}
|
||||
.cover-headline{align-self:end;margin:0;font:900 clamp(80px,17vw,280px)/.82 "Cormorant Garamond",sans-serif;letter-spacing:-.04em;text-transform:lowercase}
|
||||
.cover-foot{margin-top:48px;padding-top:20px;border-top:1px solid rgba(128,128,128,.15);display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
|
||||
.cover-foot .cell{display:flex;flex-direction:column;gap:6px}
|
||||
.cover-foot .k{font:500 10px/1 "Courier Prime",monospace;letter-spacing:.1em;text-transform:uppercase;opacity:.55}
|
||||
.cover-foot .v{font:500 13px/1.4 "Courier Prime",monospace}
|
||||
.cover-foot .v.big{font:800 28px/1 "Cormorant Garamond",sans-serif;letter-spacing:-.02em}
|
||||
@media(max-width:760px){.cover-foot{grid-template-columns:1fr 1fr}}
|
||||
/* Cover */
|
||||
.cover{min-height:100vh;padding:96px var(--pad-x) 56px;display:grid;grid-template-rows:auto 1fr auto;position:relative}
|
||||
.cover-chrome{display:flex;justify-content:space-between;font:500 11px/1 var(--f-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-fade)}
|
||||
.cover-chrome .sigil{width:8px;height:8px;background:var(--accent);transform:rotate(45deg);display:inline-block;margin-right:10px;vertical-align:middle}
|
||||
.cover-headline{align-self:end;margin:0;color:var(--primary);font-family:var(--f-disp);font-style:italic;font-weight:500;font-size:clamp(80px,18vw,300px);line-height:.88;letter-spacing:-.025em}
|
||||
.cover-headline .accent-word{color:var(--accent)}
|
||||
.cover-headline .dot{color:var(--accent);font-style:normal}
|
||||
.cover-foot{margin-top:48px;display:grid;grid-template-columns:repeat(4,1fr);gap:24px;padding-top:24px;border-top:1px solid var(--hairline)}
|
||||
.cover-foot .cell{display:flex;flex-direction:column;gap:8px}
|
||||
.cover-foot .k{font:500 10px/1.4 var(--f-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-fade)}
|
||||
.cover-foot .v{font-family:var(--f-disp);font-style:italic;font-weight:500;font-size:22px;line-height:1.2;color:var(--accent)}
|
||||
.cover-foot .v.plain{font-family:var(--f-sans);font-style:normal;font-weight:500;font-size:14px;color:var(--primary)}
|
||||
@media(max-width:760px){.cover-foot{grid-template-columns:repeat(2,1fr)}}
|
||||
|
||||
.manifesto{padding:clamp(60px,9vh,120px) var(--pad-x);border-bottom:1px solid rgba(128,128,128,.15)}
|
||||
.manifesto-grid{display:grid;grid-template-columns:9em 1fr;gap:clamp(24px,4vw,56px);align-items:start;max-width:1400px;margin:0 auto}
|
||||
.manifesto-grid .num{font:500 12px/1 "Courier Prime",monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
|
||||
.manifesto p{font:700 clamp(28px,3.8vw,56px)/1.05 "Cormorant Garamond",sans-serif;letter-spacing:-.025em;max-width:22ch;margin:0;text-transform:lowercase}
|
||||
/* Manifesto */
|
||||
.manifesto{padding:clamp(60px,10vh,140px) var(--pad-x);border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);position:relative}
|
||||
.manifesto::before{content:"§";position:absolute;left:var(--pad-x);top:calc(var(--pad-y) * 0.6);font-family:var(--f-disp);font-size:120px;color:color-mix(in srgb,var(--accent) 25%,transparent);line-height:1}
|
||||
.manifesto-grid{display:grid;grid-template-columns:11em 1fr;gap:clamp(24px,4vw,64px);align-items:start;position:relative}
|
||||
.manifesto-grid .num{font:500 12px/1 var(--f-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}
|
||||
.manifesto p{font-family:var(--f-disp);font-style:italic;font-weight:500;font-size:clamp(28px,3.6vw,52px);line-height:1.25;max-width:30ch;margin:0;color:var(--primary)}
|
||||
.manifesto p em{font-style:normal;color:var(--accent)}
|
||||
|
||||
.palette{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:rgba(128,128,128,.1);border:1px solid rgba(128,128,128,.15)}
|
||||
.swatch{padding:28px 24px;aspect-ratio:3/4;display:flex;flex-direction:column;justify-content:space-between;border-radius:0;transition:all .2s}
|
||||
.swatch:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,0,0,.15)}
|
||||
.swatch .role{font:500 11px/1 "Courier Prime",monospace;letter-spacing:.1em;text-transform:uppercase}
|
||||
.swatch .name{font:900 clamp(28px,3.4vw,48px)/.92 "Cormorant Garamond",sans-serif;letter-spacing:-.025em;text-transform:lowercase;margin-top:auto}
|
||||
.swatch .hex{font:500 12px/1 "Courier Prime",monospace;margin-top:8px}
|
||||
.swatch .usage{font:400 11px/1.5 "Courier Prime",monospace;margin-top:6px;opacity:.65}
|
||||
.swatch--primary{background:var(--primary);color:var(--secondary)}
|
||||
.swatch--secondary{background:var(--secondary);color:var(--primary)}
|
||||
.swatch--tertiary{background:var(--tertiary);color:var(--primary)}
|
||||
.swatch--accent{background:var(--accent);color:var(--secondary)}
|
||||
/* Palette */
|
||||
.palette{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--hairline);background:var(--hairline)}
|
||||
.swatch{aspect-ratio:3/4;padding:32px 28px;display:flex;flex-direction:column;justify-content:space-between;position:relative;transition:transform .4s cubic-bezier(.16,1,.3,1)}
|
||||
.swatch:hover{transform:translateY(-4px)}
|
||||
.swatch .role{font:500 11px/1 var(--f-mono);letter-spacing:.18em;text-transform:uppercase}
|
||||
.swatch .name{font-family:var(--f-disp);font-style:italic;font-weight:500;font-size:clamp(28px,3.6vw,52px);line-height:1;letter-spacing:-.005em;margin-top:auto}
|
||||
.swatch .hex{font:500 12px/1 var(--f-mono);letter-spacing:.06em;margin-top:10px}
|
||||
.swatch .usage{font:400 13px/1.55 var(--f-body);font-style:italic;margin-top:6px;opacity:.7;max-width:24ch}
|
||||
.swatch--paper{background:var(--primary);color:var(--secondary)}
|
||||
.swatch--paper .role{color:color-mix(in srgb,var(--secondary) 70%,transparent)}
|
||||
.swatch--ink{background:var(--secondary);color:var(--primary);border:1px solid var(--hairline)}
|
||||
.swatch--ink .role{color:var(--ink-fade)}
|
||||
.swatch--teal{background:var(--tertiary);color:var(--secondary)}
|
||||
.swatch--teal .role{color:color-mix(in srgb,var(--secondary) 70%,transparent)}
|
||||
.swatch--gold{background:var(--accent);color:var(--secondary)}
|
||||
.swatch--gold .role{color:color-mix(in srgb,var(--secondary) 70%,transparent)}
|
||||
@media(max-width:880px){.palette{grid-template-columns:repeat(2,1fr)}}
|
||||
|
||||
.specimen{max-width:1400px;margin:0 auto;display:flex;flex-direction:column}
|
||||
.spec-row{display:grid;grid-template-columns:11em 1fr;gap:32px;padding:28px 0;border-top:1px solid rgba(128,128,128,.15);align-items:baseline}
|
||||
/* Type specimen */
|
||||
.specimen{display:flex;flex-direction:column}
|
||||
.spec-row{display:grid;grid-template-columns:12em 1fr;gap:36px;padding:36px 0;border-top:1px solid var(--hairline);align-items:baseline}
|
||||
.spec-row:first-child{border:0;padding-top:0}
|
||||
.spec-row .meta{font:500 11px/1.4 "Courier Prime",monospace;letter-spacing:.1em;text-transform:uppercase;display:flex;flex-direction:column;gap:4px;color:var(--primary);opacity:.4}
|
||||
.spec-row .meta b{color:var(--accent);font:400 22px/1 "Cormorant Garamond",sans-serif}
|
||||
.spec-display{font:900 clamp(56px,10vw,152px)/.88 "Cormorant Garamond",sans-serif;letter-spacing:-.04em;text-transform:lowercase}
|
||||
.spec-h1{font:800 clamp(40px,7vw,104px)/.9 "Cormorant Garamond",sans-serif;letter-spacing:-.03em;text-transform:lowercase}
|
||||
.spec-h2{font:700 clamp(28px,4.2vw,64px)/1 "Cormorant Garamond",sans-serif;letter-spacing:-.02em}
|
||||
.spec-lead{font:500 clamp(18px,2vw,26px)/1.45 "Cormorant Garamond",sans-serif}
|
||||
.spec-body{font:400 17px/1.65 "Cormorant Garamond",sans-serif;max-width:60ch}
|
||||
.spec-label{font:500 13px/1 "Courier Prime",monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
|
||||
.spec-row .meta{font:500 11px/1.5 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-fade);display:flex;flex-direction:column;gap:6px}
|
||||
.spec-row .meta b{color:var(--accent);font-weight:500;font-family:var(--f-disp);font-style:italic;font-size:18px;letter-spacing:.01em;text-transform:none}
|
||||
.spec-display{font-family:var(--f-disp);font-style:italic;font-weight:500;font-size:clamp(64px,11vw,168px);line-height:.92;letter-spacing:-.015em;color:var(--primary)}
|
||||
.spec-display em{font-style:normal;color:var(--accent)}
|
||||
.spec-h1{font-family:var(--f-disp);font-style:italic;font-weight:600;font-size:clamp(44px,7vw,108px);line-height:.95;letter-spacing:-.01em;color:var(--primary)}
|
||||
.spec-h2{font-family:var(--f-disp);font-style:italic;font-weight:500;font-size:clamp(28px,4.2vw,64px);line-height:1.1;color:var(--accent)}
|
||||
.spec-lead{font-family:var(--f-disp);font-style:italic;font-weight:400;font-size:clamp(20px,2.2vw,30px);line-height:1.45;color:var(--primary);max-width:38ch}
|
||||
.spec-body{font-family:var(--f-body);font-weight:400;font-size:18px;line-height:1.7;color:var(--primary);max-width:62ch}
|
||||
.spec-body .drop-cap{float:left;font-family:var(--f-disp);font-style:italic;font-weight:600;font-size:84px;line-height:.85;padding:6px 14px 0 0;color:var(--accent)}
|
||||
.spec-label{font-family:var(--f-mono);font-weight:500;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--tertiary)}
|
||||
|
||||
.surface-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:48px;max-width:1400px;margin:0 auto}
|
||||
/* Surface / spacing */
|
||||
.surface-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:56px}
|
||||
@media(max-width:880px){.surface-grid{grid-template-columns:1fr}}
|
||||
.demo-card{background:var(--primary);color:var(--secondary);border-radius:0;padding:28px;box-shadow:0 4px 16px rgba(0,0,0,.12);display:flex;flex-direction:column;gap:18px}
|
||||
.demo-card .tag{align-self:flex-start;font:500 10px/1 "Courier Prime",monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);border:1px solid var(--accent);padding:4px 8px}
|
||||
.demo-card h3{margin:0;font:900 36px/1 "Cormorant Garamond",sans-serif;letter-spacing:-.02em;text-transform:lowercase}
|
||||
.demo-card p{margin:0;font:400 15px/1.6 "Cormorant Garamond",sans-serif;opacity:.7}
|
||||
.tokens{list-style:none;padding:0;margin:0;border-top:1px solid rgba(128,128,128,.15)}
|
||||
.tokens li{display:grid;grid-template-columns:1fr auto auto;gap:18px;align-items:center;padding:18px 0;border-bottom:1px solid rgba(128,128,128,.15)}
|
||||
.tokens li:last-child{border:0}
|
||||
.tokens .name{font:500 12px/1 "Courier Prime",monospace;letter-spacing:.1em;text-transform:uppercase;opacity:.6}
|
||||
.tokens .val{font:800 20px/1 "Cormorant Garamond",sans-serif}
|
||||
.tokens .bar{height:6px;background:var(--accent)}
|
||||
.demo-card{background:var(--primary);color:var(--secondary);padding:36px 40px;display:flex;flex-direction:column;gap:18px;position:relative;border:1px solid color-mix(in srgb,var(--secondary) 12%,transparent)}
|
||||
.demo-card .card-num{position:absolute;top:-12px;right:32px;font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;background:var(--secondary);color:var(--accent);padding:6px 12px}
|
||||
.demo-card .tag{align-self:flex-start;font:500 10px/1 var(--f-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--tertiary);padding:6px 0;border-top:1px solid var(--tertiary);border-bottom:1px solid var(--tertiary)}
|
||||
.demo-card h3{margin:0;font-family:var(--f-disp);font-style:italic;font-weight:600;font-size:44px;line-height:1;letter-spacing:-.01em}
|
||||
.demo-card p{margin:0;font-family:var(--f-body);font-size:15px;line-height:1.7;color:color-mix(in srgb,var(--secondary) 75%,transparent)}
|
||||
.demo-card .num-stat{font-family:var(--f-disp);font-style:italic;font-weight:600;font-size:88px;line-height:1;color:var(--secondary);letter-spacing:-.015em}
|
||||
.demo-card .num-stat sup{font-size:32px;color:var(--tertiary);vertical-align:super;line-height:0}
|
||||
.tokens{list-style:none;padding:0;margin:0;border-top:1px solid var(--hairline)}
|
||||
.tokens li{display:grid;grid-template-columns:1fr auto auto;gap:24px;align-items:center;padding:22px 0;border-bottom:1px solid var(--hairline)}
|
||||
.tokens .name{font:500 11px/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-dim)}
|
||||
.tokens .val{font-family:var(--f-disp);font-style:italic;font-weight:500;font-size:24px;letter-spacing:-.005em;color:var(--accent)}
|
||||
.tokens .bar{height:1px;background:var(--accent)}
|
||||
|
||||
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:48px;max-width:1400px;margin:0 auto}
|
||||
/* Two-col panels */
|
||||
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:48px}
|
||||
@media(max-width:880px){.two-col{grid-template-columns:1fr}}
|
||||
.panel{border:1px solid rgba(128,128,128,.15);background:color-mix(in srgb,var(--secondary) 70%,transparent)};padding:36px;border-radius:0;display:flex;flex-direction:column;gap:22px}
|
||||
.panel .label-row{font:500 11px/1 "Courier Prime",monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
|
||||
.panel h4{margin:0;font:800 32px/1 "Cormorant Garamond",sans-serif;text-transform:lowercase}
|
||||
.panel p{margin:0;font:400 13px/1.7 "Cormorant Garamond",sans-serif;opacity:.65;max-width:38ch}
|
||||
.panel{border:1px solid var(--hairline);padding:40px;display:flex;flex-direction:column;gap:24px;background:color-mix(in srgb,var(--secondary) 90%,var(--accent))}
|
||||
.panel h4{margin:0;font-family:var(--f-disp);font-style:italic;font-weight:600;font-size:36px;line-height:1;letter-spacing:-.01em;color:var(--accent)}
|
||||
.panel .label-row{font:500 11px/1 var(--f-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--tertiary)}
|
||||
.panel p{margin:0;font-family:var(--f-body);font-size:15px;line-height:1.75;color:var(--ink-dim);max-width:42ch}
|
||||
.panel pre{margin:0;padding:14px 18px;border:1px solid var(--hairline);background:color-mix(in srgb,var(--secondary) 60%,transparent);font:12px/1.6 var(--f-mono);color:var(--accent);overflow-x:auto}
|
||||
|
||||
.bg-preview{border:1px solid rgba(128,128,128,.15);aspect-ratio:4/3;position:relative;overflow:hidden;background:var(--secondary);border-radius:0}
|
||||
.bg-preview canvas{width:100%;height:100%;display:block}
|
||||
.bg-preview .badge{position:absolute;bottom:12px;left:12px;font:500 10px/1 "Courier Prime",monospace;letter-spacing:.1em;text-transform:uppercase;background:color-mix(in srgb,var(--secondary) 75%,transparent);padding:6px 10px;backdrop-filter:blur(8px)}
|
||||
|
||||
details.code-block{border:1px solid rgba(128,128,128,.15);background:color-mix(in srgb,var(--secondary) 60%,transparent)};margin-top:12px;border-radius:0}
|
||||
details.code-block summary{cursor:pointer;padding:14px 18px;list-style:none;font:500 11px/1 "Courier Prime",monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);display:flex;justify-content:space-between}
|
||||
details.code-block summary::-webkit-details-marker{display:none}
|
||||
details.code-block summary::after{content:"+";font:900 18px/1 "Cormorant Garamond",sans-serif;color:var(--accent)}
|
||||
details.code-block[open] summary::after{content:"\2212"}
|
||||
details.code-block pre{margin:0;padding:16px;border-top:1px solid rgba(128,128,128,.15);font:11px/1.6 "Courier Prime",monospace;color:var(--primary);opacity:.65;background:transparent;overflow-x:auto;white-space:pre-wrap;word-break:break-word;max-height:320px;overflow-y:auto}
|
||||
|
||||
.rules-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;max-width:1400px;margin:0 auto}
|
||||
/* Guidelines */
|
||||
.rules-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px}
|
||||
@media(max-width:880px){.rules-grid{grid-template-columns:1fr}}
|
||||
.rules-col{}
|
||||
.rules-col.do{}
|
||||
.rules-col.dont{}
|
||||
.rules-col h3{font:900 56px/1 "Cormorant Garamond",sans-serif;letter-spacing:-.03em;margin:0 0 28px;text-transform:lowercase}
|
||||
.rules-col h3{font-family:var(--f-disp);font-style:italic;font-weight:600;font-size:64px;line-height:1;margin:0 0 32px;letter-spacing:-.01em}
|
||||
.rules-col.do h3{color:var(--accent)}
|
||||
.rules-col.dont h3{opacity:.4}
|
||||
.rules-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0px}
|
||||
.rules-col li{display:grid;grid-template-columns:2em 1fr;gap:8px;padding:16px 0;border-top:1px solid rgba(128,128,128,.15);font:500 18px/1.45 "Cormorant Garamond",sans-serif}
|
||||
.rules-col li::before{font:800 22px/1.2 "Cormorant Garamond",sans-serif;align-self:start;}
|
||||
.rules-col.do li::before{content:"+";color:var(--accent)}
|
||||
.rules-col.dont li::before{content:"\2014";opacity:.4}
|
||||
.rules-col.dont h3{color:var(--ink-fade)}
|
||||
.rules-col ul{list-style:none;margin:0;padding:0}
|
||||
.rules-col li{display:grid;grid-template-columns:2.2em 1fr;gap:12px;padding:20px 0;border-top:1px solid var(--hairline);font-family:var(--f-body);font-size:17px;line-height:1.55;color:var(--primary)}
|
||||
.rules-col li::before{font-family:var(--f-disp);font-style:italic;font-weight:600;font-size:24px;line-height:1.2;align-self:start}
|
||||
.rules-col.do li::before{content:"§";color:var(--accent)}
|
||||
.rules-col.dont li::before{content:"¶";color:var(--ink-fade)}
|
||||
.rules-col.dont li{color:var(--ink-dim)}
|
||||
|
||||
.templates-wrap{background:color-mix(in srgb,var(--secondary) 96%,var(--accent))}
|
||||
.templates-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:1400px;margin:0 auto}
|
||||
/* Templates gallery */
|
||||
.templates-wrap{border-top:1px solid var(--hairline)}
|
||||
.templates-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
|
||||
@media(max-width:1100px){.templates-grid{grid-template-columns:repeat(2,1fr)}}
|
||||
@media(max-width:720px){.templates-grid{grid-template-columns:1fr}}
|
||||
.tmpl{background:var(--secondary);border:1px solid rgba(128,128,128,.15);overflow:hidden;border-radius:0;transition:all .2s}
|
||||
.tmpl{background:var(--secondary);border:1px solid var(--hairline);overflow:hidden;transition:border-color .25s,transform .3s cubic-bezier(.16,1,.3,1)}
|
||||
.tmpl:hover{border-color:var(--accent);transform:translateY(-2px)}
|
||||
.tmpl-thumb{width:100%;aspect-ratio:16/9;overflow:hidden;position:relative;background:#050505;border-bottom:1px solid rgba(128,128,128,.15)}
|
||||
.tmpl-thumb{width:100%;aspect-ratio:16/9;overflow:hidden;position:relative;background:#0a1426}
|
||||
.tmpl-thumb .scale-wrap{width:1920px;height:1080px;transform-origin:top left}
|
||||
.tmpl-foot{display:flex;justify-content:space-between;padding:14px 18px;font:500 11px/1 "Courier Prime",monospace;letter-spacing:.14em;text-transform:uppercase}
|
||||
.tmpl-foot{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-top:1px solid var(--hairline);font:500 11px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase}
|
||||
.tmpl-foot .name{color:var(--primary);font-family:var(--f-disp);font-style:italic;font-weight:500;font-size:18px;letter-spacing:0;text-transform:none}
|
||||
.tmpl-foot .idx{color:var(--accent)}
|
||||
|
||||
footer.endcap{background:var(--accent);color:var(--secondary);padding:80px var(--pad-x) 60px;display:grid;grid-template-columns:1fr auto;gap:48px;align-items:end}
|
||||
footer.endcap .endmark{font:900 clamp(60px,13vw,220px)/.85 "Cormorant Garamond",sans-serif;letter-spacing:-.04em;text-transform:lowercase;margin:0}
|
||||
footer.endcap .meta{font:500 12px/2 "Courier Prime",monospace;letter-spacing:.1em;text-transform:uppercase;opacity:.6;text-align:right}
|
||||
footer.endcap .meta b{opacity:1;color:var(--accent)}
|
||||
/* Endcap */
|
||||
footer.endcap{padding:96px var(--pad-x) 56px;border-top:1px solid var(--hairline);display:grid;grid-template-columns:1fr auto;gap:48px;align-items:end}
|
||||
footer.endcap .endmark{font-family:var(--f-disp);font-style:italic;font-weight:500;font-size:clamp(60px,14vw,240px);line-height:.85;letter-spacing:-.02em;margin:0;color:var(--primary)}
|
||||
footer.endcap .endmark em{font-style:normal;color:var(--accent)}
|
||||
footer.endcap .meta{font:500 11px/2 var(--f-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-fade);text-align:right}
|
||||
footer.endcap .meta b{color:var(--accent);font-family:var(--f-disp);font-style:italic;font-weight:500;letter-spacing:0;text-transform:none;font-size:14px}
|
||||
</style>
|
||||
|
||||
<!-- ════════════════════════════════════════════════════════════
|
||||
VELLUM TEMPLATE STYLES — 1920×1080 scholarly slides.
|
||||
════════════════════════════════════════════════════════════ -->
|
||||
<style id="template-css">
|
||||
__TEMPLATE_CSS__
|
||||
.ds-slide-frame{
|
||||
--v-bg:#0F1A2E; --v-ink:#FCFAF1; --v-gold:#F4E2A4; --v-teal:#6D9CA1;
|
||||
--v-ink-2:color-mix(in srgb,#FCFAF1 55%,#0F1A2E);
|
||||
--v-ink-3:color-mix(in srgb,#FCFAF1 28%,#0F1A2E);
|
||||
--v-line:color-mix(in srgb,#FCFAF1 14%,transparent);
|
||||
--v-f-disp:"Cormorant Garamond",serif;
|
||||
--v-f-body:"Cormorant Garamond",serif;
|
||||
--v-f-sans:"Inter",sans-serif;
|
||||
--v-f-mono:"JetBrains Mono",monospace;
|
||||
width:1920px;height:1080px;position:relative;overflow:hidden
|
||||
}
|
||||
.ds-slide-frame *{box-sizing:border-box}
|
||||
.ds-slide-frame .slide{width:1920px;height:1080px;position:relative;padding:96px 144px;display:grid;grid-template-rows:auto 1fr auto;overflow:hidden;background:var(--v-bg);color:var(--v-ink);font-family:var(--v-f-body)}
|
||||
.ds-slide-frame .slide-chrome,.ds-slide-frame .slide-foot{display:flex;justify-content:space-between;align-items:center;font:500 16px/1 var(--v-f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--v-ink-3)}
|
||||
.ds-slide-frame .slide-chrome{padding-bottom:18px;border-bottom:1px solid var(--v-line);margin-bottom:36px}
|
||||
.ds-slide-frame .slide-foot{padding-top:18px;border-top:1px solid var(--v-line);margin-top:36px}
|
||||
.ds-slide-frame .slide-chrome .accent,.ds-slide-frame .slide-foot .accent{color:var(--v-gold)}
|
||||
.ds-slide-frame .display{font-family:var(--v-f-disp);font-style:italic;font-weight:500;font-size:260px;line-height:.88;letter-spacing:-.025em;color:var(--v-ink)}
|
||||
.ds-slide-frame .display em{font-style:normal;color:var(--v-gold)}
|
||||
.ds-slide-frame .h1{font-family:var(--v-f-disp);font-style:italic;font-weight:500;font-size:156px;line-height:.92;letter-spacing:-.02em;color:var(--v-ink)}
|
||||
.ds-slide-frame .h1 em{font-style:normal;color:var(--v-gold)}
|
||||
.ds-slide-frame .h2{font-family:var(--v-f-disp);font-style:italic;font-weight:500;font-size:96px;line-height:1.05;letter-spacing:-.015em;color:var(--v-ink)}
|
||||
.ds-slide-frame .h2 em{font-style:normal;color:var(--v-gold)}
|
||||
.ds-slide-frame .h3{font-family:var(--v-f-disp);font-style:italic;font-weight:600;font-size:56px;line-height:1.15;letter-spacing:-.01em;color:var(--v-gold)}
|
||||
.ds-slide-frame .lead{font-family:var(--v-f-disp);font-style:italic;font-weight:400;font-size:36px;line-height:1.45;color:var(--v-ink-2)}
|
||||
.ds-slide-frame .body{font-family:var(--v-f-body);font-weight:400;font-size:26px;line-height:1.7;color:var(--v-ink)}
|
||||
.ds-slide-frame .label{font:500 16px/1 var(--v-f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--v-teal)}
|
||||
.ds-slide-frame .accent{color:var(--v-gold)}
|
||||
.ds-slide-frame .muted{color:var(--v-ink-2)}
|
||||
|
||||
/* slide--cover */
|
||||
.ds-slide-frame .slide--cover .slide-chrome,.ds-slide-frame .slide--cover .slide-foot{display:none}
|
||||
.ds-slide-frame .slide--cover{display:flex;flex-direction:column;justify-content:flex-end}
|
||||
.ds-slide-frame .cover-top{display:flex;justify-content:space-between;align-items:flex-start;font:500 16px/1 var(--v-f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--v-ink-3);margin-bottom:auto}
|
||||
.ds-slide-frame .cover-top .accent{color:var(--v-gold)}
|
||||
.ds-slide-frame .cover-body{display:flex;flex-direction:column;gap:32px}
|
||||
.ds-slide-frame .cover-rule{width:120px;height:1px;background:var(--v-gold);margin-bottom:8px}
|
||||
|
||||
/* slide--chapter */
|
||||
.ds-slide-frame .slide--chapter .slide-chrome,.ds-slide-frame .slide--chapter .slide-foot{display:none}
|
||||
.ds-slide-frame .slide--chapter{display:flex;flex-direction:column;justify-content:center;gap:24px;padding:96px 200px}
|
||||
.ds-slide-frame .chapter-num{font-family:var(--v-f-disp);font-style:italic;font-weight:500;font-size:52px;color:var(--v-gold);letter-spacing:.04em}
|
||||
.ds-slide-frame .chapter-num span{font-style:normal;color:var(--v-ink-3);font-size:36px;margin-right:14px}
|
||||
|
||||
/* slide--epigraph (quote) */
|
||||
.ds-slide-frame .slide--epigraph .slide-chrome,.ds-slide-frame .slide--epigraph .slide-foot{display:none}
|
||||
.ds-slide-frame .slide--epigraph{display:flex;flex-direction:column;justify-content:center;padding:96px 256px;gap:48px}
|
||||
.ds-slide-frame .epigraph-mark{font-family:var(--v-f-disp);font-style:italic;font-weight:500;font-size:240px;line-height:.5;color:var(--v-gold);height:120px}
|
||||
.ds-slide-frame .epigraph-text{font-family:var(--v-f-disp);font-style:italic;font-weight:400;font-size:84px;line-height:1.18;letter-spacing:-.015em;color:var(--v-ink);max-width:88%}
|
||||
.ds-slide-frame .epigraph-attr{display:flex;flex-direction:column;gap:8px;padding-top:24px;border-top:1px solid var(--v-line);max-width:480px}
|
||||
.ds-slide-frame .epigraph-attr .name{font-family:var(--v-f-disp);font-style:italic;font-weight:500;font-size:32px;color:var(--v-gold)}
|
||||
.ds-slide-frame .epigraph-attr .src{font-family:var(--v-f-mono);font-size:16px;letter-spacing:.1em;text-transform:uppercase;color:var(--v-ink-3)}
|
||||
|
||||
/* slide--treatise (lead + body) */
|
||||
.ds-slide-frame .slide--treatise .slide-body{display:grid;grid-template-columns:1fr 2fr;gap:96px;align-items:start;padding-top:48px}
|
||||
.ds-slide-frame .treatise-side{display:flex;flex-direction:column;gap:18px}
|
||||
.ds-slide-frame .treatise-side .label{color:var(--v-gold)}
|
||||
.ds-slide-frame .treatise-body{display:flex;flex-direction:column;gap:24px}
|
||||
.ds-slide-frame .treatise-body .body{column-count:1}
|
||||
.ds-slide-frame .drop-cap{float:left;font-family:var(--v-f-disp);font-style:italic;font-weight:600;font-size:120px;line-height:.82;padding:8px 18px 0 0;color:var(--v-gold)}
|
||||
|
||||
/* slide--marginalia (two cols + side notes) */
|
||||
.ds-slide-frame .slide--marginalia .slide-body{display:grid;grid-template-columns:2.5em 1fr 1fr;gap:48px;align-items:start;padding-top:48px}
|
||||
.ds-slide-frame .margin-numerals{display:flex;flex-direction:column;gap:36px;padding-top:6px}
|
||||
.ds-slide-frame .margin-numerals span{font-family:var(--v-f-disp);font-style:italic;font-weight:500;font-size:36px;color:var(--v-gold);line-height:1.4}
|
||||
.ds-slide-frame .margin-text{display:flex;flex-direction:column;gap:36px}
|
||||
.ds-slide-frame .margin-text p{margin:0;font-family:var(--v-f-body);font-size:22px;line-height:1.65;color:var(--v-ink)}
|
||||
.ds-slide-frame .margin-text p strong{font-family:var(--v-f-disp);font-style:italic;font-weight:600;font-size:24px;color:var(--v-gold);display:block;margin-bottom:4px}
|
||||
|
||||
/* slide--datum (stats) */
|
||||
.ds-slide-frame .slide--datum .slide-body{display:flex;flex-direction:column;justify-content:center;gap:48px;padding-top:48px}
|
||||
.ds-slide-frame .datum-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:64px}
|
||||
.ds-slide-frame .datum-card{display:flex;flex-direction:column;gap:14px;padding-top:24px;border-top:1px solid var(--v-line)}
|
||||
.ds-slide-frame .datum-card .stat{font-family:var(--v-f-disp);font-style:italic;font-weight:500;font-size:144px;line-height:1;color:var(--v-gold);letter-spacing:-.03em}
|
||||
.ds-slide-frame .datum-card .stat sup{font-size:48px;vertical-align:super;color:var(--v-teal);line-height:0}
|
||||
.ds-slide-frame .datum-card .lbl{font-family:var(--v-f-body);font-size:26px;line-height:1.45;color:var(--v-ink)}
|
||||
.ds-slide-frame .datum-card .note{font:500 14px/1 var(--v-f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--v-ink-3)}
|
||||
|
||||
/* slide--catalogue (list) */
|
||||
.ds-slide-frame .slide--catalogue .slide-body{display:grid;grid-template-columns:1fr 1.6fr;gap:96px;align-items:start;padding-top:48px}
|
||||
.ds-slide-frame .catalogue-head{display:flex;flex-direction:column;gap:20px}
|
||||
.ds-slide-frame .catalogue-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column}
|
||||
.ds-slide-frame .catalogue-list li{display:grid;grid-template-columns:3em 1fr;gap:24px;padding:24px 0;border-top:1px solid var(--v-line);align-items:baseline}
|
||||
.ds-slide-frame .catalogue-list li::before{content:counter(idx, lower-roman);counter-increment:idx;font-family:var(--v-f-disp);font-style:italic;font-weight:500;font-size:30px;color:var(--v-gold)}
|
||||
.ds-slide-frame .catalogue-list{counter-reset:idx}
|
||||
.ds-slide-frame .catalogue-list .li-title{font-family:var(--v-f-disp);font-style:italic;font-weight:500;font-size:36px;color:var(--v-ink);line-height:1.2;margin-bottom:4px;display:block}
|
||||
.ds-slide-frame .catalogue-list .li-desc{font-family:var(--v-f-body);font-size:22px;line-height:1.55;color:var(--v-ink-2);display:block}
|
||||
|
||||
/* slide--diptych (split image/text) */
|
||||
.ds-slide-frame .slide--diptych .slide-body{display:grid;grid-template-columns:1fr 1fr;gap:88px;align-items:center;padding-top:48px}
|
||||
.ds-slide-frame .diptych-plate{aspect-ratio:4/5;width:100%;border:1px solid var(--v-line);display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--v-bg) 80%,var(--v-gold));font-family:var(--v-f-mono);font-size:18px;letter-spacing:.14em;text-transform:uppercase;color:var(--v-ink-3);position:relative}
|
||||
.ds-slide-frame .diptych-plate::before,.ds-slide-frame .diptych-plate::after{content:"";position:absolute;width:32px;height:32px;border:1px solid var(--v-gold)}
|
||||
.ds-slide-frame .diptych-plate::before{top:16px;left:16px;border-right:0;border-bottom:0}
|
||||
.ds-slide-frame .diptych-plate::after{bottom:16px;right:16px;border-left:0;border-top:0}
|
||||
.ds-slide-frame .diptych-text{display:flex;flex-direction:column;gap:32px}
|
||||
.ds-slide-frame .plate-caption{font:500 14px/1.5 var(--v-f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--v-ink-3);margin-top:12px}
|
||||
|
||||
/* slide--colophon (end) */
|
||||
.ds-slide-frame .slide--colophon .slide-chrome,.ds-slide-frame .slide--colophon .slide-foot{display:none}
|
||||
.ds-slide-frame .slide--colophon{display:flex;flex-direction:column;justify-content:space-between;padding:120px 144px}
|
||||
.ds-slide-frame .colophon-mark{font-family:var(--v-f-disp);font-style:italic;font-weight:500;font-size:280px;line-height:.9;letter-spacing:-.025em;color:var(--v-gold);align-self:flex-end;margin-bottom:auto}
|
||||
.ds-slide-frame .colophon-text{display:flex;flex-direction:column;gap:18px;max-width:600px;padding-top:24px;border-top:1px solid var(--v-gold)}
|
||||
.ds-slide-frame .colophon-text .body{font-style:italic;font-family:var(--v-f-disp);font-size:32px;line-height:1.45}
|
||||
.ds-slide-frame .colophon-meta{display:flex;gap:48px;font:500 14px/1.5 var(--v-f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--v-ink-3);padding-top:24px;border-top:1px solid var(--v-line)}
|
||||
.ds-slide-frame .colophon-meta b{color:var(--v-gold);font-weight:500}
|
||||
__TEMPLATE_CSS_PLACEHOLDER__
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<canvas id="design-bg"></canvas>
|
||||
<div id="bg-veil"></div>
|
||||
|
||||
<body>
|
||||
|
||||
<!-- Top rail -->
|
||||
<div class="rail">
|
||||
<div class="brand"><span class="dot"></span>__NAME__</div>
|
||||
<nav><a href="#palette">01</a><a href="#type">02</a><a href="#surface">03</a><a href="#motion">04</a><a href="#background">05</a><a href="#guidelines">06</a><a href="#templates">07</a></nav>
|
||||
<div class="brand"><span class="sigil"></span><b>Vellum</b> <span class="meta">— a design system</span></div>
|
||||
<nav>
|
||||
<a href="#palette">i. Palette</a>
|
||||
<a href="#type">ii. Type</a>
|
||||
<a href="#surface">iii. Surface</a>
|
||||
<a href="#motion">iv. Motion</a>
|
||||
<a href="#guidelines">v. Guidelines</a>
|
||||
<a href="#templates">vi. Templates</a>
|
||||
</nav>
|
||||
<div class="meta">vol. i · mmxxvi</div>
|
||||
</div>
|
||||
|
||||
<header class="cover">
|
||||
<h1 class="cover-headline">__NAME_LINE1____NAME_LINE2__.</h1>
|
||||
<!-- COVER -->
|
||||
<header class="cover" data-screen-label="00 Cover">
|
||||
<div class="cover-chrome">
|
||||
<div><span class="sigil"></span>Design System · № 003</div>
|
||||
<div>Quartō · mmxxvi</div>
|
||||
</div>
|
||||
<h1 class="cover-headline">vell<span class="accent-word">u</span>m<span class="dot">.</span></h1>
|
||||
<div class="cover-foot">
|
||||
<div class="cell"><span class="k">Template</span><span class="v">vellum</span></div>
|
||||
<div class="cell"><span class="k">Type</span><span class="v big">Cormorant Garamond</span></div>
|
||||
<div class="cell"><span class="k">Accent</span><span class="v">__ACCENT_LABEL__</span></div>
|
||||
<div class="cell"><span class="k">Doc</span><span class="v">07 sections · __SLIDE_COUNT__ templates</span></div>
|
||||
<div class="cell"><span class="k">Discipline</span><span class="v">Editorial · Research · Brief</span></div>
|
||||
<div class="cell"><span class="k">Primary type</span><span class="v">Cormorant <em>italic</em></span></div>
|
||||
<div class="cell"><span class="k">Accent</span><span class="v">Gold #F4E2A4</span></div>
|
||||
<div class="cell"><span class="k">Volume</span><span class="v plain">vi sections · ix slide types</span></div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section class="manifesto">
|
||||
<!-- MANIFESTO -->
|
||||
<section class="manifesto" data-screen-label="00 Manifesto">
|
||||
<div class="manifesto-grid">
|
||||
<div class="num">— Manifesto</div>
|
||||
<p>Deep navy canvas with warm-yellow Cormorant serifs and a single dusty teal accent. A quiet, scholarly aesthetic.</p>
|
||||
<div class="num">— Manifesto</div>
|
||||
<p>type holds <em>silence</em>. the page is the <em>argument</em>. the reader is a slow walker, and the deck is a <em>long sentence</em>.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="palette">
|
||||
<!-- I. PALETTE -->
|
||||
<section id="palette" data-screen-label="01 Palette">
|
||||
<div class="section-head">
|
||||
<div class="num">01 — Palette</div>
|
||||
<h2>four colors.</h2>
|
||||
<p class="lede">__PALETTE_LEDE__</p>
|
||||
<div class="num">i — Palette</div>
|
||||
<h2>Four colours,<br/><em>quietly composed.</em></h2>
|
||||
<p class="lede">Deep navy as the canvas. Warm yellow as the only voice. A dusty teal whispered in for chrome. Off-white reserved for body and breath.</p>
|
||||
</div>
|
||||
<div class="palette">
|
||||
<div class="swatch swatch--primary"><div class="role">Primary</div><div><div class="name">__PRIMARY_NAME__</div><div class="hex">__PRIMARY__</div><div class="usage">Ink on dark.</div></div></div>
|
||||
<div class="swatch swatch--secondary"><div class="role">Secondary</div><div><div class="name">__SECONDARY_NAME__</div><div class="hex">__SECONDARY__</div><div class="usage">Canvas.</div></div></div>
|
||||
<div class="swatch swatch--tertiary"><div class="role">Tertiary</div><div><div class="name">__TERTIARY_NAME__</div><div class="hex">__TERTIARY__</div><div class="usage">Muted. Borders.</div></div></div>
|
||||
<div class="swatch swatch--accent"><div class="role">Accent</div><div><div class="name">__ACCENT_NAME__</div><div class="hex">__ACCENT__</div><div class="usage">Signal. Reserved.</div></div></div>
|
||||
<div class="swatch swatch--paper"><div class="role">i · paper</div><div><div class="name">vellum.</div><div class="hex">__PRIMARY__</div><div class="usage">Body text on dark. Rare and reserved.</div></div></div>
|
||||
<div class="swatch swatch--ink"><div class="role">ii · ink</div><div><div class="name">deep.</div><div class="hex">__SECONDARY__</div><div class="usage">The canvas. Cool, never cold.</div></div></div>
|
||||
<div class="swatch swatch--teal"><div class="role">iii · margin</div><div><div class="name">teal.</div><div class="hex">__TERTIARY__</div><div class="usage">Chrome, marginalia, the spine.</div></div></div>
|
||||
<div class="swatch swatch--gold"><div class="role">iv · gold</div><div><div class="name">warm.</div><div class="hex">__ACCENT__</div><div class="usage">The accent. Used <em>sparingly</em>.</div></div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="type">
|
||||
<!-- II. TYPE -->
|
||||
<section id="type" data-screen-label="02 Type">
|
||||
<div class="section-head">
|
||||
<div class="num">02 — Typography</div>
|
||||
<h2>type scale.</h2>
|
||||
<div class="num">ii — Typography</div>
|
||||
<h2>Cormorant,<br/><em>almost always italic.</em></h2>
|
||||
<p class="lede">Cormorant Garamond does nearly all the speaking — italics for emphasis, roman for accent words. Inter holds the sans column for small chrome, JetBrains Mono runs labels.</p>
|
||||
</div>
|
||||
<div class="specimen">
|
||||
<div class="spec-row"><div class="meta"><span>Display</span><b>Cormorant Garamond</b></div><div class="spec-display">hello world.</div></div>
|
||||
<div class="spec-row"><div class="meta"><span>H1</span><b>Cormorant Garamond</b></div><div class="spec-h1">chapter one</div></div>
|
||||
<div class="spec-row"><div class="meta"><span>H2</span><b>Cormorant Garamond</b></div><div class="spec-h2">Slide headlines.</div></div>
|
||||
<div class="spec-row"><div class="meta"><span>Body</span><b>Cormorant Garamond</b></div><p class="spec-body">Body copy below 24px is forbidden in video compositions.</p></div>
|
||||
<div class="spec-row"><div class="meta"><span>Label</span><b>Courier Prime</b></div><div class="spec-label">// chrome · labels · metadata</div></div>
|
||||
<div class="spec-row">
|
||||
<div class="meta"><span>Display</span><b>Cormorant italic 500</b><span>11vw · italic · -0.02em</span></div>
|
||||
<div class="spec-display"><em>quiet</em> argument.</div>
|
||||
</div>
|
||||
<div class="spec-row">
|
||||
<div class="meta"><span>Heading I</span><b>Cormorant italic 600</b><span>7vw · italic · -0.01em</span></div>
|
||||
<div class="spec-h1">chapter <em>one</em></div>
|
||||
</div>
|
||||
<div class="spec-row">
|
||||
<div class="meta"><span>Heading II</span><b>Cormorant italic 500</b><span>4.2vw · gold</span></div>
|
||||
<div class="spec-h2">A subheading sets the section.</div>
|
||||
</div>
|
||||
<div class="spec-row">
|
||||
<div class="meta"><span>Lead</span><b>Cormorant italic 400</b><span>2.2vw · 1.45 · 38ch</span></div>
|
||||
<div class="spec-lead">The lead carries the argument in a single, unhurried breath.</div>
|
||||
</div>
|
||||
<div class="spec-row">
|
||||
<div class="meta"><span>Body</span><b>Cormorant 400</b><span>18px · 1.7 · 62ch</span></div>
|
||||
<p class="spec-body"><span class="drop-cap">T</span>he reader is a slow walker — every line should reward the pace. Body copy below 24px is forbidden in any composition rendered above 1080p. Set generously; let the page breathe. Use italic for emphasis, never bold.</p>
|
||||
</div>
|
||||
<div class="spec-row">
|
||||
<div class="meta"><span>Label</span><b>JetBrains Mono 500</b><span>12px · 0.16em · teal</span></div>
|
||||
<div class="spec-label">// chrome · folio · marginalia · note</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="surface">
|
||||
<!-- III. SURFACE -->
|
||||
<section id="surface" data-screen-label="03 Surface">
|
||||
<div class="section-head">
|
||||
<div class="num">03 — Surface</div>
|
||||
<h2>corners. depth.</h2>
|
||||
<div class="num">iii — Surface</div>
|
||||
<h2>Paper, <em>then</em><br/>ink.</h2>
|
||||
<p class="lede">Surfaces are nearly invisible. Hairline borders, no shadows. The page is the surface; the canvas is the page.</p>
|
||||
</div>
|
||||
<div class="surface-grid">
|
||||
<div class="demo-card">
|
||||
<span class="tag">// example</span>
|
||||
<h3>example card.</h3>
|
||||
<p>Configured corners, padding, shadow.</p>
|
||||
<span class="card-num">№ 1</span>
|
||||
<span class="tag">// exempla · card</span>
|
||||
<h3><em>Exempla.</em></h3>
|
||||
<p>A surface is a marginal thing. A border, perhaps; a numeral, perhaps; otherwise the words alone must hold the page together. The accent is rationed: precisely one gilded element per surface.</p>
|
||||
<div class="num-stat">42<sup>%</sup></div>
|
||||
<p style="font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--tertiary);font-family:var(--f-mono);margin:0">// quarter on quarter · exempla</p>
|
||||
</div>
|
||||
<ul class="tokens">
|
||||
<li><span class="name">Corners</span><span class="val">__CORNER_RADIUS__</span><span class="bar" style="width:8px"></span></li>
|
||||
<li><span class="name">Padding</span><span class="val">__PADDING__</span><span class="bar" style="width:32px"></span></li>
|
||||
<li><span class="name">Gap</span><span class="val">__GAP__</span><span class="bar" style="width:32px"></span></li>
|
||||
<li><span class="name">Elevation</span><span class="val">__ELEVATION__</span><span class="bar" style="width:18px"></span></li>
|
||||
<li><span class="name">Density</span><span class="val">__DENSITY__</span><span class="bar" style="width:48px"></span></li>
|
||||
<li><span class="name">Page margin</span><span class="val">144 px</span><span class="bar" style="width:64px"></span></li>
|
||||
<li><span class="name">Column gap</span><span class="val">96 px</span><span class="bar" style="width:44px"></span></li>
|
||||
<li><span class="name">Border</span><span class="val">1 px hairline</span><span class="bar" style="width:8px"></span></li>
|
||||
<li><span class="name">Shadow</span><span class="val"><em>none</em></span><span class="bar" style="width:0;opacity:.2"></span></li>
|
||||
<li><span class="name">Density</span><span class="val">Low · airy</span><span class="bar" style="width:32px"></span></li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="motion">
|
||||
<!-- IV. MOTION -->
|
||||
<section id="motion" data-screen-label="04 Motion">
|
||||
<div class="section-head">
|
||||
<div class="num">04 — Motion</div>
|
||||
<h2>__EASING_HEADLINE__</h2>
|
||||
<p class="lede">__EASING_LEDE__</p>
|
||||
<div class="num">iv — Motion</div>
|
||||
<h2>Slow.<br/><em>Considered.</em></h2>
|
||||
<p class="lede">Motion is patient. Long durations, gentle eases. The page should feel turned, not flicked.</p>
|
||||
</div>
|
||||
<div class="two-col">
|
||||
<div class="panel">
|
||||
<div class="label-row">// easing</div>
|
||||
<h4>__EASING_NAME__</h4>
|
||||
<p>__EASING_DESC__</p>
|
||||
<pre>__EASING_VALUE__</pre>
|
||||
<span class="label-row">// primary easing</span>
|
||||
<h4><em>quintic.out</em></h4>
|
||||
<p>Long tail, soft landing. The page resolves rather than arrives. Use for major entrances — chapter headings, datum reveals, treatise margins.</p>
|
||||
<pre>cubic-bezier(0.22, 1, 0.36, 1)</pre>
|
||||
</div>
|
||||
<div class="panel">
|
||||
<div class="label-row">// duration</div>
|
||||
<h4>__DURATION_DEFAULT__</h4>
|
||||
<p>__DURATION_DESC__</p>
|
||||
<pre>__DURATION_VALUES__</pre>
|
||||
<span class="label-row">// duration</span>
|
||||
<h4><em>1.2s</em></h4>
|
||||
<p>Slides settle in 1.2s. Entrances 0.8s. Hovers 0.4s. The reader is unhurried; so is the deck.</p>
|
||||
<pre>--dur-slide: 1.2s
|
||||
--dur-enter: 0.8s
|
||||
--dur-hover: 0.4s</pre>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="background">
|
||||
<!-- V. GUIDELINES -->
|
||||
<section id="guidelines" data-screen-label="05 Guidelines">
|
||||
<div class="section-head">
|
||||
<div class="num">05 — Background</div>
|
||||
<h2>__BG_HEADLINE__</h2>
|
||||
<p class="lede">__BG_LEDE__</p>
|
||||
</div>
|
||||
<div class="two-col">
|
||||
<div class="bg-preview"><canvas id="bg-preview-canvas"></canvas><span class="badge">// __BG_BADGE__</span></div>
|
||||
<div style="display:flex;flex-direction:column;gap:8px">
|
||||
<ul class="tokens" style="border-top:none">
|
||||
<li><span class="name">Geometry</span><span class="val">__BG_TYPE__</span><span class="bar" style="width:36px"></span></li>
|
||||
<li><span class="name">Density</span><span class="val">__BG_DENSITY__</span><span class="bar" style="width:42px"></span></li>
|
||||
<li><span class="name">Speed</span><span class="val">__BG_SPEED__</span><span class="bar" style="width:18px"></span></li>
|
||||
<li><span class="name">Strength</span><span class="val">__BG_STRENGTH__</span><span class="bar" style="width:52px"></span></li>
|
||||
<li><span class="name">Grain</span><span class="val">__BG_GRAIN__</span><span class="bar" style="width:24px"></span></li>
|
||||
</ul>
|
||||
<details class="code-block"><summary>// shader config</summary>
|
||||
<pre>__SHADER_CONFIG__</pre>
|
||||
</details>
|
||||
<details class="code-block"><summary>// vertex shader</summary>
|
||||
<pre id="vtx-src">__SHADER_VERTEX__</pre>
|
||||
</details>
|
||||
<details class="code-block"><summary>// fragment shader</summary>
|
||||
<pre id="frg-src">__SHADER_FRAGMENT__</pre>
|
||||
</details>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="guidelines">
|
||||
<div class="section-head">
|
||||
<div class="num">06 — Guidelines</div>
|
||||
<h2>do and don’t.</h2>
|
||||
<div class="num">v — Guidelines</div>
|
||||
<h2><em>Sic et</em><br/>non.</h2>
|
||||
<p class="lede">The rules are short. The system collapses the moment any are violated.</p>
|
||||
</div>
|
||||
<div class="rules-grid">
|
||||
<div class="rules-col do"><h3>do.</h3><ul>__DOS__</ul></div>
|
||||
<div class="rules-col dont"><h3>don't.</h3><ul>__DONTS__</ul></div>
|
||||
<div class="rules-col do">
|
||||
<h3><em>sic.</em></h3>
|
||||
<ul>
|
||||
<li>Use gold for one element per page — the thing to be remembered.</li>
|
||||
<li>Set headlines in italic Cormorant. Roman is reserved for inline emphasis.</li>
|
||||
<li>Keep margins generous — 144px page padding, never less.</li>
|
||||
<li>Use small caps mono for chrome — folio numbers, marginalia, labels.</li>
|
||||
<li>Tint everything toward the gold; nothing toward neutral grey.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="rules-col dont">
|
||||
<h3><em>non.</em></h3>
|
||||
<ul>
|
||||
<li>Introduce a second accent. Gold is the only voice.</li>
|
||||
<li>Use sans-serif for body — it strips the page of its voice.</li>
|
||||
<li>Apply shadows. The page is flat; weight comes from ink alone.</li>
|
||||
<li>Use uppercase for body. Italic carries the emphasis.</li>
|
||||
<li>Crowd the margin. Density is the enemy of attention.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="templates" class="templates-wrap">
|
||||
<!-- VI. TEMPLATES -->
|
||||
<section id="templates" class="templates-wrap" data-screen-label="06 Templates">
|
||||
<div class="section-head">
|
||||
<div class="num">07 — Templates</div>
|
||||
<h2>__SLIDE_COUNT_WORD__<br/>frames.</h2>
|
||||
<div class="num">vi — Templates</div>
|
||||
<h2>Nine<br/><em>folios.</em></h2>
|
||||
<p class="lede">The full template library at 1920×1080. Each thumbnail is the real slide, scaled.</p>
|
||||
</div>
|
||||
<div class="templates-grid" id="templates-grid"></div>
|
||||
</section>
|
||||
|
||||
<template id="tmpl-source">
|
||||
__SLIDE_CARDS__
|
||||
|
||||
<div class="tmpl" data-idx="01"><div class="tmpl-thumb"><div class="scale-wrap"><div class="ds-slide-frame">
|
||||
<section class="slide slide--cover">
|
||||
<div class="cover-top"><span>{{label}}</span><span class="accent">{{label}}</span></div>
|
||||
<div class="cover-body">
|
||||
<div class="cover-rule"></div>
|
||||
<h1 class="display">{{headline}}</h1>
|
||||
<p class="lead">{{body}}</p>
|
||||
</div>
|
||||
</section>
|
||||
</div></div></div><div class="tmpl-foot"><span class="name">cover</span><span class="idx">i / ix</span></div></div>
|
||||
|
||||
<div class="tmpl" data-idx="02"><div class="tmpl-thumb"><div class="scale-wrap"><div class="ds-slide-frame">
|
||||
<section class="slide slide--chapter">
|
||||
<div class="chapter-num"><span>{{label}}</span>{{number}}</div>
|
||||
<h2 class="h1">{{headline}}</h2>
|
||||
<p class="lead">{{body}}</p>
|
||||
</section>
|
||||
</div></div></div><div class="tmpl-foot"><span class="name">chapter</span><span class="idx">ii / ix</span></div></div>
|
||||
|
||||
<div class="tmpl" data-idx="03"><div class="tmpl-thumb"><div class="scale-wrap"><div class="ds-slide-frame">
|
||||
<section class="slide slide--epigraph">
|
||||
<div class="epigraph-mark">"</div>
|
||||
<div class="epigraph-text">{{body}}</div>
|
||||
<div class="epigraph-attr">
|
||||
<span class="name">{{text}}</span>
|
||||
<span class="src">{{label}}</span>
|
||||
</div>
|
||||
</section>
|
||||
</div></div></div><div class="tmpl-foot"><span class="name">epigraph</span><span class="idx">iii / ix</span></div></div>
|
||||
|
||||
<div class="tmpl" data-idx="04"><div class="tmpl-thumb"><div class="scale-wrap"><div class="ds-slide-frame">
|
||||
<section class="slide slide--treatise">
|
||||
<header class="slide-chrome"><span>{{label}}</span><span class="accent">{{label}}</span></header>
|
||||
<div class="slide-body">
|
||||
<div class="treatise-side">
|
||||
<span class="label">{{label}}</span>
|
||||
<h3 class="h3">{{headline}}</h3>
|
||||
<p class="lead muted">{{body}}</p>
|
||||
</div>
|
||||
<div class="treatise-body">
|
||||
<p class="body"><span class="drop-cap">{{text}}</span>{{body}}</p>
|
||||
<p class="body">{{body}}</p>
|
||||
</div>
|
||||
</div>
|
||||
<footer class="slide-foot"><span>{{label}}</span><span>{{number}}</span></footer>
|
||||
</section>
|
||||
</div></div></div><div class="tmpl-foot"><span class="name">treatise</span><span class="idx">iv / ix</span></div></div>
|
||||
|
||||
<div class="tmpl" data-idx="05"><div class="tmpl-thumb"><div class="scale-wrap"><div class="ds-slide-frame">
|
||||
<section class="slide slide--marginalia">
|
||||
<header class="slide-chrome"><span>{{label}}</span><span class="accent">{{label}}</span></header>
|
||||
<div class="slide-body">
|
||||
<div class="margin-numerals"><span>i.</span><span>ii.</span><span>iii.</span><span>iv.</span></div>
|
||||
<div class="margin-text">
|
||||
<p><strong>{{headline}}</strong>{{body}}</p>
|
||||
<p><strong>{{headline}}</strong>{{body}}</p>
|
||||
</div>
|
||||
<div class="margin-text">
|
||||
<p><strong>{{headline}}</strong>{{body}}</p>
|
||||
<p><strong>{{headline}}</strong>{{body}}</p>
|
||||
</div>
|
||||
</div>
|
||||
<footer class="slide-foot"><span>{{label}}</span><span>{{number}}</span></footer>
|
||||
</section>
|
||||
</div></div></div><div class="tmpl-foot"><span class="name">marginalia</span><span class="idx">v / ix</span></div></div>
|
||||
|
||||
<div class="tmpl" data-idx="06"><div class="tmpl-thumb"><div class="scale-wrap"><div class="ds-slide-frame">
|
||||
<section class="slide slide--datum">
|
||||
<header class="slide-chrome"><span>{{label}}</span><span class="accent">{{label}}</span></header>
|
||||
<div class="slide-body">
|
||||
<h2 class="h2"><em>{{headline}}</em></h2>
|
||||
<div class="datum-grid">
|
||||
<div class="datum-card"><div class="stat">{{number}}<sup>{{text}}</sup></div><div class="lbl">{{body}}</div><div class="note">{{label}}</div></div>
|
||||
<div class="datum-card"><div class="stat">{{number}}<sup>{{text}}</sup></div><div class="lbl">{{body}}</div><div class="note">{{label}}</div></div>
|
||||
<div class="datum-card"><div class="stat">{{number}}<sup>{{text}}</sup></div><div class="lbl">{{body}}</div><div class="note">{{label}}</div></div>
|
||||
</div>
|
||||
</div>
|
||||
<footer class="slide-foot"><span>{{label}}</span><span>{{number}}</span></footer>
|
||||
</section>
|
||||
</div></div></div><div class="tmpl-foot"><span class="name">datum</span><span class="idx">vi / ix</span></div></div>
|
||||
|
||||
<div class="tmpl" data-idx="07"><div class="tmpl-thumb"><div class="scale-wrap"><div class="ds-slide-frame">
|
||||
<section class="slide slide--catalogue">
|
||||
<header class="slide-chrome"><span>{{label}}</span><span class="accent">{{label}}</span></header>
|
||||
<div class="slide-body">
|
||||
<div class="catalogue-head">
|
||||
<span class="label">{{label}}</span>
|
||||
<h3 class="h3">{{headline}}</h3>
|
||||
<p class="lead muted">{{body}}</p>
|
||||
</div>
|
||||
<ul class="catalogue-list">
|
||||
<li><div><span class="li-title">{{headline}}</span><span class="li-desc">{{body}}</span></div></li>
|
||||
<li><div><span class="li-title">{{headline}}</span><span class="li-desc">{{body}}</span></div></li>
|
||||
<li><div><span class="li-title">{{headline}}</span><span class="li-desc">{{body}}</span></div></li>
|
||||
<li><div><span class="li-title">{{headline}}</span><span class="li-desc">{{body}}</span></div></li>
|
||||
</ul>
|
||||
</div>
|
||||
<footer class="slide-foot"><span>{{label}}</span><span>{{number}}</span></footer>
|
||||
</section>
|
||||
</div></div></div><div class="tmpl-foot"><span class="name">catalogue</span><span class="idx">vii / ix</span></div></div>
|
||||
|
||||
<div class="tmpl" data-idx="08"><div class="tmpl-thumb"><div class="scale-wrap"><div class="ds-slide-frame">
|
||||
<section class="slide slide--diptych">
|
||||
<header class="slide-chrome"><span>{{label}}</span><span class="accent">{{label}}</span></header>
|
||||
<div class="slide-body">
|
||||
<div>
|
||||
<div class="diptych-plate">{{text}}</div>
|
||||
<p class="plate-caption">{{label}}</p>
|
||||
</div>
|
||||
<div class="diptych-text">
|
||||
<span class="label">{{label}}</span>
|
||||
<h3 class="h2"><em>{{headline}}</em></h3>
|
||||
<p class="body">{{body}}</p>
|
||||
</div>
|
||||
</div>
|
||||
<footer class="slide-foot"><span>{{label}}</span><span>{{number}}</span></footer>
|
||||
</section>
|
||||
</div></div></div><div class="tmpl-foot"><span class="name">diptych</span><span class="idx">viii / ix</span></div></div>
|
||||
|
||||
<div class="tmpl" data-idx="09"><div class="tmpl-thumb"><div class="scale-wrap"><div class="ds-slide-frame">
|
||||
<section class="slide slide--colophon">
|
||||
<div class="colophon-mark">{{text}}</div>
|
||||
<div class="colophon-text">
|
||||
<p class="body">{{body}}</p>
|
||||
</div>
|
||||
<div class="colophon-meta">
|
||||
<span><b>{{label}}</b></span>
|
||||
<span>{{label}}</span>
|
||||
<span>{{label}}</span>
|
||||
</div>
|
||||
</section>
|
||||
</div></div></div><div class="tmpl-foot"><span class="name">colophon</span><span class="idx">ix / ix</span></div></div>
|
||||
|
||||
</template>
|
||||
|
||||
<footer class="endcap">
|
||||
<h2 class="endmark">end.</h2>
|
||||
<footer class="endcap" data-screen-label="07 End">
|
||||
<h2 class="endmark"><em>fin.</em></h2>
|
||||
<div class="meta">
|
||||
<div><b>__NAME__</b> · v1</div>
|
||||
<div>Cormorant Garamond / Courier Prime</div>
|
||||
<div>__DATE__</div>
|
||||
<div><b>Vellum</b> · vol. i</div>
|
||||
<div>Cormorant Garamond / Inter / JetBrains Mono</div>
|
||||
<div>Set in May, mmxxvi</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
@@ -312,7 +619,5 @@ __SLIDE_CARDS__
|
||||
})();
|
||||
</script>
|
||||
|
||||
__SHADER_SCRIPT__
|
||||
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user