tegwick
6fe263444a
Session probe lands on /vw_pages (Research). Use main designlang extract with --cookie-file — pack ignores auth. 39 artifacts under docs/design-extract; tolerate designlang late summary crash when cores exist.
433 lines
No EOL
17 KiB
HTML
433 lines
No EOL
17 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Design Language: Research | Coulomb</title>
|
|
<style>
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
:root {
|
|
--bg: #0a0a0a; --bg-card: #141414; --border: #222; --text: #e5e5e5; --text-heading: #fff;
|
|
--text-muted: #666; --text-sub: #a0a0a0; --text-dim: #444; --text-faint: #555; --row-border: #1a1a1a;
|
|
}
|
|
[data-theme="light"] {
|
|
--bg: #f5f5f5; --bg-card: #fff; --border: #ddd; --text: #333; --text-heading: #111;
|
|
--text-muted: #888; --text-sub: #666; --text-dim: #999; --text-faint: #aaa; --row-border: #e5e5e5;
|
|
}
|
|
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: var(--bg); color: var(--text); line-height: 1.6; }
|
|
.container { max-width: 1200px; margin: 0 auto; padding: 40px 24px; }
|
|
.header-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
|
|
.theme-toggle { background: var(--bg-card); border: 1px solid var(--border); color: var(--text); padding: 6px 14px; border-radius: 8px; cursor: pointer; font-size: 13px; white-space: nowrap; }
|
|
h1 { font-size: 36px; font-weight: 700; margin-bottom: 8px; color: var(--text-heading); }
|
|
h2 { font-size: 24px; font-weight: 600; margin: 48px 0 20px; color: var(--text-heading); border-bottom: 1px solid var(--border); padding-bottom: 12px; }
|
|
h3 { font-size: 16px; font-weight: 600; margin: 24px 0 12px; color: var(--text-sub); text-transform: uppercase; letter-spacing: 0.05em; }
|
|
.meta { color: var(--text-muted); font-size: 14px; margin-bottom: 32px; }
|
|
.meta span { margin-right: 16px; }
|
|
.grid { display: grid; gap: 12px; }
|
|
.grid-2 { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
|
|
.grid-3 { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
|
|
.grid-4 { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
|
|
@media (max-width: 600px) {
|
|
.grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr 1fr; }
|
|
h1 { font-size: 24px; }
|
|
.container { padding: 20px 12px; }
|
|
}
|
|
@media (max-width: 380px) {
|
|
.grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
|
|
}
|
|
|
|
/* Color swatches */
|
|
.swatch { border-radius: 12px; overflow: hidden; background: var(--bg-card); border: 1px solid var(--border); cursor: pointer; position: relative; }
|
|
.swatch-color { height: 80px; position: relative; }
|
|
.swatch-info { padding: 10px 12px; font-size: 13px; }
|
|
.swatch-hex { font-weight: 600; font-family: monospace; color: var(--text-heading); }
|
|
.swatch-label { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
|
|
.swatch-role { display: inline-block; font-size: 10px; background: var(--border); color: var(--text-sub); padding: 2px 8px; border-radius: 4px; margin-top: 4px; }
|
|
.copied-tip { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(0,0,0,0.8); color: #fff; padding: 4px 12px; border-radius: 6px; font-size: 12px; pointer-events: none; opacity: 0; transition: opacity 0.2s; }
|
|
.copied-tip.show { opacity: 1; }
|
|
|
|
/* Type scale */
|
|
.type-row { display: flex; align-items: baseline; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--row-border); }
|
|
.type-size { font-family: monospace; color: var(--text-muted); min-width: 60px; font-size: 13px; }
|
|
.type-meta { font-size: 12px; color: var(--text-dim); margin-left: auto; font-family: monospace; }
|
|
|
|
/* Spacing */
|
|
.spacing-row { display: flex; align-items: center; gap: 12px; padding: 6px 0; }
|
|
.spacing-bar { background: linear-gradient(90deg, #3b82f6, #8b5cf6); border-radius: 4px; height: 24px; min-width: 4px; transition: width 0.3s; }
|
|
.spacing-label { font-family: monospace; font-size: 13px; color: var(--text-sub); min-width: 60px; }
|
|
|
|
/* Shadows */
|
|
.shadow-card { background: var(--bg-card); border-radius: 12px; padding: 24px; text-align: center; min-height: 80px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--border); }
|
|
.shadow-label { font-size: 12px; color: var(--text); font-family: monospace; }
|
|
|
|
/* Radii */
|
|
.radius-item { width: 60px; height: 60px; background: linear-gradient(135deg, #3b82f6, #8b5cf6); display: flex; align-items: center; justify-content: center; font-size: 11px; color: #fff; font-weight: 600; }
|
|
|
|
/* Accessibility */
|
|
.a11y-score { font-size: 64px; font-weight: 800; }
|
|
.a11y-score.good { color: #22c55e; }
|
|
.a11y-score.warn { color: #eab308; }
|
|
.a11y-score.bad { color: #ef4444; }
|
|
.a11y-pair { display: flex; align-items: center; gap: 12px; padding: 10px 16px; background: var(--bg-card); border-radius: 8px; margin-bottom: 6px; border: 1px solid var(--border); flex-wrap: wrap; }
|
|
.a11y-sample { width: 120px; padding: 6px 12px; border-radius: 6px; text-align: center; font-size: 14px; font-weight: 500; }
|
|
.a11y-ratio { font-family: monospace; font-size: 14px; min-width: 50px; }
|
|
.a11y-badge { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 4px; }
|
|
.a11y-badge.pass { background: #22c55e20; color: #22c55e; }
|
|
.a11y-badge.fail { background: #ef444420; color: #ef4444; }
|
|
|
|
/* Components */
|
|
.comp-screenshot { border-radius: 8px; border: 1px solid var(--border); max-width: 100%; }
|
|
|
|
/* Stat cards */
|
|
.stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; margin: 24px 0; }
|
|
.stat { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 16px; }
|
|
.stat-value { font-size: 28px; font-weight: 700; color: var(--text-heading); }
|
|
.stat-label { font-size: 12px; color: var(--text-muted); margin-top: 4px; }
|
|
|
|
.font-tag { display: inline-block; background: #1e1e2e; color: #a78bfa; padding: 4px 10px; border-radius: 6px; font-size: 13px; margin: 4px 4px 4px 0; }
|
|
[data-theme="light"] .font-tag { background: #ede9fe; color: #6d28d9; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
|
|
<div class="header-row">
|
|
<h1>Research | Coulomb</h1>
|
|
<button class="theme-toggle" onclick="toggleTheme()">Toggle Light/Dark</button>
|
|
</div>
|
|
<div class="meta">
|
|
<span>https://coulomb.social</span>
|
|
<span>3445 elements</span>
|
|
<span>8/9/2026</span>
|
|
<span>7 pages crawled</span>
|
|
</div>
|
|
|
|
<div class="stats">
|
|
<div class="stat"><div class="stat-value">8</div><div class="stat-label">Colors</div></div>
|
|
<div class="stat"><div class="stat-value">4</div><div class="stat-label">Font Families</div></div>
|
|
<div class="stat"><div class="stat-value">8</div><div class="stat-label">Spacing Values</div></div>
|
|
<div class="stat"><div class="stat-value">2</div><div class="stat-label">Shadows</div></div>
|
|
<div class="stat"><div class="stat-value">5</div><div class="stat-label">Border Radii</div></div>
|
|
<div class="stat"><div class="stat-value">5</div><div class="stat-label">Components</div></div>
|
|
<div class="stat"><div class="stat-value good" style="color: #22c55e">100%</div><div class="stat-label">A11y Score</div></div>
|
|
</div>
|
|
|
|
<!-- Colors -->
|
|
<h2>Color Palette</h2>
|
|
|
|
|
|
<h3>Brand Colors</h3>
|
|
<div class="grid grid-3">
|
|
<div class="swatch">
|
|
<div class="swatch-color" style="background:#d08728"></div>
|
|
<div class="swatch-info">
|
|
<div class="swatch-hex">#d08728</div>
|
|
<div class="swatch-label">Primary</div>
|
|
<div class="swatch-label">8 uses</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<h3>Neutrals</h3>
|
|
<div class="grid grid-4">
|
|
<div class="swatch">
|
|
<div class="swatch-color" style="background:#000000"></div>
|
|
<div class="swatch-info">
|
|
<div class="swatch-hex">#000000</div>
|
|
|
|
<div class="swatch-label">5304 uses</div>
|
|
</div>
|
|
</div>
|
|
<div class="swatch">
|
|
<div class="swatch-color" style="background:#efefef"></div>
|
|
<div class="swatch-info">
|
|
<div class="swatch-hex">#efefef</div>
|
|
|
|
<div class="swatch-label">610 uses</div>
|
|
</div>
|
|
</div>
|
|
<div class="swatch">
|
|
<div class="swatch-color" style="background:#616161"></div>
|
|
<div class="swatch-info">
|
|
<div class="swatch-hex">#616161</div>
|
|
|
|
<div class="swatch-label">556 uses</div>
|
|
</div>
|
|
</div>
|
|
<div class="swatch">
|
|
<div class="swatch-color" style="background:#373737"></div>
|
|
<div class="swatch-info">
|
|
<div class="swatch-hex">#373737</div>
|
|
|
|
<div class="swatch-label">462 uses</div>
|
|
</div>
|
|
</div>
|
|
<div class="swatch">
|
|
<div class="swatch-color" style="background:#171717"></div>
|
|
<div class="swatch-info">
|
|
<div class="swatch-hex">#171717</div>
|
|
|
|
<div class="swatch-label">401 uses</div>
|
|
</div>
|
|
</div>
|
|
<div class="swatch">
|
|
<div class="swatch-color" style="background:#ffffff"></div>
|
|
<div class="swatch-info">
|
|
<div class="swatch-hex">#ffffff</div>
|
|
|
|
<div class="swatch-label">242 uses</div>
|
|
</div>
|
|
</div>
|
|
<div class="swatch">
|
|
<div class="swatch-color" style="background:#e5e5e5"></div>
|
|
<div class="swatch-info">
|
|
<div class="swatch-hex">#e5e5e5</div>
|
|
|
|
<div class="swatch-label">217 uses</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<h3>Full Palette</h3>
|
|
<div class="grid grid-4">
|
|
<div class="swatch">
|
|
<div class="swatch-color" style="background:#000000"></div>
|
|
<div class="swatch-info">
|
|
<div class="swatch-hex">#000000</div>
|
|
<div class="swatch-label">text, border, background</div>
|
|
<div class="swatch-label">5304 uses</div>
|
|
</div>
|
|
</div>
|
|
<div class="swatch">
|
|
<div class="swatch-color" style="background:#efefef"></div>
|
|
<div class="swatch-info">
|
|
<div class="swatch-hex">#efefef</div>
|
|
<div class="swatch-label">background</div>
|
|
<div class="swatch-label">610 uses</div>
|
|
</div>
|
|
</div>
|
|
<div class="swatch">
|
|
<div class="swatch-color" style="background:#616161"></div>
|
|
<div class="swatch-info">
|
|
<div class="swatch-hex">#616161</div>
|
|
<div class="swatch-label">text, border</div>
|
|
<div class="swatch-label">556 uses</div>
|
|
</div>
|
|
</div>
|
|
<div class="swatch">
|
|
<div class="swatch-color" style="background:#373737"></div>
|
|
<div class="swatch-info">
|
|
<div class="swatch-hex">#373737</div>
|
|
<div class="swatch-label">text, border</div>
|
|
<div class="swatch-label">462 uses</div>
|
|
</div>
|
|
</div>
|
|
<div class="swatch">
|
|
<div class="swatch-color" style="background:#171717"></div>
|
|
<div class="swatch-info">
|
|
<div class="swatch-hex">#171717</div>
|
|
<div class="swatch-label">text, border, background</div>
|
|
<div class="swatch-label">401 uses</div>
|
|
</div>
|
|
</div>
|
|
<div class="swatch">
|
|
<div class="swatch-color" style="background:#ffffff"></div>
|
|
<div class="swatch-info">
|
|
<div class="swatch-hex">#ffffff</div>
|
|
<div class="swatch-label">background, border, text</div>
|
|
<div class="swatch-label">242 uses</div>
|
|
</div>
|
|
</div>
|
|
<div class="swatch">
|
|
<div class="swatch-color" style="background:#e5e5e5"></div>
|
|
<div class="swatch-info">
|
|
<div class="swatch-hex">#e5e5e5</div>
|
|
<div class="swatch-label">border, background</div>
|
|
<div class="swatch-label">217 uses</div>
|
|
</div>
|
|
</div>
|
|
<div class="swatch">
|
|
<div class="swatch-color" style="background:#d08728"></div>
|
|
<div class="swatch-info">
|
|
<div class="swatch-hex">#d08728</div>
|
|
<div class="swatch-label">background</div>
|
|
<div class="swatch-label">8 uses</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<!-- Typography -->
|
|
<h2>Typography</h2>
|
|
|
|
|
|
<h3>Font Families</h3>
|
|
<div>
|
|
<span class="font-tag">Helvetica <span style="color:#666">(body, 1739x)</span></span><span class="font-tag">Arial <span style="color:#666">(body, 761x)</span></span><span class="font-tag">Times New Roman <span style="color:#666">(body, 450x)</span></span><span class="font-tag">Inter <span style="color:#666">(body, 397x)</span></span>
|
|
</div>
|
|
|
|
|
|
<h3>Type Scale</h3>
|
|
<div>
|
|
|
|
<div class="type-row">
|
|
<span class="type-size">50px</span>
|
|
<span style="font-size:48px;font-weight:400;color:var(--text-heading)">The quick brown fox</span>
|
|
<span class="type-meta">400 / 50px</span>
|
|
</div>
|
|
<div class="type-row">
|
|
<span class="type-size">42px</span>
|
|
<span style="font-size:42px;font-weight:700;color:var(--text-heading)">The quick brown fox</span>
|
|
<span class="type-meta">700 / normal</span>
|
|
</div>
|
|
<div class="type-row">
|
|
<span class="type-size">24px</span>
|
|
<span style="font-size:24px;font-weight:600;color:var(--text-heading)">The quick brown fox</span>
|
|
<span class="type-meta">600 / 36px</span>
|
|
</div>
|
|
<div class="type-row">
|
|
<span class="type-size">18px</span>
|
|
<span style="font-size:18px;font-weight:600;color:var(--text-heading)">The quick brown fox</span>
|
|
<span class="type-meta">600 / 18px</span>
|
|
</div>
|
|
<div class="type-row">
|
|
<span class="type-size">16px</span>
|
|
<span style="font-size:16px;font-weight:400;color:var(--text-heading)">The quick brown fox</span>
|
|
<span class="type-meta">400 / normal</span>
|
|
</div>
|
|
<div class="type-row">
|
|
<span class="type-size">14px</span>
|
|
<span style="font-size:14px;font-weight:500;color:var(--text-heading)">The quick brown fox</span>
|
|
<span class="type-meta">500 / 19.6px</span>
|
|
</div>
|
|
<div class="type-row">
|
|
<span class="type-size">13.3333px</span>
|
|
<span style="font-size:13.3333px;font-weight:400;color:var(--text-heading)">The quick brown fox</span>
|
|
<span class="type-meta">400 / normal</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Spacing -->
|
|
|
|
<h2>Spacing Scale (base: 4px)</h2>
|
|
<div>
|
|
|
|
<div class="spacing-row">
|
|
<span class="spacing-label">1px</span>
|
|
<div class="spacing-bar" style="width:2px"></div>
|
|
</div>
|
|
<div class="spacing-row">
|
|
<span class="spacing-label">24px</span>
|
|
<div class="spacing-bar" style="width:48px"></div>
|
|
</div>
|
|
<div class="spacing-row">
|
|
<span class="spacing-label">32px</span>
|
|
<div class="spacing-bar" style="width:64px"></div>
|
|
</div>
|
|
<div class="spacing-row">
|
|
<span class="spacing-label">40px</span>
|
|
<div class="spacing-bar" style="width:80px"></div>
|
|
</div>
|
|
<div class="spacing-row">
|
|
<span class="spacing-label">60px</span>
|
|
<div class="spacing-bar" style="width:120px"></div>
|
|
</div>
|
|
<div class="spacing-row">
|
|
<span class="spacing-label">80px</span>
|
|
<div class="spacing-bar" style="width:160px"></div>
|
|
</div>
|
|
<div class="spacing-row">
|
|
<span class="spacing-label">96px</span>
|
|
<div class="spacing-bar" style="width:192px"></div>
|
|
</div>
|
|
<div class="spacing-row">
|
|
<span class="spacing-label">320px</span>
|
|
<div class="spacing-bar" style="width:500px"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Shadows -->
|
|
|
|
<h2>Box Shadows</h2>
|
|
<div class="grid grid-3">
|
|
|
|
<div class="shadow-card" style="box-shadow:rgb(170, 170, 170) 2px 2px 4px 0px">
|
|
<span class="shadow-label">sm</span>
|
|
</div>
|
|
<div class="shadow-card" style="box-shadow:rgba(23, 23, 23, 0.1) 2px 2px 8px 2px">
|
|
<span class="shadow-label">md</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Border Radii -->
|
|
|
|
<h2>Border Radii</h2>
|
|
<div style="display:flex;gap:16px;flex-wrap:wrap;align-items:end">
|
|
|
|
<div style="text-align:center">
|
|
<div class="radius-item" style="border-radius:4px">4px</div>
|
|
<div style="font-size:11px;color:#666;margin-top:6px">sm</div>
|
|
</div>
|
|
<div style="text-align:center">
|
|
<div class="radius-item" style="border-radius:8px">8px</div>
|
|
<div style="font-size:11px;color:#666;margin-top:6px">md</div>
|
|
</div>
|
|
<div style="text-align:center">
|
|
<div class="radius-item" style="border-radius:12px">12px</div>
|
|
<div style="font-size:11px;color:#666;margin-top:6px">lg</div>
|
|
</div>
|
|
<div style="text-align:center">
|
|
<div class="radius-item" style="border-radius:15px">15px</div>
|
|
<div style="font-size:11px;color:#666;margin-top:6px">lg</div>
|
|
</div>
|
|
<div style="text-align:center">
|
|
<div class="radius-item" style="border-radius:20px">20px</div>
|
|
<div style="font-size:11px;color:#666;margin-top:6px">xl</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Accessibility -->
|
|
|
|
<h2>Accessibility</h2>
|
|
<div style="display:flex;align-items:center;gap:24px;margin-bottom:24px">
|
|
<div class="a11y-score good">100%</div>
|
|
<div>
|
|
<div style="color:#fff;font-weight:600">WCAG Contrast Score</div>
|
|
<div style="color:#666;font-size:14px">0 passing / 0 failing color pairs</div>
|
|
</div>
|
|
</div>
|
|
|
|
<h3>Color Pair Analysis</h3>
|
|
|
|
|
|
|
|
<!-- Component Screenshots -->
|
|
|
|
|
|
</div>
|
|
<script>
|
|
function toggleTheme() {
|
|
const html = document.documentElement;
|
|
const current = html.getAttribute('data-theme');
|
|
html.setAttribute('data-theme', current === 'light' ? 'dark' : 'light');
|
|
}
|
|
document.querySelectorAll('.swatch').forEach(el => {
|
|
el.addEventListener('click', () => {
|
|
const hex = el.querySelector('.swatch-hex');
|
|
if (!hex) return;
|
|
navigator.clipboard.writeText(hex.textContent).then(() => {
|
|
let tip = el.querySelector('.copied-tip');
|
|
if (!tip) { tip = document.createElement('div'); tip.className = 'copied-tip'; tip.textContent = 'Copied!'; el.appendChild(tip); }
|
|
tip.classList.add('show');
|
|
setTimeout(() => tip.classList.remove('show'), 1200);
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |