| 1 | /* |
| 2 | * g1t's design tokens. Every public site (the app, the docs) takes its |
| 3 | * colours and type from here, so a change lands everywhere at once. |
| 4 | * Each site maps these onto whatever its own framework calls them. |
| 5 | */ |
| 6 | :root { |
| 7 | /* The faces themselves are in fonts.css. */ |
| 8 | --g1t-font-sans: |
| 9 | "Hanken Grotesk", "Hanken Grotesk Fallback", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", |
| 10 | "Noto Color Emoji"; |
| 11 | --g1t-font-display: |
| 12 | "Bricolage Grotesque", "Bricolage Grotesque Fallback", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", |
| 13 | "Noto Color Emoji"; |
| 14 | --g1t-font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; |
| 15 | |
| 16 | /* Very dark gray, nearly neutral, three elevations. */ |
| 17 | --g1t-bg: #0f0f11; |
| 18 | --g1t-surface: #161618; |
| 19 | --g1t-raised: #1e1e21; |
| 20 | --g1t-line: #28282c; |
| 21 | --g1t-line-strong: #38383e; |
| 22 | |
| 23 | --g1t-fg: #ededef; |
| 24 | --g1t-fg-soft: #dcdce0; |
| 25 | --g1t-muted: #a0a0a8; |
| 26 | --g1t-faint: #86868e; |
| 27 | |
| 28 | /* |
| 29 | * Lavender, the colour of the logo's 1: the brand accent. Primary |
| 30 | * actions, links, focus rings, the current tab, selection, and g1t's |
| 31 | * own work. Text on it is --g1t-bg (9.2:1); as text on --g1t-bg it is |
| 32 | * 9.2:1, on --g1t-raised 8.0:1. |
| 33 | */ |
| 34 | --g1t-accent: #b6a8ff; |
| 35 | --g1t-accent-hover: #c9bfff; |
| 36 | --g1t-accent-dim: #8577e0; |
| 37 | --g1t-accent-low: #221e38; |
| 38 | |
| 39 | /* Mint: what is live, what passed, what is ready, what was added (13.8:1). */ |
| 40 | --g1t-success: #86efc4; |
| 41 | --g1t-success-dim: #4fb38e; |
| 42 | --g1t-success-low: #10302a; |
| 43 | |
| 44 | /* |
| 45 | * Status. Merged is a deeper, more saturated violet than the accent |
| 46 | * (6.0:1 on --g1t-bg), and always comes with the merge icon. |
| 47 | */ |
| 48 | --g1t-info: #8ab4ff; |
| 49 | --g1t-merged: #a678f5; |
| 50 | --g1t-warn: #ffbd8c; |
| 51 | --g1t-danger: #ff8394; |
| 52 | |
| 53 | /* |
| 54 | * The light palette, for a site that offers one (the app's Appearance |
| 55 | * setting; apps/web/app/app.css picks between the two with |
| 56 | * light-dark()). The same names with `light-` in front. A near-white |
| 57 | * page, white panels, and a deeper lavender so the accent still reads |
| 58 | * as text: every text colour here is at least 4.5:1 on bg, surface |
| 59 | * and raised (apps/web/app/lib/tokens.test.ts). |
| 60 | */ |
| 61 | --g1t-light-bg: #fbfbfa; |
| 62 | --g1t-light-surface: #ffffff; |
| 63 | --g1t-light-raised: #f1f1ef; |
| 64 | --g1t-light-line: #e4e4e1; |
| 65 | --g1t-light-line-strong: #d2d2ce; |
| 66 | |
| 67 | --g1t-light-fg: #18181b; |
| 68 | --g1t-light-fg-soft: #2e2e33; |
| 69 | --g1t-light-muted: #5c5c66; |
| 70 | --g1t-light-faint: #686871; |
| 71 | |
| 72 | --g1t-light-accent: #6b52c8; |
| 73 | --g1t-light-accent-hover: #5b42b8; |
| 74 | --g1t-light-accent-dim: #9584dc; |
| 75 | --g1t-light-accent-low: #ece8fb; |
| 76 | |
| 77 | --g1t-light-success: #0d7a52; |
| 78 | --g1t-light-success-dim: #3a9d77; |
| 79 | --g1t-light-success-low: #e2f4ec; |
| 80 | |
| 81 | --g1t-light-info: #2160cc; |
| 82 | --g1t-light-merged: #7c3fd1; |
| 83 | --g1t-light-warn: #a84f00; |
| 84 | --g1t-light-danger: #c42a43; |
| 85 | } |