g1t/.g1t/brand/README.md

80 lines4,657 bytesCodeBlame

Pick any line to see why it is the way it is: the commit, the pull request and issue it came from, and what the agent was thinking.

The fleet: g1t's new mark1# g1t brand files
2
Invite-only launch: sign in with GitHub, repository access and lifecycle, many emails, a new look3The 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
20Vectors scale the pixels freely, which blurs them at small sizes, so the
21small files are hand-fitted cuts on whole device pixels: at 16px each cell is
222px with no gap, at 32px 4px with a 1px gap, at 48px 5px with a 1px gap. The
23PNGs are drawn with every pixel edge on a device pixel.
The fleet: g1t's new mark24
25These are the files to upload to Stripe and similar services. The site serves
26its 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 |
Invite-only launch: sign in with GitHub, repository access and lifecycle, many emails, a new look32| `icon-transparent-1024.png` | 1024×1024, transparent | Placing the icon on a dark surface of your own |
The fleet: g1t's new mark33| `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
36## Sources
37
38`svg/` holds the source of every file above and of the site's favicons:
39
40| File | What it is |
41| --- | --- |
Invite-only launch: sign in with GitHub, repository access and lifecycle, many emails, a new look42| `svg/mark.svg` | The icon, the pixel 1, centred in a transparent square, for dark backgrounds (also `packages/theme/mark.svg`) |
43| `svg/mark-on-light.svg` | The icon on transparent, for light backgrounds |
44| `svg/mark-small.svg` | The 16px cut: each cell 2px, no gap |
45| `svg/icon-square.svg` | The icon on a full-bleed dark square, 1024 box on 100-unit cells (`icon-512.png`, `icon-1024.png`) |
46| `svg/icon-rounded.svg` | The icon on a rounded dark tile, the 256px cut (`brand/g1t-mark.*`) |
47| `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) |
48| `svg/favicon.svg` | The 16px cut with no tile, coloured for a light or dark browser (`favicon.svg` in the apps and `packages/theme`) |
49| `svg/logo.svg`, `svg/logo-on-light.svg` | The wordmark, transparent and cropped to its ink, for dark and light backgrounds |
50| `svg/logo-dark-bg.svg`, `svg/logo-light-bg.svg` | The wordmark with padding and a background, on 40px cells |
The fleet: g1t's new mark51
Invite-only launch: sign in with GitHub, repository access and lifecycle, many emails, a new look52`favicon.ico` in the apps holds the 16, 32 and 48px cuts of the icon on a
53rounded dark tile. The pixels are squares, so no file needs a font.
The fleet: g1t's new mark54
55## On the web
56
57`apps/web/public/brand/` is served at `https://g1t.sh/brand/` for emails and
58anything that links to the mark:
59
Invite-only launch: sign in with GitHub, repository access and lifecycle, many emails, a new look60- `g1t-mark.svg`, `g1t-mark.png` (256px): the icon on a rounded dark tile, readable on any background
61- `g1t-logo.svg`, `g1t-logo.png` (300×140, shown at 60×28): the wordmark for light backgrounds, used in g1t's emails
62- `g1t-logo-on-dark.svg`, `g1t-logo-on-dark.png` (300×140): the wordmark for dark backgrounds
Social cards for every page: og.g1t.sh63
64## Social cards
65
66Every page of g1t.sh and docs.g1t.sh links to its own card at `https://og.g1t.sh`,
Invite-only launch: sign in with GitHub, repository access and lifecycle, many emails, a new look67drawn by `services/og` in the same colours, type and pixels: the wordmark and
68the page's address along the top, its subject in the middle, its facts along
69the bottom, the pixel 1 standing large and faded off the right edge.
status.g1t.sh with incident management, invites that land you in the workspace, settings as pages, usage without quotas70
71There is no static social card. The brand card, the one for g1t.sh itself
72and for any page without a card of its own, is `https://og.g1t.sh/image?path=%2F`,
73with the lockup and the line "Where people and agents ship software
74together." When a card cannot be drawn, og draws the brand card instead.
75
76Every card's address carries the render version in its `v` parameter
77(`OG_RENDER_VERSION` in `packages/contracts/src/og.ts`), which is also part
78of og's cache key. Bump it in the same change as any change to the cards'
79design, the logo or the brand line: otherwise og, browsers and every site
80that has fetched a card keep showing the old one.