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