298 lines
16 KiB
HTML
298 lines
16 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Inference Cooperative — visual-edge symmetric</title>
|
|
<style>
|
|
@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700;800&display=swap');
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
body { background: #faf8f5; color: #2d3327; font-family: 'Figtree', sans-serif; padding: 60px 40px; min-height: 100vh; }
|
|
h1 { font-size: 14px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: #6b7a62; margin-bottom: 8px; }
|
|
h2 { font-family: 'Figtree', sans-serif; font-size: 32px; font-weight: 700; color: #2d3327; margin-bottom: 16px; }
|
|
.subtitle { font-size: 15px; color: #6b7a62; margin-bottom: 48px; max-width: 600px; line-height: 1.5; }
|
|
.section-label { font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: #94a08c; margin-bottom: 20px; padding-bottom: 8px; border-bottom: 1px solid #e8e2d8; }
|
|
.section { margin-bottom: 64px; }
|
|
.logo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
|
|
.logo-card { background: #fff; border: 1px solid #e8e2d8; border-radius: 16px; padding: 36px 24px; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 240px; gap: 14px; position: relative; }
|
|
.logo-card .caption { position: absolute; bottom: 12px; left: 18px; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #94a08c; }
|
|
.logo-card .desc { position: absolute; bottom: 12px; right: 18px; font-size: 11px; color: #aab5a0; max-width: 130px; text-align: right; line-height: 1.4; }
|
|
.wm { font-family: 'Figtree', sans-serif; font-size: 20px; font-weight: 600; color: #2d3327; letter-spacing: -0.01em; }
|
|
.wm .accent { color: #5b8c5a; }
|
|
.url-sm { font-size: 13px; font-weight: 500; color: #5b8c5a; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<h1>Inference Cooperative</h1>
|
|
<h2>Visual-edge symmetry — R→L gradient, edges aligned</h2>
|
|
<p class="subtitle">Same R→L size gradient, but outer edges of each row are symmetric. The leftmost dot's left edge mirrors the rightmost dot's right edge. Airy spacing, no overlap. Figtree throughout.</p>
|
|
|
|
<div class="section">
|
|
<div class="section-label">Variations</div>
|
|
<div class="logo-grid">
|
|
|
|
<!-- A: Airy, visual-edge symmetric, three greens, aligned -->
|
|
<!-- Each row: left edge of leftmost = right edge of rightmost, mirrored around center=65 -->
|
|
<div class="logo-card">
|
|
<svg width="130" height="130" viewBox="0 0 130 130" fill="none">
|
|
<!-- Row 1: 1 dot, center -->
|
|
<circle cx="65" cy="14" r="5" fill="#5b8c5a"/>
|
|
<!-- Row 2: 2 dots. Left r=6, right r=4. Edges at 65±11 -->
|
|
<!-- Left: cx = 65-11+6 = 60, r=6 → edge at 54. Right: cx = 65+11-4 = 72, r=4 → edge at 76. Mirror: 65-11=54, 65+11=76 -->
|
|
<circle cx="60" cy="30" r="6" fill="#7ab87a"/>
|
|
<circle cx="72" cy="30" r="4" fill="#6ba86b"/>
|
|
<!-- Row 3: 3 dots. Left r=6.5, mid r=5, right r=4. Edges at 65±18 -->
|
|
<!-- Left: cx=65-18+6.5=53.5. Right: cx=65+18-4=79. Mid: cx=65 -->
|
|
<circle cx="53.5" cy="46" r="6.5" fill="#5b8c5a"/>
|
|
<circle cx="65" cy="46" r="5" fill="#7ab87a"/>
|
|
<circle cx="79" cy="46" r="4" fill="#6ba86b"/>
|
|
<!-- Row 4: 4 dots. r=7, 5.5, 4.5, 3.5. Edges at 65±25 -->
|
|
<circle cx="47" cy="62" r="7" fill="#6ba86b"/>
|
|
<circle cx="62" cy="62" r="5.5" fill="#5b8c5a"/>
|
|
<circle cx="76" cy="62" r="4.5" fill="#7ab87a"/>
|
|
<circle cx="87.5" cy="62" r="3.5" fill="#6ba86b"/>
|
|
<!-- Row 5: 5 dots. r=7.5, 6, 5, 4, 3.5. Edges at 65±32 -->
|
|
<circle cx="39.5" cy="78" r="7.5" fill="#5b8c5a"/>
|
|
<circle cx="56" cy="78" r="6" fill="#7ab87a"/>
|
|
<circle cx="70" cy="78" r="5" fill="#6ba86b"/>
|
|
<circle cx="83" cy="78" r="4" fill="#5b8c5a"/>
|
|
<circle cx="94.5" cy="78" r="3.5" fill="#7ab87a"/>
|
|
<!-- Row 6: 4 dots. r=6.5, 5.5, 4.5, 3.5. Edges at 65±25 -->
|
|
<circle cx="47" cy="94" r="6.5" fill="#6ba86b"/>
|
|
<circle cx="62" cy="94" r="5.5" fill="#5b8c5a"/>
|
|
<circle cx="76" cy="94" r="4.5" fill="#7ab87a"/>
|
|
<circle cx="87.5" cy="94" r="3.5" fill="#6ba86b"/>
|
|
<!-- Row 7: 3 dots. r=5.5, 4.5, 3.5. Edges at 65±18 -->
|
|
<circle cx="53.5" cy="110" r="5.5" fill="#5b8c5a"/>
|
|
<circle cx="65" cy="110" r="4.5" fill="#7ab87a"/>
|
|
<circle cx="79.5" cy="110" r="3.5" fill="#6ba86b"/>
|
|
</svg>
|
|
<div class="wm">Inference <span class="accent">Cooperative</span></div>
|
|
<div class="url-sm">inference.coop</div>
|
|
<div class="caption">A. Edge-Symmetric</div>
|
|
<div class="desc">Outer edges mirror — visually balanced R→L gradient</div>
|
|
</div>
|
|
|
|
<!-- B: Same but hex offset (alternate rows shifted) -->
|
|
<div class="logo-card">
|
|
<svg width="130" height="130" viewBox="0 0 130 130" fill="none">
|
|
<!-- Row 1 -->
|
|
<circle cx="65" cy="14" r="5" fill="#5b8c5a"/>
|
|
<!-- Row 2 (offset by ~3px) -->
|
|
<circle cx="57" cy="30" r="6" fill="#7ab87a"/>
|
|
<circle cx="69" cy="30" r="4" fill="#6ba86b"/>
|
|
<!-- Row 3 -->
|
|
<circle cx="53.5" cy="46" r="6.5" fill="#5b8c5a"/>
|
|
<circle cx="65" cy="46" r="5" fill="#7ab87a"/>
|
|
<circle cx="79" cy="46" r="4" fill="#6ba86b"/>
|
|
<!-- Row 4 (offset) -->
|
|
<circle cx="44" cy="62" r="7" fill="#6ba86b"/>
|
|
<circle cx="59" cy="62" r="5.5" fill="#5b8c5a"/>
|
|
<circle cx="73" cy="62" r="4.5" fill="#7ab87a"/>
|
|
<circle cx="84.5" cy="62" r="3.5" fill="#6ba86b"/>
|
|
<!-- Row 5 -->
|
|
<circle cx="39.5" cy="78" r="7.5" fill="#5b8c5a"/>
|
|
<circle cx="56" cy="78" r="6" fill="#7ab87a"/>
|
|
<circle cx="70" cy="78" r="5" fill="#6ba86b"/>
|
|
<circle cx="83" cy="78" r="4" fill="#5b8c5a"/>
|
|
<circle cx="94.5" cy="78" r="3.5" fill="#7ab87a"/>
|
|
<!-- Row 6 (offset) -->
|
|
<circle cx="44" cy="94" r="6.5" fill="#6ba86b"/>
|
|
<circle cx="59" cy="94" r="5.5" fill="#5b8c5a"/>
|
|
<circle cx="73" cy="94" r="4.5" fill="#7ab87a"/>
|
|
<circle cx="84.5" cy="94" r="3.5" fill="#6ba86b"/>
|
|
<!-- Row 7 -->
|
|
<circle cx="53.5" cy="110" r="5.5" fill="#5b8c5a"/>
|
|
<circle cx="65" cy="110" r="4.5" fill="#7ab87a"/>
|
|
<circle cx="79.5" cy="110" r="3.5" fill="#6ba86b"/>
|
|
</svg>
|
|
<div class="wm">Inference <span class="accent">Cooperative</span></div>
|
|
<div class="url-sm">inference.coop</div>
|
|
<caption>B. Edge-Sym Hex</caption>
|
|
<div class="desc">Same edge symmetry, hex offset rows</div>
|
|
</div>
|
|
|
|
<!-- C: More rows, tighter taper, edge-symmetric -->
|
|
<div class="logo-card">
|
|
<svg width="130" height="130" viewBox="0 0 130 130" fill="none">
|
|
<!-- Row 1 -->
|
|
<circle cx="65" cy="12" r="4" fill="#5b8c5a"/>
|
|
<!-- Row 2: edges at 65±9. r=5, r=4 -->
|
|
<circle cx="61" cy="24" r="5" fill="#7ab87a"/>
|
|
<circle cx="70" cy="24" r="4" fill="#6ba86b"/>
|
|
<!-- Row 3: edges at 65±14. r=5.5, r=4.5, r=3.5 -->
|
|
<circle cx="55.5" cy="36" r="5.5" fill="#5b8c5a"/>
|
|
<circle cx="65" cy="36" r="4.5" fill="#7ab87a"/>
|
|
<circle cx="73.5" cy="36" r="3.5" fill="#6ba86b"/>
|
|
<!-- Row 4: edges at 65±20. r=6, r=5, r=4, r=3.5 -->
|
|
<circle cx="49" cy="48" r="6" fill="#6ba86b"/>
|
|
<circle cx="60" cy="48" r="5" fill="#5b8c5a"/>
|
|
<circle cx="69.5" cy="48" r="4" fill="#7ab87a"/>
|
|
<circle cx="78" cy="48" r="3.5" fill="#6ba86b"/>
|
|
<!-- Row 5: edges at 65±26. r=6.5, r=5.5, r=4.5, r=4, r=3.5 -->
|
|
<circle cx="42.5" cy="60" r="6.5" fill="#5b8c5a"/>
|
|
<circle cx="55" cy="60" r="5.5" fill="#7ab87a"/>
|
|
<circle cx="66" cy="60" r="4.5" fill="#6ba86b"/>
|
|
<circle cx="75" cy="60" r="4" fill="#5b8c5a"/>
|
|
<circle cx="84.5" cy="60" r="3.5" fill="#7ab87a"/>
|
|
<!-- Row 6: edges at 65±30. r=7, r=5.5, r=5, r=4, r=3.5 -->
|
|
<circle cx="38" cy="72" r="7" fill="#6ba86b"/>
|
|
<circle cx="51" cy="72" r="5.5" fill="#5b8c5a"/>
|
|
<circle cx="63" cy="72" r="5" fill="#7ab87a"/>
|
|
<circle cx="74" cy="72" r="4" fill="#6ba86b"/>
|
|
<circle cx="84.5" cy="72" r="3.5" fill="#5b8c5a"/>
|
|
<!-- Row 7 (widest): edges at 65±35. r=7.5, r=6, r=5, r=4.5, r=4, r=3.5 -->
|
|
<circle cx="32.5" cy="84" r="7.5" fill="#5b8c5a"/>
|
|
<circle cx="47" cy="84" r="6" fill="#7ab87a"/>
|
|
<circle cx="60" cy="84" r="5" fill="#6ba86b"/>
|
|
<circle cx="71.5" cy="84" r="4.5" fill="#5b8c5a"/>
|
|
<circle cx="81" cy="84" r="4" fill="#7ab87a"/>
|
|
<circle cx="90.5" cy="84" r="3.5" fill="#6ba86b"/>
|
|
<!-- Row 8: edges at 65±28. r=6.5, r=5.5, r=4.5, r=4, r=3.5 -->
|
|
<circle cx="40.5" cy="96" r="6.5" fill="#6ba86b"/>
|
|
<circle cx="53" cy="96" r="5.5" fill="#5b8c5a"/>
|
|
<circle cx="64" cy="96" r="4.5" fill="#7ab87a"/>
|
|
<circle cx="73" cy="96" r="4" fill="#6ba86b"/>
|
|
<circle cx="82.5" cy="96" r="3.5" fill="#5b8c5a"/>
|
|
<!-- Row 9: edges at 65±20. r=5.5, r=5, r=4, r=3.5 -->
|
|
<circle cx="49.5" cy="108" r="5.5" fill="#7ab87a"/>
|
|
<circle cx="60" cy="108" r="5" fill="#5b8c5a"/>
|
|
<circle cx="69" cy="108" r="4" fill="#6ba86b"/>
|
|
<circle cx="77.5" cy="108" r="3.5" fill="#7ab87a"/>
|
|
<!-- Row 10: edges at 65±12. r=5, r=4 -->
|
|
<circle cx="58" cy="120" r="5" fill="#5b8c5a"/>
|
|
<circle cx="67" cy="120" r="4" fill="#7ab87a"/>
|
|
</svg>
|
|
<div class="wm">Inference <span class="accent">Cooperative</span></div>
|
|
<div class="url-sm">inference.coop</div>
|
|
<div class="caption">C. Tall Edge-Sym</div>
|
|
<div class="desc">More rows, fine taper, edge-symmetric throughout</div>
|
|
</div>
|
|
|
|
<!-- D: Two-tone, edge-symmetric, airy -->
|
|
<div class="logo-card">
|
|
<svg width="130" height="130" viewBox="0 0 130 130" fill="none">
|
|
<!-- Row 1 -->
|
|
<circle cx="65" cy="14" r="5" fill="#5b8c5a"/>
|
|
<!-- Row 2 -->
|
|
<circle cx="60" cy="30" r="6" fill="#7ab87a"/>
|
|
<circle cx="72" cy="30" r="4" fill="#5b8c5a"/>
|
|
<!-- Row 3 -->
|
|
<circle cx="53.5" cy="46" r="6.5" fill="#7ab87a"/>
|
|
<circle cx="65" cy="46" r="5" fill="#5b8c5a"/>
|
|
<circle cx="79" cy="46" r="4" fill="#7ab87a"/>
|
|
<!-- Row 4 -->
|
|
<circle cx="47" cy="62" r="7" fill="#5b8c5a"/>
|
|
<circle cx="62" cy="62" r="5.5" fill="#7ab87a"/>
|
|
<circle cx="76" cy="62" r="4.5" fill="#5b8c5a"/>
|
|
<circle cx="87.5" cy="62" r="3.5" fill="#7ab87a"/>
|
|
<!-- Row 5 -->
|
|
<circle cx="39.5" cy="78" r="7.5" fill="#7ab87a"/>
|
|
<circle cx="56" cy="78" r="6" fill="#5b8c5a"/>
|
|
<circle cx="70" cy="78" r="5" fill="#7ab87a"/>
|
|
<circle cx="83" cy="78" r="4" fill="#5b8c5a"/>
|
|
<circle cx="94.5" cy="78" r="3.5" fill="#7ab87a"/>
|
|
<!-- Row 6 -->
|
|
<circle cx="47" cy="94" r="6.5" fill="#5b8c5a"/>
|
|
<circle cx="62" cy="94" r="5.5" fill="#7ab87a"/>
|
|
<circle cx="76" cy="94" r="4.5" fill="#5b8c5a"/>
|
|
<circle cx="87.5" cy="94" r="3.5" fill="#7ab87a"/>
|
|
<!-- Row 7 -->
|
|
<circle cx="53.5" cy="110" r="5.5" fill="#7ab87a"/>
|
|
<circle cx="65" cy="110" r="4.5" fill="#5b8c5a"/>
|
|
<circle cx="79.5" cy="110" r="3.5" fill="#7ab87a"/>
|
|
</svg>
|
|
<div class="wm">Inference <span class="accent">Cooperative</span></div>
|
|
<div class="url-sm">inference.coop</div>
|
|
<div class="caption">D. Edge-Sym 2-Tone</div>
|
|
<div class="desc">Visual-edge symmetry, two greens only</div>
|
|
</div>
|
|
|
|
<!-- E: Edge-symmetric, three greens, wider spacing between dots -->
|
|
<div class="logo-card">
|
|
<svg width="130" height="130" viewBox="0 0 130 130" fill="none">
|
|
<!-- Row 1 -->
|
|
<circle cx="65" cy="14" r="5" fill="#5b8c5a"/>
|
|
<!-- Row 2: edges at 65±13. r=6, r=4. Gap between: 13-6-4=3 -->
|
|
<circle cx="58" cy="30" r="6" fill="#7ab87a"/>
|
|
<circle cx="74" cy="30" r="4" fill="#6ba86b"/>
|
|
<!-- Row 3: edges at 65±20. r=6.5, r=5, r=4. Even gaps -->
|
|
<circle cx="51.5" cy="46" r="6.5" fill="#5b8c5a"/>
|
|
<circle cx="65" cy="46" r="5" fill="#7ab87a"/>
|
|
<circle cx="81" cy="46" r="4" fill="#6ba86b"/>
|
|
<!-- Row 4: edges at 65±28. r=7, r=5.5, r=4.5, r=3.5 -->
|
|
<circle cx="44" cy="62" r="7" fill="#6ba86b"/>
|
|
<circle cx="61" cy="62" r="5.5" fill="#5b8c5a"/>
|
|
<circle cx="76" cy="62" r="4.5" fill="#7ab87a"/>
|
|
<circle cx="89.5" cy="62" r="3.5" fill="#6ba86b"/>
|
|
<!-- Row 5: edges at 65±36. r=7.5, r=6, r=5, r=4, r=3.5 -->
|
|
<circle cx="36.5" cy="78" r="7.5" fill="#5b8c5a"/>
|
|
<circle cx="54" cy="78" r="6" fill="#7ab87a"/>
|
|
<circle cx="70" cy="78" r="5" fill="#6ba86b"/>
|
|
<circle cx="84" cy="78" r="4" fill="#5b8c5a"/>
|
|
<circle cx="97.5" cy="78" r="3.5" fill="#7ab87a"/>
|
|
<!-- Row 6: edges at 65±28 -->
|
|
<circle cx="44" cy="94" r="6.5" fill="#6ba86b"/>
|
|
<circle cx="61" cy="94" r="5.5" fill="#5b8c5a"/>
|
|
<circle cx="76" cy="94" r="4.5" fill="#7ab87a"/>
|
|
<circle cx="89.5" cy="94" r="3.5" fill="#6ba86b"/>
|
|
<!-- Row 7: edges at 65±20 -->
|
|
<circle cx="51.5" cy="110" r="5.5" fill="#5b8c5a"/>
|
|
<circle cx="65" cy="110" r="4.5" fill="#7ab87a"/>
|
|
<circle cx="81" cy="110" r="3.5" fill="#6ba86b"/>
|
|
</svg>
|
|
<div class="wm">Inference <span class="accent">Cooperative</span></div>
|
|
<div class="url-sm">inference.coop</div>
|
|
<div class="caption">E. Wide Edge-Sym</div>
|
|
<div class="desc">More generous gaps, edge-symmetric, three greens</div>
|
|
</div>
|
|
|
|
<!-- F: Edge-symmetric, subtle gradient (less extreme size difference) -->
|
|
<div class="logo-card">
|
|
<svg width="130" height="130" viewBox="0 0 130 130" fill="none">
|
|
<!-- Row 1 -->
|
|
<circle cx="65" cy="14" r="5" fill="#5b8c5a"/>
|
|
<!-- Row 2: edges at 65±11. r=5.5, r=4.5. Subtle -->
|
|
<circle cx="59.5" cy="30" r="5.5" fill="#7ab87a"/>
|
|
<circle cx="71.5" cy="30" r="4.5" fill="#6ba86b"/>
|
|
<!-- Row 3: edges at 65±17. r=6, r=5, r=4 -->
|
|
<circle cx="52" cy="46" r="6" fill="#5b8c5a"/>
|
|
<circle cx="65" cy="46" r="5" fill="#7ab87a"/>
|
|
<circle cx="78" cy="46" r="4" fill="#6ba86b"/>
|
|
<!-- Row 4: edges at 65±23. r=6.5, r=5.5, r=4.5, r=3.5 -->
|
|
<circle cx="46.5" cy="62" r="6.5" fill="#6ba86b"/>
|
|
<circle cx="60.5" cy="62" r="5.5" fill="#5b8c5a"/>
|
|
<circle cx="73.5" cy="62" r="4.5" fill="#7ab87a"/>
|
|
<circle cx="85.5" cy="62" r="3.5" fill="#6ba86b"/>
|
|
<!-- Row 5: edges at 65±30. r=7, r=6, r=5, r=4, r=3.5 -->
|
|
<circle cx="42" cy="78" r="7" fill="#5b8c5a"/>
|
|
<circle cx="56" cy="78" r="6" fill="#7ab87a"/>
|
|
<circle cx="69" cy="78" r="5" fill="#6ba86b"/>
|
|
<circle cx="81" cy="78" r="4" fill="#5b8c5a"/>
|
|
<circle cx="92.5" cy="78" r="3.5" fill="#7ab87a"/>
|
|
<!-- Row 6: edges at 65±23 -->
|
|
<circle cx="46.5" cy="94" r="6" fill="#6ba86b"/>
|
|
<circle cx="60.5" cy="94" r="5.5" fill="#5b8c5a"/>
|
|
<circle cx="73.5" cy="94" r="4.5" fill="#7ab87a"/>
|
|
<circle cx="85.5" cy="94" r="3.5" fill="#6ba86b"/>
|
|
<!-- Row 7: edges at 65±17 -->
|
|
<circle cx="52" cy="110" r="5.5" fill="#5b8c5a"/>
|
|
<circle cx="65" cy="110" r="4.5" fill="#7ab87a"/>
|
|
<circle cx="78" cy="110" r="3.5" fill="#6ba86b"/>
|
|
</svg>
|
|
<div class="wm">Inference <span class="accent">Cooperative</span></div>
|
|
<div class="url-sm">inference.coop</div>
|
|
<div class="caption">F. Subtle Edge-Sym</div>
|
|
<div class="desc">Gentler size gradient — less extreme, more cohesive</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div style="margin-top: 48px; font-size: 13px; color: #94a08c; line-height: 1.6; max-width: 600px;">
|
|
<strong>Visual-edge symmetric R→L gradient.</strong> Each row's outer edges mirror around center. The leftmost dot's left edge = the rightmost dot's right edge. No overlap. A: aligned, airy. B: hex offset. C: more rows, fine taper. D: two-tone. E: wider gaps. F: subtle gradient (less extreme size difference). Figtree OFL. All SVG.
|
|
</div>
|
|
|
|
</body>
|
|
</html> |