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

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>