| 1 | # g1t brand files |
| 2 | |
| 3 | The mark is "the fleet": three 1s stepping back in depth, the agents at work |
| 4 | behind the one change in front. The front 1 is `#ededef` (`--g1t-fg`), the two |
| 5 | behind it are lavender `#b6a8ff` (`--g1t-merged`) at 65% and 35%, on the very |
| 6 | dark gray base `#0f0f11` (`--g1t-bg`). On light backgrounds the front 1 is |
| 7 | `#161618` and the lavender deepens to `#6b56e8`. |
| 8 | |
| 9 | These are the files to upload to Stripe and similar services. The site serves |
| 10 | its own copies from `apps/web/public` and `apps/docs/public`. |
| 11 | |
| 12 | | File | Size | Use | |
| 13 | | --- | --- | --- | |
| 14 | | `icon-512.png` | 512×512, dark square | Stripe branding icon (square, at least 128px), Slack, GitHub app avatars | |
| 15 | | `icon-1024.png` | 1024×1024, dark square | App stores and anywhere asking for a large square icon | |
| 16 | | `icon-transparent-1024.png` | 1024×1024, transparent | Placing the mark on a dark surface of your own | |
| 17 | | `logo-on-dark.png` | 1056×642, dark background | Stripe branding logo (wide), docs and decks on dark | |
| 18 | | `logo-on-light.png` | 1056×642, white background | Invoices, receipts and anywhere the background is light | |
| 19 | | `og-1200x630.png` | 1200×630 | Social and Open Graph card | |
| 20 | |
| 21 | ## Sources |
| 22 | |
| 23 | `svg/` holds the source of every file above and of the site's favicons: |
| 24 | |
| 25 | | File | What it is | |
| 26 | | --- | --- | |
| 27 | | `svg/mark.svg` | The mark on transparent, for dark backgrounds (also `packages/theme/mark.svg`) | |
| 28 | | `svg/mark-on-light.svg` | The mark on transparent, for light backgrounds | |
| 29 | | `svg/mark-small.svg` | The 16px cut: pixel-aligned, with a notch between the front 1's flag and the bar behind it | |
| 30 | | `svg/icon-square.svg` | The mark on a full-bleed dark square (`icon-512.png`, `icon-1024.png`) | |
| 31 | | `svg/icon-rounded.svg` | The mark on a rounded dark tile (`favicon.ico` at 32 and 48, `brand/g1t-mark.*`) | |
| 32 | | `svg/icon-padded.svg` | The mark with room for a circle crop (`apple-touch-icon.png`, `icon-192.png`, `icon-512.png` in the apps) | |
| 33 | | `svg/favicon.svg` | The 16px cut with no tile, coloured for a light or dark browser (`favicon.svg` in the apps) | |
| 34 | | `svg/logo.svg`, `svg/logo-on-light.svg` | The mark and the wordmark, transparent, for dark and light backgrounds | |
| 35 | | `svg/logo-dark-bg.svg`, `svg/logo-light-bg.svg` | The same lockups with padding and a background | |
| 36 | | `svg/og.svg` | The social card; its tagline uses Inter and JetBrains Mono as live text | |
| 37 | |
| 38 | The wordmark is "g1t" in Inter ExtraBold at -0.05em tracking, outlined to paths |
| 39 | so the files need no font. |
| 40 | |
| 41 | ## On the web |
| 42 | |
| 43 | `apps/web/public/brand/` is served at `https://g1t.sh/brand/` for emails and |
| 44 | anything that links to the mark: |
| 45 | |
| 46 | - `g1t-mark.svg`, `g1t-mark.png` (256px): the mark on a rounded dark tile, readable on any background |
| 47 | - `g1t-logo.svg`, `g1t-logo.png`: the lockup for light backgrounds, used in g1t's emails |
| 48 | - `g1t-logo-on-dark.svg`, `g1t-logo-on-dark.png`: the lockup for dark backgrounds |
| 49 | - `g1t-og.png`: the brand social card as `services/og` draws it, which that service falls back to if drawing fails |
| 50 | |
| 51 | ## Social cards |
| 52 | |
| 53 | Every page of g1t.sh and docs.g1t.sh links to its own card at `https://og.g1t.sh`, |
| 54 | drawn by `services/og` in the same colours, type and mark: the lockup and the |
| 55 | page's address along the top, its subject in the middle, its facts along the |
| 56 | bottom, the fleet standing large and faded off the right edge. |