npm - clawcrib - Versions diffs - 0.1.0 - Mend

clawcrib 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1832) hide show

package/dist/public/brand-v2-preview.html ADDED Viewed

@@ -0,0 +1,778 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>ClawCrib Brand Kit V2 — Lobster Claw Theme</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500;700&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="colors.css">
+  <style>
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+    :root {
+      --font-heading: 'Space Grotesk', system-ui, sans-serif;
+      --font-body: 'Inter', system-ui, sans-serif;
+      --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
+    }
+    body {
+      font-family: var(--font-body);
+      background: var(--shell-100);
+      color: var(--ocean-500);
+      line-height: 1.6;
+    }
+    /* Header */
+    header {
+      background: var(--gradient-hero);
+      color: white;
+      padding: 4rem 2rem;
+      text-align: center;
+    }
+    header h1 {
+      font-family: var(--font-heading);
+      font-size: 3rem;
+      margin-bottom: 0.5rem;
+    }
+    header p {
+      opacity: 0.8;
+      font-size: 1.1rem;
+    }
+    .version-badge {
+      display: inline-block;
+      background: var(--claw-red-400);
+      color: white;
+      padding: 0.25rem 0.75rem;
+      border-radius: 999px;
+      font-size: 0.875rem;
+      font-weight: 600;
+      margin-bottom: 1rem;
+    }
+    /* Main content */
+    main {
+      max-width: 1200px;
+      margin: 0 auto;
+      padding: 2rem;
+    }
+    section {
+      background: white;
+      border-radius: 16px;
+      padding: 2rem;
+      margin-bottom: 2rem;
+      box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+    }
+    section h2 {
+      font-family: var(--font-heading);
+      font-size: 1.5rem;
+      color: var(--ocean-700);
+      margin-bottom: 1.5rem;
+      padding-bottom: 0.5rem;
+      border-bottom: 2px solid var(--claw-red-400);
+    }
+    /* Logo Grid */
+    .logo-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+      gap: 2rem;
+    }
+    .logo-card {
+      border: 1px solid var(--shell-200);
+      border-radius: 12px;
+      overflow: hidden;
+    }
+    .logo-card h3 {
+      padding: 1rem;
+      font-size: 0.875rem;
+      font-weight: 600;
+      color: var(--ocean-400);
+      border-bottom: 1px solid var(--shell-200);
+    }
+    .logo-preview {
+      padding: 2rem;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      min-height: 140px;
+    }
+    .logo-preview.dark {
+      background: var(--dark-bg);
+    }
+    .logo-preview img {
+      max-width: 100%;
+      max-height: 100px;
+    }
+    .logo-preview.icon img {
+      max-height: 80px;
+    }
+    /* Color Palette */
+    .color-section {
+      margin-bottom: 2rem;
+    }
+    .color-section h3 {
+      font-size: 1rem;
+      font-weight: 600;
+      color: var(--ocean-600);
+      margin-bottom: 1rem;
+    }
+    .color-row {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 0.5rem;
+    }
+    .color-swatch {
+      width: 80px;
+      text-align: center;
+    }
+    .color-swatch .box {
+      width: 80px;
+      height: 60px;
+      border-radius: 8px;
+      margin-bottom: 0.5rem;
+      box-shadow: inset 0 0 0 1px rgba(0,0,0,0.1);
+    }
+    .color-swatch .name {
+      font-size: 0.75rem;
+      font-weight: 500;
+      color: var(--ocean-500);
+    }
+    .color-swatch .hex {
+      font-family: var(--font-mono);
+      font-size: 0.625rem;
+      color: var(--shell-500);
+    }
+    /* Typography */
+    .type-sample {
+      margin-bottom: 2rem;
+      padding-bottom: 2rem;
+      border-bottom: 1px solid var(--shell-200);
+    }
+    .type-sample:last-child {
+      border-bottom: none;
+      margin-bottom: 0;
+      padding-bottom: 0;
+    }
+    .type-label {
+      font-size: 0.75rem;
+      font-weight: 600;
+      color: var(--claw-red-400);
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+      margin-bottom: 0.5rem;
+    }
+    .type-meta {
+      font-size: 0.75rem;
+      color: var(--shell-500);
+      margin-top: 0.5rem;
+      font-family: var(--font-mono);
+    }
+    .heading-sample {
+      font-family: var(--font-heading);
+      color: var(--ocean-700);
+    }
+    .body-sample {
+      font-family: var(--font-body);
+    }
+    .mono-sample {
+      font-family: var(--font-mono);
+      background: var(--ocean-600);
+      color: var(--seafoam);
+      padding: 1rem;
+      border-radius: 8px;
+      border-left: 3px solid var(--claw-red-400);
+    }
+    /* Buttons Demo */
+    .button-row {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 1rem;
+      margin-top: 1rem;
+    }
+    .btn {
+      padding: 0.75rem 1.5rem;
+      border-radius: 8px;
+      font-family: var(--font-body);
+      font-weight: 500;
+      font-size: 0.875rem;
+      cursor: pointer;
+      border: none;
+      transition: all 0.2s ease;
+    }
+    .btn-primary {
+      background: var(--gradient-claw);
+      color: white;
+    }
+    .btn-primary:hover {
+      box-shadow: 0 4px 20px rgba(230, 57, 70, 0.4);
+      transform: translateY(-1px);
+    }
+    .btn-secondary {
+      background: var(--ocean-500);
+      color: white;
+    }
+    .btn-secondary:hover {
+      background: var(--ocean-400);
+    }
+    .btn-outline {
+      background: transparent;
+      color: var(--claw-red-400);
+      border: 2px solid var(--claw-red-400);
+    }
+    .btn-outline:hover {
+      background: var(--claw-red-400);
+      color: white;
+    }
+    .btn-ghost {
+      background: transparent;
+      color: var(--ocean-500);
+    }
+    .btn-ghost:hover {
+      background: var(--shell-100);
+    }
+    /* Dark Mode Demo */
+    .dark-mode-demo {
+      background: var(--dark-bg);
+      border-radius: 12px;
+      padding: 2rem;
+      margin-top: 1rem;
+    }
+    .dark-mode-demo h3 {
+      color: var(--dark-text);
+      font-family: var(--font-heading);
+      margin-bottom: 1rem;
+    }
+    .dark-mode-demo p {
+      color: var(--dark-text-muted);
+      margin-bottom: 1rem;
+    }
+    .dark-mode-demo .card {
+      background: var(--dark-surface);
+      border: 1px solid var(--dark-border);
+      border-radius: 8px;
+      padding: 1rem;
+      color: var(--dark-text);
+    }
+    .dark-mode-demo .glow-text {
+      color: var(--claw-red-400);
+      text-shadow: 0 0 20px var(--claw-glow);
+    }
+    /* Gradient Demos */
+    .gradient-row {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 1rem;
+      margin-top: 1rem;
+    }
+    .gradient-swatch {
+      width: 150px;
+      height: 80px;
+      border-radius: 8px;
+      display: flex;
+      align-items: flex-end;
+      padding: 0.5rem;
+    }
+    .gradient-swatch span {
+      font-size: 0.75rem;
+      font-weight: 500;
+      color: white;
+      text-shadow: 0 1px 2px rgba(0,0,0,0.5);
+    }
+    /* Icon Concepts */
+    .icon-concepts {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+      gap: 1.5rem;
+      margin-top: 1rem;
+    }
+    .icon-concept {
+      text-align: center;
+      padding: 1.5rem;
+      background: var(--shell-50);
+      border-radius: 12px;
+    }
+    .icon-concept svg {
+      width: 48px;
+      height: 48px;
+      margin-bottom: 0.75rem;
+    }
+    .icon-concept h4 {
+      font-size: 0.875rem;
+      font-weight: 600;
+      color: var(--ocean-600);
+      margin-bottom: 0.25rem;
+    }
+    .icon-concept p {
+      font-size: 0.75rem;
+      color: var(--shell-500);
+    }
+    /* Footer */
+    footer {
+      text-align: center;
+      padding: 2rem;
+      color: var(--shell-500);
+      font-size: 0.875rem;
+    }
+    footer a {
+      color: var(--claw-red-400);
+      text-decoration: none;
+    }
+    /* Responsive */
+    @media (max-width: 640px) {
+      header h1 {
+        font-size: 2rem;
+      }
+      section {
+        padding: 1.5rem;
+      }
+      .color-swatch {
+        width: 60px;
+      }
+      .color-swatch .box {
+        width: 60px;
+        height: 45px;
+      }
+    }
+  </style>
+</head>
+<body>
+  <header>
+    <span class="version-badge">V2 — Lobster Claw Theme</span>
+    <h1>🦞 ClawCrib Brand Kit</h1>
+    <p>Technical. Developer-friendly. Unmistakably lobster.</p>
+  </header>
+  <main>
+    <!-- Logos -->
+    <section>
+      <h2>Logo Concepts</h2>
+      <div class="logo-grid">
+        <div class="logo-card">
+          <h3>Primary Logo</h3>
+          <div class="logo-preview">
+            <img src="logo-primary.svg" alt="ClawCrib Primary Logo">
+          </div>
+        </div>
+        <div class="logo-card">
+          <h3>Primary Logo (Dark BG)</h3>
+          <div class="logo-preview dark">
+            <img src="logo-primary.svg" alt="ClawCrib Primary Logo on Dark">
+          </div>
+        </div>
+        <div class="logo-card">
+          <h3>Icon / App Icon</h3>
+          <div class="logo-preview icon">
+            <img src="logo-icon.svg" alt="ClawCrib Icon">
+          </div>
+        </div>
+        <div class="logo-card">
+          <h3>Icon (Dark BG)</h3>
+          <div class="logo-preview icon dark">
+            <img src="logo-icon.svg" alt="ClawCrib Icon on Dark">
+          </div>
+        </div>
+        <div class="logo-card">
+          <h3>Minimal Mark</h3>
+          <div class="logo-preview icon">
+            <img src="logo-minimal.svg" alt="ClawCrib Minimal Mark">
+          </div>
+        </div>
+        <div class="logo-card">
+          <h3>Bracket Claw (Code Theme)</h3>
+          <div class="logo-preview">
+            <img src="logo-bracket-claw.svg" alt="ClawCrib Bracket Claw">
+          </div>
+        </div>
+        <div class="logo-card">
+          <h3>CC Monogram</h3>
+          <div class="logo-preview icon">
+            <img src="logo-monogram.svg" alt="ClawCrib CC Monogram">
+          </div>
+        </div>
+        <div class="logo-card">
+          <h3>Monogram (Dark BG)</h3>
+          <div class="logo-preview icon dark">
+            <img src="logo-monogram.svg" alt="ClawCrib Monogram on Dark">
+          </div>
+        </div>
+      </div>
+    </section>
+    <!-- Colors -->
+    <section>
+      <h2>Color Palette</h2>
+      <div class="color-section">
+        <h3>🦞 Primary — Lobster Red</h3>
+        <div class="color-row">
+          <div class="color-swatch">
+            <div class="box" style="background: #FEF2F2;"></div>
+            <div class="name">50</div>
+            <div class="hex">#FEF2F2</div>
+          </div>
+          <div class="color-swatch">
+            <div class="box" style="background: #F8B4B8;"></div>
+            <div class="name">200</div>
+            <div class="hex">#F8B4B8</div>
+          </div>
+          <div class="color-swatch">
+            <div class="box" style="background: #E63946;"></div>
+            <div class="name">400 ★</div>
+            <div class="hex">#E63946</div>
+          </div>
+          <div class="color-swatch">
+            <div class="box" style="background: #C1121F;"></div>
+            <div class="name">500</div>
+            <div class="hex">#C1121F</div>
+          </div>
+          <div class="color-swatch">
+            <div class="box" style="background: #A4161A;"></div>
+            <div class="name">600</div>
+            <div class="hex">#A4161A</div>
+          </div>
+          <div class="color-swatch">
+            <div class="box" style="background: #780000;"></div>
+            <div class="name">700</div>
+            <div class="hex">#780000</div>
+          </div>
+        </div>
+      </div>
+      <div class="color-section">
+        <h3>🌊 Secondary — Deep Ocean</h3>
+        <div class="color-row">
+          <div class="color-swatch">
+            <div class="box" style="background: #F0F7FF;"></div>
+            <div class="name">50</div>
+            <div class="hex">#F0F7FF</div>
+          </div>
+          <div class="color-swatch">
+            <div class="box" style="background: #A8DADC;"></div>
+            <div class="name">Seafoam</div>
+            <div class="hex">#A8DADC</div>
+          </div>
+          <div class="color-swatch">
+            <div class="box" style="background: #457B9D;"></div>
+            <div class="name">300</div>
+            <div class="hex">#457B9D</div>
+          </div>
+          <div class="color-swatch">
+            <div class="box" style="background: #1D3557;"></div>
+            <div class="name">500 ★</div>
+            <div class="hex">#1D3557</div>
+          </div>
+          <div class="color-swatch">
+            <div class="box" style="background: #14213D;"></div>
+            <div class="name">600</div>
+            <div class="hex">#14213D</div>
+          </div>
+          <div class="color-swatch">
+            <div class="box" style="background: #0D1B2A;"></div>
+            <div class="name">700</div>
+            <div class="hex">#0D1B2A</div>
+          </div>
+        </div>
+      </div>
+      <div class="color-section">
+        <h3>🐚 Accents — Coral & Sea Life</h3>
+        <div class="color-row">
+          <div class="color-swatch">
+            <div class="box" style="background: #FFB4A2;"></div>
+            <div class="name">Coral Light</div>
+            <div class="hex">#FFB4A2</div>
+          </div>
+          <div class="color-swatch">
+            <div class="box" style="background: #E5989B;"></div>
+            <div class="name">Coral</div>
+            <div class="hex">#E5989B</div>
+          </div>
+          <div class="color-swatch">
+            <div class="box" style="background: #48CAE4;"></div>
+            <div class="name">Seafoam+</div>
+            <div class="hex">#48CAE4</div>
+          </div>
+          <div class="color-swatch">
+            <div class="box" style="background: #2D6A4F;"></div>
+            <div class="name">Kelp</div>
+            <div class="hex">#2D6A4F</div>
+          </div>
+          <div class="color-swatch">
+            <div class="box" style="background: #F4E9CD;"></div>
+            <div class="name">Sand</div>
+            <div class="hex">#F4E9CD</div>
+          </div>
+        </div>
+      </div>
+      <div class="color-section">
+        <h3>🎨 Gradients</h3>
+        <div class="gradient-row">
+          <div class="gradient-swatch" style="background: linear-gradient(135deg, #E63946 0%, #C1121F 100%);">
+            <span>Claw</span>
+          </div>
+          <div class="gradient-swatch" style="background: linear-gradient(135deg, #1D3557 0%, #457B9D 100%);">
+            <span>Ocean</span>
+          </div>
+          <div class="gradient-swatch" style="background: linear-gradient(135deg, #E63946 0%, #FFB4A2 100%);">
+            <span>Sunset</span>
+          </div>
+          <div class="gradient-swatch" style="background: linear-gradient(135deg, #0D1B2A 0%, #1D3557 50%, #2A6F97 100%);">
+            <span>Hero</span>
+          </div>
+        </div>
+      </div>
+    </section>
+    <!-- Typography -->
+    <section>
+      <h2>Typography</h2>
+      <div class="type-sample">
+        <div class="type-label">Headings — Space Grotesk</div>
+        <h1 class="heading-sample" style="font-size: 2.5rem;">The quick brown fox jumps</h1>
+        <div class="type-meta">Space Grotesk 700 / 2.5rem</div>
+      </div>
+      <div class="type-sample">
+        <div class="type-label">Body — Inter</div>
+        <p class="body-sample" style="font-size: 1rem; max-width: 600px;">
+          ClawCrib is where developers build together. A community-driven platform that feels like home —
+          or should we say, like a cozy crib for your code. Grab your projects, share your work, and
+          connect with fellow builders.
+        </p>
+        <div class="type-meta">Inter 400 / 1rem / 1.6 line-height</div>
+      </div>
+      <div class="type-sample">
+        <div class="type-label">Code — JetBrains Mono</div>
+        <pre class="mono-sample">const clawcrib = {
+  name: "ClawCrib",
+  theme: "lobster-claw",
+  vibe: "technical-yet-friendly"
+};
+export default clawcrib;</pre>
+        <div class="type-meta">JetBrains Mono 400 / 0.875rem</div>
+      </div>
+      <div class="type-sample">
+        <div class="type-label">Logo Wordmark</div>
+        <div style="font-family: 'JetBrains Mono', monospace; font-size: 2rem; font-weight: 700;">
+          <span style="background: linear-gradient(135deg, #E63946, #C1121F); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">Claw</span><span style="background: linear-gradient(135deg, #1D3557, #457B9D); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">Crib</span>
+        </div>
+        <div class="type-meta">JetBrains Mono 700 / Gradient text</div>
+      </div>
+    </section>
+    <!-- Buttons & UI -->
+    <section>
+      <h2>UI Components</h2>
+      <h3 style="font-size: 1rem; margin-bottom: 1rem; color: var(--ocean-600);">Buttons</h3>
+      <div class="button-row">
+        <button class="btn btn-primary">Primary Action</button>
+        <button class="btn btn-secondary">Secondary</button>
+        <button class="btn btn-outline">Outline</button>
+        <button class="btn btn-ghost">Ghost</button>
+      </div>
+      <h3 style="font-size: 1rem; margin: 2rem 0 1rem; color: var(--ocean-600);">Dark Mode Preview</h3>
+      <div class="dark-mode-demo">
+        <h3>Welcome to <span class="glow-text">ClawCrib</span></h3>
+        <p>Dark mode uses deep ocean colors with glowing red accents.</p>
+        <div class="card">
+          <strong style="color: #A8DADC;">Card Title</strong>
+          <p style="margin-top: 0.5rem; font-size: 0.875rem; color: #94A3B8;">
+            Cards float on the dark surface with subtle borders.
+          </p>
+        </div>
+      </div>
+    </section>
+    <!-- Icon Concepts -->
+    <section>
+      <h2>Icon Concepts</h2>
+      <p style="color: var(--shell-500); margin-bottom: 1.5rem;">
+        Icons blend developer aesthetics with subtle lobster claw motifs.
+        See <code>icons.md</code> for the full icon strategy.
+      </p>
+      <div class="icon-concepts">
+        <div class="icon-concept">
+          <svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M8 20 Q12 8, 24 10 Q34 12, 38 22 Q36 28, 28 30" stroke="#E63946" stroke-width="3" stroke-linecap="round" fill="none"/>
+            <path d="M8 28 Q12 40, 24 38 Q34 36, 38 26 Q36 20, 28 18" stroke="#E63946" stroke-width="3" stroke-linecap="round" fill="none"/>
+            <circle cx="8" cy="24" r="6" fill="#E63946"/>
+            <path d="M24 34 L24 42 M24 42 L18 38 M24 42 L30 38" stroke="#1D3557" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+          <h4>Claw Download</h4>
+          <p>Grab and pull down</p>
+        </div>
+        <div class="icon-concept">
+          <svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M8 20 Q12 8, 24 10 Q34 12, 38 22 Q36 28, 28 30" stroke="#E63946" stroke-width="3" stroke-linecap="round" fill="none"/>
+            <path d="M8 28 Q12 40, 24 38 Q34 36, 38 26 Q36 20, 28 18" stroke="#E63946" stroke-width="3" stroke-linecap="round" fill="none"/>
+            <circle cx="8" cy="24" r="6" fill="#E63946"/>
+            <path d="M24 14 L24 6 M24 6 L18 10 M24 6 L30 10" stroke="#1D3557" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+          <h4>Claw Upload</h4>
+          <p>Release upward</p>
+        </div>
+        <div class="icon-concept">
+          <svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M10 18 Q14 8, 24 10 Q32 12, 35 20" stroke="#E63946" stroke-width="3" stroke-linecap="round" fill="none"/>
+            <path d="M10 30 Q14 40, 24 38 Q32 36, 35 28" stroke="#E63946" stroke-width="3" stroke-linecap="round" fill="none"/>
+            <circle cx="10" cy="24" r="5" fill="#E63946"/>
+            <path d="M32 20 L40 16 L42 26 L34 28 Z" fill="#1D3557"/>
+            <path d="M36 22 L38 21" stroke="#F0F7FF" stroke-width="1.5" stroke-linecap="round"/>
+          </svg>
+          <h4>Claw Save</h4>
+          <p>Pinch to bookmark</p>
+        </div>
+        <div class="icon-concept">
+          <svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M12 18 Q8 10, 16 6 Q24 4, 28 12" stroke="#E63946" stroke-width="3" stroke-linecap="round" fill="none"/>
+            <path d="M12 30 Q8 38, 16 42 Q24 44, 28 36" stroke="#E63946" stroke-width="3" stroke-linecap="round" fill="none"/>
+            <circle cx="28" cy="24" r="5" fill="#E63946"/>
+            <path d="M36 18 Q40 10, 32 6 Q24 4, 20 12" stroke="#457B9D" stroke-width="3" stroke-linecap="round" fill="none"/>
+            <path d="M36 30 Q40 38, 32 42 Q24 44, 20 36" stroke="#457B9D" stroke-width="3" stroke-linecap="round" fill="none"/>
+            <circle cx="20" cy="24" r="5" fill="#457B9D"/>
+          </svg>
+          <h4>Collaborate</h4>
+          <p>Two claws meeting</p>
+        </div>
+        <div class="icon-concept">
+          <svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M6 24 Q6 12, 18 12" stroke="#E63946" stroke-width="3" stroke-linecap="round" fill="none"/>
+            <path d="M6 24 Q6 36, 18 36" stroke="#E63946" stroke-width="3" stroke-linecap="round" fill="none"/>
+            <circle cx="6" cy="24" r="4" fill="#E63946"/>
+            <path d="M42 24 Q42 12, 30 12" stroke="#E63946" stroke-width="3" stroke-linecap="round" fill="none"/>
+            <path d="M42 24 Q42 36, 30 36" stroke="#E63946" stroke-width="3" stroke-linecap="round" fill="none"/>
+            <circle cx="42" cy="24" r="4" fill="#E63946"/>
+            <text x="24" y="28" text-anchor="middle" font-family="JetBrains Mono" font-size="12" fill="#1D3557">/</text>
+          </svg>
+          <h4>Code Brackets</h4>
+          <p>Claw-shaped { }</p>
+        </div>
+        <div class="icon-concept">
+          <svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M14 20 Q18 12, 26 14 Q32 16, 34 22" stroke="#E63946" stroke-width="2.5" stroke-linecap="round" fill="none"/>
+            <path d="M14 28 Q18 36, 26 34 Q32 32, 34 26" stroke="#E63946" stroke-width="2.5" stroke-linecap="round" fill="none"/>
+            <circle cx="14" cy="24" r="4" fill="#E63946"/>
+            <path d="M26 20 L30 16 M30 28 L26 32" stroke="#10B981" stroke-width="2" stroke-linecap="round"/>
+            <path d="M30 16 L38 24 L30 32" stroke="#10B981" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+          <h4>Success</h4>
+          <p>Claw with checkmark</p>
+        </div>
+      </div>
+    </section>
+    <!-- Brand Summary -->
+    <section>
+      <h2>Brand Summary</h2>
+      <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem;">
+        <div>
+          <h3 style="font-size: 1rem; color: var(--claw-red-400); margin-bottom: 0.5rem;">🦞 Identity</h3>
+          <p style="font-size: 0.875rem; color: var(--shell-600);">
+            The lobster claw is the unmistakable mark. It represents grip, precision, and community
+            (lobsters molt and grow together). Subtle, clever, never cartoonish.
+          </p>
+        </div>
+        <div>
+          <h3 style="font-size: 1rem; color: var(--claw-red-400); margin-bottom: 0.5rem;">🎨 Colors</h3>
+          <p style="font-size: 0.875rem; color: var(--shell-600);">
+            Lobster red (#E63946) for energy and identity. Deep ocean navy (#1D3557) for trust
+            and technical depth. Seafoam accents for freshness.
+          </p>
+        </div>
+        <div>
+          <h3 style="font-size: 1rem; color: var(--claw-red-400); margin-bottom: 0.5rem;">✍️ Typography</h3>
+          <p style="font-size: 0.875rem; color: var(--shell-600);">
+            Space Grotesk for headings (modern, geometric). Inter for body (readable, professional).
+            JetBrains Mono for code (developer-loved).
+          </p>
+        </div>
+        <div>
+          <h3 style="font-size: 1rem; color: var(--claw-red-400); margin-bottom: 0.5rem;">💬 Voice</h3>
+          <p style="font-size: 0.875rem; color: var(--shell-600);">
+            Technical but approachable. Clever but not trying too hard. Community-focused.
+            "Your projects have a home here."
+          </p>
+        </div>
+      </div>
+    </section>
+  </main>
+  <footer>
+    <p>ClawCrib Brand Kit V2 — <a href="colors.css">colors.css</a> · <a href="typography.md">typography.md</a> · <a href="icons.md">icons.md</a></p>
+    <p style="margin-top: 0.5rem; opacity: 0.7;">Built with Curiosity 🦞</p>
+  </footer>
+</body>
+</html>