−
100%
+
fit
scroll
<!DOCTYPE html> <html lang="en"> <head> <meta
charset="UTF-8"> <meta name="viewport"
content="width=device-width,
initial-scale=1.0"> <title>Gem Color
System</title> <link
href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700;900&family=Inconsolata:wght@300;400;600&display=swap"
rel="stylesheet"> <style> :root { --bg:
#080808; --surface: #111111; --border:
#1a1a1a; --text: #c8c8c8; --red: #cc2200; } *
{ margin: 0; padding: 0; box-sizing:
border-box; } body { background: var(--bg);
color: var(--text); font-family:
'Inconsolata', monospace; min-height: 100vh;
padding: 48px 32px; } /* Subtle noise texture
overlay */ body::before { content: '';
position: fixed; inset: 0; background-image:
url("data:image/svg+xml,%3Csvg viewBox='0 0
256 256'
xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter
id='noise'%3E%3CfeTurbulence
type='fractalNoise' baseFrequency='0.9'
numOctaves='4'
stitchTiles='stitch'/%3E%3C/filter%3E%3Crect
width='100%25' height='100%25'
filter='url(%23noise)'
opacity='0.04'/%3E%3C/svg%3E");
pointer-events: none; z-index: 0; opacity:
0.4; } .page-header { text-align: center;
margin-bottom: 64px; position: relative;
z-index: 1; } .page-header h1 { font-family:
'Cinzel', serif; font-size: clamp(2rem, 5vw,
4rem); font-weight: 900; letter-spacing:
0.2em; text-transform: uppercase; color: #fff;
text-shadow: 0 0 40px rgba(200,34,0,0.4); }
.page-header .subtitle { margin-top: 12px;
font-size: 0.8rem; letter-spacing: 0.3em;
color: var(--red); text-transform: uppercase;
} .divider { width: 120px; height: 1px;
background: linear-gradient(90deg,
transparent, var(--red), transparent); margin:
20px auto; } /* Column labels */ .col-labels {
display: grid; grid-template-columns: 220px
1fr 3fr; gap: 0; max-width: 900px; margin: 0
auto 8px; padding: 0 0 0 8px; position:
relative; z-index: 1; } .col-label {
font-size: 0.65rem; letter-spacing: 0.3em;
text-transform: uppercase; color: var(--red);
text-align: center; } .col-label:first-child {
text-align: left; padding-left: 8px; } /* Gem
cards */ .gems-grid { display: flex;
flex-direction: column; gap: 2px; max-width:
900px; margin: 0 auto; position: relative;
z-index: 1; } .gem-row { display: grid;
grid-template-columns: 220px 1fr 3fr; gap: 0;
background: var(--surface); border: 1px solid
var(--border); border-bottom: none;
transition: border-color 0.3s; }
.gem-row:last-child { border-bottom: 1px solid
var(--border); } .gem-row:hover {
border-color: #333; } /* Left: gem identity */
.gem-identity { display: flex; align-items:
center; gap: 16px; padding: 20px 16px;
border-right: 1px solid var(--border); }
.gem-svg-wrap { flex-shrink: 0; width: 52px;
height: 52px; display: flex; align-items:
center; justify-content: center; filter:
drop-shadow(0 0 8px var(--glow, transparent));
transition: filter 0.3s; } .gem-row:hover
.gem-svg-wrap { filter: drop-shadow(0 0 16px
var(--glow, transparent)); } .gem-info { flex:
1; min-width: 0; } .gem-name { font-family:
'Cinzel', serif; font-size: 0.9rem;
font-weight: 700; color: #fff; display: block;
letter-spacing: 0.1em; } .gem-rule {
font-size: 0.65rem; color: var(--red);
letter-spacing: 0.1em; display: block;
margin-top: 2px; text-transform: uppercase; }
.gem-mnemonic { font-size: 0.6rem; color:
#555; letter-spacing: 0.05em; display: block;
margin-top: 2px; } /* Middle: mutability +
format */ .gem-meta { display: flex;
flex-direction: column; align-items:
flex-start; justify-content: center; gap: 8px;
padding: 12px 14px; border-right: 1px solid
var(--border); } .mutability-badge {
font-size: 0.58rem; letter-spacing: 0.12em;
text-transform: uppercase; padding: 3px 7px;
border: 1px solid currentColor; border-radius:
2px; white-space: nowrap; } .mut-creation {
color: #66BB6A; } .mut-mutable { color:
#42A5F5; } .mut-append { color: #FFA726; }
.format-label { font-size: 0.55rem;
letter-spacing: 0.06em; color: #555;
line-height: 1.5; font-family: 'Inconsolata',
monospace; word-break: break-word; }
.format-label span { color: #888; } /* Right:
color swatches */ .gem-swatches { display:
grid; grid-template-columns: 1fr 1fr 1fr; gap:
0; } .swatch { display: flex; flex-direction:
column; align-items: center; justify-content:
flex-end; padding: 14px 8px 10px; gap: 6px;
position: relative; border-left: 1px solid
var(--border); transition: background 0.2s; }
.swatch-bar { width: 100%; height: 32px;
border-radius: 3px; transition: height 0.3s; }
.gem-row:hover .swatch-bar { height: 40px; }
.swatch-label { font-size: 0.6rem;
letter-spacing: 0.15em; text-transform:
uppercase; color: #444; align-self:
flex-start; } .swatch-hex { font-size:
0.68rem; letter-spacing: 0.08em; color: #888;
align-self: flex-start; font-weight: 600; }
.swatch.is-current .swatch-label { color:
#aaa; } .swatch.is-current .swatch-hex {
color: #ccc; } .swatch.is-current::after {
content: '●'; position: absolute; top: 6px;
right: 8px; font-size: 0.4rem; color:
var(--red); } /* Animation */ .gem-row {
opacity: 0; transform: translateY(10px);
animation: fadeUp 0.5s ease forwards; }
@keyframes fadeUp { to { opacity: 1;
transform: translateY(0); } } </style> </head>
<body> <header class="page-header"> <h1>Gem
Color System</h1> <div class="divider"></div>
<p class="subtitle">Bright · Shade · Dark
— Ten Stones, Three Depths</p> </header>
<div class="col-labels"> <span
class="col-label">Gem</span> <span
class="col-label">Mutability · Format</span>
<span class="col-label"
style="display:grid;grid-template-columns:1fr
1fr 1fr;text-align:center">
<span>Bright</span><span>Shade</span><span>Dark</span>
</span> </div> <div class="gems-grid"
id="gems"></div> <script> const gems = [ {
name: "onyx", rule: "WHO is it", mnemonic:
"Name", mutability: "set-at-creation", format:
"string", swatches: [ { label: "Bright", hex:
"#FFFFFF", current: true }, { label: "Shade",
hex: "#9E9E9E", current: false }, { label:
"Dark", hex: "#212121", current: false }, ],
glow: "#FFFFFF44", svgFn: (c) => ` <svg
width="48" height="48" viewBox="0 0 48 48">
<!-- Onyx: rectangular cabochon --> <rect
x="6" y="10" width="36" height="28" rx="4"
fill="${c[0]}" opacity="0.15"/> <rect x="6"
y="10" width="36" height="28" rx="4"
fill="none" stroke="${c[0]}"
stroke-width="1.5"/> <rect x="11" y="15"
width="26" height="18" rx="2" fill="${c[0]}"
opacity="0.08"/> <line x1="6" y1="24" x2="42"
y2="24" stroke="${c[0]}" stroke-width="0.5"
opacity="0.4"/> <ellipse cx="24" cy="24"
rx="8" ry="5" fill="${c[0]}" opacity="0.06"/>
</svg>` }, { name: "sapphire", rule: "WHAT
kind", mnemonic: "Archetype", mutability:
"set-at-creation", format: "string", swatches:
[ { label: "Bright", hex: "#64B5F6", current:
true }, { label: "Shade", hex: "#1976D2",
current: false }, { label: "Dark", hex:
"#0D47A1", current: false }, ], glow:
"#64B5F666", svgFn: (c) => ` <svg width="48"
height="48" viewBox="0 0 48 48"> <!--
Sapphire: oval --> <ellipse cx="24" cy="24"
rx="16" ry="20" fill="${c[0]}"
opacity="0.18"/> <ellipse cx="24" cy="24"
rx="16" ry="20" fill="none" stroke="${c[0]}"
stroke-width="1.5"/> <ellipse cx="24" cy="24"
rx="9" ry="12" fill="${c[0]}" opacity="0.12"/>
<line x1="8" y1="24" x2="24" y2="8"
stroke="${c[0]}" stroke-width="0.7"
opacity="0.5"/> <line x1="40" y1="24" x2="24"
y2="8" stroke="${c[0]}" stroke-width="0.7"
opacity="0.5"/> <line x1="8" y1="24" x2="24"
y2="40" stroke="${c[0]}" stroke-width="0.7"
opacity="0.5"/> <line x1="40" y1="24" x2="24"
y2="40" stroke="${c[0]}" stroke-width="0.7"
opacity="0.5"/> <ellipse cx="20" cy="19"
rx="3" ry="4" fill="${c[0]}" opacity="0.25"/>
</svg>` }, { name: "pearl", rule: "WHAT it
says", mnemonic: "Content", mutability:
"mutable", format: "object {title, body,
...}", swatches: [ { label: "Bright", hex:
"#F5F5F5", current: false }, { label: "Shade",
hex: "#E8E8E8", current: true }, { label:
"Dark", hex: "#9E9E9E", current: false }, ],
glow: "#E8E8E844", svgFn: (c) => ` <svg
width="48" height="48" viewBox="0 0 48 48">
<!-- Pearl: circle with iridescent sheen -->
<circle cx="24" cy="24" r="18" fill="${c[1]}"
opacity="0.12"/> <circle cx="24" cy="24"
r="18" fill="none" stroke="${c[1]}"
stroke-width="1.5"/> <circle cx="24" cy="24"
r="10" fill="${c[1]}" opacity="0.08"/>
<ellipse cx="19" cy="18" rx="5" ry="3"
fill="white" opacity="0.3"
transform="rotate(-30 19 18)"/> <ellipse
cx="17" cy="17" rx="2.5" ry="1.5" fill="white"
opacity="0.5" transform="rotate(-30 17 17)"/>
</svg>` }, { name: "ruby", rule: "HOW it's
tagged", mnemonic: "Classification",
mutability: "mutable", format: "object {key:
string|bool}", swatches: [ { label: "Bright",
hex: "#FF1744", current: true }, { label:
"Shade", hex: "#C62828", current: false }, {
label: "Dark", hex: "#7B0000", current: false
}, ], glow: "#FF174466", svgFn: (c) => ` <svg
width="48" height="48" viewBox="0 0 48 48">
<!-- Ruby: cushion cut --> <path d="M10 18 L14
10 L34 10 L38 18 L38 30 L34 38 L14 38 L10 30
Z" fill="${c[0]}" opacity="0.18"/> <path
d="M10 18 L14 10 L34 10 L38 18 L38 30 L34 38
L14 38 L10 30 Z" fill="none" stroke="${c[0]}"
stroke-width="1.5"/> <path d="M16 20 L18 14
L30 14 L32 20 L32 28 L30 34 L18 34 L16 28 Z"
fill="${c[0]}" opacity="0.1" stroke="${c[0]}"
stroke-width="0.6"/> <line x1="10" y1="18"
x2="16" y2="20" stroke="${c[0]}"
stroke-width="0.6" opacity="0.6"/> <line
x1="38" y1="18" x2="32" y2="20"
stroke="${c[0]}" stroke-width="0.6"
opacity="0.6"/> <line x1="10" y1="30" x2="16"
y2="28" stroke="${c[0]}" stroke-width="0.6"
opacity="0.6"/> <line x1="38" y1="30" x2="32"
y2="28" stroke="${c[0]}" stroke-width="0.6"
opacity="0.6"/> <ellipse cx="21" cy="19"
rx="3" ry="2" fill="${c[0]}" opacity="0.35"/>
</svg>` }, { name: "topaz", rule: "HOW MUCH",
mnemonic: "Measurements", mutability:
"mutable", format: "object {key: number}",
swatches: [ { label: "Bright", hex: "#FFB74D",
current: false }, { label: "Shade", hex:
"#FF6B35", current: false }, { label: "Dark",
hex: "#FF9800", current: true }, ], glow:
"#FF6B3566", svgFn: (c) => ` <svg width="48"
height="48" viewBox="0 0 48 48"> <!-- Topaz:
elongated rectangle cut --> <path d="M10 20
L16 10 L32 10 L38 20 L38 28 L32 38 L16 38 L10
28 Z" fill="${c[1]}" opacity="0.18"/> <path
d="M10 20 L16 10 L32 10 L38 20 L38 28 L32 38
L16 38 L10 28 Z" fill="none" stroke="${c[1]}"
stroke-width="1.5"/> <rect x="17" y="15"
width="14" height="18" rx="1" fill="${c[1]}"
opacity="0.1" stroke="${c[1]}"
stroke-width="0.6"/> <line x1="10" y1="20"
x2="17" y2="20" stroke="${c[1]}"
stroke-width="0.6" opacity="0.6"/> <line
x1="38" y1="20" x2="31" y2="20"
stroke="${c[1]}" stroke-width="0.6"
opacity="0.6"/> <line x1="10" y1="28" x2="17"
y2="28" stroke="${c[1]}" stroke-width="0.6"
opacity="0.6"/> <line x1="38" y1="28" x2="31"
y2="28" stroke="${c[1]}" stroke-width="0.6"
opacity="0.6"/> <ellipse cx="21" cy="18"
rx="3" ry="2" fill="${c[1]}" opacity="0.4"/>
</svg>` }, { name: "amethyst", rule: "WHO sees
it", mnemonic: "Access", mutability:
"mutable", format: "object {visibility,
tags[], ...}", swatches: [ { label: "Bright",
hex: "#E040FB", current: false }, { label:
"Shade", hex: "#9C27B0", current: true }, {
label: "Dark", hex: "#4A148C", current: false
}, ], glow: "#9C27B066", svgFn: (c) => ` <svg
width="48" height="48" viewBox="0 0 48 48">
<!-- Amethyst: hexagon --> <polygon
points="24,6 39,15 39,33 24,42 9,33 9,15"
fill="${c[1]}" opacity="0.18"/> <polygon
points="24,6 39,15 39,33 24,42 9,33 9,15"
fill="none" stroke="${c[1]}"
stroke-width="1.5"/> <polygon points="24,13
33,18 33,30 24,35 15,30 15,18" fill="${c[1]}"
opacity="0.1" stroke="${c[1]}"
stroke-width="0.6"/> <line x1="24" y1="6"
x2="24" y2="13" stroke="${c[1]}"
stroke-width="0.6" opacity="0.6"/> <line
x1="39" y1="15" x2="33" y2="18"
stroke="${c[1]}" stroke-width="0.6"
opacity="0.6"/> <line x1="39" y1="33" x2="33"
y2="30" stroke="${c[1]}" stroke-width="0.6"
opacity="0.6"/> <line x1="24" y1="42" x2="24"
y2="35" stroke="${c[1]}" stroke-width="0.6"
opacity="0.6"/> <line x1="9" y1="33" x2="15"
y2="30" stroke="${c[1]}" stroke-width="0.6"
opacity="0.6"/> <line x1="9" y1="15" x2="15"
y2="18" stroke="${c[1]}" stroke-width="0.6"
opacity="0.6"/> <ellipse cx="20" cy="17"
rx="3.5" ry="2" fill="${c[1]}" opacity="0.4"/>
</svg>` }, { name: "obsidian", rule: "WHERE it
connects", mnemonic: "Relationships",
mutability: "append-only", format: "object
{ring, crown, fid, ...}: uuid", swatches: [ {
label: "Bright", hex: "#BDBDBD", current:
false }, { label: "Shade", hex: "#757575",
current: false }, { label: "Dark", hex:
"#424242", current: true }, ], glow:
"#42424288", svgFn: (c) => ` <svg width="48"
height="48" viewBox="0 0 48 48"> <!--
Obsidian: jagged volcanic shard --> <polygon
points="24,5 40,18 36,42 20,38 8,26 14,8"
fill="${c[2]}" opacity="0.3"/> <polygon
points="24,5 40,18 36,42 20,38 8,26 14,8"
fill="none" stroke="${c[2]}"
stroke-width="1.5"/> <polygon points="24,13
33,21 30,36 20,33 13,24 18,14" fill="${c[2]}"
opacity="0.2" stroke="${c[2]}"
stroke-width="0.6"/> <line x1="24" y1="5"
x2="24" y2="13" stroke="${c[2]}"
stroke-width="0.6" opacity="0.7"/> <line
x1="40" y1="18" x2="33" y2="21"
stroke="${c[2]}" stroke-width="0.6"
opacity="0.7"/> <ellipse cx="20" cy="16"
rx="2.5" ry="1.5" fill="#BDBDBD"
opacity="0.25"/> </svg>` }, { name: "diamond",
rule: "WHERE it surfaces", mnemonic:
"Navigation", mutability: "mutable", format:
"object {surface, float, sink}", swatches: [ {
label: "Bright", hex: "#80DEEA", current:
false }, { label: "Shade", hex: "#4DD0E1",
current: true }, { label: "Dark", hex:
"#006064", current: false }, ], glow:
"#4DD0E166", svgFn: (c) => ` <svg width="48"
height="48" viewBox="0 0 48 48"> <!-- Diamond:
classic brilliant cut --> <polygon
points="24,4 42,20 24,44 6,20" fill="${c[1]}"
opacity="0.16"/> <polygon points="24,4 42,20
24,44 6,20" fill="none" stroke="${c[1]}"
stroke-width="1.5"/> <polygon points="14,20
24,12 34,20 24,44" fill="${c[1]}"
opacity="0.08" stroke="${c[1]}"
stroke-width="0.6"/> <line x1="14" y1="20"
x2="34" y2="20" stroke="${c[1]}"
stroke-width="0.8" opacity="0.5"/> <line
x1="24" y1="4" x2="14" y2="20"
stroke="${c[1]}" stroke-width="0.6"
opacity="0.6"/> <line x1="24" y1="4" x2="34"
y2="20" stroke="${c[1]}" stroke-width="0.6"
opacity="0.6"/> <polygon points="20,11 28,11
31,20 17,20" fill="${c[1]}" opacity="0.12"/>
<ellipse cx="20" cy="14" rx="2.5" ry="1.5"
fill="${c[1]}" opacity="0.55"/> </svg>` }, {
name: "emerald", rule: "WHEN", mnemonic:
"Time", mutability: "append-only", format:
"object {created, completed, ...}: timestamp",
swatches: [ { label: "Bright", hex: "#A5D6A7",
current: false }, { label: "Shade", hex:
"#4CAF50", current: true }, { label: "Dark",
hex: "#1B5E20", current: false }, ], glow:
"#4CAF5066", svgFn: (c) => ` <svg width="48"
height="48" viewBox="0 0 48 48"> <!-- Emerald:
emerald cut (rect with clipped corners) -->
<polygon points="14,8 34,8 42,16 42,32 34,40
14,40 6,32 6,16" fill="${c[1]}"
opacity="0.18"/> <polygon points="14,8 34,8
42,16 42,32 34,40 14,40 6,32 6,16" fill="none"
stroke="${c[1]}" stroke-width="1.5"/> <polygon
points="17,13 31,13 37,19 37,29 31,35 17,35
11,29 11,19" fill="${c[1]}" opacity="0.1"
stroke="${c[1]}" stroke-width="0.6"/> <line
x1="14" y1="8" x2="17" y2="13"
stroke="${c[1]}" stroke-width="0.6"
opacity="0.6"/> <line x1="34" y1="8" x2="31"
y2="13" stroke="${c[1]}" stroke-width="0.6"
opacity="0.6"/> <line x1="42" y1="16" x2="37"
y2="19" stroke="${c[1]}" stroke-width="0.6"
opacity="0.6"/> <line x1="42" y1="32" x2="37"
y2="29" stroke="${c[1]}" stroke-width="0.6"
opacity="0.6"/> <line x1="34" y1="40" x2="31"
y2="35" stroke="${c[1]}" stroke-width="0.6"
opacity="0.6"/> <line x1="14" y1="40" x2="17"
y2="35" stroke="${c[1]}" stroke-width="0.6"
opacity="0.6"/> <ellipse cx="20" cy="17"
rx="4" ry="2" fill="${c[1]}" opacity="0.35"/>
</svg>` }, { name: "citrine", rule: "WHERE it
lives", mnemonic: "Locality", mutability:
"mutable", format: "object {realm, host, path,
...}", swatches: [ { label: "Bright", hex:
"#FFD8A8", current: false }, { label: "Shade",
hex: "#F4A460", current: true }, { label:
"Dark", hex: "#8B5E3C", current: false }, ],
glow: "#F4A46066", svgFn: (c) => ` <svg
width="48" height="48" viewBox="0 0 48 48">
<!-- Citrine: teardrop / pear shape --> <path
d="M24,6 C34,6 40,14 40,22 C40,32 33,42 24,42
C15,42 8,32 8,22 C8,14 14,6 24,6 Z"
fill="${c[1]}" opacity="0.18"/> <path d="M24,6
C34,6 40,14 40,22 C40,32 33,42 24,42 C15,42
8,32 8,22 C8,14 14,6 24,6 Z" fill="none"
stroke="${c[1]}" stroke-width="1.5"/> <path
d="M24,12 C31,12 35,17 35,23 C35,30 30,37
24,37 C18,37 13,30 13,23 C13,17 17,12 24,12 Z"
fill="${c[1]}" opacity="0.1" stroke="${c[1]}"
stroke-width="0.6"/> <line x1="24" y1="6"
x2="24" y2="12" stroke="${c[1]}"
stroke-width="0.6" opacity="0.6"/> <ellipse
cx="20" cy="15" rx="3" ry="1.8" fill="${c[1]}"
opacity="0.4" transform="rotate(-15 20 15)"/>
</svg>` }, ]; const mutClass = (m) => m ===
'set-at-creation' ? 'mut-creation' : m ===
'mutable' ? 'mut-mutable' : 'mut-append';
const container =
document.getElementById('gems');
gems.forEach((gem, i) => { const hexes =
gem.swatches.map(s => s.hex); const row =
document.createElement('div'); row.className =
'gem-row'; row.style.animationDelay = `${i *
60}ms`; row.style.setProperty('--glow',
gem.glow); row.innerHTML = ` <div
class="gem-identity"> <div
class="gem-svg-wrap">${gem.svgFn(hexes)}</div>
<div class="gem-info"> <span
class="gem-name">${gem.name}</span> <span
class="gem-rule">${gem.rule}</span> <span
class="gem-mnemonic">${gem.mnemonic}</span>
</div> </div> <div class="gem-meta"> <span
class="mutability-badge
${mutClass(gem.mutability)}">${gem.mutability}</span>
<span
class="format-label"><span>${gem.format}</span></span>
</div> <div class="gem-swatches">
${gem.swatches.map(s => ` <div class="swatch
${s.current ? 'is-current' : ''}"> <div
class="swatch-bar"
style="background:${s.hex}"></div> <span
class="swatch-label">${s.label}</span> <span
class="swatch-hex">${s.hex}</span> </div>
`).join('')} </div> `;
container.appendChild(row); }); </script>
</body> </html>
△