gem-color-system
<!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>