Initial commit: design-assets
This commit is contained in:
commit
88f79d99f5
9 files changed
+944
No files matched your search
@@ -0,0 +1,528 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Inference Cooperative — brand materials</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; }
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--cream: #faf8f5;
|
||||||
|
--white: #ffffff;
|
||||||
|
--ink: #2d3327;
|
||||||
|
--muted: #6b7a62;
|
||||||
|
--light-muted: #94a08c;
|
||||||
|
--faint: #aab5a0;
|
||||||
|
--green-deep: #5b8c5a;
|
||||||
|
--green-mid: #6ba86b;
|
||||||
|
--green-light: #7ab87a;
|
||||||
|
--green-pale: #8bc88b;
|
||||||
|
--brown: #8b7355;
|
||||||
|
--border: #e8e2d8;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
background: var(--cream);
|
||||||
|
color: var(--ink);
|
||||||
|
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: var(--muted); margin-bottom: 8px; }
|
||||||
|
h2 { font-family: 'Figtree', sans-serif; font-size: 32px; font-weight: 700; color: var(--ink); margin-bottom: 16px; }
|
||||||
|
h3 { font-family: 'Figtree', sans-serif; font-size: 20px; font-weight: 600; color: var(--ink); margin-bottom: 16px; }
|
||||||
|
|
||||||
|
.subtitle { font-size: 15px; color: var(--muted); margin-bottom: 48px; max-width: 600px; line-height: 1.5; }
|
||||||
|
|
||||||
|
.section { margin-bottom: 64px; }
|
||||||
|
.section-label { font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--light-muted); margin-bottom: 20px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
|
||||||
|
|
||||||
|
/* === Color palette === */
|
||||||
|
.palette { display: flex; gap: 16px; flex-wrap: wrap; }
|
||||||
|
.swatch { display: flex; flex-direction: column; align-items: center; gap: 8px; }
|
||||||
|
.swatch .color { width: 80px; height: 80px; border-radius: 12px; border: 1px solid var(--border); }
|
||||||
|
.swatch .name { font-size: 12px; font-weight: 500; color: var(--ink); }
|
||||||
|
.swatch .hex { font-size: 11px; color: var(--light-muted); font-family: 'Figtree', monospace; }
|
||||||
|
|
||||||
|
/* === Logo === */
|
||||||
|
.logo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
|
||||||
|
.logo-cell { background: var(--white); border: 1px solid var(--border); border-radius: 16px; padding: 36px 24px; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 200px; gap: 12px; }
|
||||||
|
.logo-cell.dark { background: #1a2418; border-color: #2a3528; }
|
||||||
|
.logo-cell .caption { font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--light-muted); }
|
||||||
|
.logo-cell.dark .caption { color: #5a6b52; }
|
||||||
|
|
||||||
|
.wm { font-family: 'Figtree', sans-serif; font-size: 22px; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; }
|
||||||
|
.wm .accent { color: var(--green-deep); }
|
||||||
|
.logo-cell.dark .wm { color: #e4e7ec; }
|
||||||
|
.logo-cell.dark .wm .accent { color: var(--green-light); }
|
||||||
|
.url-mark { font-family: 'Figtree', sans-serif; font-size: 13px; font-weight: 500; color: var(--green-deep); }
|
||||||
|
.logo-cell.dark .url-mark { color: var(--green-light); }
|
||||||
|
|
||||||
|
/* === Typography === */
|
||||||
|
.type-spec { background: var(--white); border: 1px solid var(--border); border-radius: 16px; padding: 32px; margin-bottom: 16px; }
|
||||||
|
.type-spec .label { font-size: 11px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--light-muted); margin-bottom: 8px; }
|
||||||
|
.type-spec .sample { margin-bottom: 8px; }
|
||||||
|
.type-spec .meta { font-size: 12px; color: var(--muted); }
|
||||||
|
|
||||||
|
/* === Business card === */
|
||||||
|
.card-container { display: flex; gap: 32px; flex-wrap: wrap; }
|
||||||
|
.business-card { width: 340px; height: 200px; background: var(--white); border: 1px solid var(--border); border-radius: 12px; padding: 28px; display: flex; flex-direction: column; justify-content: space-between; box-shadow: 0 2px 8px rgba(0,0,0,0.04); }
|
||||||
|
.business-card .top { display: flex; align-items: center; gap: 12px; }
|
||||||
|
.business-card .info { font-size: 13px; color: var(--muted); line-height: 1.5; }
|
||||||
|
.business-card .info strong { color: var(--ink); font-weight: 600; }
|
||||||
|
.business-card .url { font-family: 'Figtree', monospace; font-size: 12px; color: var(--green-deep); }
|
||||||
|
|
||||||
|
/* === App icon === */
|
||||||
|
.icon-grid { display: flex; gap: 24px; align-items: center; }
|
||||||
|
.icon-cell { display: flex; flex-direction: column; align-items: center; gap: 8px; }
|
||||||
|
.icon-cell .caption { font-size: 11px; color: var(--light-muted); }
|
||||||
|
.icon-box { border-radius: 16px; border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; background: var(--white); }
|
||||||
|
.icon-box.dark { background: #1a2418; border-color: #2a3528; }
|
||||||
|
|
||||||
|
/* === Banner === */
|
||||||
|
.banner { background: var(--white); border: 1px solid var(--border); border-radius: 16px; padding: 40px 48px; display: flex; align-items: center; gap: 24px; }
|
||||||
|
.banner .text h3 { margin-bottom: 4px; }
|
||||||
|
.banner .text p { font-size: 14px; color: var(--muted); line-height: 1.5; max-width: 400px; }
|
||||||
|
.banner .url-mark { font-size: 13px; margin-top: 6px; }
|
||||||
|
|
||||||
|
/* === UI === */
|
||||||
|
.ui-row { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
|
||||||
|
.btn { padding: 10px 24px; border-radius: 8px; font-family: 'Figtree', sans-serif; font-size: 14px; font-weight: 600; border: none; cursor: pointer; transition: opacity 0.2s; }
|
||||||
|
.btn:hover { opacity: 0.9; }
|
||||||
|
.btn-primary { background: var(--green-deep); color: var(--white); }
|
||||||
|
.btn-secondary { background: transparent; color: var(--green-deep); border: 1.5px solid var(--green-deep); }
|
||||||
|
.btn-ghost { background: transparent; color: var(--muted); border: 1px solid var(--border); }
|
||||||
|
.tag { display: inline-block; padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: 500; background: #e8f5e8; color: var(--green-deep); }
|
||||||
|
.tag.neutral { background: #f0ede8; color: var(--muted); }
|
||||||
|
|
||||||
|
.footer { margin-top: 64px; padding-top: 24px; border-top: 1px solid var(--border); font-size: 13px; color: var(--light-muted); line-height: 1.6; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<h1>Brand materials</h1>
|
||||||
|
<h2>Inference Cooperative</h2>
|
||||||
|
<p class="subtitle">Green circles in a pine tree silhouette with a right-to-left size gradient. Visual-edge symmetric, airy spacing. Figtree throughout.</p>
|
||||||
|
|
||||||
|
<!-- ==================== LOGO ==================== -->
|
||||||
|
|
||||||
|
<div class="section">
|
||||||
|
<div class="section-label">Logo</div>
|
||||||
|
<div class="logo-grid">
|
||||||
|
|
||||||
|
<!-- Full logo on light -->
|
||||||
|
<div class="logo-cell">
|
||||||
|
<svg width="100" height="100" viewBox="0 0 130 130" fill="none">
|
||||||
|
<circle cx="65" cy="14" r="5" fill="#5b8c5a"/>
|
||||||
|
<circle cx="58" cy="30" r="6" fill="#7ab87a"/>
|
||||||
|
<circle cx="74" cy="30" r="4" fill="#6ba86b"/>
|
||||||
|
<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"/>
|
||||||
|
<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"/>
|
||||||
|
<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"/>
|
||||||
|
<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"/>
|
||||||
|
<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 style="display: flex; flex-direction: column; align-items: center; gap: 2px;">
|
||||||
|
<div class="wm">Inference <span class="accent">Cooperative</span></div>
|
||||||
|
<div class="url-mark">inference.coop</div>
|
||||||
|
</div>
|
||||||
|
<div class="caption">Full — light</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Full logo on dark -->
|
||||||
|
<div class="logo-cell dark">
|
||||||
|
<svg width="100" height="100" viewBox="0 0 130 130" fill="none">
|
||||||
|
<circle cx="65" cy="14" r="5" fill="#7ab87a"/>
|
||||||
|
<circle cx="58" cy="30" r="6" fill="#8bc88b"/>
|
||||||
|
<circle cx="74" cy="30" r="4" fill="#9bd99b"/>
|
||||||
|
<circle cx="51.5" cy="46" r="6.5" fill="#7ab87a"/>
|
||||||
|
<circle cx="65" cy="46" r="5" fill="#8bc88b"/>
|
||||||
|
<circle cx="81" cy="46" r="4" fill="#9bd99b"/>
|
||||||
|
<circle cx="44" cy="62" r="7" fill="#9bd99b"/>
|
||||||
|
<circle cx="61" cy="62" r="5.5" fill="#7ab87a"/>
|
||||||
|
<circle cx="76" cy="62" r="4.5" fill="#8bc88b"/>
|
||||||
|
<circle cx="89.5" cy="62" r="3.5" fill="#9bd99b"/>
|
||||||
|
<circle cx="36.5" cy="78" r="7.5" fill="#7ab87a"/>
|
||||||
|
<circle cx="54" cy="78" r="6" fill="#8bc88b"/>
|
||||||
|
<circle cx="70" cy="78" r="5" fill="#9bd99b"/>
|
||||||
|
<circle cx="84" cy="78" r="4" fill="#7ab87a"/>
|
||||||
|
<circle cx="97.5" cy="78" r="3.5" fill="#8bc88b"/>
|
||||||
|
<circle cx="44" cy="94" r="6.5" fill="#9bd99b"/>
|
||||||
|
<circle cx="61" cy="94" r="5.5" fill="#7ab87a"/>
|
||||||
|
<circle cx="76" cy="94" r="4.5" fill="#8bc88b"/>
|
||||||
|
<circle cx="89.5" cy="94" r="3.5" fill="#9bd99b"/>
|
||||||
|
<circle cx="51.5" cy="110" r="5.5" fill="#7ab87a"/>
|
||||||
|
<circle cx="65" cy="110" r="4.5" fill="#8bc88b"/>
|
||||||
|
<circle cx="81" cy="110" r="3.5" fill="#9bd99b"/>
|
||||||
|
</svg>
|
||||||
|
<div style="display: flex; flex-direction: column; align-items: center; gap: 2px;">
|
||||||
|
<div class="wm">Inference <span class="accent">Cooperative</span></div>
|
||||||
|
<div class="url-mark">inference.coop</div>
|
||||||
|
</div>
|
||||||
|
<div class="caption">Full — dark</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Mark only -->
|
||||||
|
<div class="logo-cell">
|
||||||
|
<svg width="90" height="90" viewBox="0 0 130 130" fill="none">
|
||||||
|
<circle cx="65" cy="14" r="5" fill="#5b8c5a"/>
|
||||||
|
<circle cx="58" cy="30" r="6" fill="#7ab87a"/>
|
||||||
|
<circle cx="74" cy="30" r="4" fill="#6ba86b"/>
|
||||||
|
<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"/>
|
||||||
|
<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"/>
|
||||||
|
<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"/>
|
||||||
|
<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"/>
|
||||||
|
<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="caption">Mark only</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- ==================== COLOR PALETTE ==================== -->
|
||||||
|
|
||||||
|
<div class="section">
|
||||||
|
<div class="section-label">Color palette</div>
|
||||||
|
<div class="palette">
|
||||||
|
<div class="swatch"><div class="color" style="background: #faf8f5;"></div><div class="name">Cream</div><div class="hex">#faf8f5</div></div>
|
||||||
|
<div class="swatch"><div class="color" style="background: #ffffff;"></div><div class="name">White</div><div class="hex">#ffffff</div></div>
|
||||||
|
<div class="swatch"><div class="color" style="background: #2d3327;"></div><div class="name">Ink</div><div class="hex">#2d3327</div></div>
|
||||||
|
<div class="swatch"><div class="color" style="background: #6b7a62;"></div><div class="name">Muted</div><div class="hex">#6b7a62</div></div>
|
||||||
|
<div class="swatch"><div class="color" style="background: #5b8c5a;"></div><div class="name">Forest</div><div class="hex">#5b8c5a</div></div>
|
||||||
|
<div class="swatch"><div class="color" style="background: #6ba86b;"></div><div class="name">Pine</div><div class="hex">#6ba86b</div></div>
|
||||||
|
<div class="swatch"><div class="color" style="background: #7ab87a;"></div><div class="name">Sage</div><div class="hex">#7ab87a</div></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- ==================== TYPOGRAPHY ==================== -->
|
||||||
|
|
||||||
|
<div class="section">
|
||||||
|
<div class="section-label">Typography</div>
|
||||||
|
|
||||||
|
<div class="type-spec">
|
||||||
|
<div class="label">Headlines & body — Figtree (OFL)</div>
|
||||||
|
<div class="sample" style="font-family: 'Figtree', sans-serif; font-size: 36px; font-weight: 700; color: var(--ink);">Private AI, owned together</div>
|
||||||
|
<div class="meta">Figtree 400/500/600/700 — friendly, legible, clean. Used for everything: headings, body, UI, wordmark.</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="type-spec">
|
||||||
|
<div class="label">Body copy</div>
|
||||||
|
<div class="sample" style="font-family: 'Figtree', sans-serif; font-size: 16px; color: var(--ink); line-height: 1.6;">The Inference Cooperative is a member-owned cooperative providing private AI inference. Your conversations are protected by trusted execution environments — not pinky promises. You own the cooperative; the cooperative doesn't own your data.</div>
|
||||||
|
<div class="meta">Figtree 400 — clean, highly legible at all sizes.</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="type-spec">
|
||||||
|
<div class="label">Scale</div>
|
||||||
|
<div style="display: flex; flex-direction: column; gap: 8px;">
|
||||||
|
<div style="font-family: 'Figtree', sans-serif; font-size: 36px; font-weight: 700;">H1 — 36px Figtree 700</div>
|
||||||
|
<div style="font-family: 'Figtree', sans-serif; font-size: 28px; font-weight: 700;">H2 — 28px Figtree 700</div>
|
||||||
|
<div style="font-family: 'Figtree', sans-serif; font-size: 20px; font-weight: 600;">H3 — 20px Figtree 600</div>
|
||||||
|
<div style="font-family: 'Figtree', sans-serif; font-size: 16px; font-weight: 500;">Body — 16px Figtree 400/500</div>
|
||||||
|
<div style="font-family: 'Figtree', sans-serif; font-size: 14px; font-weight: 500; color: var(--muted);">Small — 14px Figtree 500</div>
|
||||||
|
<div style="font-family: 'Figtree', sans-serif; font-size: 12px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--light-muted);">Caption — 12px Figtree 500 uppercase</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- ==================== APP ICONS ==================== -->
|
||||||
|
|
||||||
|
<div class="section">
|
||||||
|
<div class="section-label">App icons & favicon</div>
|
||||||
|
<div class="icon-grid">
|
||||||
|
|
||||||
|
<div class="icon-cell">
|
||||||
|
<div class="icon-box" style="width: 72px; height: 72px;">
|
||||||
|
<svg width="60" height="60" viewBox="0 0 130 130" fill="none">
|
||||||
|
<circle cx="65" cy="14" r="5" fill="#5b8c5a"/>
|
||||||
|
<circle cx="58" cy="30" r="6" fill="#7ab87a"/>
|
||||||
|
<circle cx="74" cy="30" r="4" fill="#6ba86b"/>
|
||||||
|
<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"/>
|
||||||
|
<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"/>
|
||||||
|
<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"/>
|
||||||
|
<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"/>
|
||||||
|
<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>
|
||||||
|
<div class="caption">72px — light</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="icon-cell">
|
||||||
|
<div class="icon-box dark" style="width: 72px; height: 72px;">
|
||||||
|
<svg width="60" height="60" viewBox="0 0 130 130" fill="none">
|
||||||
|
<circle cx="65" cy="14" r="5" fill="#7ab87a"/>
|
||||||
|
<circle cx="58" cy="30" r="6" fill="#8bc88b"/>
|
||||||
|
<circle cx="74" cy="30" r="4" fill="#9bd99b"/>
|
||||||
|
<circle cx="51.5" cy="46" r="6.5" fill="#7ab87a"/>
|
||||||
|
<circle cx="65" cy="46" r="5" fill="#8bc88b"/>
|
||||||
|
<circle cx="81" cy="46" r="4" fill="#9bd99b"/>
|
||||||
|
<circle cx="44" cy="62" r="7" fill="#9bd99b"/>
|
||||||
|
<circle cx="61" cy="62" r="5.5" fill="#7ab87a"/>
|
||||||
|
<circle cx="76" cy="62" r="4.5" fill="#8bc88b"/>
|
||||||
|
<circle cx="89.5" cy="62" r="3.5" fill="#9bd99b"/>
|
||||||
|
<circle cx="36.5" cy="78" r="7.5" fill="#7ab87a"/>
|
||||||
|
<circle cx="54" cy="78" r="6" fill="#8bc88b"/>
|
||||||
|
<circle cx="70" cy="78" r="5" fill="#9bd99b"/>
|
||||||
|
<circle cx="84" cy="78" r="4" fill="#7ab87a"/>
|
||||||
|
<circle cx="97.5" cy="78" r="3.5" fill="#8bc88b"/>
|
||||||
|
<circle cx="44" cy="94" r="6.5" fill="#9bd99b"/>
|
||||||
|
<circle cx="61" cy="94" r="5.5" fill="#7ab87a"/>
|
||||||
|
<circle cx="76" cy="94" r="4.5" fill="#8bc88b"/>
|
||||||
|
<circle cx="89.5" cy="94" r="3.5" fill="#9bd99b"/>
|
||||||
|
<circle cx="51.5" cy="110" r="5.5" fill="#7ab87a"/>
|
||||||
|
<circle cx="65" cy="110" r="4.5" fill="#8bc88b"/>
|
||||||
|
<circle cx="81" cy="110" r="3.5" fill="#9bd99b"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="caption">72px — dark</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="icon-cell">
|
||||||
|
<div class="icon-box" style="width: 32px; height: 32px; border-radius: 8px;">
|
||||||
|
<svg width="26" height="26" viewBox="0 0 130 130" fill="none">
|
||||||
|
<circle cx="65" cy="14" r="6" fill="#5b8c5a"/>
|
||||||
|
<circle cx="51.5" cy="46" r="8" fill="#5b8c5a"/>
|
||||||
|
<circle cx="65" cy="46" r="6" fill="#7ab87a"/>
|
||||||
|
<circle cx="81" cy="46" r="5" fill="#6ba86b"/>
|
||||||
|
<circle cx="36.5" cy="78" r="9" fill="#5b8c5a"/>
|
||||||
|
<circle cx="54" cy="78" r="7" fill="#7ab87a"/>
|
||||||
|
<circle cx="70" cy="78" r="6" fill="#6ba86b"/>
|
||||||
|
<circle cx="84" cy="78" r="5" fill="#5b8c5a"/>
|
||||||
|
<circle cx="97.5" cy="78" r="4" fill="#7ab87a"/>
|
||||||
|
<circle cx="51.5" cy="110" r="6" fill="#5b8c5a"/>
|
||||||
|
<circle cx="65" cy="110" r="5" fill="#7ab87a"/>
|
||||||
|
<circle cx="81" cy="110" r="4" fill="#6ba86b"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="caption">32px favicon</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="icon-cell">
|
||||||
|
<div class="icon-box" style="width: 16px; height: 16px; border-radius: 4px;">
|
||||||
|
<svg width="13" height="13" viewBox="0 0 130 130" fill="none">
|
||||||
|
<circle cx="65" cy="30" r="10" fill="#5b8c5a"/>
|
||||||
|
<circle cx="36.5" cy="78" r="14" fill="#5b8c5a"/>
|
||||||
|
<circle cx="65" cy="78" r="10" fill="#6ba86b"/>
|
||||||
|
<circle cx="97.5" cy="78" r="7" fill="#7ab87a"/>
|
||||||
|
<circle cx="65" cy="110" r="8" fill="#5b8c5a"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="caption">16px favicon</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- ==================== BUSINESS CARD ==================== -->
|
||||||
|
|
||||||
|
<div class="section">
|
||||||
|
<div class="section-label">Business card</div>
|
||||||
|
<div class="card-container">
|
||||||
|
|
||||||
|
<div class="business-card">
|
||||||
|
<div class="top">
|
||||||
|
<svg width="44" height="44" viewBox="0 0 130 130" fill="none">
|
||||||
|
<circle cx="65" cy="14" r="5" fill="#5b8c5a"/>
|
||||||
|
<circle cx="58" cy="30" r="6" fill="#7ab87a"/>
|
||||||
|
<circle cx="74" cy="30" r="4" fill="#6ba86b"/>
|
||||||
|
<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"/>
|
||||||
|
<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"/>
|
||||||
|
<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"/>
|
||||||
|
<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"/>
|
||||||
|
<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 style="display: flex; flex-direction: column; gap: 1px;">
|
||||||
|
<div style="font-family: 'Figtree', sans-serif; font-size: 17px; font-weight: 600; color: #2d3327;">Inference Cooperative</div>
|
||||||
|
<div style="font-family: 'Figtree', sans-serif; font-size: 11px; color: #5b8c5a; font-weight: 500;">inference.coop</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="info">
|
||||||
|
<strong>Nathan Schneider</strong><br>
|
||||||
|
Founding member<br>
|
||||||
|
<span class="url">inference.coop</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="business-card" style="background: #1a2418; border-color: #2a3528;">
|
||||||
|
<div class="top">
|
||||||
|
<svg width="44" height="44" viewBox="0 0 130 130" fill="none">
|
||||||
|
<circle cx="65" cy="14" r="5" fill="#7ab87a"/>
|
||||||
|
<circle cx="58" cy="30" r="6" fill="#8bc88b"/>
|
||||||
|
<circle cx="74" cy="30" r="4" fill="#9bd99b"/>
|
||||||
|
<circle cx="51.5" cy="46" r="6.5" fill="#7ab87a"/>
|
||||||
|
<circle cx="65" cy="46" r="5" fill="#8bc88b"/>
|
||||||
|
<circle cx="81" cy="46" r="4" fill="#9bd99b"/>
|
||||||
|
<circle cx="44" cy="62" r="7" fill="#9bd99b"/>
|
||||||
|
<circle cx="61" cy="62" r="5.5" fill="#7ab87a"/>
|
||||||
|
<circle cx="76" cy="62" r="4.5" fill="#8bc88b"/>
|
||||||
|
<circle cx="89.5" cy="62" r="3.5" fill="#9bd99b"/>
|
||||||
|
<circle cx="36.5" cy="78" r="7.5" fill="#7ab87a"/>
|
||||||
|
<circle cx="54" cy="78" r="6" fill="#8bc88b"/>
|
||||||
|
<circle cx="70" cy="78" r="5" fill="#9bd99b"/>
|
||||||
|
<circle cx="84" cy="78" r="4" fill="#7ab87a"/>
|
||||||
|
<circle cx="97.5" cy="78" r="3.5" fill="#8bc88b"/>
|
||||||
|
<circle cx="44" cy="94" r="6.5" fill="#9bd99b"/>
|
||||||
|
<circle cx="61" cy="94" r="5.5" fill="#7ab87a"/>
|
||||||
|
<circle cx="76" cy="94" r="4.5" fill="#8bc88b"/>
|
||||||
|
<circle cx="89.5" cy="94" r="3.5" fill="#9bd99b"/>
|
||||||
|
<circle cx="51.5" cy="110" r="5.5" fill="#7ab87a"/>
|
||||||
|
<circle cx="65" cy="110" r="4.5" fill="#8bc88b"/>
|
||||||
|
<circle cx="81" cy="110" r="3.5" fill="#9bd99b"/>
|
||||||
|
</svg>
|
||||||
|
<div style="display: flex; flex-direction: column; gap: 1px;">
|
||||||
|
<div style="font-family: 'Figtree', sans-serif; font-size: 17px; font-weight: 600; color: #e4e7ec;">Inference Cooperative</div>
|
||||||
|
<div style="font-family: 'Figtree', sans-serif; font-size: 11px; color: #8bc88b; font-weight: 500;">inference.coop</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div style="font-size: 13px; line-height: 1.5;">
|
||||||
|
<strong style="color: #e4e7ec; font-weight: 600;">Nathan Schneider</strong><br>
|
||||||
|
<span style="color: #6b8560;">Founding member</span><br>
|
||||||
|
<span style="font-family: 'Figtree', monospace; font-size: 12px; color: #8bc88b;">inference.coop</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- ==================== BANNER ==================== -->
|
||||||
|
|
||||||
|
<div class="section">
|
||||||
|
<div class="section-label">Website header</div>
|
||||||
|
<div class="banner">
|
||||||
|
<svg width="72" height="72" viewBox="0 0 130 130" fill="none">
|
||||||
|
<circle cx="65" cy="14" r="5" fill="#5b8c5a"/>
|
||||||
|
<circle cx="58" cy="30" r="6" fill="#7ab87a"/>
|
||||||
|
<circle cx="74" cy="30" r="4" fill="#6ba86b"/>
|
||||||
|
<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"/>
|
||||||
|
<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"/>
|
||||||
|
<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"/>
|
||||||
|
<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"/>
|
||||||
|
<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="text">
|
||||||
|
<h3>Inference Cooperative</h3>
|
||||||
|
<p>Private AI, owned together. A member-owned cooperative for TEE-protected inference on renewable energy.</p>
|
||||||
|
<div class="url-mark">inference.coop</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- ==================== UI ELEMENTS ==================== -->
|
||||||
|
|
||||||
|
<div class="section">
|
||||||
|
<div class="section-label">UI elements</div>
|
||||||
|
|
||||||
|
<div style="display: flex; flex-direction: column; gap: 20px; background: var(--white); border: 1px solid var(--border); border-radius: 16px; padding: 32px;">
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<div style="font-size: 12px; color: var(--light-muted); margin-bottom: 10px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase;">Buttons</div>
|
||||||
|
<div class="ui-row">
|
||||||
|
<button class="btn btn-primary">Become a member</button>
|
||||||
|
<button class="btn btn-secondary">Sign in</button>
|
||||||
|
<button class="btn btn-ghost">Learn more</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<div style="font-size: 12px; color: var(--light-muted); margin-bottom: 10px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase;">Tags</div>
|
||||||
|
<div class="ui-row">
|
||||||
|
<span class="tag">TEE-protected</span>
|
||||||
|
<span class="tag">Member-owned</span>
|
||||||
|
<span class="tag">Renewable energy</span>
|
||||||
|
<span class="tag neutral">Open source</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<div style="font-size: 12px; color: var(--light-muted); margin-bottom: 10px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase;">Pricing card</div>
|
||||||
|
<div style="border: 1px solid var(--border); border-radius: 12px; padding: 24px; max-width: 300px;">
|
||||||
|
<div style="font-family: 'Figtree', sans-serif; font-size: 20px; font-weight: 600; margin-bottom: 4px;">Member</div>
|
||||||
|
<div style="font-size: 32px; font-family: 'Figtree', sans-serif; font-weight: 700; color: var(--green-deep); margin-bottom: 4px;">€10<span style="font-size: 16px; color: var(--muted); font-weight: 400;">/month</span></div>
|
||||||
|
<div style="font-size: 13px; color: var(--muted); margin-bottom: 16px; line-height: 1.5;">TEE-protected inference, member governance, API access.</div>
|
||||||
|
<button class="btn btn-primary" style="width: 100%;">Join the cooperative</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="footer">
|
||||||
|
<strong>Inference Cooperative</strong> — brand materials. Logo: green circles in a pine tree silhouette, R→L size gradient, visual-edge symmetric, airy spacing, no overlap. Palette: cream, three greens (forest, pine, sage), ink. Font: Figtree (OFL). URL: inference.coop. All SVG, scalable.
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
+25
@@ -0,0 +1,25 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 130 130">
|
||||||
|
<rect width="130" height="130" rx="24" fill="#faf8f5"/>
|
||||||
|
<circle cx="65" cy="14" r="5" fill="#5b8c5a"/>
|
||||||
|
<circle cx="58" cy="30" r="6" fill="#7ab87a"/>
|
||||||
|
<circle cx="74" cy="30" r="4" fill="#6ba86b"/>
|
||||||
|
<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"/>
|
||||||
|
<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"/>
|
||||||
|
<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"/>
|
||||||
|
<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"/>
|
||||||
|
<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>
|
||||||
|
After Width: | Height: | Size: 1.2 KiB |
@@ -0,0 +1,93 @@
|
|||||||
|
Copyright 2022 The Figtree Project Authors (https://github.com/erikdkennedy/figtree)
|
||||||
|
|
||||||
|
This Font Software is licensed under the SIL Open Font License, Version 1.1.
|
||||||
|
This license is copied below, and is also available with a FAQ at:
|
||||||
|
http://scripts.sil.org/OFL
|
||||||
|
|
||||||
|
|
||||||
|
-----------------------------------------------------------
|
||||||
|
SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
|
||||||
|
-----------------------------------------------------------
|
||||||
|
|
||||||
|
PREAMBLE
|
||||||
|
The goals of the Open Font License (OFL) are to stimulate worldwide
|
||||||
|
development of collaborative font projects, to support the font creation
|
||||||
|
efforts of academic and linguistic communities, and to provide a free and
|
||||||
|
open framework in which fonts may be shared and improved in partnership
|
||||||
|
with others.
|
||||||
|
|
||||||
|
The OFL allows the licensed fonts to be used, studied, modified and
|
||||||
|
redistributed freely as long as they are not sold by themselves. The
|
||||||
|
fonts, including any derivative works, can be bundled, embedded,
|
||||||
|
redistributed and/or sold with any software provided that any reserved
|
||||||
|
names are not used by derivative works. The fonts and derivatives,
|
||||||
|
however, cannot be released under any other type of license. The
|
||||||
|
requirement for fonts to remain under this license does not apply
|
||||||
|
to any document created using the fonts or their derivatives.
|
||||||
|
|
||||||
|
DEFINITIONS
|
||||||
|
"Font Software" refers to the set of files released by the Copyright
|
||||||
|
Holder(s) under this license and clearly marked as such. This may
|
||||||
|
include source files, build scripts and documentation.
|
||||||
|
|
||||||
|
"Reserved Font Name" refers to any names specified as such after the
|
||||||
|
copyright statement(s).
|
||||||
|
|
||||||
|
"Original Version" refers to the collection of Font Software components as
|
||||||
|
distributed by the Copyright Holder(s).
|
||||||
|
|
||||||
|
"Modified Version" refers to any derivative made by adding to, deleting,
|
||||||
|
or substituting -- in part or in whole -- any of the components of the
|
||||||
|
Original Version, by changing formats or by porting the Font Software to a
|
||||||
|
new environment.
|
||||||
|
|
||||||
|
"Author" refers to any designer, engineer, programmer, technical
|
||||||
|
writer or other person who contributed to the Font Software.
|
||||||
|
|
||||||
|
PERMISSION & CONDITIONS
|
||||||
|
Permission is hereby granted, free of charge, to any person obtaining
|
||||||
|
a copy of the Font Software, to use, study, copy, merge, embed, modify,
|
||||||
|
redistribute, and sell modified and unmodified copies of the Font
|
||||||
|
Software, subject to the following conditions:
|
||||||
|
|
||||||
|
1) Neither the Font Software nor any of its individual components,
|
||||||
|
in Original or Modified Versions, may be sold by itself.
|
||||||
|
|
||||||
|
2) Original or Modified Versions of the Font Software may be bundled,
|
||||||
|
redistributed and/or sold with any software, provided that each copy
|
||||||
|
contains the above copyright notice and this license. These can be
|
||||||
|
included either as stand-alone text files, human-readable headers or
|
||||||
|
in the appropriate machine-readable metadata fields within text or
|
||||||
|
binary files as long as those fields can be easily viewed by the user.
|
||||||
|
|
||||||
|
3) No Modified Version of the Font Software may use the Reserved Font
|
||||||
|
Name(s) unless explicit written permission is granted by the corresponding
|
||||||
|
Copyright Holder. This restriction only applies to the primary font name as
|
||||||
|
presented to the users.
|
||||||
|
|
||||||
|
4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
|
||||||
|
Software shall not be used to promote, endorse or advertise any
|
||||||
|
Modified Version, except to acknowledge the contribution(s) of the
|
||||||
|
Copyright Holder(s) and the Author(s) or with their explicit written
|
||||||
|
permission.
|
||||||
|
|
||||||
|
5) The Font Software, modified or unmodified, in part or in whole,
|
||||||
|
must be distributed entirely under this license, and must not be
|
||||||
|
distributed under any other license. The requirement for fonts to
|
||||||
|
remain under this license does not apply to any document created
|
||||||
|
using the Font Software.
|
||||||
|
|
||||||
|
TERMINATION
|
||||||
|
This license becomes null and void if any of the above conditions are
|
||||||
|
not met.
|
||||||
|
|
||||||
|
DISCLAIMER
|
||||||
|
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
||||||
|
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
|
||||||
|
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
|
||||||
|
OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
|
||||||
|
COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
|
||||||
|
INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
|
||||||
|
DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
|
||||||
|
FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
|
||||||
|
OTHER DEALINGS IN THE FONT SOFTWARE.
|
||||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@@ -0,0 +1,298 @@
|
|||||||
|
<!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>
|
||||||
Reference in new issue
Block a user