mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-11-11 19:09:20 +00:00
feat(skills): 5 more hand-crafted design.html templates
Add bespoke designs for coral, sakura-chroma, monochrome, peoples-platform, grove. Palette tokenized. Total hand-crafted: 13. 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
1ee518eda9
commit
cd7cc648d6
@@ -5,301 +5,414 @@
|
||||
<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=Bebas+Neue&family=Manrope: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__;
|
||||
--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:#F3E9D2; --ink:#14110E;
|
||||
--warm:#5C4C39; --coral:#F2674E;
|
||||
--ink-dim:color-mix(in srgb,var(--cream) 55%,var(--ink));
|
||||
--ink-fade:color-mix(in srgb,var(--cream) 28%,var(--ink));
|
||||
--hairline:color-mix(in srgb,var(--cream) 14%,transparent);
|
||||
--f-disp:"Bebas Neue",sans-serif;
|
||||
--f-body:"Manrope",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 "monospace",monospace;-webkit-font-smoothing:antialiased;overflow-x:hidden}
|
||||
::selection{background:var(--accent);color:var(--secondary)}
|
||||
html,body{margin:0;padding:0;background:var(--ink)}
|
||||
body{color:var(--cream);font:400 14px/1.65 var(--f-body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
|
||||
::selection{background:var(--coral);color:var(--cream)}
|
||||
|
||||
#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(--ink) 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-dim)}
|
||||
.rail .brand{display:inline-flex;align-items:center;gap:12px;color:var(--coral)}
|
||||
.rail .brand b{font-family:var(--f-disp);font-weight:400;letter-spacing:.02em;text-transform:uppercase;font-size:24px;color:var(--coral)}
|
||||
.rail .brand .dot{width:10px;height:10px;background:var(--coral);border-radius:50%;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(--coral)}
|
||||
.rail .meta{font-family:var(--f-disp);font-size:14px;letter-spacing:.04em;text-transform:uppercase;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 solid var(--hairline);padding-top:36px;margin-bottom:clamp(40px,6vh,72px)}
|
||||
.section-head .num{font:500 11px/1 var(--f-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--coral)}
|
||||
.section-head h2{margin:0;font:400 clamp(56px,10vw,160px)/.95 var(--f-disp);letter-spacing:.005em;text-transform:uppercase;color:var(--cream)}
|
||||
.section-head h2 em{font-style:normal;color:var(--coral)}
|
||||
.section-head .lede{grid-column:2;max-width:54ch;margin-top:18px;font:400 15px/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:.2em;text-transform:uppercase;color:var(--ink-fade)}
|
||||
.cover-chrome .accent{color:var(--coral)}
|
||||
.cover-headline{align-self:end;margin:0;font:400 clamp(96px,22vw,360px)/.9 var(--f-disp);letter-spacing:.005em;text-transform:uppercase;color:var(--cream)}
|
||||
.cover-headline em{font-style:normal;color:var(--coral)}
|
||||
.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:400 26px/1 var(--f-disp);letter-spacing:.04em;text-transform:uppercase;color:var(--coral)}
|
||||
.cover-foot .v.plain{font-family:var(--f-body);font-weight:500;font-size:14px;letter-spacing:0;text-transform:none;color:var(--cream)}
|
||||
@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,9vh,120px) var(--pad-x);background:var(--coral);color:var(--ink);border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline)}
|
||||
.manifesto-grid{display:grid;grid-template-columns:11em 1fr;gap:clamp(24px,4vw,56px);align-items:start}
|
||||
.manifesto-grid .num{font:500 11px/1 var(--f-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--ink)}
|
||||
.manifesto p{font:400 clamp(40px,6.5vw,108px)/.95 var(--f-disp);max-width:20ch;margin:0;color:var(--ink);letter-spacing:.005em;text-transform:uppercase}
|
||||
.manifesto p em{font-style:normal;background:var(--ink);color:var(--coral);padding:0 .04em;display:inline-block;line-height:.95}
|
||||
|
||||
.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 .3s}
|
||||
.swatch:hover{transform:translateY(-4px)}
|
||||
.swatch .role{font:500 11px/1 var(--f-mono);letter-spacing:.2em;text-transform:uppercase}
|
||||
.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 13px/1 var(--f-mono);margin-top:10px}
|
||||
.swatch .usage{font:400 13px/1.55 var(--f-body);margin-top:6px;opacity:.75;max-width:22ch}
|
||||
.swatch--cream{background:var(--cream);color:var(--ink)}
|
||||
.swatch--ink{background:var(--ink);color:var(--cream)}
|
||||
.swatch--warm{background:var(--warm);color:var(--cream)}
|
||||
.swatch--coral{background:var(--coral);color:var(--ink)}
|
||||
@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}
|
||||
.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:1px solid var(--hairline)}
|
||||
.spec-row{display:grid;grid-template-columns:13em 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: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(--coral);font-weight:500}
|
||||
.spec-display{font:400 clamp(64px,12vw,180px)/.92 var(--f-disp);letter-spacing:.005em;text-transform:uppercase;color:var(--cream)}
|
||||
.spec-display em{font-style:normal;color:var(--coral)}
|
||||
.spec-h1{font:400 clamp(48px,8vw,124px)/.95 var(--f-disp);letter-spacing:.005em;text-transform:uppercase;color:var(--coral)}
|
||||
.spec-h2{font:400 clamp(32px,5vw,80px)/1 var(--f-disp);letter-spacing:.005em;text-transform:uppercase;color:var(--cream)}
|
||||
.spec-lead{font:500 clamp(18px,2vw,28px)/1.5 var(--f-body);color:var(--cream);max-width:38ch}
|
||||
.spec-body{font:400 16px/1.7 var(--f-body);color:var(--cream);max-width:60ch}
|
||||
.spec-label{font:500 12px/1 var(--f-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--coral)}
|
||||
|
||||
.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)}
|
||||
.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(--cream);color:var(--ink);padding:32px 36px;display:flex;flex-direction:column;gap:18px;border:1px solid var(--ink)}
|
||||
.demo-card .tag{align-self:flex-start;font:500 10px/1 var(--f-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--coral);padding:6px 0;border-top:1px solid var(--coral);border-bottom:1px solid var(--coral)}
|
||||
.demo-card h3{margin:0;font:400 56px/.95 var(--f-disp);letter-spacing:.005em;text-transform:uppercase}
|
||||
.demo-card p{margin:0;font:400 14px/1.7 var(--f-body)}
|
||||
.demo-card .num-stat{font:400 108px/.95 var(--f-disp);color:var(--coral);letter-spacing:.005em}
|
||||
.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:400 28px/1 var(--f-disp);letter-spacing:.005em;text-transform:uppercase;color:var(--coral)}
|
||||
.tokens .bar{height:1px;background:var(--coral)}
|
||||
|
||||
.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(--ink) 90%,var(--coral))}
|
||||
.panel h4{margin:0;font:400 48px/1 var(--f-disp);letter-spacing:.005em;text-transform:uppercase;color:var(--coral)}
|
||||
.panel .label-row{font:500 11px/1 var(--f-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-fade)}
|
||||
.panel p{margin:0;font:400 14px/1.7 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(--ink) 70%,transparent);font:500 12px/1.6 var(--f-mono);color:var(--coral);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:400 80px/1 var(--f-disp);margin:0 0 28px;letter-spacing:.005em;text-transform:uppercase}
|
||||
.rules-col.do h3{color:var(--coral)}
|
||||
.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);color:var(--cream)}
|
||||
.rules-col li::before{font:400 24px/1 var(--f-disp);letter-spacing:.005em;text-transform:uppercase;align-self:center}
|
||||
.rules-col.do li::before{content:"+";color:var(--coral)}
|
||||
.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);background:color-mix(in srgb,var(--ink) 96%,var(--coral))}
|
||||
.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(--ink);border:1px solid var(--hairline);overflow:hidden;transition:border-color .25s,transform .3s cubic-bezier(.16,1,.3,1)}
|
||||
.tmpl:hover{border-color:var(--coral);transform:translateY(-2px)}
|
||||
.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 .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:.18em;text-transform:uppercase}
|
||||
.tmpl-foot .name{color:var(--cream);font-family:var(--f-disp);font-weight:400;font-size:22px;letter-spacing:.005em;text-transform:uppercase}
|
||||
.tmpl-foot .idx{color:var(--coral)}
|
||||
|
||||
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:var(--coral);color:var(--ink);border-top:1px solid var(--hairline);display:grid;grid-template-columns:1fr auto;gap:48px;align-items:end}
|
||||
footer.endcap .endmark{font:400 clamp(72px,16vw,280px)/.88 var(--f-disp);letter-spacing:.005em;text-transform:uppercase;margin:0;color:var(--ink)}
|
||||
footer.endcap .endmark em{font-style:normal;color:var(--cream);background:var(--ink);padding:0 .04em;display:inline-block;line-height:.88}
|
||||
footer.endcap .meta{font:500 11px/2 var(--f-mono);letter-spacing:.2em;text-transform:uppercase;color:color-mix(in srgb,var(--ink) 70%,transparent);text-align:right}
|
||||
footer.endcap .meta b{color:var(--ink);font-family:var(--f-disp);font-weight:400;letter-spacing:.04em;text-transform:uppercase;font-size:16px}
|
||||
</style>
|
||||
|
||||
<style id="template-css">
|
||||
__TEMPLATE_CSS__
|
||||
.ds-slide-frame{
|
||||
--c-bg:#14110E; --c-cream:#F3E9D2; --c-coral:#F2674E; --c-warm:#5C4C39;
|
||||
--c-ink-2:color-mix(in srgb,#F3E9D2 55%,#14110E);
|
||||
--c-ink-3:color-mix(in srgb,#F3E9D2 28%,#14110E);
|
||||
--c-line:color-mix(in srgb,#F3E9D2 14%,transparent);
|
||||
--c-f-disp:"Bebas Neue",sans-serif;
|
||||
--c-f-body:"Manrope",sans-serif;
|
||||
--c-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(--c-bg);color:var(--c-cream);font-family:var(--c-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(--c-f-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--c-ink-3)}
|
||||
.ds-slide-frame .slide-chrome{padding-bottom:20px;border-bottom:1px solid var(--c-line);margin-bottom:40px}
|
||||
.ds-slide-frame .slide-foot{padding-top:20px;border-top:1px solid var(--c-line);margin-top:40px}
|
||||
.ds-slide-frame .slide-chrome .accent,.ds-slide-frame .slide-foot .accent{color:var(--c-coral)}
|
||||
.ds-slide-frame .display{font:400 320px/.88 var(--c-f-disp);letter-spacing:.005em;text-transform:uppercase;color:var(--c-cream)}
|
||||
.ds-slide-frame .display em{font-style:normal;color:var(--c-coral)}
|
||||
.ds-slide-frame .h1{font:400 180px/.92 var(--c-f-disp);letter-spacing:.005em;text-transform:uppercase;color:var(--c-coral)}
|
||||
.ds-slide-frame .h2{font:400 116px/1 var(--c-f-disp);letter-spacing:.005em;text-transform:uppercase;color:var(--c-cream)}
|
||||
.ds-slide-frame .h2 em{font-style:normal;color:var(--c-coral)}
|
||||
.ds-slide-frame .h3{font:400 64px/1.05 var(--c-f-disp);letter-spacing:.005em;text-transform:uppercase;color:var(--c-coral)}
|
||||
.ds-slide-frame .lead{font:500 32px/1.5 var(--c-f-body);color:var(--c-cream)}
|
||||
.ds-slide-frame .body{font:400 24px/1.65 var(--c-f-body);color:var(--c-cream)}
|
||||
.ds-slide-frame .label{font:500 16px/1 var(--c-f-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--c-coral)}
|
||||
.ds-slide-frame .accent{color:var(--c-coral)}
|
||||
.ds-slide-frame .muted{color:var(--c-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;font:500 16px/1 var(--c-f-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--c-ink-3);margin-bottom:auto}
|
||||
.ds-slide-frame .cover-top .accent{color:var(--c-coral)}
|
||||
.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;background:var(--c-coral);color:var(--c-ink)}
|
||||
.ds-slide-frame .slide--chapter .chap-num{font:500 20px/1 var(--c-f-mono);letter-spacing:.22em;text-transform:uppercase;color:var(--c-ink)}
|
||||
.ds-slide-frame .slide--chapter .h1{color:var(--c-ink)}
|
||||
.ds-slide-frame .slide--chapter .lead{color:color-mix(in srgb,var(--c-ink) 80%,transparent)}
|
||||
|
||||
.ds-slide-frame .slide--cream .slide-chrome,.ds-slide-frame .slide--cream .slide-foot{color:var(--c-ink-2)}
|
||||
.ds-slide-frame .slide--cream{background:var(--c-cream);color:var(--c-ink)}
|
||||
.ds-slide-frame .slide--cream .h1{color:var(--c-coral)}
|
||||
.ds-slide-frame .slide--cream .h2{color:var(--c-ink)}
|
||||
.ds-slide-frame .slide--cream .lead{color:var(--c-ink)}
|
||||
.ds-slide-frame .slide--cream .body{color:var(--c-ink)}
|
||||
.ds-slide-frame .slide--cream .label{color:var(--c-coral)}
|
||||
.ds-slide-frame .slide--cream .slide-chrome,.ds-slide-frame .slide--cream .slide-foot{color:color-mix(in srgb,var(--c-ink) 70%,transparent);border-color:color-mix(in srgb,var(--c-ink) 18%,transparent)}
|
||||
|
||||
.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:120px 240px;gap:48px}
|
||||
.ds-slide-frame .quote-mark{font:400 280px/.5 var(--c-f-disp);color:var(--c-coral);height:140px;letter-spacing:.005em}
|
||||
.ds-slide-frame .quote-text{font:400 108px/1 var(--c-f-disp);letter-spacing:.005em;text-transform:uppercase;color:var(--c-cream);max-width:88%}
|
||||
.ds-slide-frame .quote-text em{font-style:normal;color:var(--c-coral)}
|
||||
.ds-slide-frame .quote-attr{display:flex;flex-direction:column;gap:8px;padding-top:24px;border-top:1px solid var(--c-line);max-width:480px}
|
||||
.ds-slide-frame .quote-attr .nm{font:400 40px/1 var(--c-f-disp);color:var(--c-coral);letter-spacing:.005em;text-transform:uppercase}
|
||||
.ds-slide-frame .quote-attr .src{font:500 16px/1 var(--c-f-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--c-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:24px}
|
||||
.ds-slide-frame .split-plate{aspect-ratio:4/5;width:100%;border:1px solid var(--c-line);display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--c-bg) 80%,var(--c-coral));font:500 18px/1 var(--c-f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--c-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:14px;padding-top:24px;border-top:1px solid var(--c-line)}
|
||||
.ds-slide-frame .stat-card .v{font:400 200px/.92 var(--c-f-disp);color:var(--c-coral);letter-spacing:.005em;text-transform:uppercase}
|
||||
.ds-slide-frame .stat-card .l{font:500 26px/1.4 var(--c-f-body);color:var(--c-cream)}
|
||||
.ds-slide-frame .stat-card .n{font:500 14px/1 var(--c-f-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--c-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: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:3em 1fr;gap:24px;padding:28px 0;border-top:1px solid var(--c-line);counter-increment:idx;align-items:baseline}
|
||||
.ds-slide-frame .list-items li::before{content:counter(idx,decimal-leading-zero);font:400 48px/1 var(--c-f-disp);color:var(--c-coral);letter-spacing:.005em}
|
||||
.ds-slide-frame .list-items .h{font:400 40px/1.05 var(--c-f-disp);color:var(--c-cream);letter-spacing:.005em;text-transform:uppercase;display:block;margin-bottom:6px}
|
||||
.ds-slide-frame .list-items .d{font:400 22px/1.55 var(--c-f-body);color:var(--c-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;background:var(--c-coral);color:var(--c-ink)}
|
||||
.ds-slide-frame .end-mark{font:400 320px/.9 var(--c-f-disp);letter-spacing:.005em;text-transform:uppercase;color:var(--c-ink)}
|
||||
.ds-slide-frame .end-mark em{font-style:normal;color:var(--c-cream);background:var(--c-ink);padding:0 .04em;display:inline-block;line-height:.9}
|
||||
.ds-slide-frame .end-meta{display:flex;gap:48px;font:500 16px/1 var(--c-f-mono);letter-spacing:.2em;text-transform:uppercase;color:color-mix(in srgb,var(--c-ink) 70%,transparent);padding-top:24px;border-top:1px solid var(--c-ink)}
|
||||
.ds-slide-frame .end-meta b{color:var(--c-ink);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>Coral</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">Issue 014 · 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 · № 014</div>
|
||||
<div class="accent">A warm magazine · 2026</div>
|
||||
</div>
|
||||
<h1 class="cover-headline">COR<em>AL</em>.</h1>
|
||||
<div class="cover-foot">
|
||||
<div class="cell"><span class="k">Template</span><span class="v">coral</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 plain">Fashion · Beauty · Lifestyle</span></div>
|
||||
<div class="cell"><span class="k">Display</span><span class="v">Bebas Neue</span></div>
|
||||
<div class="cell"><span class="k">Signal</span><span class="v">Coral #F2674E</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">
|
||||
<section class="manifesto" data-screen-label="00 Manifesto">
|
||||
<div class="manifesto-grid">
|
||||
<div class="num">— Manifesto</div>
|
||||
<p>Cream and coral on near-black, set in oversized Bebas Neue.</p>
|
||||
<div class="num">— Manifesto</div>
|
||||
<p>The page is a <em>cover</em>. Type is <em>oversized</em>. Coral is <em>one breath</em>, not many.</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>
|
||||
<span class="num">01 — Palette</span>
|
||||
<h2>Cream, ink,<br/><em>warm, coral.</em></h2>
|
||||
<p class="lede">Warm cream paper. Near-black ink — never pure. A burnt warm tone for chrome. Coral as the single accent — used loud, used once.</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">01 · paper</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">02 · ink</div><div><div class="name">noir.</div><div class="hex">__SECONDARY__</div><div class="usage">Near-black, never pure.</div></div></div>
|
||||
<div class="swatch swatch--warm"><div class="role">03 · warm</div><div><div class="name">earth.</div><div class="hex">__TERTIARY__</div><div class="usage">Chrome and muted labels.</div></div></div>
|
||||
<div class="swatch swatch--coral"><div class="role">04 · coral</div><div><div class="name">coral.</div><div class="hex">__ACCENT__</div><div class="usage">The single accent. One 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>
|
||||
<span class="num">02 — Type</span>
|
||||
<h2>Bebas, <em>oversized.</em></h2>
|
||||
<p class="lede">Bebas Neue carries every headline at maximum size — tall, condensed, all caps. Manrope handles body in 400–500. JetBrains Mono runs 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>Bebas Neue 400</b><span>12vw · UPPERCASE</span></div><div class="spec-display">HELLO <em>WORLD</em>.</div></div>
|
||||
<div class="spec-row"><div class="meta"><span>H1</span><b>Bebas Neue 400</b><span>8vw · coral</span></div><div class="spec-h1">CHAPTER ONE</div></div>
|
||||
<div class="spec-row"><div class="meta"><span>H2</span><b>Bebas Neue 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>Manrope 500</b><span>2vw</span></div><div class="spec-lead">The lead carries the brief like a magazine deck — one quotable line.</div></div>
|
||||
<div class="spec-row"><div class="meta"><span>Body</span><b>Manrope 400</b><span>16px · 60ch</span></div><p class="spec-body">Pack my box with five dozen liquor jugs. Body type stays at 400 weight. Body copy below 24px is forbidden in 1080p compositions — measured at the screen.</p></div>
|
||||
<div class="spec-row"><div class="meta"><span>Label</span><b>JetBrains Mono 500</b><span>12px · coral</span></div><div class="spec-label">// ISSUE · LABEL · 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>
|
||||
<span class="num">03 — Surface</span>
|
||||
<h2>Cream <em>inside</em><br/>noir.</h2>
|
||||
<p class="lede">Cream surfaces sit inside noir canvases — like a magazine page tipped inside a black case. 1px hairlines only; never shadow, never gradient.</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">// editorial card</span>
|
||||
<h3>EXAMPLE.</h3>
|
||||
<p>Cream card inside the noir canvas. One element bears the coral — never more. The hairline does the framing; nothing else needs to.</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</span><span class="bar" style="width:8px"></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">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>
|
||||
<span class="num">04 — Motion</span>
|
||||
<h2>Slow.<br/><em>Deliberate.</em></h2>
|
||||
<p class="lede">Motion is unhurried. Long durations, gentle eases. The page should feel like a magazine page being turned — slow, intentional.</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>SLOW <em>OUT.</em></h4>
|
||||
<p>Long tail, soft landing. Use for headline entrances and any element that should feel placed.</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>1.2 <em>SEC.</em></h4>
|
||||
<p>Slides resolve in 1.2 seconds. Headlines enter in 0.8. Hovers in 0.3.</p>
|
||||
<pre>--dur-slide: 1.2s
|
||||
--dur-enter: 0.8s
|
||||
--dur-hover: 0.3s</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>
|
||||
<span class="num">05 — Rules</span>
|
||||
<h2>YES.<br/><em>NO.</em></h2>
|
||||
<p class="lede">A short list. The magazine 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.</h3><ul>
|
||||
<li>Set every headline in Bebas Neue, maximum size, uppercase.</li>
|
||||
<li>Use coral for exactly one element per slide.</li>
|
||||
<li>Keep all body type in Manrope 400. Never bold.</li>
|
||||
<li>Place cream surfaces inside the noir canvas — never floating.</li>
|
||||
<li>Use 1px hairlines only; no shadows or gradients.</li>
|
||||
</ul></div>
|
||||
<div class="rules-col dont"><h3>NO.</h3><ul>
|
||||
<li>Introduce a second accent. Coral is the only voice.</li>
|
||||
<li>Set headlines in serif or italic. Bebas is the page.</li>
|
||||
<li>Use pure black (#000) — always the warm noir.</li>
|
||||
<li>Crowd the margin. The page wants breath.</li>
|
||||
<li>Apply shadows. The page is flat by design.</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>
|
||||
<span class="num">06 — Templates</span>
|
||||
<h2>Seven<br/><em>covers.</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/07</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/07</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--cream"><header class="slide-chrome"><span>{{label}}</span><span class="accent">{{label}}</span></header><div class="slide-body"><span class="label">{{label}}</span><h2 class="h2"><em>{{headline}}</em></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">editorial</span><span class="idx">03/07</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/07</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">05/07</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"><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">06/07</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">{{headline}} <em>{{text}}</em></h2><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">07/07</span></div></div>
|
||||
|
||||
</template>
|
||||
|
||||
<footer class="endcap">
|
||||
<h2 class="endmark">end.</h2>
|
||||
<footer class="endcap" data-screen-label="07 End">
|
||||
<h2 class="endmark">FIN <em>.</em></h2>
|
||||
<div class="meta">
|
||||
<div><b>__NAME__</b> · v1</div>
|
||||
<div>system-ui / monospace</div>
|
||||
<div>__DATE__</div>
|
||||
<div><b>Coral</b> · Issue 014</div>
|
||||
<div>BEBAS NEUE / MANROPE</div>
|
||||
<div>Pressed May 2026</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
@@ -312,7 +425,5 @@ __SLIDE_CARDS__
|
||||
})();
|
||||
</script>
|
||||
|
||||
__SHADER_SCRIPT__
|
||||
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
||||
@@ -5,301 +5,398 @@
|
||||
<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=JetBrains+Mono:wght@300;400;500;600;700;800;900&family=Jost:wght@300;400;500;600;700;800;900&family=Playfair+Display: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=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600&family=Source+Sans+3:wght@300;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:"Playfair Display",sans-serif; --f-mono:"JetBrains Mono",monospace;
|
||||
--pad-x:clamp(24px,5vw,88px); --pad-y:clamp(40px,6vh,100px);
|
||||
--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:"Playfair Display",serif;
|
||||
--f-body:"Source Sans 3",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 "JetBrains Mono",monospace;-webkit-font-smoothing:antialiased;overflow-x:hidden}
|
||||
::selection{background:var(--accent);color:var(--secondary)}
|
||||
body{color:var(--primary);font:400 15px/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:.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 "JetBrains 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 "Playfair Display",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: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:500 11px/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-dim)}
|
||||
.rail .brand{display:inline-flex;align-items:center;gap:12px;color:var(--primary)}
|
||||
.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(--primary)}
|
||||
.rail .brand .leaf{width:14px;height:14px;background:var(--accent);border-radius:0 80% 0 80%;display:inline-block}
|
||||
.rail nav{display:flex;gap:24px}
|
||||
.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-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}}
|
||||
|
||||
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 "JetBrains Mono",monospace;letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}
|
||||
.section-head h2{font:900 clamp(36px,6vw,84px)/.92 "Playfair Display",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 11px/1 var(--f-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
|
||||
.section-head h2{font:italic 500 clamp(48px,8vw,112px)/.95 var(--f-disp);letter-spacing:-.005em;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 16px/1.7 var(--f-body);font-style:italic;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 "Playfair Display",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 "JetBrains Mono",monospace;letter-spacing:.1em;text-transform:uppercase;opacity:.55}
|
||||
.cover-foot .v{font:500 13px/1.4 "JetBrains Mono",monospace}
|
||||
.cover-foot .v.big{font:800 28px/1 "Playfair Display",sans-serif;letter-spacing:-.02em}
|
||||
.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(--accent)}
|
||||
.cover-headline{align-self:end;margin:0;font:italic 500 clamp(80px,16vw,260px)/.92 var(--f-disp);letter-spacing:-.015em;color:var(--primary)}
|
||||
.cover-headline em{font-style:normal;color:var(--accent)}
|
||||
.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(--accent)}
|
||||
.cover-foot .v.plain{font-family:var(--f-body);font-style:normal;font-weight:500;font-size:14px;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 "JetBrains Mono",monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
|
||||
.manifesto p{font:700 clamp(28px,3.8vw,56px)/1.05 "Playfair Display",sans-serif;letter-spacing:-.025em;max-width:22ch;margin:0;text-transform:lowercase}
|
||||
.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(--tertiary) 14%,var(--secondary))}
|
||||
.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(--accent)}
|
||||
.manifesto p{font:italic 500 clamp(28px,3.6vw,52px)/1.2 var(--f-disp);max-width:28ch;margin:0;color:var(--primary)}
|
||||
.manifesto p em{font-style:normal;color:var(--accent)}
|
||||
.manifesto p strong{font-weight:500;font-style:normal;color:var(--tertiary)}
|
||||
|
||||
.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 "JetBrains Mono",monospace;letter-spacing:.1em;text-transform:uppercase}
|
||||
.swatch .name{font:900 clamp(28px,3.4vw,48px)/.92 "Playfair Display",sans-serif;letter-spacing:-.025em;text-transform:lowercase;margin-top:auto}
|
||||
.swatch .hex{font:500 12px/1 "JetBrains Mono",monospace;margin-top:8px}
|
||||
.swatch .usage{font:400 11px/1.5 "JetBrains 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)}
|
||||
.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--cream{background:var(--primary);color:var(--secondary)}
|
||||
.swatch--forest{background:var(--secondary);color:var(--primary)}
|
||||
.swatch--moss{background:var(--tertiary);color:var(--secondary)}
|
||||
.swatch--rust{background:var(--accent);color:var(--primary)}
|
||||
@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}
|
||||
.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 "JetBrains 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 "Playfair Display",sans-serif}
|
||||
.spec-display{font:900 clamp(56px,10vw,152px)/.88 "Playfair Display",sans-serif;letter-spacing:-.04em;text-transform:lowercase}
|
||||
.spec-h1{font:800 clamp(40px,7vw,104px)/.9 "Playfair Display",sans-serif;letter-spacing:-.03em;text-transform:lowercase}
|
||||
.spec-h2{font:700 clamp(28px,4.2vw,64px)/1 "Playfair Display",sans-serif;letter-spacing:-.02em}
|
||||
.spec-lead{font:500 clamp(18px,2vw,26px)/1.45 "Playfair Display",sans-serif}
|
||||
.spec-body{font:400 17px/1.65 "Playfair Display",sans-serif;max-width:60ch}
|
||||
.spec-label{font:500 13px/1 "JetBrains Mono",monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
|
||||
.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 500 clamp(64px,11vw,152px)/.92 var(--f-disp);letter-spacing:-.015em;color:var(--primary)}
|
||||
.spec-display em{font-style:normal;color:var(--accent)}
|
||||
.spec-h1{font:italic 500 clamp(44px,7vw,96px)/.95 var(--f-disp);color:var(--accent)}
|
||||
.spec-h2{font:italic 500 clamp(28px,4vw,56px)/1.1 var(--f-disp);color:var(--primary)}
|
||||
.spec-lead{font:italic 400 clamp(18px,2vw,26px)/1.55 var(--f-body);color:var(--primary);max-width:38ch}
|
||||
.spec-body{font:400 16px/1.75 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(--tertiary)}
|
||||
|
||||
.surface-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:48px;max-width:1400px;margin:0 auto}
|
||||
.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 "JetBrains 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 "Playfair Display",sans-serif;letter-spacing:-.02em;text-transform:lowercase}
|
||||
.demo-card p{margin:0;font:400 15px/1.6 "Playfair Display",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 "JetBrains Mono",monospace;letter-spacing:.1em;text-transform:uppercase;opacity:.6}
|
||||
.tokens .val{font:800 20px/1 "Playfair Display",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:.2em;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 500 40px/1 var(--f-disp);letter-spacing:-.005em}
|
||||
.demo-card p{margin:0;font:400 14px/1.75 var(--f-body);color:color-mix(in srgb,var(--secondary) 75%,transparent)}
|
||||
.demo-card .num-stat{font:italic 500 80px/1 var(--f-disp);color:var(--accent)}
|
||||
.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(--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{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 "JetBrains Mono",monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
|
||||
.panel h4{margin:0;font:800 32px/1 "Playfair Display",sans-serif;text-transform:lowercase}
|
||||
.panel p{margin:0;font:400 13px/1.7 "Playfair Display",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) 70%,var(--tertiary))}
|
||||
.panel h4{margin:0;font:italic 500 36px/1 var(--f-disp);color:var(--accent)}
|
||||
.panel .label-row{font:500 11px/1 var(--f-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--tertiary)}
|
||||
.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(--secondary) 60%,transparent);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 "JetBrains 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 "JetBrains 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 "Playfair Display",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 "JetBrains 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}
|
||||
.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 "Playfair Display",sans-serif;letter-spacing:-.03em;margin:0 0 28px;text-transform:lowercase}
|
||||
.rules-col h3{font:italic 500 60px/1 var(--f-disp);margin:0 0 28px;letter-spacing:-.005em}
|
||||
.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 "Playfair Display",sans-serif}
|
||||
.rules-col li::before{font:800 22px/1.2 "Playfair Display",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:18px 0;border-top:1px solid var(--hairline);font:400 16px/1.55 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(--accent);font-style:normal}
|
||||
.rules-col.dont li::before{content:"✕";color:var(--ink-fade);font-style:normal}
|
||||
.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-wrap{border-top:1px solid var(--hairline);background:color-mix(in srgb,var(--secondary) 92%,#000)}
|
||||
.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:#101e18}
|
||||
.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 "JetBrains Mono",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:.16em;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 "Playfair Display",sans-serif;letter-spacing:-.04em;text-transform:lowercase;margin:0}
|
||||
footer.endcap .meta{font:500 12px/2 "JetBrains Mono",monospace;letter-spacing:.1em;text-transform:uppercase;opacity:.6;text-align:right}
|
||||
footer.endcap .meta b{opacity:1;color:var(--accent)}
|
||||
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(--tertiary) 18%,var(--secondary))}
|
||||
footer.endcap .endmark{font:italic 500 clamp(60px,14vw,240px)/.85 var(--f-disp);letter-spacing:-.015em;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:.2em;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>
|
||||
|
||||
<style id="template-css">
|
||||
__TEMPLATE_CSS__
|
||||
.ds-slide-frame{
|
||||
--g-bg:#1C342B; --g-paper:#F2E9D3; --g-moss:#5F8772; --g-rust:#BD6034;
|
||||
--g-ink-2:color-mix(in srgb,#F2E9D3 55%,#1C342B);
|
||||
--g-ink-3:color-mix(in srgb,#F2E9D3 28%,#1C342B);
|
||||
--g-line:color-mix(in srgb,#F2E9D3 14%,transparent);
|
||||
--g-f-disp:"Playfair Display",serif;
|
||||
--g-f-body:"Source Sans 3",sans-serif;
|
||||
--g-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(--g-bg);color:var(--g-paper);font-family:var(--g-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(--g-f-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--g-ink-3)}
|
||||
.ds-slide-frame .slide-chrome{padding-bottom:20px;border-bottom:1px solid var(--g-line);margin-bottom:40px}
|
||||
.ds-slide-frame .slide-foot{padding-top:20px;border-top:1px solid var(--g-line);margin-top:40px}
|
||||
.ds-slide-frame .slide-chrome .accent,.ds-slide-frame .slide-foot .accent{color:var(--g-rust)}
|
||||
.ds-slide-frame .display{font:italic 500 240px/.92 var(--g-f-disp);letter-spacing:-.018em;color:var(--g-paper)}
|
||||
.ds-slide-frame .display em{font-style:normal;color:var(--g-rust)}
|
||||
.ds-slide-frame .h1{font:italic 500 148px/.95 var(--g-f-disp);letter-spacing:-.015em;color:var(--g-paper)}
|
||||
.ds-slide-frame .h1 em{font-style:normal;color:var(--g-rust)}
|
||||
.ds-slide-frame .h2{font:italic 500 88px/1.05 var(--g-f-disp);letter-spacing:-.005em;color:var(--g-paper)}
|
||||
.ds-slide-frame .h2 em{font-style:normal;color:var(--g-rust)}
|
||||
.ds-slide-frame .h3{font:italic 500 52px/1.15 var(--g-f-disp);color:var(--g-rust)}
|
||||
.ds-slide-frame .lead{font:italic 400 32px/1.5 var(--g-f-body);color:var(--g-paper)}
|
||||
.ds-slide-frame .body{font:400 24px/1.7 var(--g-f-body);color:var(--g-paper)}
|
||||
.ds-slide-frame .label{font:500 16px/1 var(--g-f-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--g-moss)}
|
||||
.ds-slide-frame .accent{color:var(--g-rust)}
|
||||
.ds-slide-frame .muted{color:var(--g-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;font:500 16px/1 var(--g-f-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--g-ink-3);margin-bottom:auto}
|
||||
.ds-slide-frame .cover-top .accent{color:var(--g-rust)}
|
||||
.ds-slide-frame .cover-body{display:flex;flex-direction:column;gap:32px}
|
||||
.ds-slide-frame .cover-rule{width:120px;height:1px;background:var(--g-rust)}
|
||||
|
||||
.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 220px;background:var(--g-paper);color:var(--g-bg)}
|
||||
.ds-slide-frame .slide--chapter .chap-num{font:500 18px/1 var(--g-f-mono);letter-spacing:.22em;text-transform:uppercase;color:var(--g-rust)}
|
||||
.ds-slide-frame .slide--chapter .h1{color:var(--g-bg)}
|
||||
.ds-slide-frame .slide--chapter .h1 em{color:var(--g-rust)}
|
||||
.ds-slide-frame .slide--chapter .lead{color:color-mix(in srgb,var(--g-bg) 80%,transparent)}
|
||||
|
||||
.ds-slide-frame .slide--statement .slide-body{display:flex;flex-direction:column;justify-content:center;gap:32px}
|
||||
|
||||
.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:120px 240px;gap:48px}
|
||||
.ds-slide-frame .quote-mark{font:italic 500 240px/.5 var(--g-f-disp);color:var(--g-rust);height:120px}
|
||||
.ds-slide-frame .quote-text{font:italic 500 80px/1.18 var(--g-f-disp);letter-spacing:-.01em;color:var(--g-paper);max-width:88%}
|
||||
.ds-slide-frame .quote-attr{display:flex;flex-direction:column;gap:8px;padding-top:24px;border-top:1px solid var(--g-line);max-width:480px}
|
||||
.ds-slide-frame .quote-attr .nm{font:italic 500 30px/1 var(--g-f-disp);color:var(--g-rust)}
|
||||
.ds-slide-frame .quote-attr .src{font:500 16px/1 var(--g-f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--g-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:24px}
|
||||
.ds-slide-frame .split-plate{aspect-ratio:4/5;width:100%;border:1px solid var(--g-line);display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--g-bg) 70%,var(--g-moss));font:500 18px/1 var(--g-f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--g-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:14px;padding-top:24px;border-top:1px solid var(--g-line)}
|
||||
.ds-slide-frame .stat-card .v{font:italic 500 144px/1 var(--g-f-disp);color:var(--g-rust);letter-spacing:-.02em}
|
||||
.ds-slide-frame .stat-card .l{font:400 26px/1.45 var(--g-f-body);color:var(--g-paper)}
|
||||
.ds-slide-frame .stat-card .n{font:500 14px/1 var(--g-f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--g-moss)}
|
||||
|
||||
.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: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:3em 1fr;gap:24px;padding:24px 0;border-top:1px solid var(--g-line);counter-increment:idx;align-items:baseline}
|
||||
.ds-slide-frame .list-items li::before{content:counter(idx,lower-roman);font:italic 500 30px/1 var(--g-f-disp);color:var(--g-rust)}
|
||||
.ds-slide-frame .list-items .h{font:italic 500 34px/1.15 var(--g-f-disp);color:var(--g-paper);display:block;margin-bottom:6px}
|
||||
.ds-slide-frame .list-items .d{font:400 22px/1.55 var(--g-f-body);color:var(--g-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 500 240px/.9 var(--g-f-disp);letter-spacing:-.018em;color:var(--g-rust)}
|
||||
.ds-slide-frame .end-meta{display:flex;gap:48px;font:500 14px/1 var(--g-f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--g-ink-3);padding-top:24px;border-top:1px solid var(--g-line)}
|
||||
.ds-slide-frame .end-meta b{color:var(--g-rust);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="leaf"></span><b>Grove</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="meta">vol. i · 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 · № 010</div>
|
||||
<div class="accent">A patient system · 2026</div>
|
||||
</div>
|
||||
<h1 class="cover-headline">grove<em>.</em></h1>
|
||||
<div class="cover-foot">
|
||||
<div class="cell"><span class="k">Template</span><span class="v">grove</span></div>
|
||||
<div class="cell"><span class="k">Type</span><span class="v big">Playfair Display</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">Sustainability · Wellness · Wine</span></div>
|
||||
<div class="cell"><span class="k">Display</span><span class="v">Playfair <em>italic</em></span></div>
|
||||
<div class="cell"><span class="k">Accent</span><span class="v">Rust #BD6034</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>Forest-green canvas with cream type, classical Playfair serifs, and a single rust accent.</p>
|
||||
<div class="num">— Manifesto</div>
|
||||
<p>the page is <em>shaded ground</em>. type is <strong>patient</strong>. rust is the only flame.</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>Forest, paper,<br/>and <em>one ember.</em></h2>
|
||||
<p class="lede">Deep forest green as canvas. Warm cream paper inside chapter and stat surfaces. A soft moss tone for chrome. Rust orange — the one ember — reserved for the moment of meaning.</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--cream"><div class="role">i · paper</div><div><div class="name">cream.</div><div class="hex">__PRIMARY__</div><div class="usage">Body and chapter surfaces.</div></div></div>
|
||||
<div class="swatch swatch--forest"><div class="role">ii · forest</div><div><div class="name">forest.</div><div class="hex">__SECONDARY__</div><div class="usage">The canvas. Deep, quiet, evergreen.</div></div></div>
|
||||
<div class="swatch swatch--moss"><div class="role">iii · moss</div><div><div class="name">moss.</div><div class="hex">__TERTIARY__</div><div class="usage">Chrome and quiet labels.</div></div></div>
|
||||
<div class="swatch swatch--rust"><div class="role">iv · rust</div><div><div class="name">rust.</div><div class="hex">__ACCENT__</div><div class="usage">The single accent. Used sparingly.</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>Playfair italic,<br/>set with <em>air.</em></h2>
|
||||
<p class="lede">Playfair Display carries every headline in italic. Source Sans 3 keeps the body open and readable. JetBrains Mono labels and tracks.</p>
|
||||
</div>
|
||||
<div class="specimen">
|
||||
<div class="spec-row"><div class="meta"><span>Display</span><b>Playfair Display</b></div><div class="spec-display">hello world.</div></div>
|
||||
<div class="spec-row"><div class="meta"><span>H1</span><b>Playfair Display</b></div><div class="spec-h1">chapter one</div></div>
|
||||
<div class="spec-row"><div class="meta"><span>H2</span><b>Playfair Display</b></div><div class="spec-h2">Slide headlines.</div></div>
|
||||
<div class="spec-row"><div class="meta"><span>Body</span><b>Playfair Display</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>JetBrains Mono</b></div><div class="spec-label">// chrome · labels · metadata</div></div>
|
||||
<div class="spec-row"><div class="meta"><span>Display</span><b>Playfair italic 500</b><span>11vw · −0.018em</span></div><div class="spec-display"><em>slow</em> grove.</div></div>
|
||||
<div class="spec-row"><div class="meta"><span>H1</span><b>Playfair italic 500</b><span>7vw · rust</span></div><div class="spec-h1">chapter one</div></div>
|
||||
<div class="spec-row"><div class="meta"><span>H2</span><b>Playfair italic 500</b><span>4vw</span></div><div class="spec-h2">A subheading sets the mood.</div></div>
|
||||
<div class="spec-row"><div class="meta"><span>Lead</span><b>Source Sans italic</b><span>2vw · 1.55</span></div><div class="spec-lead">The lead carries the argument with calm and care.</div></div>
|
||||
<div class="spec-row"><div class="meta"><span>Body</span><b>Source Sans 400</b><span>16px · 1.75 · 60ch</span></div><p class="spec-body">Pack my box with five dozen liquor jugs. Body type stays open and airy. 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 500</b><span>12px · 0.18em · moss</span></div><div class="spec-label">// folio · pp. 04 / 16 · chrome</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 1px hairline and one rust line where needed. Cream surfaces sit inside the forest canvas; they don't float above 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="tag">// exempla · card</span>
|
||||
<h3><em>exempla.</em></h3>
|
||||
<p>Cream surface inside the forest. One element bears the rust — never more. 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>Slow.<br/><em>Patient.</em></h2>
|
||||
<p class="lede">Motion is patient. Long durations, gentle eases. The page should feel walked, not paged.</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 short. The grove 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>Use rust for one element per slide — the one ember.</li>
|
||||
<li>Set every headline in italic Playfair.</li>
|
||||
<li>Keep page margins generous — 144px, never less.</li>
|
||||
<li>Use mono only for chrome labels and folio numbers.</li>
|
||||
<li>Tint everything toward forest; never toward neutral grey.</li>
|
||||
</ul></div>
|
||||
<div class="rules-col dont"><h3><em>non.</em></h3><ul>
|
||||
<li>Introduce a second accent. Rust is the only ember.</li>
|
||||
<li>Use sans-serif headlines — italics carry 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. The grove needs air.</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>clearings.</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"><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">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--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">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--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">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"><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">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><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">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"><em>{{text}}</em></h2><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>Playfair Display / JetBrains Mono</div>
|
||||
<div>__DATE__</div>
|
||||
<div><b>Grove</b> · vol. i</div>
|
||||
<div>Playfair Display / Source Sans 3</div>
|
||||
<div>Compiled May 2026</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
@@ -312,7 +409,5 @@ __SLIDE_CARDS__
|
||||
})();
|
||||
</script>
|
||||
|
||||
__SHADER_SCRIPT__
|
||||
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
||||
@@ -5,301 +5,402 @@
|
||||
<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=JetBrains+Mono:wght@300;400;500;600;700;800;900&family=Jost: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=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600&family=Jost:wght@300;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:"Jost",sans-serif; --f-mono:"JetBrains Mono",monospace;
|
||||
--pad-x:clamp(24px,5vw,88px); --pad-y:clamp(40px,6vh,100px);
|
||||
--ivory:#F8F4EA; --ink:#111111;
|
||||
--grey-1:#5A5752;
|
||||
--grey-2:#9A968D;
|
||||
--grey-3:#C9C4B6;
|
||||
--hairline:#D8D2C3;
|
||||
--f-disp:"Lora",serif;
|
||||
--f-body:"Jost",sans-serif;
|
||||
--f-mono:"JetBrains Mono",monospace;
|
||||
--pad-x:clamp(28px,6vw,108px); --pad-y:clamp(56px,8vh,140px);
|
||||
}
|
||||
</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 "JetBrains Mono",monospace;-webkit-font-smoothing:antialiased;overflow-x:hidden}
|
||||
::selection{background:var(--accent);color:var(--secondary)}
|
||||
html,body{margin:0;padding:0;background:var(--ivory)}
|
||||
body{color:var(--ink);font:400 15px/1.7 var(--f-body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
|
||||
::selection{background:var(--ink);color:var(--ivory)}
|
||||
|
||||
#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 "JetBrains Mono",monospace;letter-spacing:.06em;text-transform:uppercase}
|
||||
.rail .brand{color:var(--accent);display:inline-flex;align-items:center;gap:10px;font:400 22px/1 "Jost",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(--ivory) 86%,transparent);backdrop-filter:blur(14px);border-bottom:1px solid var(--hairline);z-index:100;font:500 11px/1 var(--f-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--grey-1)}
|
||||
.rail .brand{display:inline-flex;align-items:center;gap:14px;color:var(--ink)}
|
||||
.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(--ink)}
|
||||
.rail .brand .mark{width:14px;height:1px;background:var(--ink);display:inline-block}
|
||||
.rail nav{display:flex;gap:28px}
|
||||
.rail nav a{color:var(--grey-1);text-decoration:none;transition:color .2s}
|
||||
.rail nav a:hover{color:var(--ink)}
|
||||
.rail .meta{font-family:var(--f-disp);font-style:italic;font-size:14px;letter-spacing:0;text-transform:none;color:var(--grey-1)}
|
||||
@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 "JetBrains Mono",monospace;letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}
|
||||
.section-head h2{font:900 clamp(36px,6vw,84px)/.92 "Jost",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(--ink);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(--ink)}
|
||||
.section-head h2{font:italic 500 clamp(52px,8.5vw,128px)/.95 var(--f-disp);letter-spacing:-.005em;margin:0;color:var(--ink)}
|
||||
.section-head h2 em{font-style:normal}
|
||||
.section-head .lede{grid-column:2;max-width:54ch;margin-top:24px;font:italic 400 17px/1.7 var(--f-disp);color:var(--grey-1)}
|
||||
|
||||
.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 "Jost",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 "JetBrains Mono",monospace;letter-spacing:.1em;text-transform:uppercase;opacity:.55}
|
||||
.cover-foot .v{font:500 13px/1.4 "JetBrains Mono",monospace}
|
||||
.cover-foot .v.big{font:800 32px/1 "Jost",sans-serif;letter-spacing:-.02em}
|
||||
.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(--grey-1)}
|
||||
.cover-chrome .accent{color:var(--ink)}
|
||||
.cover-headline{align-self:end;margin:0;font:italic 500 clamp(80px,17vw,280px)/.92 var(--f-disp);letter-spacing:-.018em;color:var(--ink)}
|
||||
.cover-headline em{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(--ink)}
|
||||
.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(--grey-1)}
|
||||
.cover-foot .v{font:italic 500 22px/1.2 var(--f-disp);color:var(--ink)}
|
||||
.cover-foot .v.plain{font-family:var(--f-body);font-style:normal;font-weight:500;font-size:14px;color:var(--ink)}
|
||||
@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 "JetBrains Mono",monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
|
||||
.manifesto p{font:700 clamp(28px,3.8vw,56px)/1.05 "Jost",sans-serif;letter-spacing:-.025em;max-width:22ch;margin:0;text-transform:lowercase}
|
||||
.manifesto p em{font-style:normal;color:var(--accent)}
|
||||
.manifesto{padding:clamp(60px,10vh,140px) var(--pad-x);border-top:1px solid var(--ink);border-bottom:1px solid var(--ink)}
|
||||
.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(--ink)}
|
||||
.manifesto p{font:italic 500 clamp(28px,3.6vw,56px)/1.2 var(--f-disp);max-width:30ch;margin:0;color:var(--ink)}
|
||||
.manifesto p em{font-style:normal}
|
||||
|
||||
.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 "JetBrains Mono",monospace;letter-spacing:.1em;text-transform:uppercase}
|
||||
.swatch .name{font:900 clamp(28px,3.4vw,48px)/.92 "Jost",sans-serif;letter-spacing:-.025em;text-transform:lowercase;margin-top:auto}
|
||||
.swatch .hex{font:500 12px/1 "JetBrains Mono",monospace;margin-top:8px}
|
||||
.swatch .usage{font:400 11px/1.5 "JetBrains 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{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--ink)}
|
||||
.swatch{aspect-ratio:3/4;padding:32px 28px;display:flex;flex-direction:column;justify-content:space-between;border-right:1px solid var(--ink);transition:transform .3s}
|
||||
.swatch:last-child{border-right:0}
|
||||
.swatch:hover{transform:translateY(-4px)}
|
||||
.swatch .role{font:500 11px/1 var(--f-mono);letter-spacing:.22em;text-transform:uppercase}
|
||||
.swatch .name{font:italic 500 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:italic 400 13px/1.6 var(--f-disp);margin-top:6px;opacity:.75;max-width:22ch}
|
||||
.swatch--ivory{background:var(--ivory);color:var(--ink)}
|
||||
.swatch--g3{background:var(--grey-3);color:var(--ink)}
|
||||
.swatch--g1{background:var(--grey-1);color:var(--ivory)}
|
||||
.swatch--ink{background:var(--ink);color:var(--ivory)}
|
||||
@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(--ink)}}
|
||||
|
||||
.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 "JetBrains 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 "Jost",sans-serif}
|
||||
.spec-display{font:900 clamp(56px,10vw,152px)/.88 "Jost",sans-serif;letter-spacing:-.04em;text-transform:lowercase}
|
||||
.spec-h1{font:800 clamp(40px,7vw,104px)/.9 "Jost",sans-serif;letter-spacing:-.03em;text-transform:lowercase}
|
||||
.spec-h2{font:700 clamp(28px,4.2vw,64px)/1 "Jost",sans-serif;letter-spacing:-.02em}
|
||||
.spec-lead{font:500 clamp(18px,2vw,26px)/1.45 "Jost",sans-serif}
|
||||
.spec-body{font:400 17px/1.65 "Jost",sans-serif;max-width:60ch}
|
||||
.spec-label{font:500 13px/1 "JetBrains Mono",monospace;letter-spacing:.1em;text-transform:uppercase}
|
||||
.specimen{display:flex;flex-direction:column;border:1px solid var(--ink)}
|
||||
.spec-row{display:grid;grid-template-columns:13em 1fr;gap:36px;padding:36px 32px;border-bottom:1px solid var(--hairline);align-items:baseline}
|
||||
.spec-row:last-child{border:0}
|
||||
.spec-row .meta{font:500 11px/1.5 var(--f-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--grey-1);display:flex;flex-direction:column;gap:6px}
|
||||
.spec-row .meta b{color:var(--ink);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,160px)/.92 var(--f-disp);letter-spacing:-.018em;color:var(--ink)}
|
||||
.spec-h1{font:italic 500 clamp(44px,7vw,108px)/.95 var(--f-disp);letter-spacing:-.012em;color:var(--ink)}
|
||||
.spec-h2{font:italic 500 clamp(28px,4vw,60px)/1.1 var(--f-disp);color:var(--ink)}
|
||||
.spec-lead{font:italic 400 clamp(20px,2.2vw,30px)/1.45 var(--f-disp);color:var(--ink);max-width:38ch}
|
||||
.spec-body{font:400 16px/1.75 var(--f-body);color:var(--ink);max-width:62ch}
|
||||
.spec-body .dropcap{float:left;font:italic 500 84px/.85 var(--f-disp);padding:8px 16px 0 0;color:var(--ink)}
|
||||
.spec-label{font:500 12px/1 var(--f-mono);letter-spacing:.22em;text-transform:uppercase;color:var(--ink)}
|
||||
|
||||
.surface-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:48px;max-width:1400px;margin:0 auto}
|
||||
.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 "JetBrains 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 "Jost",sans-serif;letter-spacing:-.02em;text-transform:lowercase}
|
||||
.demo-card p{margin:0;font:400 15px/1.6 "Jost",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 "JetBrains Mono",monospace;letter-spacing:.1em;text-transform:uppercase;opacity:.6}
|
||||
.tokens .val{font:800 20px/1 "Jost",sans-serif}
|
||||
.tokens .bar{height:6px;background:var(--accent)}
|
||||
.demo-card{background:var(--ivory);color:var(--ink);padding:40px;display:flex;flex-direction:column;gap:18px;border:1px solid var(--ink)}
|
||||
.demo-card .tag{align-self:flex-start;font:500 10px/1 var(--f-mono);letter-spacing:.22em;text-transform:uppercase;color:var(--ink);padding:6px 0;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink)}
|
||||
.demo-card h3{margin:0;font:italic 500 44px/1 var(--f-disp);letter-spacing:-.01em;color:var(--ink)}
|
||||
.demo-card p{margin:0;font:400 14px/1.75 var(--f-body);color:var(--grey-1)}
|
||||
.demo-card .num-stat{font:italic 500 88px/1 var(--f-disp);color:var(--ink);letter-spacing:-.01em}
|
||||
.tokens{list-style:none;padding:0;margin:0;border-top:1px solid var(--ink)}
|
||||
.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:.22em;text-transform:uppercase;color:var(--grey-1)}
|
||||
.tokens .val{font:italic 500 22px/1 var(--f-disp);color:var(--ink)}
|
||||
.tokens .bar{height:1px;background:var(--ink)}
|
||||
|
||||
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:48px;max-width:1400px;margin:0 auto}
|
||||
.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 "JetBrains Mono",monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
|
||||
.panel h4{margin:0;font:800 32px/1 "Jost",sans-serif;text-transform:lowercase}
|
||||
.panel p{margin:0;font:400 13px/1.7 "Jost",sans-serif;opacity:.65;max-width:38ch}
|
||||
.panel{border:1px solid var(--ink);padding:40px;display:flex;flex-direction:column;gap:22px;background:var(--ivory)}
|
||||
.panel h4{margin:0;font:italic 500 36px/1 var(--f-disp);color:var(--ink)}
|
||||
.panel .label-row{font:500 11px/1 var(--f-mono);letter-spacing:.22em;text-transform:uppercase;color:var(--grey-1)}
|
||||
.panel p{margin:0;font:400 14px/1.75 var(--f-body);color:var(--grey-1);max-width:38ch}
|
||||
.panel pre{margin:0;padding:14px 18px;border:1px solid var(--ink);background:var(--ivory);font:500 12px/1.6 var(--f-mono);color:var(--ink);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 "JetBrains 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 "JetBrains 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 "Jost",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 "JetBrains 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}
|
||||
.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 "Jost",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 "Jost",sans-serif}
|
||||
.rules-col li::before{font:800 22px/1.2 "Jost",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;color:var(--ink)}
|
||||
.rules-col ul{list-style:none;margin:0;padding:0}
|
||||
.rules-col li{display:grid;grid-template-columns:2.4em 1fr;gap:12px;padding:20px 0;border-top:1px solid var(--ink);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(--ink);font-style:normal}
|
||||
.rules-col.dont li::before{content:"¶";color:var(--grey-2);font-style:normal}
|
||||
.rules-col.dont li{color:var(--grey-1)}
|
||||
.rules-col.dont h3{color:var(--grey-1)}
|
||||
|
||||
.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-wrap{border-top:1px solid var(--ink)}
|
||||
.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(--ivory);border:1px solid var(--ink);overflow:hidden;transition:transform .3s}
|
||||
.tmpl:hover{transform:translateY(-2px)}
|
||||
.tmpl-thumb{width:100%;aspect-ratio:16/9;overflow:hidden;position:relative;background:var(--ivory);border-bottom:1px solid var(--ink)}
|
||||
.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 "JetBrains 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:14px 18px;font:500 11px/1 var(--f-mono);letter-spacing:.18em;text-transform:uppercase}
|
||||
.tmpl-foot .name{color:var(--ink);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(--grey-1)}
|
||||
|
||||
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 "Jost",sans-serif;letter-spacing:-.04em;text-transform:lowercase;margin:0}
|
||||
footer.endcap .meta{font:500 12px/2 "JetBrains Mono",monospace;letter-spacing:.1em;text-transform:uppercase;opacity:.6;text-align:right}
|
||||
footer.endcap .meta b{opacity:1;color:var(--accent)}
|
||||
footer.endcap{padding:96px var(--pad-x) 56px;border-top:1px solid var(--ink);display:grid;grid-template-columns:1fr auto;gap:48px;align-items:end}
|
||||
footer.endcap .endmark{font:italic 500 clamp(60px,14vw,240px)/.85 var(--f-disp);letter-spacing:-.018em;margin:0;color:var(--ink)}
|
||||
footer.endcap .endmark em{font-style:normal}
|
||||
footer.endcap .meta{font:500 11px/2 var(--f-mono);letter-spacing:.22em;text-transform:uppercase;color:var(--grey-1);text-align:right}
|
||||
footer.endcap .meta b{color:var(--ink);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{
|
||||
--m-paper:#F8F4EA; --m-ink:#111111;
|
||||
--m-grey-1:#5A5752; --m-grey-2:#9A968D; --m-grey-3:#C9C4B6;
|
||||
--m-line:#D8D2C3;
|
||||
--m-f-disp:"Lora",serif;
|
||||
--m-f-body:"Jost",sans-serif;
|
||||
--m-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:120px 168px;display:grid;grid-template-rows:auto 1fr auto;overflow:hidden;background:var(--m-paper);color:var(--m-ink);font-family:var(--m-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(--m-f-mono);letter-spacing:.22em;text-transform:uppercase;color:var(--m-ink)}
|
||||
.ds-slide-frame .slide-chrome{padding-bottom:22px;border-bottom:1px solid var(--m-ink);margin-bottom:44px}
|
||||
.ds-slide-frame .slide-foot{padding-top:22px;border-top:1px solid var(--m-ink);margin-top:44px}
|
||||
.ds-slide-frame .slide-chrome .accent,.ds-slide-frame .slide-foot .accent{color:var(--m-grey-1)}
|
||||
.ds-slide-frame .display{font:italic 500 260px/.9 var(--m-f-disp);letter-spacing:-.025em;color:var(--m-ink)}
|
||||
.ds-slide-frame .display em{font-style:normal}
|
||||
.ds-slide-frame .h1{font:italic 500 156px/.92 var(--m-f-disp);letter-spacing:-.018em;color:var(--m-ink)}
|
||||
.ds-slide-frame .h1 em{font-style:normal}
|
||||
.ds-slide-frame .h2{font:italic 500 92px/1.05 var(--m-f-disp);letter-spacing:-.01em;color:var(--m-ink)}
|
||||
.ds-slide-frame .h2 em{font-style:normal}
|
||||
.ds-slide-frame .h3{font:italic 500 52px/1.15 var(--m-f-disp);color:var(--m-ink)}
|
||||
.ds-slide-frame .lead{font:italic 400 32px/1.45 var(--m-f-disp);color:var(--m-ink)}
|
||||
.ds-slide-frame .body{font:400 24px/1.75 var(--m-f-body);color:var(--m-ink)}
|
||||
.ds-slide-frame .label{font:500 16px/1 var(--m-f-mono);letter-spacing:.22em;text-transform:uppercase;color:var(--m-ink)}
|
||||
.ds-slide-frame .muted{color:var(--m-grey-1)}
|
||||
|
||||
.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;font:500 16px/1 var(--m-f-mono);letter-spacing:.22em;text-transform:uppercase;color:var(--m-grey-1);margin-bottom:auto}
|
||||
.ds-slide-frame .cover-top .accent{color:var(--m-ink)}
|
||||
.ds-slide-frame .cover-body{display:flex;flex-direction:column;gap:32px}
|
||||
.ds-slide-frame .cover-rule{width:120px;height:1px;background:var(--m-ink)}
|
||||
|
||||
.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:120px 240px}
|
||||
.ds-slide-frame .chap-num{font:500 18px/1 var(--m-f-mono);letter-spacing:.22em;text-transform:uppercase;color:var(--m-ink)}
|
||||
|
||||
.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 280px;gap:48px}
|
||||
.ds-slide-frame .epigraph-mark{font:italic 500 240px/.5 var(--m-f-disp);color:var(--m-ink);height:120px}
|
||||
.ds-slide-frame .epigraph-text{font:italic 500 84px/1.18 var(--m-f-disp);letter-spacing:-.01em;color:var(--m-ink);max-width:88%}
|
||||
.ds-slide-frame .epigraph-attr{display:flex;flex-direction:column;gap:8px;padding-top:24px;border-top:1px solid var(--m-ink);max-width:480px}
|
||||
.ds-slide-frame .epigraph-attr .nm{font:italic 500 30px/1 var(--m-f-disp);color:var(--m-ink)}
|
||||
.ds-slide-frame .epigraph-attr .src{font:500 16px/1 var(--m-f-mono);letter-spacing:.22em;text-transform:uppercase;color:var(--m-grey-1)}
|
||||
|
||||
.ds-slide-frame .slide--treatise .slide-body{display:grid;grid-template-columns:1fr 2fr;gap:96px;align-items:start;padding-top:32px}
|
||||
.ds-slide-frame .treatise-side{display:flex;flex-direction:column;gap:18px}
|
||||
.ds-slide-frame .treatise-body{display:flex;flex-direction:column;gap:24px}
|
||||
.ds-slide-frame .drop-cap{float:left;font:italic 500 120px/.85 var(--m-f-disp);padding:8px 18px 0 0;color:var(--m-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:0;border-top:1px solid var(--m-ink);border-bottom:1px solid var(--m-ink)}
|
||||
.ds-slide-frame .stat-card{display:flex;flex-direction:column;gap:14px;padding:32px;border-right:1px solid var(--m-line)}
|
||||
.ds-slide-frame .stat-card:last-child{border-right:0}
|
||||
.ds-slide-frame .stat-card .v{font:italic 500 144px/1 var(--m-f-disp);color:var(--m-ink);letter-spacing:-.02em}
|
||||
.ds-slide-frame .stat-card .l{font:400 26px/1.45 var(--m-f-body);color:var(--m-ink)}
|
||||
.ds-slide-frame .stat-card .n{font:500 14px/1 var(--m-f-mono);letter-spacing:.22em;text-transform:uppercase;color:var(--m-grey-1)}
|
||||
|
||||
.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: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:3em 1fr;gap:24px;padding:28px 0;border-top:1px solid var(--m-line);counter-increment:idx;align-items:baseline}
|
||||
.ds-slide-frame .list-items li::before{content:counter(idx,lower-roman);font:italic 500 30px/1 var(--m-f-disp);color:var(--m-ink)}
|
||||
.ds-slide-frame .list-items .h{font:italic 500 38px/1.15 var(--m-f-disp);color:var(--m-ink);display:block;margin-bottom:6px}
|
||||
.ds-slide-frame .list-items .d{font:400 22px/1.55 var(--m-f-body);color:var(--m-grey-1);display:block}
|
||||
|
||||
.ds-slide-frame .slide--ledger .slide-body{display:flex;flex-direction:column;gap:24px;padding-top:32px}
|
||||
.ds-slide-frame .ledger{width:100%;border-collapse:collapse;border-top:1px solid var(--m-ink);border-bottom:1px solid var(--m-ink)}
|
||||
.ds-slide-frame .ledger thead{border-bottom:1px solid var(--m-ink)}
|
||||
.ds-slide-frame .ledger th{padding:18px 18px;text-align:left;font:500 16px/1 var(--m-f-mono);letter-spacing:.22em;text-transform:uppercase;color:var(--m-ink)}
|
||||
.ds-slide-frame .ledger td{padding:22px 18px;border-bottom:1px solid var(--m-line);font:400 24px/1.4 var(--m-f-body);color:var(--m-ink);vertical-align:baseline}
|
||||
.ds-slide-frame .ledger td.num{text-align:right;font:italic 500 30px/1 var(--m-f-disp);color:var(--m-ink)}
|
||||
.ds-slide-frame .ledger td.label{font-family:var(--m-f-disp);font-style:italic;font-size:30px;color:var(--m-ink)}
|
||||
.ds-slide-frame .ledger tr:last-child td{border-bottom:0}
|
||||
|
||||
.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 168px;gap:48px}
|
||||
.ds-slide-frame .end-mark{font:italic 500 280px/.9 var(--m-f-disp);letter-spacing:-.025em;color:var(--m-ink)}
|
||||
.ds-slide-frame .end-meta{display:flex;gap:48px;font:500 14px/1.5 var(--m-f-mono);letter-spacing:.22em;text-transform:uppercase;color:var(--m-grey-1);padding-top:24px;border-top:1px solid var(--m-ink)}
|
||||
.ds-slide-frame .end-meta b{color:var(--m-ink);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="mark"></span><b>Monochrome</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="meta">vol. i · mmxxvi</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 · № 012</div>
|
||||
<div class="accent">a ledger, a record, a brief.</div>
|
||||
</div>
|
||||
<h1 class="cover-headline">monochrome<em>.</em></h1>
|
||||
<div class="cover-foot">
|
||||
<div class="cell"><span class="k">Template</span><span class="v">monochrome</span></div>
|
||||
<div class="cell"><span class="k">Type</span><span class="v big">Jost</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">Research · Policy · Ledger</span></div>
|
||||
<div class="cell"><span class="k">Display</span><span class="v">Lora <em>italic</em></span></div>
|
||||
<div class="cell"><span class="k">Palette</span><span class="v">Ivory + Ink. <em>That's all.</em></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>Ivory ledger paper with all-black type; Lora serif headlines, Jost body, no color at all.</p>
|
||||
<div class="num">— Manifesto</div>
|
||||
<p>the page is <em>a record</em>. the type is <em>the voice</em>. there is no colour because colour is not the argument.</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>Two notes,<br/><em>two greys.</em></h2>
|
||||
<p class="lede">Ivory paper. Black ink. A pair of greys for hierarchy. No colour at all — emphasis comes from weight and italic, not from hue.</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--ivory"><div class="role">i · paper</div><div><div class="name">ivory.</div><div class="hex">__PRIMARY__</div><div class="usage">Warm white. The canvas.</div></div></div>
|
||||
<div class="swatch swatch--g3"><div class="role">ii · margin</div><div><div class="name">stone.</div><div class="hex">#C9C4B6</div><div class="usage">Hairlines and dividers.</div></div></div>
|
||||
<div class="swatch swatch--g1"><div class="role">iii · cipher</div><div><div class="name">slate.</div><div class="hex">__TERTIARY__</div><div class="usage">Captions and chrome.</div></div></div>
|
||||
<div class="swatch swatch--ink"><div class="role">iv · ink</div><div><div class="name">ink.</div><div class="hex">__SECONDARY__</div><div class="usage">The voice.</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>Lora and<br/><em>Jost.</em></h2>
|
||||
<p class="lede">Lora italic carries headlines and emphasis. Jost handles body in 400 weight. JetBrains Mono runs labels. No third face.</p>
|
||||
</div>
|
||||
<div class="specimen">
|
||||
<div class="spec-row"><div class="meta"><span>Display</span><b>Jost</b></div><div class="spec-display">hello world.</div></div>
|
||||
<div class="spec-row"><div class="meta"><span>H1</span><b>Jost</b></div><div class="spec-h1">chapter one</div></div>
|
||||
<div class="spec-row"><div class="meta"><span>H2</span><b>Jost</b></div><div class="spec-h2">Slide headlines.</div></div>
|
||||
<div class="spec-row"><div class="meta"><span>Body</span><b>Jost</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>JetBrains Mono</b></div><div class="spec-label">// chrome · labels · metadata</div></div>
|
||||
<div class="spec-row"><div class="meta"><span>Display</span><b>Lora italic 500</b><span>11vw · −0.025em</span></div><div class="spec-display"><em>quiet</em> record.</div></div>
|
||||
<div class="spec-row"><div class="meta"><span>Heading I</span><b>Lora 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>Lora italic 500</b><span>4vw</span></div><div class="spec-h2">A subhead sets the section.</div></div>
|
||||
<div class="spec-row"><div class="meta"><span>Lead</span><b>Lora italic 400</b><span>2.2vw · 1.45</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>Jost 400</b><span>16px · 1.75 · 62ch</span></div><p class="spec-body"><span class="dropcap">T</span>he reader is slow — every line should reward the pace. Body copy below 24px is forbidden in any composition above 1080p. Set generously; let the page breathe. Emphasis is italic, never bold.</p></div>
|
||||
<div class="spec-row"><div class="meta"><span>Label</span><b>JetBrains Mono 500</b><span>12px · 0.22em</span></div><div class="spec-label">// folio · pp. 04 / 16 · ledger</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">No filled containers. Surfaces are defined by 1px hairlines and generous margins. The page itself is the only object.</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 hairline, perhaps; a numeral, perhaps. The page already does the work. Nothing about a surface should announce it.</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">168 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">Generous</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>Almost <em>none.</em></h2>
|
||||
<p class="lede">The page does not move. A slide arrives by replacement, not by tween. The reader's eye does all the motion.</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">// transition</span>
|
||||
<h4><em>cut.</em></h4>
|
||||
<p>Replace, do not tween. The page changes when the reader is ready, not before. Fades are forbidden.</p>
|
||||
<pre>transition: none;</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>0s.</em></h4>
|
||||
<p>If any motion is required — a footnote reveal, a hover state — it happens in 150ms with a linear ease.</p>
|
||||
<pre>--dur-cut: 0s;
|
||||
--dur-detail: 0.15s linear;</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">A handful of rules. The record 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>Express emphasis through italic Lora; never through colour.</li>
|
||||
<li>Keep all margins generous — 168px page padding, never less.</li>
|
||||
<li>Use mono only for chrome labels and folio numbers.</li>
|
||||
<li>Set body copy in Jost 400, line-height 1.75.</li>
|
||||
<li>Build hierarchy with weight and size; never with hue.</li>
|
||||
</ul></div>
|
||||
<div class="rules-col dont"><h3><em>non.</em></h3><ul>
|
||||
<li>Introduce any accent colour. The system is mono.</li>
|
||||
<li>Apply shadows or gradients. The page is flat.</li>
|
||||
<li>Use uppercase for body. Italic carries emphasis.</li>
|
||||
<li>Fill containers. Surfaces are defined by line.</li>
|
||||
<li>Animate transitions. The record cuts.</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>folios.</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"><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">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--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 / 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"><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">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--ledger"><header class="slide-chrome"><span>{{label}}</span><span class="accent">{{label}}</span></header><div class="slide-body"><h2 class="h2"><em>{{headline}}</em></h2><table class="ledger"><thead><tr><th>{{label}}</th><th>{{label}}</th><th style="text-align:right">{{label}}</th></tr></thead><tbody><tr><td class="label">{{text}}</td><td>{{body}}</td><td class="num">{{number}}</td></tr><tr><td class="label">{{text}}</td><td>{{body}}</td><td class="num">{{number}}</td></tr><tr><td class="label">{{text}}</td><td>{{body}}</td><td class="num">{{number}}</td></tr><tr><td class="label">{{text}}</td><td>{{body}}</td><td class="num">{{number}}</td></tr></tbody></table></div><footer class="slide-foot"><span>{{label}}</span><span>{{number}}</span></footer></section>
|
||||
</div></div></div><div class="tmpl-foot"><span class="name">ledger</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"><em>{{text}}</em></h2><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">colophon</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>Jost / JetBrains Mono</div>
|
||||
<div>__DATE__</div>
|
||||
<div><b>Monochrome</b> · vol. i</div>
|
||||
<div>Lora / Jost / JetBrains Mono</div>
|
||||
<div>Compiled May mmxxvi</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
@@ -312,7 +413,5 @@ __SLIDE_CARDS__
|
||||
})();
|
||||
</script>
|
||||
|
||||
__SHADER_SCRIPT__
|
||||
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
||||
@@ -5,301 +5,430 @@
|
||||
<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=Alfa+Slab+One&family=Caveat+Brush&family=Source+Sans+3:wght@400;500;600;700&family=JetBrains+Mono:wght@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:"system-ui",sans-serif; --f-mono:"monospace",monospace;
|
||||
--pad-x:clamp(24px,5vw,88px); --pad-y:clamp(40px,6vh,100px);
|
||||
--cream:#F1ECDF; --ink:#111111;
|
||||
--blue:#112D54; --orange:#E15A2E; --red:#B7252A;
|
||||
--ink-dim:color-mix(in srgb,var(--ink) 65%,var(--cream));
|
||||
--hairline:color-mix(in srgb,var(--ink) 18%,transparent);
|
||||
--f-disp:"Alfa Slab One",serif;
|
||||
--f-hand:"Caveat Brush",cursive;
|
||||
--f-body:"Source Sans 3",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 "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.6 var(--f-body);overflow-x:hidden}
|
||||
::selection{background:var(--orange);color:var(--cream)}
|
||||
|
||||
#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}
|
||||
/* Slight halftone paper texture */
|
||||
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background-image:radial-gradient(circle,rgba(17,17,17,0.08) 1px,transparent 1px);background-size:4px 4px;opacity:.5}
|
||||
|
||||
.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:52px;display:flex;align-items:center;justify-content:space-between;padding:0 var(--pad-x);background:var(--ink);color:var(--cream);z-index:100;font:600 12px/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase}
|
||||
.rail .brand{display:inline-flex;align-items:center;gap:14px}
|
||||
.rail .brand b{font-family:var(--f-disp);font-weight:400;letter-spacing:.005em;text-transform:uppercase;font-size:22px;color:var(--orange)}
|
||||
.rail .brand .star{width:18px;height:18px;background:var(--orange);clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
|
||||
.rail nav{display:flex;gap:22px}
|
||||
.rail nav a{color:color-mix(in srgb,var(--cream) 70%,transparent);text-decoration:none;transition:color .15s}
|
||||
.rail nav a:hover{color:var(--orange)}
|
||||
.rail .meta{font-family:var(--f-hand);font-size:24px;letter-spacing:0;text-transform:none;color:var(--orange);transform:rotate(-3deg)}
|
||||
@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:6px solid var(--ink);padding-top:32px;margin-bottom:clamp(40px,6vh,72px)}
|
||||
.section-head .num{display:inline-block;padding:6px 14px;background:var(--orange);color:var(--cream);font:600 12px/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;border:3px solid var(--ink);align-self:flex-start;justify-self:start;transform:rotate(-2deg)}
|
||||
.section-head h2{margin:0;font:400 clamp(48px,9vw,128px)/.95 var(--f-disp);letter-spacing:.005em;text-transform:uppercase;color:var(--ink)}
|
||||
.section-head h2 em{font-style:normal;color:var(--orange);background:var(--ink);padding:0 .06em;display:inline-block;line-height:.95}
|
||||
.section-head .lede{grid-column:2;max-width:54ch;margin-top:18px;font:500 16px/1.65 var(--f-body);color:var(--ink)}
|
||||
|
||||
.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;overflow:hidden}
|
||||
.cover-chrome{display:flex;justify-content:space-between;font:600 12px/1 var(--f-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--ink)}
|
||||
.cover-chrome .accent{color:var(--red)}
|
||||
.cover-headline{align-self:center;margin:0;font:400 clamp(80px,17vw,300px)/.85 var(--f-disp);letter-spacing:.005em;text-transform:uppercase;color:var(--ink);text-align:center}
|
||||
.cover-headline em{font-style:normal;color:var(--cream);background:var(--orange);padding:0 .04em;display:inline-block;line-height:.85;border:6px solid var(--ink);box-shadow:8px 8px 0 var(--ink);margin:0 .04em}
|
||||
.cover-stamp{align-self:center;font-family:var(--f-hand);font-size:48px;color:var(--red);transform:rotate(-4deg);text-align:center;margin-top:24px;letter-spacing:.02em}
|
||||
.cover-foot{margin-top:48px;display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:4px solid var(--ink);background:var(--ink)}
|
||||
.cover-foot .cell{padding:20px 22px;background:var(--cream);display:flex;flex-direction:column;gap:6px}
|
||||
.cover-foot .cell:nth-child(1){background:var(--orange);color:var(--cream)}
|
||||
.cover-foot .cell:nth-child(3){background:var(--blue);color:var(--cream)}
|
||||
.cover-foot .k{font:600 11px/1.4 var(--f-mono);letter-spacing:.16em;text-transform:uppercase}
|
||||
.cover-foot .v{font:400 24px/1.1 var(--f-disp);letter-spacing:.005em;text-transform:uppercase}
|
||||
.cover-foot .v.hand{font-family:var(--f-hand);font-size:28px;letter-spacing:0}
|
||||
.cover-foot .v.plain{font:600 14px/1.4 var(--f-body);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 "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:var(--orange);color:var(--cream);border-top:6px solid var(--ink);border-bottom:6px solid var(--ink);position:relative}
|
||||
.manifesto-grid{display:grid;grid-template-columns:11em 1fr;gap:clamp(24px,4vw,56px);align-items:start}
|
||||
.manifesto-grid .num{font-family:var(--f-hand);font-size:36px;color:var(--ink);transform:rotate(-3deg)}
|
||||
.manifesto p{font:400 clamp(36px,5.5vw,88px)/1 var(--f-disp);max-width:18ch;margin:0;color:var(--cream);text-transform:uppercase;letter-spacing:.005em}
|
||||
.manifesto p em{font-style:normal;background:var(--ink);color:var(--orange);padding:0 .06em;display:inline-block;line-height:1}
|
||||
.manifesto p strong{font-family:var(--f-hand);font-weight:400;color:var(--ink);font-size:.7em;transform:rotate(-2deg);display:inline-block;letter-spacing:.02em}
|
||||
|
||||
.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:14px}
|
||||
@media(max-width:880px){.palette{grid-template-columns:repeat(2,1fr)}}
|
||||
.swatch{aspect-ratio:3/4;padding:0;display:flex;flex-direction:column;border:4px solid var(--ink);box-shadow:8px 8px 0 var(--ink);position:relative}
|
||||
.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 .role{padding:8px 14px;background:var(--ink);color:var(--cream);font:600 12px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;border-bottom:4px solid var(--ink)}
|
||||
.swatch .fill{flex:1;display:flex;flex-direction:column;justify-content:flex-end;padding:18px}
|
||||
.swatch .name{font:400 clamp(28px,3.4vw,52px)/.95 var(--f-disp);letter-spacing:.005em;text-transform:uppercase;margin-top:auto}
|
||||
.swatch .hex{font:600 14px/1 var(--f-mono);margin-top:10px}
|
||||
.swatch .usage{font:500 13px/1.5 var(--f-body);margin-top:6px;opacity:.85}
|
||||
.swatch--cream{background:var(--cream);color:var(--ink)}
|
||||
.swatch--ink{background:var(--ink);color:var(--cream)}
|
||||
.swatch--ink .role{background:var(--cream);color:var(--ink);border-bottom-color:var(--cream)}
|
||||
.swatch--blue{background:var(--blue);color:var(--cream)}
|
||||
.swatch--blue .role{background:var(--cream);color:var(--blue);border-bottom-color:var(--cream)}
|
||||
.swatch--orange{background:var(--orange);color:var(--ink)}
|
||||
|
||||
.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:4px solid var(--ink);background:var(--cream);box-shadow:8px 8px 0 var(--ink)}
|
||||
.spec-row{display:grid;grid-template-columns:13em 1fr;gap:32px;padding:28px 32px;border-bottom:2px solid var(--ink);align-items:baseline}
|
||||
.spec-row:last-child{border:0}
|
||||
.spec-row .meta{font:600 11px/1.5 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink);display:flex;flex-direction:column;gap:6px}
|
||||
.spec-row .meta b{color:var(--orange);font-weight:600}
|
||||
.spec-display{font:400 clamp(56px,10vw,156px)/.92 var(--f-disp);letter-spacing:.005em;text-transform:uppercase;color:var(--ink)}
|
||||
.spec-display em{font-style:normal;background:var(--orange);padding:0 .04em;display:inline-block;line-height:.92}
|
||||
.spec-h1{font:400 clamp(40px,7vw,108px)/.95 var(--f-disp);letter-spacing:.005em;text-transform:uppercase;color:var(--blue)}
|
||||
.spec-h2{font:400 clamp(28px,4.2vw,72px)/1 var(--f-disp);letter-spacing:.005em;text-transform:uppercase;color:var(--ink)}
|
||||
.spec-hand{font-family:var(--f-hand);font-size:clamp(40px,6vw,88px);line-height:1;color:var(--red);transform:rotate(-2deg);display:inline-block;letter-spacing:.02em}
|
||||
.spec-lead{font:600 clamp(18px,2vw,28px)/1.45 var(--f-body);color:var(--ink);max-width:38ch}
|
||||
.spec-body{font:500 16px/1.65 var(--f-body);color:var(--ink);max-width:60ch}
|
||||
.spec-label{font:600 13px/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--cream);background:var(--ink);padding:6px 12px;display:inline-block}
|
||||
|
||||
.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(--cream);color:var(--ink);padding:32px;display:flex;flex-direction:column;gap:18px;border:4px solid var(--ink);box-shadow:8px 8px 0 var(--orange);position:relative;transform:rotate(-1deg)}
|
||||
.demo-card .tag{align-self:flex-start;font:600 11px/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--cream);background:var(--blue);padding:8px 14px;border:3px solid var(--ink)}
|
||||
.demo-card h3{margin:0;font:400 44px/.95 var(--f-disp);letter-spacing:.005em;text-transform:uppercase}
|
||||
.demo-card p{margin:0;font:500 15px/1.65 var(--f-body)}
|
||||
.demo-card .num-stat{font:400 88px/.95 var(--f-disp);color:var(--orange);letter-spacing:.005em;text-transform:uppercase}
|
||||
.demo-card .hand-note{font-family:var(--f-hand);font-size:32px;color:var(--red);transform:rotate(-3deg);align-self:flex-end;letter-spacing:.02em}
|
||||
.tokens{list-style:none;padding:0;margin:0;border:4px solid var(--ink);background:var(--cream);box-shadow:8px 8px 0 var(--blue);transform:rotate(.5deg)}
|
||||
.tokens li{display:grid;grid-template-columns:1fr auto auto;gap:18px;align-items:center;padding:16px 24px;border-bottom:2px solid var(--ink)}
|
||||
.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-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
|
||||
.tokens .val{font:400 22px/1 var(--f-disp);letter-spacing:.005em;text-transform:uppercase;color:var(--orange)}
|
||||
.tokens .bar{height:8px;background:var(--orange);border:2px solid var(--ink)}
|
||||
|
||||
.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(--cream);border:4px solid var(--ink);padding:32px;display:flex;flex-direction:column;gap:18px;box-shadow:8px 8px 0 var(--ink)}
|
||||
.panel:first-child{box-shadow:8px 8px 0 var(--orange);transform:rotate(-.5deg)}
|
||||
.panel:last-child{box-shadow:8px 8px 0 var(--blue);transform:rotate(.5deg)}
|
||||
.panel .label-row{font:600 11px/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--cream);background:var(--ink);padding:6px 12px;align-self:flex-start}
|
||||
.panel h4{margin:0;font:400 36px/1 var(--f-disp);letter-spacing:.005em;text-transform:uppercase;color:var(--ink)}
|
||||
.panel h4 em{font-style:normal;background:var(--orange);padding:0 .06em;display:inline-block;line-height:1}
|
||||
.panel p{margin:0;font:500 14px/1.65 var(--f-body);color:var(--ink);max-width:38ch}
|
||||
.panel pre{margin:0;padding:14px;border:3px solid var(--ink);background:var(--cream);font:500 12px/1.6 var(--f-mono);color:var(--ink);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{padding:32px;border:4px solid var(--ink)}
|
||||
.rules-col.do{background:var(--cream);box-shadow:8px 8px 0 var(--orange);transform:rotate(-.5deg)}
|
||||
.rules-col.dont{background:var(--cream);box-shadow:8px 8px 0 var(--red);transform:rotate(.5deg)}
|
||||
.rules-col h3{font:400 56px/1 var(--f-disp);margin:0 0 24px;letter-spacing:.005em;text-transform:uppercase;color:var(--ink)}
|
||||
.rules-col.do h3 em{font-style:normal;background:var(--orange);padding:0 .06em;display:inline-block;line-height:1}
|
||||
.rules-col.dont h3 em{font-style:normal;background:var(--red);color:var(--cream);padding:0 .06em;display:inline-block;line-height:1}
|
||||
.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:12px;padding:14px 16px;background:var(--cream);border:2px solid var(--ink);font:500 15px/1.5 var(--f-body);color:var(--ink)}
|
||||
.rules-col li::before{font:600 12px/1 var(--f-mono);align-self:center;text-align:center;letter-spacing:.04em;padding:6px 0;color:var(--cream)}
|
||||
.rules-col.do li::before{content:"YES";background:var(--orange)}
|
||||
.rules-col.dont li::before{content:"NO";background:var(--red)}
|
||||
|
||||
.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:6px solid var(--ink);background:color-mix(in srgb,var(--blue) 8%,var(--cream))}
|
||||
.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(--cream);border:4px solid var(--ink);box-shadow:8px 8px 0 var(--ink);overflow:hidden;transition:transform .15s}
|
||||
.tmpl:hover{transform:translate(-3px,-3px)}
|
||||
.tmpl-thumb{width:100%;aspect-ratio:16/9;overflow:hidden;position:relative;background:var(--cream);border-bottom:3px solid var(--ink)}
|
||||
.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:600 11px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase}
|
||||
.tmpl-foot .name{color:var(--ink);font-family:var(--f-disp);font-weight:400;font-size:20px;letter-spacing:.005em;text-transform:uppercase}
|
||||
.tmpl-foot .idx{color:var(--cream);background:var(--orange);padding:4px 10px;border:2px solid var(--ink)}
|
||||
|
||||
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:var(--ink);color:var(--cream);border-top:6px solid var(--ink);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(--cream)}
|
||||
footer.endcap .endmark em{font-style:normal;color:var(--ink);background:var(--orange);padding:0 .04em;display:inline-block;line-height:.85;border:6px solid var(--cream)}
|
||||
footer.endcap .meta{font:600 12px/2 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:color-mix(in srgb,var(--cream) 65%,transparent);text-align:right}
|
||||
footer.endcap .meta b{color:var(--orange)}
|
||||
</style>
|
||||
|
||||
<style id="template-css">
|
||||
__TEMPLATE_CSS__
|
||||
.ds-slide-frame{
|
||||
--p-cream:#F1ECDF; --p-ink:#111111; --p-blue:#112D54; --p-orange:#E15A2E; --p-red:#B7252A;
|
||||
--p-line:color-mix(in srgb,#111 18%,transparent);
|
||||
--p-f-disp:"Alfa Slab One",serif;
|
||||
--p-f-hand:"Caveat Brush",cursive;
|
||||
--p-f-body:"Source Sans 3",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 120px;display:grid;grid-template-rows:auto 1fr auto;overflow:hidden;background:var(--p-cream);color:var(--p-ink);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:600 18px/1 var(--p-f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--p-ink)}
|
||||
.ds-slide-frame .slide-chrome{padding:8px 14px;background:var(--p-ink);color:var(--p-cream);margin-bottom:48px}
|
||||
.ds-slide-frame .slide-foot{padding:8px 14px;background:var(--p-orange);color:var(--p-cream);margin-top:48px}
|
||||
.ds-slide-frame .slide-chrome .accent{color:var(--p-orange)}
|
||||
.ds-slide-frame .display{font:400 240px/.9 var(--p-f-disp);letter-spacing:.005em;text-transform:uppercase;color:var(--p-ink)}
|
||||
.ds-slide-frame .display em{font-style:normal;background:var(--p-orange);color:var(--p-cream);padding:0 .04em;display:inline-block;line-height:.9;border:6px solid var(--p-ink);box-shadow:8px 8px 0 var(--p-ink)}
|
||||
.ds-slide-frame .h1{font:400 156px/.95 var(--p-f-disp);letter-spacing:.005em;text-transform:uppercase;color:var(--p-blue)}
|
||||
.ds-slide-frame .h2{font:400 96px/1 var(--p-f-disp);letter-spacing:.005em;text-transform:uppercase;color:var(--p-ink)}
|
||||
.ds-slide-frame .h2 em{font-style:normal;background:var(--p-orange);color:var(--p-cream);padding:0 .04em;display:inline-block;line-height:1}
|
||||
.ds-slide-frame .h3{font:400 56px/1.05 var(--p-f-disp);letter-spacing:.005em;text-transform:uppercase;color:var(--p-blue)}
|
||||
.ds-slide-frame .hand{font:400 84px/1 var(--p-f-hand);color:var(--p-red);transform:rotate(-3deg);display:inline-block;letter-spacing:.02em}
|
||||
.ds-slide-frame .lead{font:600 32px/1.45 var(--p-f-body);color:var(--p-ink)}
|
||||
.ds-slide-frame .body{font:500 24px/1.6 var(--p-f-body);color:var(--p-ink)}
|
||||
.ds-slide-frame .label{font:600 16px/1 var(--p-f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--p-cream);background:var(--p-ink);padding:6px 14px;display:inline-block}
|
||||
|
||||
.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;padding:96px}
|
||||
.ds-slide-frame .cover-top{display:flex;justify-content:space-between;width:100%;font:600 18px/1 var(--p-f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--p-ink);position:absolute;top:48px;left:0;padding:0 96px}
|
||||
.ds-slide-frame .cover-top .accent{color:var(--p-red)}
|
||||
.ds-slide-frame .cover-stamp{font-family:var(--p-f-hand);font-size:64px;color:var(--p-red);transform:rotate(-4deg);letter-spacing:.02em}
|
||||
|
||||
.ds-slide-frame .slide--poster{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:48px;text-align:center;background:var(--p-orange)}
|
||||
.ds-slide-frame .slide--poster .slide-chrome{background:var(--p-ink);color:var(--p-cream);position:absolute;top:48px;left:120px;right:120px}
|
||||
.ds-slide-frame .slide--poster .slide-foot{background:var(--p-ink);color:var(--p-cream);position:absolute;bottom:48px;left:120px;right:120px}
|
||||
.ds-slide-frame .slide--poster .display{color:var(--p-cream)}
|
||||
.ds-slide-frame .slide--poster .display em{background:var(--p-blue);color:var(--p-cream);border-color:var(--p-cream);box-shadow:8px 8px 0 var(--p-cream)}
|
||||
|
||||
.ds-slide-frame .slide--statement .slide-body{display:flex;flex-direction:column;justify-content:center;gap:32px}
|
||||
|
||||
.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;background:var(--p-blue);color:var(--p-cream)}
|
||||
.ds-slide-frame .quote-mark{font:400 240px/.5 var(--p-f-disp);color:var(--p-orange);height:120px;line-height:1}
|
||||
.ds-slide-frame .quote-text{font:400 88px/1.05 var(--p-f-disp);letter-spacing:.005em;text-transform:uppercase;color:var(--p-cream);max-width:88%}
|
||||
.ds-slide-frame .quote-text em{font-style:normal;background:var(--p-orange);color:var(--p-cream);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:3px solid var(--p-cream);max-width:600px}
|
||||
.ds-slide-frame .quote-attr .nm{font:400 32px/1 var(--p-f-disp);color:var(--p-orange);letter-spacing:.005em;text-transform:uppercase}
|
||||
.ds-slide-frame .quote-attr .src{font:600 16px/1 var(--p-f-mono);letter-spacing:.14em;text-transform:uppercase;color:color-mix(in srgb,var(--p-cream) 65%,transparent)}
|
||||
|
||||
.ds-slide-frame .slide--stats .slide-body{display:flex;flex-direction:column;justify-content:center;gap:48px}
|
||||
.ds-slide-frame .stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
|
||||
.ds-slide-frame .stat-card{background:var(--p-cream);border:6px solid var(--p-ink);padding:32px;display:flex;flex-direction:column;gap:12px;box-shadow:8px 8px 0 var(--p-ink)}
|
||||
.ds-slide-frame .stat-card:nth-child(1){background:var(--p-orange);color:var(--p-cream)}
|
||||
.ds-slide-frame .stat-card:nth-child(2){background:var(--p-cream);transform:rotate(1deg)}
|
||||
.ds-slide-frame .stat-card:nth-child(3){background:var(--p-blue);color:var(--p-cream);transform:rotate(-1deg)}
|
||||
.ds-slide-frame .stat-card .v{font:400 112px/.95 var(--p-f-disp);letter-spacing:.005em;text-transform:uppercase}
|
||||
.ds-slide-frame .stat-card .l{font:600 22px/1.4 var(--p-f-body)}
|
||||
.ds-slide-frame .stat-card .n{font:600 14px/1 var(--p-f-mono);letter-spacing:.14em;text-transform:uppercase;opacity:.8}
|
||||
|
||||
.ds-slide-frame .slide--list .slide-body{display:grid;grid-template-columns:1fr 1.6fr;gap:80px;align-items:start;padding-top:24px}
|
||||
.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:var(--p-cream);border:4px solid var(--p-ink);box-shadow:6px 6px 0 var(--p-ink)}
|
||||
.ds-slide-frame .list-items li:nth-child(odd){transform:rotate(-.5deg)}
|
||||
.ds-slide-frame .list-items li:nth-child(even){transform:rotate(.5deg)}
|
||||
.ds-slide-frame .list-items .num{font:400 56px/1 var(--p-f-disp);color:var(--p-orange);letter-spacing:.005em}
|
||||
.ds-slide-frame .list-items .h{font:400 30px/1.15 var(--p-f-disp);color:var(--p-ink);letter-spacing:.005em;text-transform:uppercase;display:block;margin-bottom:6px}
|
||||
.ds-slide-frame .list-items .d{font:500 22px/1.5 var(--p-f-body);color:var(--p-ink);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;gap:48px;padding:96px;background:var(--p-orange);color:var(--p-cream)}
|
||||
.ds-slide-frame .end-mark{font:400 240px/.9 var(--p-f-disp);letter-spacing:.005em;text-transform:uppercase;color:var(--p-cream)}
|
||||
.ds-slide-frame .end-mark em{font-style:normal;color:var(--p-orange);background:var(--p-cream);border:6px solid var(--p-ink);padding:0 .04em;display:inline-block;line-height:.9;box-shadow:8px 8px 0 var(--p-ink)}
|
||||
.ds-slide-frame .end-hand{font-family:var(--p-f-hand);font-size:64px;color:var(--p-ink);transform:rotate(-3deg);letter-spacing:.02em}
|
||||
</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="star"></span><b>People's Platform</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">vote yes —</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 · № 011</div>
|
||||
<div class="accent">★ ★ ★</div>
|
||||
</div>
|
||||
<h1 class="cover-headline">PEOPLE'S<br/><em>PLATFORM</em>.</h1>
|
||||
<div class="cover-stamp">— a system with a fist in the air —</div>
|
||||
<div class="cover-foot">
|
||||
<div class="cell"><span class="k">Template</span><span class="v">peoples-platform</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">Civic · Campaign · Manifesto</span></div>
|
||||
<div class="cell"><span class="k">Display</span><span class="v">Alfa Slab One</span></div>
|
||||
<div class="cell"><span class="k">Hand</span><span class="v hand">Caveat Brush</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">
|
||||
<section class="manifesto" data-screen-label="00 Manifesto">
|
||||
<div class="manifesto-grid">
|
||||
<div class="num">— Manifesto</div>
|
||||
<p>Activist poster energy: blue, orange, red on cream, with Alfa Slab + Caveat Brush.</p>
|
||||
<div class="num">— manifesto</div>
|
||||
<p>the page is a <em>protest</em>. type is <strong>volume</strong>. color is <em>position</em>, not decoration.</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>
|
||||
<span class="num">01 — Palette</span>
|
||||
<h2>Four <em>positions.</em></h2>
|
||||
<p class="lede">Cream paper as common ground. Black ink, navy blue authority, hot orange volume, brick red urgency. Use blue and orange together; never red and orange.</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">01 · paper</div><div class="fill"><div class="name">cream.</div><div class="hex">__PRIMARY__</div><div class="usage">Common ground. The page.</div></div></div>
|
||||
<div class="swatch swatch--ink"><div class="role">02 · ink</div><div class="fill"><div class="name">ink.</div><div class="hex">__SECONDARY__</div><div class="usage">Type and structural lines.</div></div></div>
|
||||
<div class="swatch swatch--blue"><div class="role">03 · navy</div><div class="fill"><div class="name">navy.</div><div class="hex">__TERTIARY__</div><div class="usage">Authority and headlines.</div></div></div>
|
||||
<div class="swatch swatch--orange"><div class="role">04 · fire</div><div class="fill"><div class="name">fire.</div><div class="hex">__ACCENT__</div><div class="usage">The volume. One 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>
|
||||
<span class="num">02 — Type</span>
|
||||
<h2>Slab,<br/>script, <em>sans.</em></h2>
|
||||
<p class="lede">Alfa Slab One stamps the headlines. Caveat Brush handles the urgent hand. Source Sans keeps the body legible. JetBrains Mono runs 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>Alfa Slab One</b><span>10vw · UPPERCASE</span></div><div class="spec-display">VOTE <em>NOW</em>.</div></div>
|
||||
<div class="spec-row"><div class="meta"><span>H1</span><b>Alfa Slab One</b><span>7vw · navy</span></div><div class="spec-h1">CHAPTER ONE</div></div>
|
||||
<div class="spec-row"><div class="meta"><span>H2</span><b>Alfa Slab One</b><span>4.2vw</span></div><div class="spec-h2">SLIDE HEADLINES.</div></div>
|
||||
<div class="spec-row"><div class="meta"><span>Hand</span><b>Caveat Brush</b><span>6vw · red · tilted</span></div><div class="spec-hand">a hand-painted aside —</div></div>
|
||||
<div class="spec-row"><div class="meta"><span>Lead</span><b>Source Sans 600</b><span>2vw</span></div><div class="spec-lead">The lead carries the argument with conviction and one short breath.</div></div>
|
||||
<div class="spec-row"><div class="meta"><span>Body</span><b>Source Sans 500</b><span>16px · 60ch</span></div><p class="spec-body">Pack my box with five dozen liquor jugs. Body type stays open and direct. Below 24px is forbidden in any composition shown above 1080p.</p></div>
|
||||
<div class="spec-row"><div class="meta"><span>Label</span><b>JetBrains Mono 600</b><span>13px · ink on cream</span></div><div class="spec-label">★ POSTER · LABEL · 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>
|
||||
<span class="num">03 — Surface</span>
|
||||
<h2>Posters<br/>and <em>placards.</em></h2>
|
||||
<p class="lede">Every surface gets a 4px black border and a hard offset shadow in fire, navy, or ink. Surfaces tilt ±1°. Nothing is centered on a grid.</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">▶ CARD · POSTER</span>
|
||||
<h3>EXAMPLE PLACARD.</h3>
|
||||
<p>4px black border. 8px offset fire shadow. Slight tilt. The voltage is in the construction, not the content.</p>
|
||||
<div class="num-stat">+42%</div>
|
||||
<div class="hand-note">— says the data!</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">4 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">8 8 0</span><span class="bar" style="width:44px"></span></li>
|
||||
<li><span class="name">// tilt</span><span class="val">±1°</span><span class="bar" style="width:18px"></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>
|
||||
<span class="num">04 — Motion</span>
|
||||
<h2>Stamped.<br/><em>Decisive.</em></h2>
|
||||
<p class="lede">Elements land like a stamp — fast, hard, with a small rotation snap. Never tweened slowly.</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>STAMP <em>OUT.</em></h4>
|
||||
<p>Aggressive head, hard stop, slight rotation on land. Use for posters, headlines, and stat cards.</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.5 <em>SECONDS.</em></h4>
|
||||
<p>Posters land in 0.5s. Headlines in 0.35s. Hover responses in 0.1s.</p>
|
||||
<pre>--dur-slide: 0.5s
|
||||
--dur-enter: 0.35s
|
||||
--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>
|
||||
<span class="num">05 — Rules</span>
|
||||
<h2>YES.<br/><em>NO.</em></h2>
|
||||
<p class="lede">Short rules. Break any and the message loses its voice.</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>YES.</em></h3><ul>
|
||||
<li>Use one accent voice per slide — orange, navy, or red.</li>
|
||||
<li>Stamp every surface with 4px black border + offset shadow.</li>
|
||||
<li>Set headlines in Alfa Slab uppercase.</li>
|
||||
<li>Use Caveat Brush for one human aside per slide.</li>
|
||||
<li>Tilt cards ±1° — never grid-aligned.</li>
|
||||
</ul></div>
|
||||
<div class="rules-col dont"><h3><em>NO.</em></h3><ul>
|
||||
<li>Combine red and orange. They fight each other.</li>
|
||||
<li>Use blurred shadows. Posters get offset shadows only.</li>
|
||||
<li>Set headlines in sentence case. Posters shout.</li>
|
||||
<li>Use rounded corners. Sharp edges only.</li>
|
||||
<li>Hide accents. The system runs on visible position.</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>
|
||||
<span class="num">06 — Templates</span>
|
||||
<h2>Seven<br/><em>posters.</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">★ ★ ★</span></div><h1 class="display">{{headline}}</h1><div class="cover-stamp">— {{text}} —</div></section>
|
||||
</div></div></div><div class="tmpl-foot"><span class="name">cover</span><span class="idx">01/07</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--poster"><header class="slide-chrome"><span>{{label}}</span><span class="accent">{{label}}</span></header><h1 class="display">{{headline}}</h1><footer class="slide-foot"><span>{{label}}</span><span>{{label}}</span></footer></section>
|
||||
</div></div></div><div class="tmpl-foot"><span class="name">poster</span><span class="idx">02/07</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 class="hand">— {{text}} —</div></div><footer class="slide-foot"><span>{{label}}</span><span>{{label}}</span></footer></section>
|
||||
</div></div></div><div class="tmpl-foot"><span class="name">statement</span><span class="idx">03/07</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/07</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">{{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></div><footer class="slide-foot"><span>{{label}}</span><span>{{label}}</span></footer></section>
|
||||
</div></div></div><div class="tmpl-foot"><span class="name">stats</span><span class="idx">05/07</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">{{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></ul></div><footer class="slide-foot"><span>{{label}}</span><span>{{label}}</span></footer></section>
|
||||
</div></div></div><div class="tmpl-foot"><span class="name">list</span><span class="idx">06/07</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">{{headline}} <em>{{text}}</em></h2><div class="end-hand">— {{text}} —</div></section>
|
||||
</div></div></div><div class="tmpl-foot"><span class="name">end</span><span class="idx">07/07</span></div></div>
|
||||
|
||||
</template>
|
||||
|
||||
<footer class="endcap">
|
||||
<h2 class="endmark">end.</h2>
|
||||
<footer class="endcap" data-screen-label="07 End">
|
||||
<h2 class="endmark">JOIN <em>US.</em></h2>
|
||||
<div class="meta">
|
||||
<div><b>__NAME__</b> · v1</div>
|
||||
<div>system-ui / monospace</div>
|
||||
<div>__DATE__</div>
|
||||
<div><b>People's Platform</b> · v 1.0</div>
|
||||
<div>ALFA SLAB / CAVEAT BRUSH</div>
|
||||
<div>Printed May 2026</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
@@ -312,7 +441,5 @@ __SLIDE_CARDS__
|
||||
})();
|
||||
</script>
|
||||
|
||||
__SHADER_SCRIPT__
|
||||
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
||||
@@ -5,301 +5,496 @@
|
||||
<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=Oswald:wght@500;600;700&family=Noto+Sans+JP:wght@400;500;700&family=Noto+Sans:wght@400;500;700&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:"system-ui",sans-serif; --f-mono:"monospace",monospace;
|
||||
--pad-x:clamp(24px,5vw,88px); --pad-y:clamp(40px,6vh,100px);
|
||||
--cream:#EFE6D3; --ink:#1C1612;
|
||||
--red:#E25C58; --blue:#2880A3; --yellow:#E8B842; --pink:#E89BC3;
|
||||
--ink-dim:color-mix(in srgb,var(--ink) 65%,var(--cream));
|
||||
--hairline:color-mix(in srgb,var(--ink) 20%,transparent);
|
||||
--f-disp:"Oswald",sans-serif;
|
||||
--f-body:"Noto Sans",sans-serif;
|
||||
--f-jp:"Noto Sans JP",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 "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:400 14px/1.6 var(--f-body);overflow-x:hidden}
|
||||
::selection{background:var(--red);color:var(--cream)}
|
||||
|
||||
#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}
|
||||
/* Halftone overlay */
|
||||
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background-image:radial-gradient(circle,rgba(28,22,18,0.05) 1px,transparent 1px);background-size:4px 4px}
|
||||
|
||||
.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}}
|
||||
/* Diagonal rainbow ribbons across cover/manifesto */
|
||||
.ribbons{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}
|
||||
.ribbons .ribbon{position:absolute;left:-20%;width:140%;height:48px;transform:rotate(-12deg)}
|
||||
.ribbons .ribbon.r1{top:14%;background:var(--red)}
|
||||
.ribbons .ribbon.r2{top:calc(14% + 48px);background:var(--yellow)}
|
||||
.ribbons .ribbon.r3{top:calc(14% + 96px);background:var(--blue)}
|
||||
.ribbons .ribbon.r4{top:calc(14% + 144px);background:var(--pink)}
|
||||
|
||||
.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(--ink);color:var(--cream);z-index:100;font:600 11px/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase}
|
||||
.rail .brand{display:inline-flex;align-items:center;gap:12px;color:var(--red)}
|
||||
.rail .brand b{font-family:var(--f-disp);font-weight:700;letter-spacing:.02em;text-transform:uppercase;font-size:22px;color:var(--cream)}
|
||||
.rail .brand .ribbon-mark{display:inline-flex;gap:2px}
|
||||
.rail .brand .ribbon-mark span{width:4px;height:18px;transform:skewX(-12deg)}
|
||||
.rail .brand .ribbon-mark span:nth-child(1){background:var(--red)}
|
||||
.rail .brand .ribbon-mark span:nth-child(2){background:var(--yellow)}
|
||||
.rail .brand .ribbon-mark span:nth-child(3){background:var(--blue)}
|
||||
.rail .brand .ribbon-mark span:nth-child(4){background:var(--pink)}
|
||||
.rail nav{display:flex;gap:18px;font-family:var(--f-mono)}
|
||||
.rail nav a{color:color-mix(in srgb,var(--cream) 70%,transparent);text-decoration:none;transition:color .15s}
|
||||
.rail nav a:hover{color:var(--cream)}
|
||||
.rail .meta{font-family:var(--f-jp);font-weight:500;font-size:13px;letter-spacing:.08em;color:var(--yellow)}
|
||||
@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:2px solid var(--ink);padding-top:32px;margin-bottom:clamp(40px,6vh,72px)}
|
||||
.section-head .num{display:inline-flex;gap:6px;align-items:center;font:600 12px/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink);align-self:flex-start}
|
||||
.section-head .num::before{content:"□";color:var(--red);font-size:18px;line-height:1}
|
||||
.section-head h2{margin:0;font:700 clamp(56px,9vw,128px)/.92 var(--f-disp);letter-spacing:.005em;text-transform:uppercase;color:var(--ink)}
|
||||
.section-head h2 em{font-style:normal;color:var(--cream);background:var(--red);padding:0 .04em;display:inline-block;line-height:.92}
|
||||
.section-head .lede{grid-column:2;max-width:54ch;margin-top:18px;font:500 15px/1.65 var(--f-body);color:var(--ink)}
|
||||
|
||||
.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;overflow:hidden;background:var(--cream)}
|
||||
.cover .ribbons{z-index:0}
|
||||
.cover>*{position:relative;z-index:1}
|
||||
.cover-chrome{display:flex;justify-content:space-between;font:600 12px/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink);background:var(--cream);padding:8px 12px;border:2px solid var(--ink);align-self:flex-start;width:fit-content}
|
||||
.cover-chrome .right{margin-left:auto;color:var(--red)}
|
||||
.cover-chrome-wrap{display:flex;justify-content:space-between;align-items:flex-start;gap:24px}
|
||||
.cover-headline{align-self:end;margin:0;font:700 clamp(72px,15vw,260px)/.88 var(--f-disp);letter-spacing:.005em;text-transform:uppercase;color:var(--ink);background:var(--cream);padding:24px 36px 24px;border:3px solid var(--ink);max-width:min(100%,1300px)}
|
||||
.cover-headline em{font-style:normal;color:var(--red)}
|
||||
.cover-jp{font-family:var(--f-jp);font-weight:500;font-size:24px;color:var(--ink);background:var(--cream);padding:8px 16px;border:2px solid var(--ink);align-self:flex-start;letter-spacing:.04em;width:fit-content;margin-top:-12px}
|
||||
.cover-foot{margin-top:48px;display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:3px solid var(--ink);background:var(--cream)}
|
||||
.cover-foot .cell{padding:18px 22px;border-right:2px solid var(--ink);display:flex;flex-direction:column;gap:6px;background:var(--cream)}
|
||||
.cover-foot .cell:last-child{border-right:0}
|
||||
.cover-foot .k{font:600 11px/1.4 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--blue)}
|
||||
.cover-foot .k::before{content:"☑ ";color:var(--red)}
|
||||
.cover-foot .v{font:700 18px/1.2 var(--f-disp);letter-spacing:.005em;text-transform:uppercase;color:var(--ink)}
|
||||
.cover-foot .v.jp{font-family:var(--f-jp);font-size:14px;letter-spacing:.04em;text-transform:none;font-weight:500}
|
||||
@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,9vh,120px) var(--pad-x);background:var(--ink);color:var(--cream);position:relative;overflow:hidden;border-top:6px solid var(--red);border-bottom:6px solid var(--blue)}
|
||||
.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:600 12px/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--yellow)}
|
||||
.manifesto p{font:700 clamp(28px,4.5vw,64px)/1.05 var(--f-disp);max-width:22ch;margin:0;color:var(--cream);text-transform:uppercase;letter-spacing:.005em}
|
||||
.manifesto p em{font-style:normal;background:var(--red);color:var(--cream);padding:0 .06em;display:inline-block;line-height:1.05}
|
||||
.manifesto p strong{font-style:normal;font-weight:700;color:var(--yellow)}
|
||||
|
||||
.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:12px}
|
||||
@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);position:relative;overflow:hidden}
|
||||
.swatch .role{padding:6px 12px;background:var(--ink);color:var(--cream);font:600 11px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;display:flex;justify-content:space-between;align-items:center;gap:8px}
|
||||
.swatch .role::after{content:"☑";color:var(--yellow);font-size:14px;line-height:1}
|
||||
.swatch .fill{flex:1;display:flex;flex-direction:column;justify-content:flex-end;padding:18px}
|
||||
.swatch .name{font:700 clamp(28px,3.4vw,48px)/.92 var(--f-disp);letter-spacing:.005em;text-transform:uppercase;margin-top:auto}
|
||||
.swatch .hex{font:600 13px/1 var(--f-mono);margin-top:8px}
|
||||
.swatch .usage{font:500 12px/1.5 var(--f-body);margin-top:6px;opacity:.85}
|
||||
.swatch--cream .fill{background:var(--cream);color:var(--ink)}
|
||||
.swatch--ink .fill{background:var(--ink);color:var(--cream)}
|
||||
.swatch--red .fill{background:var(--red);color:var(--cream)}
|
||||
.swatch--blue .fill{background:var(--blue);color:var(--cream)}
|
||||
|
||||
.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:3px solid var(--ink);background:var(--cream)}
|
||||
.spec-row{display:grid;grid-template-columns:13em 1fr;gap:32px;padding:28px 32px;border-bottom:2px solid var(--ink);align-items:baseline}
|
||||
.spec-row:last-child{border:0}
|
||||
.spec-row .meta{font:600 11px/1.5 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink);display:flex;flex-direction:column;gap:6px}
|
||||
.spec-row .meta b{color:var(--red);font-weight:700}
|
||||
.spec-display{font:700 clamp(56px,10vw,148px)/.92 var(--f-disp);letter-spacing:.005em;text-transform:uppercase;color:var(--ink)}
|
||||
.spec-display em{font-style:normal;background:var(--red);color:var(--cream);padding:0 .04em;display:inline-block;line-height:.92}
|
||||
.spec-h1{font:700 clamp(40px,7vw,108px)/.92 var(--f-disp);letter-spacing:.005em;text-transform:uppercase;color:var(--blue)}
|
||||
.spec-h2{font:700 clamp(28px,4.2vw,64px)/1 var(--f-disp);letter-spacing:.005em;text-transform:uppercase;color:var(--ink)}
|
||||
.spec-jp{font-family:var(--f-jp);font-weight:700;font-size:clamp(32px,5vw,72px);line-height:1.1;color:var(--ink);letter-spacing:.04em}
|
||||
.spec-lead{font:600 clamp(18px,2vw,28px)/1.45 var(--f-body);color:var(--ink);max-width:38ch}
|
||||
.spec-body{font:500 16px/1.65 var(--f-body);color:var(--ink);max-width:60ch}
|
||||
.spec-label{font:600 13px/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--cream);background:var(--ink);padding:6px 12px;display:inline-block}
|
||||
|
||||
.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(--cream);color:var(--ink);padding:0;display:flex;flex-direction:column;border:3px solid var(--ink);position:relative;overflow:hidden}
|
||||
.demo-card .strip{height:24px;background:repeating-linear-gradient(-12deg,var(--red) 0 12px,var(--yellow) 12px 24px,var(--blue) 24px 36px,var(--pink) 36px 48px)}
|
||||
.demo-card-body{padding:24px 28px;display:flex;flex-direction:column;gap:14px}
|
||||
.demo-card .tag{align-self:flex-start;font:600 11px/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--cream);background:var(--ink);padding:6px 12px}
|
||||
.demo-card h3{margin:0;font:700 36px/1 var(--f-disp);letter-spacing:.005em;text-transform:uppercase}
|
||||
.demo-card p{margin:0;font:500 14px/1.65 var(--f-body)}
|
||||
.demo-card .specs{display:flex;flex-direction:column;gap:6px;padding-top:14px;border-top:2px solid var(--ink);font:500 13px/1.5 var(--f-mono);letter-spacing:.04em}
|
||||
.demo-card .specs span::before{content:"☑ ";color:var(--red)}
|
||||
.demo-card .num-stat{font:700 80px/.95 var(--f-disp);color:var(--red);letter-spacing:.005em}
|
||||
.tokens{list-style:none;padding:0;margin:0;border:3px solid var(--ink);background:var(--cream)}
|
||||
.tokens li{display:grid;grid-template-columns:1fr auto auto;gap:18px;align-items:center;padding:14px 22px;border-bottom:2px solid var(--ink)}
|
||||
.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-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
|
||||
.tokens .name::before{content:"☑ ";color:var(--red)}
|
||||
.tokens .val{font:700 20px/1 var(--f-disp);letter-spacing:.005em;text-transform:uppercase;color:var(--blue)}
|
||||
.tokens .bar{height:8px;background:repeating-linear-gradient(90deg,var(--red) 0 8px,var(--yellow) 8px 16px,var(--blue) 16px 24px);border:1px solid var(--ink)}
|
||||
|
||||
.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(--cream);border:3px solid var(--ink);padding:0;display:flex;flex-direction:column;overflow:hidden}
|
||||
.panel .header{padding:8px 16px;background:var(--ink);color:var(--cream);font:600 12px/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;display:flex;justify-content:space-between;align-items:center}
|
||||
.panel .header::after{content:"REC ●";color:var(--red)}
|
||||
.panel-body{padding:24px 28px;display:flex;flex-direction:column;gap:16px}
|
||||
.panel h4{margin:0;font:700 32px/1 var(--f-disp);letter-spacing:.005em;text-transform:uppercase;color:var(--ink)}
|
||||
.panel h4 em{font-style:normal;background:var(--red);color:var(--cream);padding:0 .06em;display:inline-block;line-height:1}
|
||||
.panel p{margin:0;font:500 14px/1.65 var(--f-body);color:var(--ink);max-width:38ch}
|
||||
.panel pre{margin:0;padding:14px;border:2px solid var(--ink);background:var(--cream);font:500 12px/1.6 var(--f-mono);color:var(--ink);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 var(--ink);background:var(--cream);overflow:hidden}
|
||||
.rules-col .header{padding:8px 16px;font:600 12px/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--cream)}
|
||||
.rules-col.do .header{background:var(--blue)}
|
||||
.rules-col.dont .header{background:var(--red)}
|
||||
.rules-col-body{padding:24px 28px}
|
||||
.rules-col h3{font:700 48px/1 var(--f-disp);margin:0 0 18px;letter-spacing:.005em;text-transform:uppercase;color:var(--ink)}
|
||||
.rules-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
|
||||
.rules-col li{display:grid;grid-template-columns:1.8em 1fr;gap:10px;padding:12px 14px;background:var(--cream);border:2px solid var(--ink);font:500 14px/1.5 var(--f-body);color:var(--ink)}
|
||||
.rules-col li::before{font:700 18px/1 var(--f-disp);align-self:center;text-align:center}
|
||||
.rules-col.do li::before{content:"☑";color:var(--blue)}
|
||||
.rules-col.dont li::before{content:"☒";color:var(--red)}
|
||||
|
||||
.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:6px solid var(--ink);background:var(--ink)}
|
||||
.templates-wrap .section-head{border-top-color:var(--cream);color:var(--cream)}
|
||||
.templates-wrap .section-head .num{color:var(--yellow)}
|
||||
.templates-wrap .section-head h2{color:var(--cream)}
|
||||
.templates-wrap .section-head .lede{color:color-mix(in srgb,var(--cream) 75%,transparent)}
|
||||
.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(--cream);border:3px solid var(--cream);overflow:hidden;transition:transform .15s}
|
||||
.tmpl:hover{transform:translateY(-2px)}
|
||||
.tmpl-thumb{width:100%;aspect-ratio:16/9;overflow:hidden;position:relative;background:var(--cream);border-bottom:3px solid var(--ink)}
|
||||
.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:600 11px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;background:var(--cream)}
|
||||
.tmpl-foot .name{color:var(--ink);font-family:var(--f-disp);font-weight:700;font-size:18px;letter-spacing:.005em;text-transform:uppercase}
|
||||
.tmpl-foot .idx{color:var(--cream);background:var(--red);padding:4px 10px}
|
||||
|
||||
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:var(--cream);position:relative;overflow:hidden;border-top:6px solid var(--red)}
|
||||
footer.endcap .ribbons .ribbon.r1{background:var(--blue);top:30%}
|
||||
footer.endcap .ribbons .ribbon.r2{background:var(--yellow);top:calc(30% + 48px)}
|
||||
footer.endcap .ribbons .ribbon.r3{background:var(--red);top:calc(30% + 96px)}
|
||||
footer.endcap .ribbons .ribbon.r4{background:var(--pink);top:calc(30% + 144px)}
|
||||
footer.endcap .grid{display:grid;grid-template-columns:1fr auto;gap:48px;align-items:end;position:relative;z-index:1}
|
||||
footer.endcap .endmark{font:700 clamp(60px,14vw,240px)/.88 var(--f-disp);letter-spacing:.005em;text-transform:uppercase;margin:0;color:var(--ink);background:var(--cream);padding:20px 28px;border:3px solid var(--ink);display:inline-block;width:fit-content}
|
||||
footer.endcap .endmark em{font-style:normal;color:var(--red)}
|
||||
footer.endcap .meta{font:600 12px/2 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink);text-align:right;background:var(--cream);padding:14px 18px;border:2px solid var(--ink)}
|
||||
footer.endcap .meta b{color:var(--red)}
|
||||
</style>
|
||||
|
||||
<style id="template-css">
|
||||
__TEMPLATE_CSS__
|
||||
.ds-slide-frame{
|
||||
--s-cream:#EFE6D3; --s-ink:#1C1612; --s-red:#E25C58; --s-blue:#2880A3;
|
||||
--s-yellow:#E8B842; --s-pink:#E89BC3;
|
||||
--s-line:color-mix(in srgb,#1C1612 20%,transparent);
|
||||
--s-f-disp:"Oswald",sans-serif;
|
||||
--s-f-body:"Noto Sans",sans-serif;
|
||||
--s-f-jp:"Noto Sans JP",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:80px 96px;display:grid;grid-template-rows:auto 1fr auto;overflow:hidden;background:var(--s-cream);color:var(--s-ink);font-family:var(--s-f-body)}
|
||||
.ds-slide-frame .ribbons{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}
|
||||
.ds-slide-frame .ribbons .ribbon{position:absolute;left:-20%;width:140%;height:64px;transform:rotate(-12deg)}
|
||||
.ds-slide-frame .ribbons .ribbon.r1{top:18%;background:var(--s-red)}
|
||||
.ds-slide-frame .ribbons .ribbon.r2{top:calc(18% + 64px);background:var(--s-yellow)}
|
||||
.ds-slide-frame .ribbons .ribbon.r3{top:calc(18% + 128px);background:var(--s-blue)}
|
||||
.ds-slide-frame .ribbons .ribbon.r4{top:calc(18% + 192px);background:var(--s-pink)}
|
||||
.ds-slide-frame .slide>*{position:relative;z-index:1}
|
||||
.ds-slide-frame .slide-chrome,.ds-slide-frame .slide-foot{display:flex;justify-content:space-between;align-items:center;font:600 18px/1 var(--s-f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--s-cream);background:var(--s-ink);padding:10px 16px;margin-bottom:36px}
|
||||
.ds-slide-frame .slide-foot{margin-top:36px;margin-bottom:0;background:var(--s-red)}
|
||||
.ds-slide-frame .slide-chrome .accent{color:var(--s-yellow)}
|
||||
.ds-slide-frame .display{font:700 240px/.9 var(--s-f-disp);letter-spacing:.005em;text-transform:uppercase;color:var(--s-ink)}
|
||||
.ds-slide-frame .display em{font-style:normal;background:var(--s-red);color:var(--s-cream);padding:0 .04em;display:inline-block;line-height:.9}
|
||||
.ds-slide-frame .h1{font:700 144px/.92 var(--s-f-disp);letter-spacing:.005em;text-transform:uppercase;color:var(--s-blue)}
|
||||
.ds-slide-frame .h2{font:700 88px/1 var(--s-f-disp);letter-spacing:.005em;text-transform:uppercase;color:var(--s-ink)}
|
||||
.ds-slide-frame .h2 em{font-style:normal;background:var(--s-red);color:var(--s-cream);padding:0 .04em;display:inline-block;line-height:1}
|
||||
.ds-slide-frame .h3{font:700 52px/1.05 var(--s-f-disp);letter-spacing:.005em;text-transform:uppercase;color:var(--s-blue)}
|
||||
.ds-slide-frame .jp{font:700 60px/1.1 var(--s-f-jp);letter-spacing:.04em;color:var(--s-ink)}
|
||||
.ds-slide-frame .lead{font:600 30px/1.45 var(--s-f-body);color:var(--s-ink)}
|
||||
.ds-slide-frame .body{font:500 24px/1.6 var(--s-f-body);color:var(--s-ink)}
|
||||
.ds-slide-frame .label{font:600 16px/1 var(--s-f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--s-cream);background:var(--s-ink);padding:6px 14px;display:inline-block}
|
||||
|
||||
.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:space-between;padding:48px}
|
||||
.ds-slide-frame .slide--cover .cover-top{display:flex;justify-content:space-between;align-items:flex-start;font:600 16px/1 var(--s-f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--s-ink);background:var(--s-cream);padding:10px 16px;border:2px solid var(--s-ink);align-self:flex-start;width:fit-content;z-index:2}
|
||||
.ds-slide-frame .slide--cover .cover-headline{font:700 220px/.88 var(--s-f-disp);letter-spacing:.005em;text-transform:uppercase;color:var(--s-ink);background:var(--s-cream);padding:32px 48px;border:3px solid var(--s-ink);align-self:flex-start;margin:0;z-index:2;max-width:90%}
|
||||
.ds-slide-frame .slide--cover .cover-headline em{font-style:normal;color:var(--s-red)}
|
||||
.ds-slide-frame .slide--cover .cover-foot{display:flex;justify-content:space-between;align-items:flex-end;background:var(--s-ink);color:var(--s-cream);padding:14px 20px;font:600 16px/1 var(--s-f-mono);letter-spacing:.14em;text-transform:uppercase;z-index:2}
|
||||
.ds-slide-frame .slide--cover .cover-foot .accent{color:var(--s-yellow)}
|
||||
|
||||
.ds-slide-frame .slide--spec .slide-body{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start;padding-top:24px}
|
||||
.ds-slide-frame .spec-card{background:var(--s-cream);border:3px solid var(--s-ink);padding:0;overflow:hidden}
|
||||
.ds-slide-frame .spec-card .strip{height:24px;background:repeating-linear-gradient(-12deg,var(--s-red) 0 16px,var(--s-yellow) 16px 32px,var(--s-blue) 32px 48px,var(--s-pink) 48px 64px)}
|
||||
.ds-slide-frame .spec-card .body{padding:32px 36px;display:flex;flex-direction:column;gap:18px}
|
||||
.ds-slide-frame .spec-card h3{margin:0;font:700 56px/.95 var(--s-f-disp);letter-spacing:.005em;text-transform:uppercase;color:var(--s-ink)}
|
||||
.ds-slide-frame .spec-card .specs{display:flex;flex-direction:column;gap:10px;padding-top:18px;border-top:2px solid var(--s-ink);font:500 22px/1.4 var(--s-f-body)}
|
||||
.ds-slide-frame .spec-card .specs li{list-style:none;display:flex;gap:10px;align-items:baseline}
|
||||
.ds-slide-frame .spec-card .specs li::before{content:"☑";color:var(--s-red);font-size:24px;line-height:1}
|
||||
.ds-slide-frame .spec-card .specs li b{font-family:var(--s-f-mono);font-weight:600;letter-spacing:.04em;color:var(--s-blue);text-transform:uppercase;font-size:14px;margin-right:8px}
|
||||
|
||||
.ds-slide-frame .slide--statement .slide-body{display:flex;flex-direction:column;justify-content:center;gap:32px}
|
||||
.ds-slide-frame .slide--statement .h1{max-width:24ch}
|
||||
|
||||
.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:80px 160px;gap:48px;background:var(--s-ink);color:var(--s-cream)}
|
||||
.ds-slide-frame .quote-mark{font:700 240px/.5 var(--s-f-disp);color:var(--s-red);height:120px}
|
||||
.ds-slide-frame .quote-text{font:700 88px/1.1 var(--s-f-disp);letter-spacing:.005em;text-transform:uppercase;color:var(--s-cream);max-width:88%}
|
||||
.ds-slide-frame .quote-text em{font-style:normal;background:var(--s-yellow);color:var(--s-ink);padding:0 .04em;display:inline-block;line-height:1.1}
|
||||
.ds-slide-frame .quote-attr{display:flex;flex-direction:column;gap:8px;padding-top:24px;border-top:2px solid var(--s-cream);max-width:600px}
|
||||
.ds-slide-frame .quote-attr .nm{font:700 32px/1 var(--s-f-disp);color:var(--s-yellow);text-transform:uppercase;letter-spacing:.005em}
|
||||
.ds-slide-frame .quote-attr .src{font:600 16px/1 var(--s-f-mono);letter-spacing:.14em;text-transform:uppercase;color:color-mix(in srgb,var(--s-cream) 70%,transparent)}
|
||||
|
||||
.ds-slide-frame .slide--stats .slide-body{display:flex;flex-direction:column;justify-content:center;gap:32px}
|
||||
.ds-slide-frame .stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
|
||||
.ds-slide-frame .stat-card{background:var(--s-cream);border:3px solid var(--s-ink);padding:0;display:flex;flex-direction:column;overflow:hidden}
|
||||
.ds-slide-frame .stat-card .strip{height:16px}
|
||||
.ds-slide-frame .stat-card:nth-child(1) .strip{background:var(--s-red)}
|
||||
.ds-slide-frame .stat-card:nth-child(2) .strip{background:var(--s-blue)}
|
||||
.ds-slide-frame .stat-card:nth-child(3) .strip{background:var(--s-yellow)}
|
||||
.ds-slide-frame .stat-card .body{padding:28px 32px;display:flex;flex-direction:column;gap:8px}
|
||||
.ds-slide-frame .stat-card .v{font:700 108px/.95 var(--s-f-disp);letter-spacing:.005em;color:var(--s-ink)}
|
||||
.ds-slide-frame .stat-card .l{font:500 22px/1.4 var(--s-f-body);color:var(--s-ink)}
|
||||
.ds-slide-frame .stat-card .n{font:600 14px/1 var(--s-f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--s-blue)}
|
||||
|
||||
.ds-slide-frame .slide--list .slide-body{display:grid;grid-template-columns:1fr 1.6fr;gap:64px;align-items:start;padding-top:24px}
|
||||
.ds-slide-frame .list-head{display:flex;flex-direction:column;gap:18px}
|
||||
.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:auto 1fr;gap:24px;align-items:start;padding:22px 0;border-bottom:2px solid var(--s-ink)}
|
||||
.ds-slide-frame .list-items li::before{content:"☑";font-size:42px;line-height:1;color:var(--s-red)}
|
||||
.ds-slide-frame .list-items .h{font:700 32px/1.15 var(--s-f-disp);color:var(--s-ink);letter-spacing:.005em;text-transform:uppercase;display:block;margin-bottom:6px}
|
||||
.ds-slide-frame .list-items .d{font:500 22px/1.5 var(--s-f-body);color:var(--s-ink);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:96px 144px;gap:48px}
|
||||
.ds-slide-frame .end-mark{font:700 240px/.9 var(--s-f-disp);letter-spacing:.005em;text-transform:uppercase;color:var(--s-ink);background:var(--s-cream);padding:24px 36px;border:3px solid var(--s-ink);align-self:flex-start;z-index:1}
|
||||
.ds-slide-frame .end-mark em{font-style:normal;color:var(--s-red)}
|
||||
.ds-slide-frame .end-jp{font:700 48px/1.1 var(--s-f-jp);letter-spacing:.04em;color:var(--s-ink);background:var(--s-yellow);padding:10px 20px;border:2px solid var(--s-ink);align-self:flex-start;z-index:1}
|
||||
</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="ribbon-mark"><span></span><span></span><span></span><span></span></span><b>Sakura Chroma</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">サクラ・クロマ</div>
|
||||
</div>
|
||||
|
||||
<header class="cover">
|
||||
<h1 class="cover-headline">__NAME_LINE1____NAME_LINE2__.</h1>
|
||||
<header class="cover" data-screen-label="00 Cover">
|
||||
<div class="ribbons"><div class="ribbon r1"></div><div class="ribbon r2"></div><div class="ribbon r3"></div><div class="ribbon r4"></div></div>
|
||||
<div class="cover-chrome-wrap">
|
||||
<div class="cover-chrome">☑ Design System / № 013</div>
|
||||
<div class="cover-chrome"><span class="right">★ MMXXVI</span></div>
|
||||
</div>
|
||||
<h1 class="cover-headline">SAKURA<br/><em>CHROMA</em>.</h1>
|
||||
<div class="cover-jp">桜・色彩 — a system in four ribbons</div>
|
||||
<div class="cover-foot">
|
||||
<div class="cell"><span class="k">Template</span><span class="v">sakura-chroma</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">CATEGORY</span><span class="v">Catalogue · Hardware · Music</span></div>
|
||||
<div class="cell"><span class="k">DISPLAY</span><span class="v">Oswald 700</span></div>
|
||||
<div class="cell"><span class="k">PALETTE</span><span class="v">4 ribbons + cream + ink</span></div>
|
||||
<div class="cell"><span class="k">VOLUME</span><span class="v jp">06 sections · 07 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>Vintage Japanese cassette-package aesthetic: cream paper, diagonal rainbow ribbons, condensed bold type, JIS-style spec checkboxes.</p>
|
||||
<div class="num">☑ MANIFESTO</div>
|
||||
<p>the deck is a <em>product page</em>. each slide is a <strong>catalogue entry</strong>. ribbons are not decoration — they are <em>category</em>.</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>
|
||||
<span class="num">01 — Palette</span>
|
||||
<h2>Cream, ink,<br/>and <em>four ribbons.</em></h2>
|
||||
<p class="lede">Warm cream as the catalogue paper. Black ink as the line. Red, blue, yellow, and pink as the ribbons — each a category, used as background stripes or accent fills.</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"><span>01 // PAPER</span></div><div class="fill"><div class="name">cream.</div><div class="hex">__PRIMARY__</div><div class="usage">Catalogue paper.</div></div></div>
|
||||
<div class="swatch swatch--ink"><div class="role"><span>02 // INK</span></div><div class="fill"><div class="name">ink.</div><div class="hex">__SECONDARY__</div><div class="usage">Headlines, borders, lines.</div></div></div>
|
||||
<div class="swatch swatch--red"><div class="role"><span>03 // RED</span></div><div class="fill"><div class="name">red.</div><div class="hex">__ACCENT__</div><div class="usage">Primary ribbon. Headlines, alerts.</div></div></div>
|
||||
<div class="swatch swatch--blue"><div class="role"><span>04 // BLUE</span></div><div class="fill"><div class="name">blue.</div><div class="hex">__TERTIARY__</div><div class="usage">Secondary ribbon. Subheads.</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>
|
||||
<span class="num">02 — Type</span>
|
||||
<h2>Oswald,<br/>condensed and <em>bold.</em></h2>
|
||||
<p class="lede">Oswald 700 stamps every headline. Noto Sans handles the body in 500 weight. Noto Sans JP carries the bilingual moments. JetBrains Mono for technical 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>Oswald 700</b><span>10vw · UPPERCASE</span></div><div class="spec-display">CHROMA <em>04</em>.</div></div>
|
||||
<div class="spec-row"><div class="meta"><span>H1</span><b>Oswald 700</b><span>7vw · blue</span></div><div class="spec-h1">CHAPTER ONE</div></div>
|
||||
<div class="spec-row"><div class="meta"><span>H2</span><b>Oswald 700</b><span>4.2vw</span></div><div class="spec-h2">SLIDE HEADLINES.</div></div>
|
||||
<div class="spec-row"><div class="meta"><span>JP</span><b>Noto Sans JP 700</b><span>5vw</span></div><div class="spec-jp">桜・色彩。</div></div>
|
||||
<div class="spec-row"><div class="meta"><span>Lead</span><b>Noto Sans 600</b><span>2vw</span></div><div class="spec-lead">The lead carries the brief like a back-cover blurb on a cassette.</div></div>
|
||||
<div class="spec-row"><div class="meta"><span>Body</span><b>Noto Sans 500</b><span>16px · 60ch</span></div><p class="spec-body">Pack my box with five dozen liquor jugs. Body type stays at 500 weight. Below 24px is forbidden in 1080p compositions. The page reads as a JIS-spec sheet — every fact has a checkbox.</p></div>
|
||||
<div class="spec-row"><div class="meta"><span>Label</span><b>JetBrains Mono 600</b><span>13px · cream on ink</span></div><div class="spec-label">☑ CATALOG · LABEL · TYPE-IV</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>
|
||||
<span class="num">03 — Surface</span>
|
||||
<h2>Cards as<br/><em>cassette cases.</em></h2>
|
||||
<p class="lede">Every card opens with a diagonal-ribbon strip on top. Then a 3px ink border, 0 radius, JIS-spec checkboxes beneath the headline.</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>
|
||||
<div class="strip"></div>
|
||||
<div class="demo-card-body">
|
||||
<span class="tag">☑ TYPE-IV · METAL</span>
|
||||
<h3>EXAMPLE CARD.</h3>
|
||||
<p>Each card opens with a diagonal-ribbon header strip. Bevels are forbidden; the page is print. The accent always lives in the strip — never below it.</p>
|
||||
<div class="num-stat">+42%</div>
|
||||
<div class="specs">
|
||||
<span>STOCK : <b>120 GSM CREAM</b></span>
|
||||
<span>INK : <b>2-PLATE OFFSET</b></span>
|
||||
<span>BORDER : <b>3 PX SOLID</b></span>
|
||||
</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">RIBBON</span><span class="val">−12°</span><span class="bar" style="width:30px"></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">28 PX</span><span class="bar" style="width:36px"></span></li>
|
||||
<li><span class="name">DENSITY</span><span class="val">CATALOGUE</span><span class="bar" style="width:48px"></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>
|
||||
<span class="num">04 — Motion</span>
|
||||
<h2>Slide and<br/><em>click.</em></h2>
|
||||
<p class="lede">Ribbons slide in from off-page on a hard ease. Cards click into position; no overshoot. Motion is mechanical, like a cassette door closing.</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>
|
||||
<div class="header">EASING.dll</div>
|
||||
<div class="panel-body">
|
||||
<h4>SLIDE <em>IN.</em></h4>
|
||||
<p>Aggressive head, hard stop. Use for ribbon entrances, card placements, and any element you want to feel mechanical.</p>
|
||||
<pre>cubic-bezier(0.4, 0, 0.2, 1)</pre>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel">
|
||||
<div class="label-row">// duration</div>
|
||||
<h4>__DURATION_DEFAULT__</h4>
|
||||
<p>__DURATION_DESC__</p>
|
||||
<pre>__DURATION_VALUES__</pre>
|
||||
<div class="header">DURATION.dll</div>
|
||||
<div class="panel-body">
|
||||
<h4>0.6 <em>SEC.</em></h4>
|
||||
<p>Ribbons enter in 0.6s, staggered 80ms apart. Cards click in 0.3s. Hovers in 0.1s.</p>
|
||||
<pre>--dur-ribbon: 0.6s
|
||||
--dur-click: 0.3s
|
||||
--dur-hover: 0.1s</pre>
|
||||
</div>
|
||||
</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>
|
||||
<span class="num">05 — Rules</span>
|
||||
<h2>Allowed.<br/><em>Forbidden.</em></h2>
|
||||
<p class="lede">The catalogue stays in print the moment any of these slip.</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">
|
||||
<div class="header">☑ ALLOWED</div>
|
||||
<div class="rules-col-body">
|
||||
<h3>YES.</h3>
|
||||
<ul>
|
||||
<li>Start cover, manifesto, and end with diagonal ribbon stripes.</li>
|
||||
<li>Use Oswald 700 uppercase for every headline.</li>
|
||||
<li>Place JIS-spec checkboxes under headlines for any factual list.</li>
|
||||
<li>Reserve red for primary moments; blue for secondary.</li>
|
||||
<li>Use Noto Sans JP for bilingual EN/JP pairs.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="rules-col dont">
|
||||
<div class="header">☒ FORBIDDEN</div>
|
||||
<div class="rules-col-body">
|
||||
<h3>NO.</h3>
|
||||
<ul>
|
||||
<li>Tilt ribbons less than −12° or more than −16°.</li>
|
||||
<li>Use rounded corners on any chrome.</li>
|
||||
<li>Apply shadows or gradients. Print only.</li>
|
||||
<li>Use sentence case in headlines.</li>
|
||||
<li>Mix more than two ribbon colours per slide.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</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>
|
||||
<span class="num">06 — Templates</span>
|
||||
<h2>Seven<br/><em>cassette 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="ribbons"><div class="ribbon r1"></div><div class="ribbon r2"></div><div class="ribbon r3"></div><div class="ribbon r4"></div></div><div class="cover-top">☑ {{label}}</div><h1 class="cover-headline">{{headline}}</h1><div class="cover-foot"><span>{{label}}</span><span class="accent">★ {{label}}</span></div></section>
|
||||
</div></div></div><div class="tmpl-foot"><span class="name">cover</span><span class="idx">01/07</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--spec"><header class="slide-chrome"><span>{{label}}</span><span class="accent">{{label}}</span></header><div class="slide-body"><div class="spec-card"><div class="strip"></div><div class="body"><h3>{{headline}}</h3><ul class="specs"><li><b>TYPE</b>{{text}}</li><li><b>FORM</b>{{text}}</li><li><b>USE</b>{{text}}</li></ul></div></div><div class="spec-card"><div class="strip"></div><div class="body"><h3>{{headline}}</h3><ul class="specs"><li><b>TYPE</b>{{text}}</li><li><b>FORM</b>{{text}}</li><li><b>USE</b>{{text}}</li></ul></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">spec</span><span class="idx">02/07</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/07</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/07</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">{{headline}}</h2><div class="stats-grid"><div class="stat-card"><div class="strip"></div><div class="body"><span class="v">{{number}}</span><span class="l">{{body}}</span><span class="n">{{label}}</span></div></div><div class="stat-card"><div class="strip"></div><div class="body"><span class="v">{{number}}</span><span class="l">{{body}}</span><span class="n">{{label}}</span></div></div><div class="stat-card"><div class="strip"></div><div class="body"><span class="v">{{number}}</span><span class="l">{{body}}</span><span class="n">{{label}}</span></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">05/07</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">{{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><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">06/07</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="ribbons"><div class="ribbon r1"></div><div class="ribbon r2"></div><div class="ribbon r3"></div><div class="ribbon r4"></div></div><h2 class="end-mark">{{headline}} <em>{{text}}</em></h2><span class="end-jp">{{text}}</span></section>
|
||||
</div></div></div><div class="tmpl-foot"><span class="name">end</span><span class="idx">07/07</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="ribbons"><div class="ribbon r1"></div><div class="ribbon r2"></div><div class="ribbon r3"></div><div class="ribbon r4"></div></div>
|
||||
<div class="grid">
|
||||
<h2 class="endmark">END <em>SIDE B.</em></h2>
|
||||
<div class="meta">
|
||||
<div><b>Sakura Chroma</b> · 桜・色彩 v 1.0</div>
|
||||
<div>Oswald / Noto Sans / Noto Sans JP</div>
|
||||
<div>Pressed May 2026</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
@@ -312,7 +507,5 @@ __SLIDE_CARDS__
|
||||
})();
|
||||
</script>
|
||||
|
||||
__SHADER_SCRIPT__
|
||||
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user