| 1 | # g1t brand files |
| 2 | |
| 3 | The logo is G1T in 5×7 pixel capitals, the 1 in lavender; the icon is the 1. |
| 4 | |
| 5 | - **Letters:** one-pixel strokes on a 5×7 grid. The G sits at column 0, the 1 |
| 6 | at column 6 and the T at column 10, one column closer than the usual |
| 7 | advance, so the T's bar sits above the end of the 1's foot without |
| 8 | touching it. The wordmark is 15 by 7 cells. |
| 9 | - **Pixels:** each is its own square, 0.8 of its cell, centred, with square |
| 10 | corners. |
| 11 | - **Colour:** G and T are `#ededef` (`--g1t-fg`) and the 1 is lavender |
| 12 | `#b6a8ff` (`--g1t-merged`), on the very dark gray base `#0f0f11` |
| 13 | (`--g1t-bg`). On light backgrounds the letters are `#161618` and the 1 is |
| 14 | `#6b56e8`. Printed in one ink, everything is that ink. |
| 15 | - **Icon:** the 1 alone, centred in a square, for favicons, app icons and |
| 16 | the app's sidebar. |
| 17 | - **Name:** the product is "g1t" in lowercase in text. Only the artwork is |
| 18 | capitals. |
| 19 | |
| 20 | Vectors scale the pixels freely, which blurs them at small sizes, so the |
| 21 | small files are hand-fitted cuts on whole device pixels: at 16px each cell is |
| 22 | 2px with no gap, at 32px 4px with a 1px gap, at 48px 5px with a 1px gap. The |
| 23 | PNGs are drawn with every pixel edge on a device pixel. |
| 24 | |
| 25 | These are the files to upload to Stripe and similar services. The site serves |
| 26 | its own copies from `apps/web/public` and `apps/docs/public`. |
| 27 | |
| 28 | | File | Size | Use | |
| 29 | | --- | --- | --- | |
| 30 | | `icon-512.png` | 512×512, dark square | Stripe branding icon (square, at least 128px), Slack, GitHub app avatars | |
| 31 | | `icon-1024.png` | 1024×1024, dark square | App stores and anywhere asking for a large square icon | |
| 32 | | `icon-transparent-1024.png` | 1024×1024, transparent | Placing the icon on a dark surface of your own | |
| 33 | | `logo-on-dark.png` | 1056×642, dark background | Stripe branding logo (wide), docs and decks on dark | |
| 34 | | `logo-on-light.png` | 1056×642, white background | Invoices, receipts and anywhere the background is light | |
| 35 | | `og-1200x630.png` | 1200×630 | Social and Open Graph card | |
| 36 | |
| 37 | ## Sources |
| 38 | |
| 39 | `svg/` holds the source of every file above and of the site's favicons: |
| 40 | |
| 41 | | File | What it is | |
| 42 | | --- | --- | |
| 43 | | `svg/mark.svg` | The icon, the pixel 1, centred in a transparent square, for dark backgrounds (also `packages/theme/mark.svg`) | |
| 44 | | `svg/mark-on-light.svg` | The icon on transparent, for light backgrounds | |
| 45 | | `svg/mark-small.svg` | The 16px cut: each cell 2px, no gap | |
| 46 | | `svg/icon-square.svg` | The icon on a full-bleed dark square, 1024 box on 100-unit cells (`icon-512.png`, `icon-1024.png`) | |
| 47 | | `svg/icon-rounded.svg` | The icon on a rounded dark tile, the 256px cut (`brand/g1t-mark.*`) | |
| 48 | | `svg/icon-padded.svg` | The icon with room for a circle crop, the 512px cut (`icon-512.png` in the apps; `apple-touch-icon.png` and `icon-192.png` are cut the same way at their own sizes) | |
| 49 | | `svg/favicon.svg` | The 16px cut with no tile, coloured for a light or dark browser (`favicon.svg` in the apps and `packages/theme`) | |
| 50 | | `svg/logo.svg`, `svg/logo-on-light.svg` | The wordmark, transparent and cropped to its ink, for dark and light backgrounds | |
| 51 | | `svg/logo-dark-bg.svg`, `svg/logo-light-bg.svg` | The wordmark with padding and a background, on 40px cells | |
| 52 | | `svg/og.svg` | The social card; its tagline uses Hanken Grotesk and IBM Plex Mono as live text | |
| 53 | |
| 54 | `favicon.ico` in the apps holds the 16, 32 and 48px cuts of the icon on a |
| 55 | rounded dark tile. The pixels are squares, so no file needs a font. |
| 56 | |
| 57 | ## On the web |
| 58 | |
| 59 | `apps/web/public/brand/` is served at `https://g1t.sh/brand/` for emails and |
| 60 | anything that links to the mark: |
| 61 | |
| 62 | - `g1t-mark.svg`, `g1t-mark.png` (256px): the icon on a rounded dark tile, readable on any background |
| 63 | - `g1t-logo.svg`, `g1t-logo.png` (300×140, shown at 60×28): the wordmark for light backgrounds, used in g1t's emails |
| 64 | - `g1t-logo-on-dark.svg`, `g1t-logo-on-dark.png` (300×140): the wordmark for dark backgrounds |
| 65 | - `g1t-og.png`: the brand social card as `services/og` draws it, which that service falls back to if drawing fails |
| 66 | |
| 67 | ## Social cards |
| 68 | |
| 69 | Every page of g1t.sh and docs.g1t.sh links to its own card at `https://og.g1t.sh`, |
| 70 | drawn by `services/og` in the same colours, type and pixels: the wordmark and |
| 71 | the page's address along the top, its subject in the middle, its facts along |
| 72 | the bottom, the pixel 1 standing large and faded off the right edge. |