joshbairstow/jb-website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

initial commit

Browse source
This commit is contained in:
Josh Bairstow 2026-06-01 19:35:56 +10:00
commit 3ba76b4f02
90 changed files with 12507 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

16
docs/design-system/preview/accent-marks.html Normal file
View file

@ -0,0 +1,16 @@
<!doctype html><html><head><meta charset="utf-8">
<link rel="stylesheet" href="../colors_and_type.css">
<style>
body{margin:0}
.wrap{background:var(--ground-dark);padding:30px;box-sizing:border-box;font-family:var(--font-body);display:flex;gap:56px;align-items:center;justify-content:center}
.opt{display:flex;flex-direction:column;align-items:center;gap:14px}
.opt img{display:block;filter:invert(70%) sepia(18%) saturate(320%) brightness(95%)}
.lab{font-family:var(--font-mono);font-size:10px;color:var(--fg-on-dark-2);letter-spacing:.06em}
</style></head><body>
<div class="wrap">
<div class="opt"><img src="../assets/accent-ringdots.svg" height="22"><span class="lab">ring-dots</span></div>
<div class="opt"><img src="../assets/accent-pipes.svg" height="28"><span class="lab">pipes</span></div>
<div class="opt"><img src="../assets/accent-dots.svg" height="14"><span class="lab">dots</span></div>
<div class="opt"><img src="../assets/accent-concentric.svg" height="40"><span class="lab">concentric</span></div>
</div>
</body></html>

22
docs/design-system/preview/buttons.html Normal file
View file

@ -0,0 +1,22 @@
<!doctype html><html><head><meta charset="utf-8">
<link rel="stylesheet" href="../colors_and_type.css">
<style>
body{margin:0}
.wrap{background:var(--ground);padding:28px 30px;box-sizing:border-box;font-family:var(--font-body);display:flex;gap:14px;align-items:center;flex-wrap:wrap}
button{font-family:var(--font-body);font-size:13px;letter-spacing:.02em;cursor:pointer;transition:all var(--dur-base) var(--ease-out)}
.solid{background:var(--ink-900);color:var(--bone-50);border:none;padding:11px 22px;border-radius:var(--radius-sm)}
.solid:hover{background:var(--espresso-700)}
.ghost{background:transparent;color:var(--ink-900);border:1px solid var(--hairline-strong);padding:10px 21px;border-radius:var(--radius-sm)}
.ghost:hover{border-color:var(--ink-900)}
.textlink{background:none;border:none;color:var(--ink-900);padding:6px 2px;position:relative;font-size:13px}
.textlink::after{content:"";position:absolute;left:2px;bottom:2px;height:1px;width:0;background:var(--accent-deep);transition:width var(--dur-base) var(--ease-out)}
.textlink:hover::after{width:calc(100% - 4px)}
.lab{font-family:var(--font-mono);font-size:10px;color:var(--fg-3);width:100%}
</style></head><body>
<div class="wrap">
<button class="solid">Read the latest</button>
<button class="ghost">View work</button>
<button class="textlink">Get in touch →</button>
<span class="lab">solid · ghost · text-link (ochre underline grows on hover)</span>
</div>
</body></html>

19
docs/design-system/preview/card.html Normal file
View file

@ -0,0 +1,19 @@
<!doctype html><html><head><meta charset="utf-8">
<link rel="stylesheet" href="../colors_and_type.css">
<style>
body{margin:0}
.wrap{background:var(--ground);padding:24px 30px;box-sizing:border-box;font-family:var(--font-body)}
.card{position:relative;background:var(--ground-raised);border:1px solid var(--hairline);border-radius:var(--radius-md);padding:22px 24px;overflow:hidden;max-width:340px}
.card::before{content:"";position:absolute;inset:0;background:url(../assets/texture-grain.svg);background-size:200px;opacity:.06;pointer-events:none}
.k{position:relative;font-family:var(--font-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-3);margin:0 0 8px}
.t{position:relative;font-family:var(--font-display);font-size:23px;color:var(--fg-1);margin:0 0 6px}
.d{position:relative;font-size:13px;color:var(--fg-2);line-height:1.55;margin:0}
</style></head><body>
<div class="wrap">
<div class="card">
<p class="k">Code</p>
<p class="t">Small tools</p>
<p class="d">Bone panel, hairline border, a greeble at 4.5%. No heavy shadow box.</p>
</div>
</div>
</body></html>

21
docs/design-system/preview/color-accent.html Normal file
View file

@ -0,0 +1,21 @@
<!doctype html><html><head><meta charset="utf-8">
<link rel="stylesheet" href="../colors_and_type.css">
<style>
body{margin:0}
.wrap{background:var(--ground);padding:26px 30px;box-sizing:border-box;font-family:var(--font-body);display:flex;gap:24px;align-items:center}
.chip{width:96px;height:96px;border-radius:var(--radius-sm);flex:none}
.meta{display:flex;flex-direction:column;gap:6px}
.name{font-size:13px;color:var(--fg-1);font-weight:600}
.hex{font-family:var(--font-mono);font-size:11px;color:var(--fg-3)}
.note{font-size:12px;color:var(--fg-2);line-height:1.5;max-width:300px;margin-top:4px}
</style></head><body>
<div class="wrap">
<div class="chip" style="background:var(--accent)"></div>
<div class="chip" style="background:var(--accent-deep)"></div>
<div class="meta">
<div class="name">accent · muted ochre</div>
<div class="hex">#C0883A&nbsp;&nbsp;/&nbsp;&nbsp;#9A6A28 deep</div>
<div class="note">The single restrained highlight. A deliberate, rare event — hover ticks, a drawn hairline, the occasional link. Never floods chrome or navigation.</div>
</div>
</div>
</body></html>

22
docs/design-system/preview/color-dark.html Normal file
View file

@ -0,0 +1,22 @@
<!doctype html><html><head><meta charset="utf-8">
<link rel="stylesheet" href="../colors_and_type.css">
<style>
body{margin:0}
.wrap{background:var(--ground-dark);padding:30px 32px;box-sizing:border-box;font-family:var(--font-body)}
.head{font-family:var(--font-display);font-size:30px;color:var(--fg-on-dark-1);letter-spacing:-.01em;margin:0 0 6px}
.sub{font-size:13px;color:var(--fg-on-dark-2);margin:0 0 18px}
.meta{font-size:12px;color:var(--fg-on-dark-3);font-family:var(--font-mono)}
.chips{display:flex;gap:10px;margin-top:18px}
.chip{height:34px;flex:1;border-radius:var(--radius-xs);display:flex;align-items:center;padding-left:10px;font-family:var(--font-mono);font-size:10px}
</style></head><body>
<div class="wrap">
<p class="head">Ink ground — the default theme.</p>
<p class="sub">Deep, warm, moody. Chiaroscuro through value, never cool grey.</p>
<p class="meta">ground-dark #17130E &nbsp;·&nbsp; text on dark stays bone</p>
<div class="chips">
<div class="chip" style="background:#EDE4D5;color:#17130E">fg-on-dark-1</div>
<div class="chip" style="background:#AE9B7F;color:#17130E">fg-on-dark-2</div>
<div class="chip" style="background:#6F5E48;color:#17130E">fg-on-dark-3</div>
</div>
</div>
</body></html>

30
docs/design-system/preview/color-ramp.html Normal file
View file

@ -0,0 +1,30 @@
<!doctype html><html><head><meta charset="utf-8">
<link rel="stylesheet" href="../colors_and_type.css">
<style>
body{margin:0}
.wrap{background:var(--ground);padding:26px 30px;box-sizing:border-box;font-family:var(--font-body)}
.ramp{display:flex;border-radius:var(--radius-sm);overflow:hidden;box-shadow:var(--shadow-1)}
.sw{flex:1;height:86px;display:flex;align-items:flex-end;padding:8px 6px;box-sizing:border-box}
.sw span{font-family:var(--font-mono);font-size:9.5px;letter-spacing:-.02em}
.row{display:flex;justify-content:space-between;margin-top:12px}
.row span{font-family:var(--font-mono);font-size:10px;color:var(--fg-3);flex:1;text-align:center}
</style></head><body>
<div class="wrap">
<div class="ramp">
<div class="sw" style="background:#F4EFE6"><span style="color:#7A5C3E">50</span></div>
<div class="sw" style="background:#EDE6D9"><span style="color:#7A5C3E">100</span></div>
<div class="sw" style="background:#E0D5C3"><span style="color:#5A4630">200</span></div>
<div class="sw" style="background:#C9B299"><span style="color:#3B2C1E">300</span></div>
<div class="sw" style="background:#A8855F"><span style="color:#221E18">400</span></div>
<div class="sw" style="background:#7A5C3E"><span style="color:#F4EFE6">500</span></div>
<div class="sw" style="background:#5A4630"><span style="color:#F4EFE6">600</span></div>
<div class="sw" style="background:#3B2C1E"><span style="color:#EDE6D9">700</span></div>
<div class="sw" style="background:#2E2720"><span style="color:#EDE6D9">800</span></div>
<div class="sw" style="background:#221E18"><span style="color:#EDE6D9">900</span></div>
<div class="sw" style="background:#1E1A16"><span style="color:#B7A488">950</span></div>
</div>
<div class="row">
<span>#F4EFE6</span><span>bone</span><span>sand</span><span>sepia</span><span>tobacco</span><span>espresso</span><span>ink&nbsp;#221E18</span>
</div>
</div>
</body></html>

19
docs/design-system/preview/color-roles.html Normal file
View file

@ -0,0 +1,19 @@
<!doctype html><html><head><meta charset="utf-8">
<link rel="stylesheet" href="../colors_and_type.css">
<style>
body{margin:0}
.wrap{background:var(--ground);padding:26px 30px;box-sizing:border-box;font-family:var(--font-body);display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.role{display:flex;flex-direction:column;gap:8px}
.chip{height:54px;border-radius:var(--radius-sm)}
.name{font-size:12px;color:var(--fg-1);font-weight:500}
.hex{font-family:var(--font-mono);font-size:10px;color:var(--fg-3)}
</style></head><body>
<div class="wrap">
<div class="role"><div class="chip" style="background:var(--ground);box-shadow:inset 0 0 0 1px var(--hairline)"></div><div class="name">ground</div><div class="hex">#F4EFE6</div></div>
<div class="role"><div class="chip" style="background:var(--ground-raised);box-shadow:inset 0 0 0 1px var(--hairline)"></div><div class="name">ground-raised</div><div class="hex">#EDE6D9</div></div>
<div class="role"><div class="chip" style="background:var(--ground-sunk);box-shadow:inset 0 0 0 1px var(--hairline)"></div><div class="name">ground-sunk</div><div class="hex">#E0D5C3</div></div>
<div class="role"><div class="chip" style="background:var(--fg-1)"></div><div class="name">fg-1 · primary</div><div class="hex">#221E18</div></div>
<div class="role"><div class="chip" style="background:var(--fg-2)"></div><div class="name">fg-2 · secondary</div><div class="hex">#5A4630</div></div>
<div class="role"><div class="chip" style="background:var(--fg-3)"></div><div class="name">fg-3 · muted</div><div class="hex">#A8855F</div></div>
</div>
</body></html>

23
docs/design-system/preview/cutout.html Normal file
View file

@ -0,0 +1,23 @@
<!doctype html><html><head><meta charset="utf-8">
<link rel="stylesheet" href="../colors_and_type.css">
<style>
body{margin:0}
.wrap{background:var(--ground);padding:24px 30px;box-sizing:border-box;font-family:var(--font-body);display:flex;gap:26px;align-items:center}
.cut{width:150px;height:184px;position:relative;flex:none;
border-radius:8px 80px 8px 8px;overflow:hidden;
background:radial-gradient(120% 90% at 72% 12%, #C9B299 0%, #7A5C3E 38%, #3B2C1E 72%, #1E1A16 100%);}
.cut::after{content:"";position:absolute;inset:0;background:url(../assets/texture-grain.svg);background-size:180px;opacity:.10;mix-blend-mode:overlay}
.mark{position:absolute;right:12px;bottom:12px;width:70px;opacity:.12;filter:invert(1)}
.meta h4{font-family:var(--font-display);font-size:21px;color:var(--fg-1);margin:0 0 8px}
.meta p{font-size:12.5px;color:var(--fg-2);line-height:1.55;margin:0;max-width:280px}
.meta code{font-family:var(--font-mono);font-size:11px;color:var(--accent-deep)}
</style></head><body>
<div class="wrap">
<div class="cut"><img class="mark" src="../assets/mark-rings.svg"></div>
<div class="meta">
<h4>Never a plain rectangle</h4>
<p>Imagery is clipped to a rounded cut-out and carries the rings watermark at 4–10%. Warm chiaroscuro placeholder shown.</p>
<p style="margin-top:8px"><code>border-radius: 6px 92px 6px 6px</code></p>
</div>
</div>
</body></html>

30
docs/design-system/preview/greebling-accents.html Normal file
View file

@ -0,0 +1,30 @@
<!doctype html><html><head><meta charset="utf-8">
<link rel="stylesheet" href="../colors_and_type.css">
<style>
body{margin:0}
.wrap{background:var(--ground-dark);padding:0;box-sizing:border-box;display:flex;font-family:var(--font-body)}
.panel{flex:1;height:180px;position:relative;overflow:hidden}
.panel::before{content:"";position:absolute;inset:0;background:url(../assets/texture-grain.svg);background-size:240px;opacity:.06;mix-blend-mode:screen}
.m{position:absolute;filter:invert(60%) sepia(18%) saturate(360%) brightness(95%);transition:opacity var(--dur-slow) var(--ease-out)}
.lab{position:absolute;left:16px;bottom:12px;font-family:var(--font-mono);font-size:11px;color:var(--fg-on-dark-2);z-index:2}
.divider{width:1px;background:var(--hairline-on-dark)}
/* loose, non-rigid placement */
.a1{width:96px;top:24px;left:34px;transform:rotate(-4deg);opacity:.26}
.a2{width:30px;top:104px;left:150px;transform:rotate(6deg);opacity:.3}
.a3{width:50px;top:54px;right:54px;opacity:.24}
.b1{width:80px;top:34px;left:60px;transform:rotate(3deg);opacity:.28}
.b2{width:34px;bottom:40px;left:40px;opacity:.28}
.b3{width:44px;top:30px;right:40px;opacity:.26}
</style></head><body>
<div class="wrap">
<div class="panel">
<img class="m a1" src="../assets/accent-ringdots.svg"><img class="m a2" src="../assets/accent-pipes.svg"><img class="m a3" src="../assets/accent-dots.svg">
<span class="lab">simple marks · loose placement · visit-three subtlety</span>
</div>
<div class="divider"></div>
<div class="panel">
<img class="m b1" src="../assets/accent-dots.svg"><img class="m b2" src="../assets/accent-concentric.svg"><img class="m b3" src="../assets/accent-ringdots.svg">
<span class="lab">non-rigid · throughout</span>
</div>
</div>
</body></html>

17
docs/design-system/preview/greebling-grain.html Normal file
View file

@ -0,0 +1,17 @@
<!doctype html><html><head><meta charset="utf-8">
<link rel="stylesheet" href="../colors_and_type.css">
<style>
body{margin:0}
.wrap{background:var(--ground);padding:0;box-sizing:border-box;display:flex;font-family:var(--font-body)}
.panel{flex:1;height:160px;position:relative;display:flex;align-items:flex-end;padding:16px;box-sizing:border-box;overflow:hidden}
.panel::before{content:"";position:absolute;inset:0;background:url(../assets/texture-grain.svg);background-size:200px;opacity:.04;transition:opacity var(--dur-slow) var(--ease-out)}
.panel.hi::before{opacity:.08}
.lab{position:relative;font-family:var(--font-mono);font-size:11px;color:var(--fg-2)}
.divider{width:1px;background:var(--hairline)}
</style></head><body>
<div class="wrap">
<div class="panel"><span class="lab">grain · rest 4%</span></div>
<div class="divider"></div>
<div class="panel hi"><span class="lab">grain · hover 8%</span></div>
</div>
</body></html>

19
docs/design-system/preview/latest-line.html Normal file
View file

@ -0,0 +1,19 @@
<!doctype html><html><head><meta charset="utf-8">
<link rel="stylesheet" href="../colors_and_type.css">
<style>
body{margin:0}
.wrap{background:var(--ground);padding:28px 30px;box-sizing:border-box;font-family:var(--font-body)}
.eyebrow{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--fg-3);margin:0 0 12px}
.line{display:inline-flex;align-items:baseline;gap:14px;text-decoration:none;color:var(--fg-1)}
.title{font-family:var(--font-display);font-size:26px;letter-spacing:-.01em}
.meta{font-family:var(--font-body);font-size:12px;color:var(--fg-3);font-feature-settings:"onum" 1}
.arrow{color:var(--accent-deep);transition:transform var(--dur-base) var(--ease-out)}
.line:hover .arrow{transform:translateX(4px)}
.rule{height:1px;background:var(--hairline);margin-top:14px}
</style></head><body>
<div class="wrap">
<p class="eyebrow">Selected writing</p>
<a class="line" href="#"><span class="title">Notes on warm light and cold water</span><span class="meta">Mar 2026</span><span class="arrow">→</span></a>
<div class="rule"></div>
</div>
</body></html>

21
docs/design-system/preview/marks.html Normal file
View file

@ -0,0 +1,21 @@
<!doctype html><html><head><meta charset="utf-8">
<link rel="stylesheet" href="../colors_and_type.css">
<style>
body{margin:0}
.wrap{background:var(--ground-dark);padding:24px 28px;box-sizing:border-box;font-family:var(--font-body);display:flex;gap:34px;align-items:center;justify-content:center}
.opt{display:flex;flex-direction:column;align-items:center;gap:11px}
.opt img{display:block;filter:invert(92%) sepia(10%) saturate(380%) brightness(98%)}
.cut{width:118px;height:90px;border-radius:6px 52px 6px 6px;position:relative;overflow:hidden;
background:radial-gradient(120% 100% at 70% 16%,#C9B299,#7A5C3E 40%,#3B2C1E 74%,#1E1A16)}
.cut img{position:absolute;right:9px;bottom:8px;width:58px;filter:invert(1);opacity:.13}
.lab{font-family:var(--font-mono);font-size:10px;color:var(--fg-on-dark-2);letter-spacing:.04em;text-align:center}
.lab b{color:var(--fg-on-dark-1);font-weight:600}
</style></head><body>
<div class="wrap">
<div class="opt"><img src="../assets/mark-rings.svg" height="44"><span class="lab"><b>Orbit</b><br>primary</span></div>
<div class="opt"><img src="../assets/mark-rings-drift.svg" height="44"><span class="lab">Drift</span></div>
<div class="opt"><img src="../assets/mark-rings-cascade.svg" height="44"><span class="lab">Cascade</span></div>
<div class="opt"><img src="../assets/accent-concentric.svg" height="44"><span class="lab">Concentric</span></div>
<div class="opt"><div class="cut"><img src="../assets/mark-rings.svg"></div><span class="lab">rounded cut-out<br>+ watermark @13%</span></div>
</div>
</body></html>

16
docs/design-system/preview/motion.html Normal file
View file

@ -0,0 +1,16 @@
<!doctype html><html><head><meta charset="utf-8">
<link rel="stylesheet" href="../colors_and_type.css">
<style>
body{margin:0}
.wrap{background:var(--ground);padding:26px 30px;box-sizing:border-box;font-family:var(--font-body)}
.track{position:relative;height:6px;background:var(--ground-sunk);border-radius:3px;margin:18px 0 10px}
.dot{position:absolute;top:-5px;width:16px;height:16px;border-radius:50%;background:var(--ink-900);animation:slide 2.6s var(--ease-out) infinite alternate}
@keyframes slide{from{left:0}to{left:calc(100% - 16px)}}
.meta{font-family:var(--font-mono);font-size:11px;color:var(--fg-3);line-height:1.7}
.acc{color:var(--accent-deep)}
</style></head><body>
<div class="wrap">
<div class="track"><div class="dot"></div></div>
<p class="meta">dur-fast <span class="acc">200ms</span> · dur-base <span class="acc">300ms</span> · dur-slow <span class="acc">400ms</span><br>ease-out cubic-bezier(.22, 1, .36, 1) — slow, eased, short-travel<br>one signature motion moment per view · respects reduced-motion</p>
</div>
</body></html>

22
docs/design-system/preview/nav-index.html Normal file
View file

@ -0,0 +1,22 @@
<!doctype html><html><head><meta charset="utf-8">
<link rel="stylesheet" href="../colors_and_type.css">
<style>
body{margin:0}
.wrap{background:var(--ground);padding:24px 30px;box-sizing:border-box;font-family:var(--font-body)}
.idx{display:flex;flex-direction:column}
.item{display:flex;align-items:baseline;gap:16px;text-decoration:none;padding:11px 0;border-top:1px solid var(--hairline);transition:padding-left var(--dur-base) var(--ease-out)}
.item:hover{padding-left:8px}
.num{font-family:var(--font-mono);font-size:10px;color:var(--fg-3);width:24px;flex:none}
.name{font-family:var(--font-display);font-size:21px;color:var(--fg-1);letter-spacing:.02em}
.desc{font-size:12px;color:var(--fg-3);margin-left:auto}
.soon{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-3);border:1px solid var(--hairline);border-radius:2px;padding:2px 6px;margin-left:auto}
</style></head><body>
<div class="wrap">
<div class="idx">
<a class="item" href="#"><span class="num">01</span><span class="name">Blog</span><span class="desc">writing</span></a>
<a class="item" href="#"><span class="num">02</span><span class="name">Code</span><span class="desc">experiments &amp; tools</span></a>
<a class="item" href="#"><span class="num">03</span><span class="name">Art</span><span class="desc">generative &amp; physical</span></a>
<a class="item" href="#"><span class="num">04</span><span class="name" style="color:var(--fg-3)">Social</span><span class="soon">soon</span></a>
</div>
</div>
</body></html>

17
docs/design-system/preview/radii.html Normal file
View file

@ -0,0 +1,17 @@
<!doctype html><html><head><meta charset="utf-8">
<link rel="stylesheet" href="../colors_and_type.css">
<style>
body{margin:0}
.wrap{background:var(--ground);padding:26px 30px;box-sizing:border-box;display:flex;gap:22px;align-items:flex-end;font-family:var(--font-body)}
.item{display:flex;flex-direction:column;gap:8px;align-items:center}
.box{width:78px;height:60px;background:var(--ground-raised);box-shadow:inset 0 0 0 1px var(--hairline-strong)}
.lab{font-family:var(--font-mono);font-size:10px;color:var(--fg-3)}
</style></head><body>
<div class="wrap">
<div class="item"><div class="box" style="border-radius:2px"></div><span class="lab">xs · 2</span></div>
<div class="item"><div class="box" style="border-radius:4px"></div><span class="lab">sm · 4</span></div>
<div class="item"><div class="box" style="border-radius:8px"></div><span class="lab">md · 8</span></div>
<div class="item"><div class="box" style="border-radius:14px"></div><span class="lab">lg · 14</span></div>
<div class="item" style="align-self:center"><span class="lab" style="max-width:150px;text-align:left;line-height:1.5">Corners barely soften — much of the chrome is square-edged with hairline rules.</span></div>
</div>
</body></html>

16
docs/design-system/preview/shadows.html Normal file
View file

@ -0,0 +1,16 @@
<!doctype html><html><head><meta charset="utf-8">
<link rel="stylesheet" href="../colors_and_type.css">
<style>
body{margin:0}
.wrap{background:var(--ground);padding:34px 30px;box-sizing:border-box;display:flex;gap:30px;font-family:var(--font-body)}
.item{display:flex;flex-direction:column;gap:14px;align-items:center}
.box{width:96px;height:64px;background:var(--bone-50);border-radius:var(--radius-md)}
.lab{font-family:var(--font-mono);font-size:10px;color:var(--fg-3)}
</style></head><body>
<div class="wrap">
<div class="item"><div class="box" style="box-shadow:var(--shadow-1)"></div><span class="lab">shadow-1</span></div>
<div class="item"><div class="box" style="box-shadow:var(--shadow-2)"></div><span class="lab">shadow-2</span></div>
<div class="item"><div class="box" style="box-shadow:var(--shadow-3)"></div><span class="lab">shadow-3</span></div>
<div class="item" style="align-self:center"><span class="lab" style="max-width:150px;text-align:left;line-height:1.55">Warm, espresso-tinted, low. Never neutral black — shadows stay warm.</span></div>
</div>
</body></html>

20
docs/design-system/preview/spacing.html Normal file
View file

@ -0,0 +1,20 @@
<!doctype html><html><head><meta charset="utf-8">
<link rel="stylesheet" href="../colors_and_type.css">
<style>
body{margin:0}
.wrap{background:var(--ground);padding:26px 30px;box-sizing:border-box;font-family:var(--font-body)}
.row{display:flex;align-items:center;gap:12px;margin-bottom:9px}
.bar{height:14px;background:var(--tobacco-500);border-radius:2px}
.lab{font-family:var(--font-mono);font-size:10px;color:var(--fg-3);width:64px;flex:none}
</style></head><body>
<div class="wrap">
<div class="row"><span class="lab">2 · 8</span><div class="bar" style="width:8px"></div></div>
<div class="row"><span class="lab">4 · 16</span><div class="bar" style="width:16px"></div></div>
<div class="row"><span class="lab">5 · 24</span><div class="bar" style="width:24px"></div></div>
<div class="row"><span class="lab">6 · 32</span><div class="bar" style="width:32px"></div></div>
<div class="row"><span class="lab">7 · 48</span><div class="bar" style="width:48px"></div></div>
<div class="row"><span class="lab">8 · 64</span><div class="bar" style="width:64px"></div></div>
<div class="row"><span class="lab">9 · 96</span><div class="bar" style="width:96px"></div></div>
<div class="row"><span class="lab">10 · 128</span><div class="bar" style="width:128px"></div></div>
</div>
</body></html>

15
docs/design-system/preview/type-body.html Normal file
View file

@ -0,0 +1,15 @@
<!doctype html><html><head><meta charset="utf-8">
<link rel="stylesheet" href="../colors_and_type.css">
<style>
body{margin:0}
.wrap{background:var(--ground);padding:24px 30px;box-sizing:border-box}
.lead{font-family:var(--font-body);font-weight:300;font-size:19px;line-height:1.6;color:var(--fg-1);margin:0 0 10px;max-width:58ch}
.body{font-family:var(--font-body);font-weight:400;font-size:15px;line-height:1.62;color:var(--fg-2);margin:0;max-width:62ch;font-feature-settings:"onum" 1,"pnum" 1}
.meta{font-family:var(--font-mono);font-size:11px;color:var(--fg-3);margin-top:14px}
</style></head><body>
<div class="wrap">
<p class="lead">I make things — software, small tools, the occasional mark in ink.</p>
<p class="body">A clean humanist grotesque set with generous line-height and a comfortable measure. Old-style figures 0123456789 sit low and even in running text, the way they should.</p>
<p class="meta">Hanken Grotesk · body/UI · 300 lead · 400 body · 1.62 leading</p>
</div>
</body></html>

19
docs/design-system/preview/type-details.html Normal file
View file

@ -0,0 +1,19 @@
<!doctype html><html><head><meta charset="utf-8">
<link rel="stylesheet" href="../colors_and_type.css">
<style>
body{margin:0}
.wrap{background:var(--ground);padding:24px 30px;box-sizing:border-box;display:flex;gap:34px;align-items:flex-start}
.col{display:flex;flex-direction:column;gap:4px}
.lab{font-family:var(--font-mono);font-size:10px;color:var(--fg-3);letter-spacing:.04em}
.smc{font-family:var(--font-display);font-size:25px;color:var(--fg-1);font-feature-settings:"smcp" 1,"onum" 1;text-transform:lowercase;letter-spacing:.06em}
.osf{font-family:var(--font-display);font-size:25px;color:var(--fg-1);font-feature-settings:"onum" 1,"pnum" 1}
.em{font-family:var(--font-display);font-size:25px;color:var(--fg-1)}
.note{font-size:11px;color:var(--fg-2);margin-top:6px;max-width:200px;line-height:1.4}
</style></head><body>
<div class="wrap">
<div class="col"><span class="lab">TRUE SMALL CAPS</span><span class="smc">Selected Writing</span></div>
<div class="col"><span class="lab">OLD-STYLE FIGURES</span><span class="osf">1290 · 2026</span></div>
<div class="col"><span class="lab">EM-DASH RHYTHM</span><span class="em">light — and shadow</span></div>
</div>
<div class="wrap" style="padding-top:0"><div class="note">The "visit-three" details. Barely registered on visit one; quietly precise on closer reading.</div></div>
</body></html>

14
docs/design-system/preview/type-display.html Normal file
View file

@ -0,0 +1,14 @@
<!doctype html><html><head><meta charset="utf-8">
<link rel="stylesheet" href="../colors_and_type.css">
<style>
body{margin:0}
.wrap{background:var(--ground);padding:24px 30px;box-sizing:border-box}
.big{font-family:var(--font-display);font-weight:500;font-size:74px;line-height:.96;color:var(--fg-1);letter-spacing:-.02em;margin:0}
.ital{font-style:italic;font-weight:400}
.meta{font-family:var(--font-mono);font-size:11px;color:var(--fg-3);margin-top:14px}
</style></head><body>
<div class="wrap">
<p class="big">Warm light,<br><span class="ital">cold water</span></p>
<p class="meta">Bodoni Moda · display · 500 / italic 400 · tracking −0.02em</p>
</div>
</body></html>

15
docs/design-system/preview/type-mono.html Normal file
View file

@ -0,0 +1,15 @@
<!doctype html><html><head><meta charset="utf-8">
<link rel="stylesheet" href="../colors_and_type.css">
<style>
body{margin:0}
.wrap{background:var(--ground);padding:24px 30px;box-sizing:border-box}
.mono{font-family:var(--font-mono);font-size:15px;color:var(--fg-1);margin:0;line-height:1.7}
.dim{color:var(--fg-3)}
.acc{color:var(--accent-deep)}
.meta{font-family:var(--font-mono);font-size:11px;color:var(--fg-3);margin-top:16px}
</style></head><body>
<div class="wrap">
<p class="mono"><span class="dim">$</span> jb deploy <span class="acc">--art</span><br><span class="dim">→</span> shipped 0 regressions · 1,284ms</p>
<p class="meta">JetBrains Mono · code/tools subdomain only · 400 / 500</p>
</div>
</body></html>

19
docs/design-system/preview/type-scale.html Normal file
View file

@ -0,0 +1,19 @@
<!doctype html><html><head><meta charset="utf-8">
<link rel="stylesheet" href="../colors_and_type.css">
<style>
body{margin:0}
.wrap{background:var(--ground);padding:22px 30px;box-sizing:border-box;font-family:var(--font-display);color:var(--fg-1)}
.row{display:flex;align-items:baseline;gap:16px;border-bottom:1px solid var(--hairline);padding:5px 0}
.row:last-child{border-bottom:none}
.tok{font-family:var(--font-mono);font-size:10px;color:var(--fg-3);width:78px;flex:none}
.spec{line-height:1;letter-spacing:-.01em;white-space:nowrap;overflow:hidden}
</style></head><body>
<div class="wrap">
<div class="row"><span class="tok">step-6 · 88</span><span class="spec" style="font-size:42px">Display</span></div>
<div class="row"><span class="tok">step-5 · 60</span><span class="spec" style="font-size:34px">Heading one</span></div>
<div class="row"><span class="tok">step-4 · 44</span><span class="spec" style="font-size:27px">Heading two</span></div>
<div class="row"><span class="tok">step-3 · 32</span><span class="spec" style="font-size:21px">Heading three</span></div>
<div class="row"><span class="tok">step-1 · 19</span><span class="spec" style="font-size:16px;font-family:var(--font-body);font-weight:300">Lead paragraph</span></div>
<div class="row"><span class="tok">step-0 · 16</span><span class="spec" style="font-size:14px;font-family:var(--font-body);font-weight:400">Body text</span></div>
</div>
</body></html>

23
docs/design-system/preview/wordmark.html Normal file
View file

@ -0,0 +1,23 @@
<!doctype html><html><head><meta charset="utf-8">
<link rel="stylesheet" href="../colors_and_type.css">
<style>
body{margin:0}
.wrap{background:var(--ground);padding:30px;box-sizing:border-box;font-family:var(--font-body);display:flex;align-items:center;gap:30px}
.mark{display:flex;flex-direction:column;line-height:1}
.name{font-family:var(--font-display);font-weight:500;font-size:42px;color:var(--fg-1);letter-spacing:-.015em}
.name .dot{color:var(--accent-deep)}
.role{font-family:var(--font-body);font-size:10.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--fg-3);margin-top:8px;padding-left:2px}
.div{width:1px;height:60px;background:var(--hairline)}
.small{display:flex;align-items:center;gap:14px}
.small img{height:40px}
.small span{font-family:var(--font-mono);font-size:10px;color:var(--fg-3)}
</style></head><body>
<div class="wrap">
<div class="mark">
<span class="name">Josh Bairstow<span class="dot">.</span></span>
<span class="role">Engineer &middot; Sydney</span>
</div>
<div class="div"></div>
<div class="small"><img src="../assets/mark-rings.svg"><span>favicon /<br>small mark</span></div>
</div>
</body></html>