mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-11-12 20:47:30 +00:00
feat(skills): hand-crafted raw-grid design.html (29 / 34)
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
ba10baba31
commit
fefeb378cb
@@ -5,236 +5,306 @@
|
||||
<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" />
|
||||
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Manrope:wght@400;500;600;700&family=JetBrains+Mono:wght@500;600__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>
|
||||
|
||||
<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);
|
||||
--paper:__PRIMARY__; --ink:__SECONDARY__;
|
||||
--sage:__TERTIARY__; --pink:__ACCENT__; --pale:#F7F1E8;
|
||||
--ink-dim:color-mix(in srgb,var(--ink) 65%,var(--paper));
|
||||
--ink-fade:color-mix(in srgb,var(--ink) 32%,var(--paper));
|
||||
--hairline:color-mix(in srgb,var(--ink) 16%,transparent);
|
||||
--shadow:6px 6px 0 var(--ink);
|
||||
--shadow-sm:4px 4px 0 var(--ink);
|
||||
--f-disp:"Space Grotesk",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(--paper)}
|
||||
body{color:var(--ink);font:500 14px/1.65 var(--f-body);overflow-x:hidden}
|
||||
::selection{background:var(--pink);color:var(--ink)}
|
||||
|
||||
#design-bg{position:fixed;inset:0;width:100%;height:100%;z-index:-2;opacity:.85;pointer-events:none}
|
||||
#bg-veil{position:fixed;inset:0;z-index:-1;pointer-events:none;background:none}
|
||||
#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(--paper) 75%)}
|
||||
|
||||
.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:4px solid var(--black,var(--secondary));box-shadow:4px 4px 0 var(--black,var(--secondary));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);border:3px solid var(--secondary);transform:rotate(-6deg)}
|
||||
.rail nav{display:flex;gap:6px}
|
||||
.rail nav a{color:var(--secondary);text-decoration:none;padding:6px 10px;border:2px solid transparent;transition:all .15s}
|
||||
.rail nav a:hover{color:var(--accent);background:var(--accent);border-color:var(--secondary)}
|
||||
@media(max-width:880px){.rail nav{display:none}}
|
||||
.rail{position:fixed;top:16px;left:16px;right:16px;height:52px;display:flex;align-items:center;justify-content:space-between;padding:0 22px;background:var(--paper);border:3px solid var(--ink);box-shadow:var(--shadow-sm);z-index:100;font:600 11px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
|
||||
.rail .brand{display:inline-flex;align-items:center;gap:12px}
|
||||
.rail .brand b{font-family:var(--f-disp);font-weight:700;letter-spacing:-.02em;text-transform:none;font-size:22px;color:var(--ink)}
|
||||
.rail .brand .grid{display:inline-grid;grid-template-columns:repeat(2,1fr);gap:2px}
|
||||
.rail .brand .grid span{width:8px;height:8px;border:1.5px solid var(--ink)}
|
||||
.rail .brand .grid span:nth-child(1){background:var(--pink)}
|
||||
.rail .brand .grid span:nth-child(2){background:var(--sage)}
|
||||
.rail .brand .grid span:nth-child(3){background:var(--ink)}
|
||||
.rail .brand .grid span:nth-child(4){background:var(--paper)}
|
||||
.rail nav{display:flex;gap:18px}
|
||||
.rail nav a{color:var(--ink-dim);text-decoration:none;padding:6px 10px;border:2px solid transparent;transition:all .12s}
|
||||
.rail nav a:hover{background:var(--pink);border-color:var(--ink);transform:translate(-1px,-1px);box-shadow:2px 2px 0 var(--ink)}
|
||||
.rail .meta{padding:4px 12px;background:var(--sage);border:2px solid var(--ink)}
|
||||
@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:11em 1fr;gap:clamp(24px,4vw,56px);align-items:end;margin-bottom:clamp(36px,5vh,64px)}
|
||||
.section-head .num{font:600 12px/1 "monospace",monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);display:inline-block;border:3px solid var(--secondary);background:var(--primary);padding:6px 14px;box-shadow:4px 4px 0 var(--black,var(--secondary));justify-self:start;transform:rotate(-3deg)}
|
||||
.section-head h2{font:400 clamp(48px,8vw,128px)/.88 "system-ui",sans-serif;letter-spacing:-.01em;margin:0;text-transform:uppercase}
|
||||
.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:3px solid var(--ink);padding-top:32px;margin-bottom:clamp(40px,6vh,72px)}
|
||||
.section-head .num{display:inline-block;font:600 11px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink);padding:8px 14px;background:var(--pink);border:2px solid var(--ink);box-shadow:var(--shadow-sm);justify-self:start;transform:rotate(-2deg)}
|
||||
.section-head h2{margin:0;font:700 clamp(56px,9vw,128px)/.92 var(--f-disp);letter-spacing:-.035em;color:var(--ink)}
|
||||
.section-head h2 em{font-style:normal;background:var(--pink);padding:0 .08em;border:3px solid var(--ink);box-shadow:var(--shadow-sm);display:inline-block;line-height:.92;transform:rotate(-1deg)}
|
||||
.section-head .lede{grid-column:2;max-width:54ch;margin-top:18px;font:500 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:4px solid var(--black,var(--secondary));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 11px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
|
||||
.cover-chrome .accent{padding:6px 12px;background:var(--pink);border:2px solid var(--ink);box-shadow:var(--shadow-sm)}
|
||||
.cover-headline{align-self:end;margin:0;font:700 clamp(96px,21vw,360px)/.85 var(--f-disp);letter-spacing:-.045em;color:var(--ink)}
|
||||
.cover-headline em{font-style:normal;background:var(--sage);padding:0 .06em;border:4px solid var(--ink);box-shadow:8px 8px 0 var(--ink);display:inline-block;line-height:.85;transform:rotate(-1deg);margin:0 .04em}
|
||||
.cover-foot{margin-top:48px;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
|
||||
.cover-foot .cell{padding:18px 20px;background:var(--paper);border:3px solid var(--ink);box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:6px}
|
||||
.cover-foot .cell:nth-child(1){background:var(--pink);transform:rotate(-1.5deg)}
|
||||
.cover-foot .cell:nth-child(2){background:var(--paper);transform:rotate(1deg)}
|
||||
.cover-foot .cell:nth-child(3){background:var(--sage);transform:rotate(-1deg)}
|
||||
.cover-foot .cell:nth-child(4){background:var(--ink);color:var(--paper);transform:rotate(1.5deg)}
|
||||
.cover-foot .cell:nth-child(4) .k{color:color-mix(in srgb,var(--paper) 70%,transparent)}
|
||||
.cover-foot .k{font:600 10px/1.4 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim)}
|
||||
.cover-foot .v{font:700 22px/1.15 var(--f-disp);letter-spacing:-.022em;color:var(--ink)}
|
||||
.cover-foot .cell:nth-child(4) .v{color:var(--paper)}
|
||||
.cover-foot .v.plain{font-family:var(--f-body);font-weight:600;font-size:14px;letter-spacing:.02em}
|
||||
@media(max-width:760px){.cover-foot{grid-template-columns:1fr 1fr}}
|
||||
|
||||
.manifesto{padding:clamp(60px,9vh,120px) var(--pad-x);border-top:4px solid var(--black,var(--secondary));border-bottom:4px solid var(--black,var(--secondary))}
|
||||
.manifesto-grid{display:grid;grid-template-columns:11em 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:800 clamp(28px,4vw,60px)/1.05 "system-ui",sans-serif;letter-spacing:-.025em;max-width:22ch;margin:0;text-transform:uppercase}
|
||||
.manifesto p em{font-style:normal;background:var(--secondary);color:var(--accent);padding:0 .15em}
|
||||
/* Manifesto */
|
||||
.manifesto{padding:clamp(60px,9vh,120px) var(--pad-x);background:var(--ink);color:var(--paper);border-top:3px solid var(--ink);border-bottom:3px solid var(--ink)}
|
||||
.manifesto-grid{display:grid;grid-template-columns:11em 1fr;gap:clamp(24px,4vw,56px);align-items:start}
|
||||
.manifesto-grid .num{display:inline-block;font:600 11px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink);padding:8px 14px;background:var(--pink);border:2px solid var(--paper);box-shadow:4px 4px 0 var(--pink);align-self:flex-start;justify-self:start;transform:rotate(-2deg)}
|
||||
.manifesto p{font:700 clamp(36px,5.5vw,80px)/1 var(--f-disp);max-width:22ch;margin:0;color:var(--paper);letter-spacing:-.035em}
|
||||
.manifesto p em{font-style:normal;background:var(--pink);color:var(--ink);padding:0 .08em;border:3px solid var(--paper);display:inline-block;line-height:1;transform:rotate(-1deg)}
|
||||
|
||||
.palette{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;}
|
||||
.swatch{border:4px solid var(--black,var(--secondary));box-shadow:8px 8px 0 var(--black,var(--secondary));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:translate(-3px,-3px);box-shadow:11px 11px 0 var(--black,var(--secondary))}
|
||||
.swatch .role{font:500 11px/1 "monospace",monospace;letter-spacing:.1em;text-transform:uppercase;padding:4px 8px;background:var(--primary);border:2px solid var(--secondary);align-self:flex-start}
|
||||
.swatch .name{font:900 clamp(28px,3.4vw,48px)/.92 "system-ui",sans-serif;letter-spacing:-.025em;text-transform:uppercase;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:24px;display:flex;flex-direction:column;justify-content:space-between;border:3px solid var(--ink);box-shadow:var(--shadow);transition:transform .15s}
|
||||
.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:hover{transform:translate(-3px,-3px)}
|
||||
.swatch:nth-child(1):hover{transform:rotate(-1.5deg) translate(-3px,-3px)}
|
||||
.swatch:nth-child(2):hover{transform:rotate(1deg) translate(-3px,-3px)}
|
||||
.swatch:nth-child(3):hover{transform:rotate(-1deg) translate(-3px,-3px)}
|
||||
.swatch:nth-child(4):hover{transform:rotate(1.5deg) translate(-3px,-3px)}
|
||||
.swatch .role{font:600 11px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;padding:4px 10px;background:var(--paper);color:var(--ink);border:2px solid var(--ink);align-self:flex-start}
|
||||
.swatch .name{font:700 clamp(28px,3.4vw,48px)/.95 var(--f-disp);letter-spacing:-.03em;margin-top:auto}
|
||||
.swatch .hex{font:600 13px/1 var(--f-mono);margin-top:8px}
|
||||
.swatch .usage{font:500 13px/1.55 var(--f-body);margin-top:6px;opacity:.8}
|
||||
.swatch--paper{background:var(--paper);color:var(--ink)}
|
||||
.swatch--ink{background:var(--ink);color:var(--paper)}
|
||||
.swatch--ink .role{background:var(--paper);color:var(--ink)}
|
||||
.swatch--sage{background:var(--sage);color:var(--ink)}
|
||||
.swatch--pink{background:var(--pink);color:var(--ink)}
|
||||
|
||||
.specimen{border:4px solid var(--black,var(--secondary));background:var(--primary);color:var(--secondary);box-shadow:8px 8px 0 var(--black,var(--secondary));max-width:1400px;margin:0 auto;display:flex;flex-direction:column}
|
||||
.spec-row{display:grid;grid-template-columns:12em 1fr;gap:28px;padding:28px 32px;border-bottom:3px solid var(--secondary);align-items:baseline}
|
||||
.spec-row:last-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(--secondary);opacity:.6}
|
||||
.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:uppercase}
|
||||
.spec-h1{font:800 clamp(40px,7vw,104px)/.9 "system-ui",sans-serif;letter-spacing:-.03em;text-transform:uppercase}
|
||||
.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:500 17px/1.65 "system-ui",sans-serif;max-width:60ch}
|
||||
.spec-label{font:600 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(--paper);box-shadow:var(--shadow)}
|
||||
.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-dim);display:flex;flex-direction:column;gap:6px}
|
||||
.spec-row .meta b{color:var(--ink);font-weight:700;font-family:var(--f-disp);font-size:18px;letter-spacing:-.022em;text-transform:none}
|
||||
.spec-display{font:700 clamp(56px,10vw,156px)/.92 var(--f-disp);letter-spacing:-.04em;color:var(--ink)}
|
||||
.spec-display em{font-style:normal;background:var(--pink);padding:0 .06em;border:3px solid var(--ink);box-shadow:var(--shadow-sm);display:inline-block;line-height:.92}
|
||||
.spec-h1{font:700 clamp(40px,7vw,104px)/.95 var(--f-disp);letter-spacing:-.035em;color:var(--ink)}
|
||||
.spec-h1 em{font-style:normal;background:var(--sage);padding:0 .06em;border:3px solid var(--ink);display:inline-block;line-height:.95}
|
||||
.spec-h2{font:600 clamp(28px,4.2vw,64px)/1 var(--f-disp);letter-spacing:-.028em;color:var(--ink)}
|
||||
.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.7 var(--f-body);color:var(--ink);max-width:60ch}
|
||||
.spec-label{font:600 12px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink);background:var(--pink);padding:6px 12px;border:2px solid var(--ink);display:inline-block}
|
||||
|
||||
.surface-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:32px;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:32px;border:4px solid var(--black,var(--secondary));box-shadow:8px 8px 0 var(--black,var(--secondary));display:flex;flex-direction:column;gap:18px}
|
||||
.demo-card .tag{align-self:flex-start;font:600 11px/1 "monospace",monospace;letter-spacing:.1em;text-transform:uppercase;border:3px solid var(--secondary);background:var(--accent);padding:6px 14px;box-shadow:4px 4px 0 var(--black,var(--secondary))}
|
||||
.demo-card h3{margin:0;font:900 36px/1 "system-ui",sans-serif;letter-spacing:-.02em;text-transform:uppercase}
|
||||
.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:4px solid var(--black,var(--secondary));background:var(--primary);color:var(--secondary);box-shadow:8px 8px 0 var(--black,var(--secondary))}
|
||||
.tokens li{display:grid;grid-template-columns:1fr auto auto;gap:18px;align-items:center;padding:18px 24px;border-bottom:3px solid var(--secondary)}
|
||||
.demo-card{background:var(--paper);color:var(--ink);padding:32px;display:flex;flex-direction:column;gap:18px;border:3px solid var(--ink);box-shadow:var(--shadow);position:relative;transform:rotate(-1deg)}
|
||||
.demo-card .tag{align-self:flex-start;font:600 11px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink);background:var(--pink);padding:6px 12px;border:2px solid var(--ink);box-shadow:var(--shadow-sm)}
|
||||
.demo-card h3{margin:0;font:700 44px/.95 var(--f-disp);letter-spacing:-.04em}
|
||||
.demo-card h3 em{font-style:normal;background:var(--sage);padding:0 .06em;border:3px solid var(--ink);display:inline-block;line-height:.95;transform:rotate(-1deg)}
|
||||
.demo-card p{margin:0;font:500 14px/1.7 var(--f-body)}
|
||||
.demo-card .num-stat{font:700 96px/.95 var(--f-disp);color:var(--ink);letter-spacing:-.045em}
|
||||
.demo-card .btn{align-self:flex-start;padding:10px 20px;background:var(--ink);color:var(--paper);font:600 12px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;border:2px solid var(--ink);box-shadow:var(--shadow-sm)}
|
||||
.tokens{list-style:none;padding:0;margin:0;border:3px solid var(--ink);background:var(--paper);box-shadow:var(--shadow);transform:rotate(.4deg)}
|
||||
.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:600 12px/1 "monospace",monospace;letter-spacing:.1em;text-transform:uppercase}
|
||||
.tokens .val{font:800 20px/1 "system-ui",sans-serif}
|
||||
.tokens .bar{height:8px;background:var(--accent);border:2px solid var(--secondary)}
|
||||
.tokens li:nth-child(odd){background:color-mix(in srgb,var(--pink) 25%,var(--paper))}
|
||||
.tokens .name{font:600 12px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
|
||||
.tokens .val{font:700 22px/1 var(--f-disp);letter-spacing:-.025em;color:var(--ink)}
|
||||
.tokens .bar{height:8px;background:var(--pink);border:2px solid var(--ink)}
|
||||
|
||||
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:32px;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{background:var(--primary);border:4px solid var(--black,var(--secondary));box-shadow:8px 8px 0 var(--black,var(--secondary))};padding:32px;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);display:inline-block;align-self:flex-start;background:var(--accent);color:var(--secondary);border:3px solid var(--secondary);padding:6px 14px;box-shadow:4px 4px 0 var(--black,var(--secondary))}
|
||||
.panel h4{margin:0;font:400 40px/1 "system-ui",sans-serif;text-transform:uppercase}
|
||||
.panel p{margin:0;font:500 14px/1.65 "system-ui",sans-serif;max-width:42ch}
|
||||
.panel{background:var(--paper);border:3px solid var(--ink);padding:32px;display:flex;flex-direction:column;gap:18px;box-shadow:var(--shadow)}
|
||||
.panel:first-child{background:var(--sage);transform:rotate(-.5deg)}
|
||||
.panel:last-child{background:var(--pink);transform:rotate(.5deg)}
|
||||
.panel .label-row{font:600 11px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--paper);background:var(--ink);padding:6px 12px;align-self:flex-start;box-shadow:var(--shadow-sm)}
|
||||
.panel h4{margin:0;font:700 36px/1 var(--f-disp);letter-spacing:-.035em;color:var(--ink)}
|
||||
.panel h4 em{font-style:normal;background:var(--paper);padding:0 .08em;border:3px solid var(--ink);display:inline-block;line-height:1}
|
||||
.panel p{margin:0;font:500 14px/1.7 var(--f-body);color:var(--ink);max-width:38ch}
|
||||
.panel pre{margin:0;padding:14px;border:2px solid var(--ink);background:var(--paper);font:500 12px/1.6 var(--f-mono);color:var(--ink);overflow-x:auto}
|
||||
|
||||
.bg-preview{border:4px solid var(--black,var(--secondary));box-shadow:8px 8px 0 var(--black,var(--secondary));aspect-ratio:4/3;position:relative;overflow:hidden;background:var(--secondary);border-radius:0}
|
||||
/* Background */
|
||||
.bg-preview{border:3px solid var(--ink);aspect-ratio:4/3;position:relative;overflow:hidden;background:var(--paper);box-shadow:var(--shadow);transform:rotate(-.5deg)}
|
||||
.bg-preview canvas{width:100%;height:100%;display:block}
|
||||
.bg-preview .badge{position:absolute;bottom:14px;left:14px;font:600 11px/1 "monospace",monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--secondary);background:var(--accent);border:3px solid var(--secondary);padding:6px 12px}
|
||||
|
||||
details.code-block{background:var(--primary);border:3px solid var(--secondary)};margin-top:12px;border-radius:0}
|
||||
details.code-block summary{cursor:pointer;padding:12px 16px;list-style:none;font:600 12px/1 "monospace",monospace;letter-spacing:.1em;text-transform:uppercase;display:flex;justify-content:space-between;background:var(--accent)}
|
||||
.bg-preview .badge{position:absolute;bottom:12px;left:12px;font:600 10px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;background:var(--paper);padding:6px 12px;border:2px solid var(--ink);box-shadow:var(--shadow-sm)}
|
||||
details.code-block{border:3px solid var(--ink);background:var(--paper);margin-top:12px;box-shadow:var(--shadow-sm)}
|
||||
details.code-block summary{cursor:pointer;padding:14px 18px;list-style:none;font:600 11px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink);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}
|
||||
details.code-block summary::after{content:"+";font:700 18px/1 var(--f-disp);color:var(--ink)}
|
||||
details.code-block[open] summary::after{content:"\2212"}
|
||||
details.code-block pre{margin:0;padding:16px;border-top:3px solid var(--secondary);font:11px/1.6 "monospace",monospace;background:var(--primary);color:var(--secondary);opacity:.7;overflow-x:auto;white-space:pre-wrap;word-break:break-word;max-height:320px;overflow-y:auto}
|
||||
details.code-block pre{margin:0;padding:16px 18px;border-top:2px solid var(--ink);font:500 11px/1.6 var(--f-mono);color:var(--ink);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:32px;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{border:4px solid var(--black,var(--secondary));padding:32px;box-shadow:8px 8px 0 var(--black,var(--secondary))}
|
||||
.rules-col.do{background:var(--accent);transform:rotate(-.6deg)}
|
||||
.rules-col.dont{background:var(--primary);color:var(--secondary);transform:rotate(.6deg)}
|
||||
.rules-col h3{font:400 64px/1 "system-ui",sans-serif;letter-spacing:-.03em;margin:0 0 24px;text-transform:uppercase}
|
||||
.rules-col.do h3{color:var(--accent)}
|
||||
.rules-col.dont h3{opacity:.4}
|
||||
.rules-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
|
||||
.rules-col li{display:grid;grid-template-columns:2em 1fr;gap:12px;padding:14px 16px;background:var(--primary);border:3px solid var(--secondary);box-shadow:4px 4px 0 var(--black,var(--secondary));font:500 15px/1.45 "system-ui",sans-serif}
|
||||
.rules-col li::before{font:900 22px/1 "system-ui",sans-serif;align-self:center;text-align:center;width:1.6em;height:1.6em;display:flex;align-items:center;justify-content:center;border:2px solid var(--secondary)}
|
||||
.rules-col.do li::before{content:"\2713";background:var(--accent)}
|
||||
.rules-col.dont li::before{content:"\2717";opacity:.4}
|
||||
.rules-col{padding:32px;border:3px solid var(--ink);box-shadow:var(--shadow)}
|
||||
.rules-col.do{background:var(--sage);transform:rotate(-.5deg)}
|
||||
.rules-col.dont{background:var(--pink);transform:rotate(.5deg)}
|
||||
.rules-col h3{font:700 56px/1 var(--f-disp);margin:0 0 20px;letter-spacing:-.04em;color:var(--ink)}
|
||||
.rules-col h3 em{font-style:normal;background:var(--paper);padding:0 .08em;border:3px solid var(--ink);display:inline-block;line-height:1}
|
||||
.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:2em 1fr;gap:14px;padding:12px 16px;background:var(--paper);border:2px solid var(--ink);box-shadow:var(--shadow-sm);font:500 15px/1.55 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(--ink)}
|
||||
.rules-col.dont li::before{content:"×";color:var(--ink)}
|
||||
|
||||
.templates-wrap{background:var(--accent);border-top:4px solid var(--black,var(--secondary));border-bottom:4px solid var(--black,var(--secondary))}
|
||||
.templates-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;max-width:1400px;margin:0 auto}
|
||||
/* Templates */
|
||||
.templates-wrap{border-top:3px solid var(--ink);background:color-mix(in srgb,var(--sage) 18%,var(--paper))}
|
||||
.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(--primary);border:4px solid var(--black,var(--secondary));box-shadow:8px 8px 0 var(--black,var(--secondary));overflow:hidden;border-radius:0;transition:all .2s}
|
||||
.tmpl:hover{transform:translate(-3px,-3px);box-shadow:11px 11px 0 var(--black,var(--secondary))}
|
||||
.tmpl-thumb{width:100%;aspect-ratio:16/9;overflow:hidden;position:relative;background:var(--secondary);border-bottom:3px solid var(--secondary)}
|
||||
.tmpl{background:var(--paper);border:3px solid var(--ink);box-shadow:var(--shadow);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(--paper);border-bottom:2px solid var(--ink)}
|
||||
.tmpl-thumb .scale-wrap{width:1920px;height:1080px;transform-origin:top left}
|
||||
.tmpl-foot{display:flex;justify-content:space-between;padding:12px 16px;font:600 12px/1 "monospace",monospace;letter-spacing:.08em;text-transform:uppercase}
|
||||
.tmpl-foot .idx{background:var(--accent);border:2px solid var(--secondary);padding:2px 8px}
|
||||
.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:700;font-size:20px;letter-spacing:-.025em;text-transform:none}
|
||||
.tmpl-foot .idx{color:var(--ink);background:var(--pink);padding:4px 10px;border:2px solid var(--ink)}
|
||||
|
||||
footer.endcap{background:var(--secondary);color:var(--primary);padding:80px var(--pad-x) 60px;display:grid;grid-template-columns:1fr auto;gap:48px;align-items:end}
|
||||
footer.endcap .endmark{font:900 clamp(72px,14vw,220px)/.85 "system-ui",sans-serif;letter-spacing:-.04em;text-transform:uppercase;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(--pink);color:var(--ink);border-top:6px solid var(--ink);display:grid;grid-template-columns:1fr auto;gap:48px;align-items:end}
|
||||
footer.endcap .endmark{font:700 clamp(60px,14vw,240px)/.85 var(--f-disp);letter-spacing:-.05em;margin:0;color:var(--ink)}
|
||||
footer.endcap .endmark em{font-style:normal;background:var(--ink);color:var(--pink);padding:0 .06em;border:4px solid var(--paper);box-shadow:8px 8px 0 var(--paper);display:inline-block;line-height:.85;transform:rotate(-1deg)}
|
||||
footer.endcap .meta{font:600 12px/2 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink);text-align:right}
|
||||
footer.endcap .meta b{color:var(--paper);background:var(--ink);padding:2px 10px}
|
||||
</style>
|
||||
|
||||
<!-- TEMPLATE STYLES -->
|
||||
<style id="template-css">
|
||||
__TEMPLATE_CSS__
|
||||
</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>
|
||||
<div class="brand"><span class="grid"><span></span><span></span><span></span><span></span></span><b>__NAME__</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="#background">05</a><a href="#guidelines">06</a><a href="#templates">07</a></nav>
|
||||
<div class="meta">v 1.0 · 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 · No. 030</div>
|
||||
<div class="accent">__ACCENT_LABEL__</div>
|
||||
</div>
|
||||
<h1 class="cover-headline"><em>__NAME__</em>.</h1>
|
||||
<div class="cover-foot">
|
||||
<div class="cell"><span class="k">Template</span><span class="v">raw-grid</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">Founder · Demo day · Brand</span></div>
|
||||
<div class="cell"><span class="k">Display</span><span class="v">Space Grotesk 700</span></div>
|
||||
<div class="cell"><span class="k">Pull</span><span class="v">Pink · Sage</span></div>
|
||||
<div class="cell"><span class="k">Volume</span><span class="v plain">07 sections · __SLIDE_COUNT__ 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>Neo-brutalist deck with thick borders, offset shadows, and a pink/sage/ink palette.</p>
|
||||
<div class="num">+ manifesto</div>
|
||||
<p>borders are <em>structural</em>. tilt is <em>energy</em>. nothing apologises — every block earns its place.</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 Tokens.</h2>
|
||||
<span class="num">01 / palette</span>
|
||||
<h2>Four <em>blocks</em>.</h2>
|
||||
<p class="lede">__PALETTE_LEDE__</p>
|
||||
</div>
|
||||
<div class="palette">
|
||||
<div class="swatch swatch--primary"><div class="role">Primary</div><div><div class="name">__PRIMARY_NAME__</div><div class="hex">__PRIMARY__</div><div class="usage">Canvas.</div></div></div>
|
||||
<div class="swatch swatch--secondary"><div class="role">Secondary</div><div><div class="name">__SECONDARY_NAME__</div><div class="hex">__SECONDARY__</div><div class="usage">Ink.</div></div></div>
|
||||
<div class="swatch swatch--tertiary"><div class="role">Tertiary</div><div><div class="name">__TERTIARY_NAME__</div><div class="hex">__TERTIARY__</div><div class="usage">Muted. Borders.</div></div></div>
|
||||
<div class="swatch swatch--accent"><div class="role">Accent</div><div><div class="name">__ACCENT_NAME__</div><div class="hex">__ACCENT__</div><div class="usage">Signal. Reserved.</div></div></div>
|
||||
<div class="swatch swatch--paper"><div class="role">01 / paper</div><div><div class="name">__PRIMARY_NAME__</div><div class="hex">__PRIMARY__</div><div class="usage">Warm canvas.</div></div></div>
|
||||
<div class="swatch swatch--ink"><div class="role">02 / ink</div><div><div class="name">__SECONDARY_NAME__</div><div class="hex">__SECONDARY__</div><div class="usage">Near-black. Borders, type.</div></div></div>
|
||||
<div class="swatch swatch--sage"><div class="role">03 / sage</div><div><div class="name">__TERTIARY_NAME__</div><div class="hex">__TERTIARY__</div><div class="usage">Cool pull. Calm callouts.</div></div></div>
|
||||
<div class="swatch swatch--pink"><div class="role">04 / pink</div><div><div class="name">__ACCENT_NAME__</div><div class="hex">__ACCENT__</div><div class="usage">Warm pull. Headlines, accents.</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>Big. Heavy.</h2>
|
||||
<span class="num">02 / type</span>
|
||||
<h2>Space Grotesk,<br/><em>punched.</em></h2>
|
||||
<p class="lede">Space Grotesk 700 carries every headline at maximum scale. Manrope handles body in 500. JetBrains Mono runs labels and chrome. Tight tracking, hard cuts.</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>Space Grotesk 700</b><span>11vw · −0.05em</span></div><div class="spec-display">hello <em>world</em>.</div></div>
|
||||
<div class="spec-row"><div class="meta"><span>H1</span><b>Space Grotesk 700</b><span>7vw · pulled</span></div><div class="spec-h1">chapter <em>one</em></div></div>
|
||||
<div class="spec-row"><div class="meta"><span>H2</span><b>Space Grotesk 600</b><span>4.2vw</span></div><div class="spec-h2">slide headlines.</div></div>
|
||||
<div class="spec-row"><div class="meta"><span>Lead</span><b>Manrope 600</b><span>2vw</span></div><div class="spec-lead">The lead carries the brief in one direct, founder-voice sentence.</div></div>
|
||||
<div class="spec-row"><div class="meta"><span>Body</span><b>Manrope 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 pull blocks do the lifting; body stays quiet.</p></div>
|
||||
<div class="spec-row"><div class="meta"><span>Label</span><b>JetBrains Mono 600</b><span>12px · pink chip</span></div><div><span class="spec-label">// label · pink chip</span></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>Borders. Shadows.</h2>
|
||||
<span class="num">03 / surface</span>
|
||||
<h2>Thick borders,<br/><em>offset shadow.</em></h2>
|
||||
<p class="lede">3px ink border on every card, 6px offset shadow (no blur), and a ±1° tilt. Surfaces never align to the grid — that's the whole point.</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 · example</span>
|
||||
<h3>example <em>card</em>.</h3>
|
||||
<p>3px ink border. 6px offset shadow. ±1° tilt. The pull block carries the meaning; body stays minimal.</p>
|
||||
<div class="num-stat">+42%</div>
|
||||
<button class="btn">▸ view details</button>
|
||||
</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">Corners</span><span class="val">__CORNER_RADIUS__</span><span class="bar" style="width:6px"></span></li>
|
||||
<li><span class="name">Padding</span><span class="val">__PADDING__</span><span class="bar" style="width:40px"></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">Elevation</span><span class="val">__ELEVATION__</span><span class="bar" style="width:36px"></span></li>
|
||||
<li><span class="name">Density</span><span class="val">__DENSITY__</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>
|
||||
<span class="num">04 / motion</span>
|
||||
<h2>__EASING_HEADLINE__</h2>
|
||||
<p class="lede">__EASING_LEDE__</p>
|
||||
</div>
|
||||
<div class="two-col">
|
||||
<div class="panel">
|
||||
<div class="label-row">// easing</div>
|
||||
<span class="label-row">+ easing</span>
|
||||
<h4>__EASING_NAME__</h4>
|
||||
<p>__EASING_DESC__</p>
|
||||
<pre>__EASING_VALUE__</pre>
|
||||
</div>
|
||||
<div class="panel">
|
||||
<div class="label-row">// duration</div>
|
||||
<span class="label-row">+ duration</span>
|
||||
<h4>__DURATION_DEFAULT__</h4>
|
||||
<p>__DURATION_DESC__</p>
|
||||
<pre>__DURATION_VALUES__</pre>
|
||||
@@ -242,9 +312,9 @@ __TEMPLATE_CSS__
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="background">
|
||||
<section id="background" data-screen-label="05 Background">
|
||||
<div class="section-head">
|
||||
<div class="num">05 — Background</div>
|
||||
<span class="num">05 / background</span>
|
||||
<h2>__BG_HEADLINE__</h2>
|
||||
<p class="lede">__BG_LEDE__</p>
|
||||
</div>
|
||||
@@ -254,38 +324,40 @@ __TEMPLATE_CSS__
|
||||
<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">Speed</span><span class="val">__BG_SPEED__</span><span class="bar" style="width:18px;opacity:.7"></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>
|
||||
<details class="code-block"><summary>// shader config (json)</summary>
|
||||
<pre>__SHADER_CONFIG__</pre>
|
||||
</details>
|
||||
<details class="code-block"><summary>// vertex shader</summary>
|
||||
<details class="code-block"><summary>// vertex shader (glsl)</summary>
|
||||
<pre id="vtx-src">__SHADER_VERTEX__</pre>
|
||||
</details>
|
||||
<details class="code-block"><summary>// fragment shader</summary>
|
||||
<details class="code-block"><summary>// fragment shader (glsl)</summary>
|
||||
<pre id="frg-src">__SHADER_FRAGMENT__</pre>
|
||||
</details>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="guidelines">
|
||||
<section id="guidelines" data-screen-label="06 Guidelines">
|
||||
<div class="section-head">
|
||||
<div class="num">06 — Guidelines</div>
|
||||
<h2>Do. Don’t.</h2>
|
||||
<span class="num">06 / rules</span>
|
||||
<h2>Yes.<br/><em>No.</em></h2>
|
||||
<p class="lede">A short list. The grid loses its energy 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"><h3>Yes <em>.</em></h3><ul>__DOS__</ul></div>
|
||||
<div class="rules-col dont"><h3>No <em>.</em></h3><ul>__DONTS__</ul></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="templates" class="templates-wrap">
|
||||
<section id="templates" class="templates-wrap" data-screen-label="07 Templates">
|
||||
<div class="section-head">
|
||||
<div class="num">07 — Templates</div>
|
||||
<h2>__SLIDE_COUNT_WORD__<br/>Frames.</h2>
|
||||
<span class="num">07 / templates</span>
|
||||
<h2>__SLIDE_COUNT_WORD__<br/><em>frames.</em></h2>
|
||||
<p class="lede">The full library at 1920×1080. Each thumbnail is the live slide, scaled.</p>
|
||||
</div>
|
||||
<div class="templates-grid" id="templates-grid"></div>
|
||||
</section>
|
||||
@@ -294,11 +366,11 @@ __TEMPLATE_CSS__
|
||||
__SLIDE_CARDS__
|
||||
</template>
|
||||
|
||||
<footer class="endcap">
|
||||
<h2 class="endmark">THE END.</h2>
|
||||
<footer class="endcap" data-screen-label="08 End">
|
||||
<h2 class="endmark">that's a <em>wrap.</em></h2>
|
||||
<div class="meta">
|
||||
<div><b>__NAME__</b> · v1</div>
|
||||
<div>system-ui / monospace</div>
|
||||
<div><b>__NAME__</b> · v 1.0</div>
|
||||
<div>Space Grotesk · Manrope</div>
|
||||
<div>__DATE__</div>
|
||||
</div>
|
||||
</footer>
|
||||
@@ -315,4 +387,4 @@ __SLIDE_CARDS__
|
||||
__SHADER_SCRIPT__
|
||||
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user