diff --git a/brand/banner/readme-banner.png b/brand/banner/readme-banner.png new file mode 100644 index 00000000..c4091e62 Binary files /dev/null and b/brand/banner/readme-banner.png differ diff --git a/brand/banner/readme-banner.svg b/brand/banner/readme-banner.svg new file mode 100644 index 00000000..9ec41db3 --- /dev/null +++ b/brand/banner/readme-banner.svg @@ -0,0 +1,70 @@ + + + + + + + + + + + + + + + + + + + + + + hatch + + + Self-hostable HTTP request inspector. One command. + + $ docker compose up --build + + + + + + POST /hook + + + + + + + + + + + + + + + + + + 200 14:32:01.041 + + diff --git a/brand/banner/readme-banner@2x.png b/brand/banner/readme-banner@2x.png new file mode 100644 index 00000000..ed1d613e Binary files /dev/null and b/brand/banner/readme-banner@2x.png differ diff --git a/brand/favicon/favicon-16.png b/brand/favicon/favicon-16.png new file mode 100644 index 00000000..f1b88871 Binary files /dev/null and b/brand/favicon/favicon-16.png differ diff --git a/brand/favicon/favicon-192.png b/brand/favicon/favicon-192.png new file mode 100644 index 00000000..d531ad34 Binary files /dev/null and b/brand/favicon/favicon-192.png differ diff --git a/brand/favicon/favicon-32.png b/brand/favicon/favicon-32.png new file mode 100644 index 00000000..ac18d17d Binary files /dev/null and b/brand/favicon/favicon-32.png differ diff --git a/brand/favicon/favicon-48.png b/brand/favicon/favicon-48.png new file mode 100644 index 00000000..2ed62cb2 Binary files /dev/null and b/brand/favicon/favicon-48.png differ diff --git a/brand/favicon/favicon-512.png b/brand/favicon/favicon-512.png new file mode 100644 index 00000000..15182def Binary files /dev/null and b/brand/favicon/favicon-512.png differ diff --git a/brand/favicon/favicon.ico b/brand/favicon/favicon.ico new file mode 100644 index 00000000..0d92607a Binary files /dev/null and b/brand/favicon/favicon.ico differ diff --git a/brand/mark/mark-1024.png b/brand/mark/mark-1024.png new file mode 100644 index 00000000..ef463946 Binary files /dev/null and b/brand/mark/mark-1024.png differ diff --git a/brand/mark/mark-128.png b/brand/mark/mark-128.png new file mode 100644 index 00000000..28177cc5 Binary files /dev/null and b/brand/mark/mark-128.png differ diff --git a/brand/mark/mark-16.png b/brand/mark/mark-16.png new file mode 100644 index 00000000..f1b88871 Binary files /dev/null and b/brand/mark/mark-16.png differ diff --git a/brand/mark/mark-192.png b/brand/mark/mark-192.png new file mode 100644 index 00000000..d531ad34 Binary files /dev/null and b/brand/mark/mark-192.png differ diff --git a/brand/mark/mark-256.png b/brand/mark/mark-256.png new file mode 100644 index 00000000..258d57ac Binary files /dev/null and b/brand/mark/mark-256.png differ diff --git a/brand/mark/mark-32.png b/brand/mark/mark-32.png new file mode 100644 index 00000000..ac18d17d Binary files /dev/null and b/brand/mark/mark-32.png differ diff --git a/brand/mark/mark-48.png b/brand/mark/mark-48.png new file mode 100644 index 00000000..2ed62cb2 Binary files /dev/null and b/brand/mark/mark-48.png differ diff --git a/brand/mark/mark-512.png b/brand/mark/mark-512.png new file mode 100644 index 00000000..15182def Binary files /dev/null and b/brand/mark/mark-512.png differ diff --git a/brand/mark/mark-64.png b/brand/mark/mark-64.png new file mode 100644 index 00000000..27879df2 Binary files /dev/null and b/brand/mark/mark-64.png differ diff --git a/brand/mark/mark-dark.svg b/brand/mark/mark-dark.svg new file mode 100644 index 00000000..6a8bd213 --- /dev/null +++ b/brand/mark/mark-dark.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + diff --git a/brand/mark/mark-on-dark.svg b/brand/mark/mark-on-dark.svg new file mode 100644 index 00000000..bade22f9 --- /dev/null +++ b/brand/mark/mark-on-dark.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + diff --git a/brand/mark/mark-on-light.svg b/brand/mark/mark-on-light.svg new file mode 100644 index 00000000..04835eb6 --- /dev/null +++ b/brand/mark/mark-on-light.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + diff --git a/brand/mark/mark.svg b/brand/mark/mark.svg new file mode 100644 index 00000000..7b93d442 --- /dev/null +++ b/brand/mark/mark.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + diff --git a/brand/og/og.png b/brand/og/og.png new file mode 100644 index 00000000..d7603e0a Binary files /dev/null and b/brand/og/og.png differ diff --git a/brand/og/og.svg b/brand/og/og.svg new file mode 100644 index 00000000..9503c94a --- /dev/null +++ b/brand/og/og.svg @@ -0,0 +1,69 @@ + + + + + + + + + + + + + + + + + + + + + hatch + + + Self-hostable HTTP request inspector. One command. + + + + + + POST /hook + + + + + + + + + + + + + + + + + + 200 14:32:01.041 + + + github.com/elfoundation/hatch + diff --git a/brand/og/og@2x.png b/brand/og/og@2x.png new file mode 100644 index 00000000..cdf2d022 Binary files /dev/null and b/brand/og/og@2x.png differ diff --git a/brand/wordmark/wordmark-1200x360.png b/brand/wordmark/wordmark-1200x360.png new file mode 100644 index 00000000..332be82a Binary files /dev/null and b/brand/wordmark/wordmark-1200x360.png differ diff --git a/brand/wordmark/wordmark-200x60.png b/brand/wordmark/wordmark-200x60.png new file mode 100644 index 00000000..22a99028 Binary files /dev/null and b/brand/wordmark/wordmark-200x60.png differ diff --git a/brand/wordmark/wordmark-400x120.png b/brand/wordmark/wordmark-400x120.png new file mode 100644 index 00000000..462ab5ac Binary files /dev/null and b/brand/wordmark/wordmark-400x120.png differ diff --git a/brand/wordmark/wordmark-800x240.png b/brand/wordmark/wordmark-800x240.png new file mode 100644 index 00000000..09ed777d Binary files /dev/null and b/brand/wordmark/wordmark-800x240.png differ diff --git a/brand/wordmark/wordmark-dark.svg b/brand/wordmark/wordmark-dark.svg new file mode 100644 index 00000000..4216a271 --- /dev/null +++ b/brand/wordmark/wordmark-dark.svg @@ -0,0 +1,25 @@ + + + + + + + + + + + + hatch + + diff --git a/brand/wordmark/wordmark-on-dark.svg b/brand/wordmark/wordmark-on-dark.svg new file mode 100644 index 00000000..63506937 --- /dev/null +++ b/brand/wordmark/wordmark-on-dark.svg @@ -0,0 +1,25 @@ + + + + + + + + + + + + hatch + + diff --git a/brand/wordmark/wordmark-on-light.svg b/brand/wordmark/wordmark-on-light.svg new file mode 100644 index 00000000..ea031c89 --- /dev/null +++ b/brand/wordmark/wordmark-on-light.svg @@ -0,0 +1,25 @@ + + + + + + + + + + + + hatch + + diff --git a/brand/wordmark/wordmark.svg b/brand/wordmark/wordmark.svg new file mode 100644 index 00000000..8456389d --- /dev/null +++ b/brand/wordmark/wordmark.svg @@ -0,0 +1,25 @@ + + + + + + + + + + + + hatch + + diff --git a/docs/brand/usage.md b/docs/brand/usage.md new file mode 100644 index 00000000..c2c0d0c5 --- /dev/null +++ b/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 + + + Hatch + +``` + +## 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.