brand: add Hatch v1 wordmark, mark, favicon, banner, OG image, usage guide

v1 brand kit for the Hatch launch (ELF-53).

Files:
  brand/wordmark/   - text+mark wordmark (SVG with embedded Inter Bold,
                     plus PNG exports at 200x60, 400x120, 800x240,
                     1200x360); light/dark and on-light/on-dark variants
  brand/mark/       - the icon alone, in 16/32/48/64/128/192/256/512/1024
  brand/favicon/    - favicon.ico (16+32+48) and the 5 required PNG sizes
  brand/banner/     - README banner at 1280x640 (+ @2x retina)
  brand/og/         - OG image at 1200x630 (+ @2x retina)
  docs/brand/usage.md - one-pager on spacing, clear space, do-not rules,
                     light/dark mode behavior

Concept:
  Mark is a rounded square with a horizontal slot — the literal "hatch".
  A small "request" indicator drops into the slot. At 16px the slot still
  reads; at 512px the proportions hold.

Type:
  Inter Bold for the wordmark; JetBrains Mono for the code/tagline accent.
  Both SIL OFL 1.1, attributed in docs/brand/usage.md.

Color:
  Ink #0A0A0B, Paper #FAFAF9, Accent #F59E0B. No other colors in the kit.

Co-Authored-By: Paperclip <noreply@paperclip.ing>

brand/mark/mark-dark.svg

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000" width="1000" height="1000" role="img" aria-label="Hatch mark">
+  
+  <g>
+    <!-- Rounded square body -->
+    <rect x="100" y="100" width="800" height="800" rx="192" ry="192"
+          fill="none" stroke="#FAFAF9" stroke-width="88" stroke-linejoin="round"/>
+    <!-- The slot: a horizontal bar -->
+    <line x1="276" y1="460" x2="596" y2="460"
+          stroke="#FAFAF9" stroke-width="61.599999999999994" stroke-linecap="round"/>
+    <!-- The request: a small filled square above the slot -->
+    <rect x="436" y="244" width="128" height="128" fill="#FAFAF9"/>
+    <!-- The stem connecting the request to the slot -->
+    <line x1="500" y1="372" x2="500" y2="460"
+          stroke="#FAFAF9" stroke-width="46.199999999999996" stroke-linecap="round"/>
+  </g>
+</svg>

brand/mark/mark-on-dark.svg

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000" width="1000" height="1000" role="img" aria-label="Hatch mark">
+  <rect width="1000" height="1000" fill="#0A0A0B"/>
+  <g>
+    <!-- Rounded square body -->
+    <rect x="100" y="100" width="800" height="800" rx="192" ry="192"
+          fill="none" stroke="#FAFAF9" stroke-width="88" stroke-linejoin="round"/>
+    <!-- The slot: a horizontal bar -->
+    <line x1="276" y1="460" x2="596" y2="460"
+          stroke="#FAFAF9" stroke-width="61.599999999999994" stroke-linecap="round"/>
+    <!-- The request: a small filled square above the slot -->
+    <rect x="436" y="244" width="128" height="128" fill="#FAFAF9"/>
+    <!-- The stem connecting the request to the slot -->
+    <line x1="500" y1="372" x2="500" y2="460"
+          stroke="#FAFAF9" stroke-width="46.199999999999996" stroke-linecap="round"/>
+  </g>
+</svg>

brand/mark/mark-on-light.svg

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000" width="1000" height="1000" role="img" aria-label="Hatch mark">
+  <rect width="1000" height="1000" fill="#FAFAF9"/>
+  <g>
+    <!-- Rounded square body -->
+    <rect x="100" y="100" width="800" height="800" rx="192" ry="192"
+          fill="none" stroke="#0A0A0B" stroke-width="88" stroke-linejoin="round"/>
+    <!-- The slot: a horizontal bar -->
+    <line x1="276" y1="460" x2="596" y2="460"
+          stroke="#0A0A0B" stroke-width="61.599999999999994" stroke-linecap="round"/>
+    <!-- The request: a small filled square above the slot -->
+    <rect x="436" y="244" width="128" height="128" fill="#0A0A0B"/>
+    <!-- The stem connecting the request to the slot -->
+    <line x1="500" y1="372" x2="500" y2="460"
+          stroke="#0A0A0B" stroke-width="46.199999999999996" stroke-linecap="round"/>
+  </g>
+</svg>

brand/mark/mark.svg

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000" width="1000" height="1000" role="img" aria-label="Hatch mark">
+  
+  <g>
+    <!-- Rounded square body -->
+    <rect x="100" y="100" width="800" height="800" rx="192" ry="192"
+          fill="none" stroke="#0A0A0B" stroke-width="88" stroke-linejoin="round"/>
+    <!-- The slot: a horizontal bar -->
+    <line x1="276" y1="460" x2="596" y2="460"
+          stroke="#0A0A0B" stroke-width="61.599999999999994" stroke-linecap="round"/>
+    <!-- The request: a small filled square above the slot -->
+    <rect x="436" y="244" width="128" height="128" fill="#0A0A0B"/>
+    <!-- The stem connecting the request to the slot -->
+    <line x1="500" y1="372" x2="500" y2="460"
+          stroke="#0A0A0B" stroke-width="46.199999999999996" stroke-linecap="round"/>
+  </g>
+</svg>

docs/brand/usage.md

@@ -0,0 +1,142 @@
+# Hatch brand usage
+
+> One-pager. Read this before you put the wordmark anywhere.
+
+## Files in this kit
+
+```
+brand/
+├── wordmark/
+│   ├── wordmark.svg              # master wordmark (text-only, with embedded font)
+│   ├── wordmark-dark.svg         # dark variant (paper on transparent)
+│   ├── wordmark-on-light.svg     # paper-on-warm-white background
+│   ├── wordmark-on-dark.svg      # paper-on-ink background
+│   └── wordmark-*.png            # 200x60, 400x120, 800x240, 1200x360
+├── mark/
+│   ├── mark.svg                  # the icon alone (no text)
+│   ├── mark-on-light.svg
+│   ├── mark-on-dark.svg
+│   └── mark-{16,32,48,64,128,192,256,512,1024}.png
+├── favicon/
+│   ├── favicon.ico               # 16+32+48 multi-size ico
+│   └── favicon-{16,32,48,192,512}.png
+├── banner/
+│   ├── readme-banner.png         # 1280x640
+│   └── readme-banner@2x.png      # 2560x1280
+└── og/
+    ├── og.png                    # 1200x630
+    └── og@2x.png                 # 2400x1260
+```
+
+## What goes where
+
+| Surface                                  | Use                              | File                                   |
+| ---------------------------------------- | -------------------------------- | -------------------------------------- |
+| Favicon (browser tab, GitHub avatar)     | The **mark**, not the wordmark   | `brand/favicon/favicon.ico`            |
+| Apple touch icon / PWA icon               | The mark, 512px                  | `brand/favicon/favicon-512.png`        |
+| README header                            | The **wordmark** (200x60+)       | `brand/wordmark/wordmark-200x60.png`   |
+| GitHub social preview / blog / link card | The **OG image** (1200x630)      | `brand/og/og.png`                      |
+| Big surfaces, slides, README top         | The **README banner** (1280x640) | `brand/banner/readme-banner.png`       |
+
+For the favicon, always use `mark.svg` or one of the favicon PNGs — never the full
+wordmark. The wordmark does not read at 16x16.
+
+## Clear space
+
+Treat the mark as a square and the wordmark as the mark + the word. Clear space
+is **1× the cap-height of the "h" in "hatch"** on every side.
+
+- Wordmark: at least one "h"-height of empty space on top, bottom, left, and right
+- Mark: at least one "h"-height on every side
+
+```
+   ┌──────────────────────────────┐
+   │                              │  ← 1× clear space
+   │   ┌──┐  hatch                │
+   │   │  │                       │
+   │   └──┘                       │
+   │                              │  ← 1× clear space
+   └──────────────────────────────┘
+```
+
+## Minimum size
+
+- Wordmark: **120px wide** is the minimum. Below that, switch to the mark.
+- Mark: **16px** is the minimum (we ship a tuned 16px favicon).
+
+## Color
+
+The brand has **one active color, one neutral, and one accent**. That's it.
+
+| Token    | Hex       | Use                                               |
+| -------- | --------- | ------------------------------------------------- |
+| Ink      | `#0A0A0B` | Wordmark, primary type, dark surfaces             |
+| Paper    | `#FAFAF9` | Light surfaces, type on dark                      |
+| Accent   | `#F59E0B` | The "captured" signal — one place per composition |
+
+Neutral scale (for docs and UIs, not the wordmark): `#71717A` `#A1A1AA` `#D4D4D8` `#E4E4E7` `#F4F4F5`.
+
+**Don't pick colors outside the kit.** If you need another color, ask the Head of
+Marketing; do not invent one.
+
+## Light and dark mode
+
+The wordmark and the mark are **single-color**. Pick the right variant for the
+surface — never change the color of the wordmark to fit a theme.
+
+- **On a light surface** (≥ 4.5:1 contrast): use `wordmark.svg` (ink) or `mark.svg`
+- **On a dark surface**: use `wordmark-dark.svg` (paper) or `mark-dark.svg`
+- **Need a background tile?** Use `wordmark-on-light.svg` or `wordmark-on-dark.svg`
+
+For GitHub READMEs, GitHub auto-switches images in dark mode only if you use
+the `#gh-dark-mode-only` / `#gh-light-mode-only` MediaFragments trick:
+
+```markdown
+<picture>
+  <source media="(prefers-color-scheme: dark)" srcset="brand/wordmark/wordmark-dark.svg">
+  <img src="brand/wordmark/wordmark.svg" alt="Hatch" width="200">
+</picture>
+```
+
+## Typography (display + body)
+
+The wordmark uses **Inter Bold**. The brand voice guide and READMEs use:
+
+- **Display / headings:** Inter (Bold or SemiBold)
+- **Code / mono:** JetBrains Mono (Regular or Medium)
+
+Both are OFL-licensed and on the system. Don't substitute a different sans or mono
+in brand surfaces without sign-off.
+
+## Do not
+
+- **Don't stretch.** Always use the mark/wordmark at its native aspect ratio. If
+  you need it bigger, scale proportionally.
+- **Don't recolor.** The wordmark is ink or paper — period. No brand-color,
+  gradient, rainbow, or AI-painted versions.
+- **Don't add effects.** No drop shadows, no glows, no outlines, no bevel, no
+  inner shadows. The mark is a flat shape.
+- **Don't rotate.** The hatch opens at the top. Don't tilt the mark.
+- **Don't rearrange the wordmark.** The mark always sits to the **left** of the
+  wordmark, with a 0.22×-mark-width gap. No stacking, no right-alignment.
+- **Don't put the wordmark on a busy image.** The wordmark needs contrast. On a
+  photo or a complex background, use a solid color tile behind it.
+- **Don't use the wordmark in body copy.** The wordmark is for headers, banners,
+  and brand surfaces only. Body type stays in Inter.
+- **Don't use the favicon as a profile picture.** Use the 512px PNG (`mark-512.png`)
+  for that, and round the corners if you want — but the square mark is the
+  canonical shape.
+
+## Licensing & attribution
+
+- **Inter** — SIL Open Font License 1.1 (Inter by Rasmus Andersson, rsms.me)
+- **JetBrains Mono** — SIL Open Font License 1.1 (JetBrains)
+- The mark and wordmark are the property of El Foundation. Use them to talk about
+  Hatch. Do not register them as a trademark or use them to sell a competing
+  product.
+
+## Need something new?
+
+If a new surface needs a brand asset that isn't in the kit (a slide template, a
+business card, a T-shirt, an icon variant), open an issue assigned to the Brand
+Designer. Do not stretch, recolor, or rearrange this kit to make it work.