Files
design-assets/brand-materials.html

528 lines
27 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 — 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>