| 1 | --- |
| 2 | name: Codewhale |
| 3 | description: Tidal Folio — a paper sheet read under the sea. Ivory paper and a serif title voice above the waterline, the whale's navy and blue below; one palette owned by the TUI tokens. |
| 4 | colors: |
| 5 | # brand constants (brand/*.svg, shared with the TUI palette) |
| 6 | brand-black: "#000000" |
| 7 | brand-ink: "#070c1d" |
| 8 | brand-navy: "#0c1531" |
| 9 | brand-stage: "#142352" |
| 10 | brand-ice: "#ddeef9" |
| 11 | brand-cobalt: "#1535b2" |
| 12 | brand-blue: "#6aa6dc" |
| 13 | brand-cyan: "#78bce8" |
| 14 | ombre-start: "#1535B2" |
| 15 | ombre-end: "#6AA6DC" |
| 16 | # the sheet — crates/palette/src/tokens.rs, exported to web/app/tokens.css (generated, never hand-edit) |
| 17 | paper: "#f6f2e8" # WHALE_TEXT_BODY, Whale Ivory — the page above the waterline |
| 18 | paper-deep: "#e8eef8" # LIGHT_ELEVATED — the shallows; cards and code-adjacent plates |
| 19 | paper-card: "#fffdf8" # LIGHT_PANEL — a raised sheet on the paper |
| 20 | paper-edge: "#a9b8cf" # LIGHT_BORDER |
| 21 | ink: "#14213a" # LIGHT_TEXT_BODY |
| 22 | ink-soft: "#455168" # LIGHT_TEXT_SOFT |
| 23 | ink-mute: "#5b6780" # LIGHT_TEXT_MUTED |
| 24 | action: "#1535b2" # WHALE_COBALT — links and controls on paper |
| 25 | action-deep: "#142352" # WHALE_COMPOSER — primary button fill, hover for links |
| 26 | human: "#7a5500" # LIGHT_HUMAN — Signal Gold at AA on ivory |
| 27 | live: "#08766d" # LIGHT_LIVE |
| 28 | # the water — the same tokens, dark side |
| 29 | bg: "#070c1d" # WHALE_BG, the deep field and the footer seabed |
| 30 | chrome: "#0c1531" # WHALE_CHROME, terminal plates on either side of the waterline |
| 31 | panel: "#101c40" |
| 32 | composer: "#142352" |
| 33 | elevated: "#1a2c63" |
| 34 | border: "#2a3f72" |
| 35 | text-body: "#f6f2e8" |
| 36 | text-soft: "#b6c0d4" |
| 37 | text-muted: "#93a0b8" |
| 38 | action-on-dark: "#6aa6dc" # WHALE_ACTION, the sky end of the ombre |
| 39 | ice: "#ddeef9" |
| 40 | gold: "#f6c453" # WHALE_HUMAN, the one gold thread in the water |
| 41 | typography: |
| 42 | display: |
| 43 | fontFamily: "Newsreader, Georgia, 'Times New Roman', serif" |
| 44 | fontSize: "clamp(2.75rem, 6.4vw, 5.75rem)" |
| 45 | fontWeight: 500 |
| 46 | lineHeight: 0.98 |
| 47 | letterSpacing: "-0.022em" |
| 48 | heading: |
| 49 | fontFamily: "Newsreader, Georgia, 'Times New Roman', serif" |
| 50 | fontSize: "clamp(1.6rem, 2.9vw, 2.6rem)" |
| 51 | fontWeight: 500 |
| 52 | lineHeight: 1.1 |
| 53 | letterSpacing: "-0.022em" |
| 54 | subheading: |
| 55 | fontFamily: "Shannon Sans, ui-sans-serif, system-ui, sans-serif" |
| 56 | fontSize: "1.12rem" |
| 57 | fontWeight: 600 |
| 58 | lineHeight: 1.25 |
| 59 | body: |
| 60 | fontFamily: "Shannon Sans, ui-sans-serif, system-ui, sans-serif" |
| 61 | fontSize: "1rem" |
| 62 | fontWeight: 400 |
| 63 | lineHeight: 1.6 |
| 64 | rubric: |
| 65 | fontFamily: "JetBrains Mono, ui-monospace, monospace" |
| 66 | fontSize: "0.75rem" |
| 67 | fontWeight: 500 |
| 68 | letterSpacing: "0.12em" |
| 69 | code: |
| 70 | fontFamily: "JetBrains Mono, ui-monospace, monospace" |
| 71 | fontSize: "0.85rem" |
| 72 | fontWeight: 400 |
| 73 | lineHeight: 1.55 |
| 74 | rounded: |
| 75 | none: "0px" |
| 76 | sm: "5px" |
| 77 | md: "6px" |
| 78 | plate: "8px" |
| 79 | pill: "999px" |
| 80 | spacing: |
| 81 | xs: "4px" |
| 82 | sm: "8px" |
| 83 | md: "16px" |
| 84 | lg: "24px" |
| 85 | xl: "40px" |
| 86 | section: "clamp(3.5rem, 7vw, 6rem)" |
| 87 | components: |
| 88 | button-primary: |
| 89 | backgroundColor: "{colors.action-deep}" |
| 90 | textColor: "{colors.paper}" |
| 91 | rounded: "{rounded.sm}" |
| 92 | padding: "12px 22px" |
| 93 | typography: "{typography.body}" |
| 94 | button-secondary: |
| 95 | backgroundColor: "transparent" |
| 96 | textColor: "{colors.action-deep}" |
| 97 | border: "1px solid {colors.action-deep}" |
| 98 | rounded: "{rounded.sm}" |
| 99 | terminal-plate: |
| 100 | backgroundColor: "{colors.bg}" |
| 101 | border: "1px solid rgb(221 238 249 / 0.22)" |
| 102 | rounded: "{rounded.plate}" |
| 103 | shadow: "0 30px 60px -24px rgb(7 12 29 / 0.75)" |
| 104 | nav: |
| 105 | backgroundColor: "rgb(246 242 232 / 0.94)" |
| 106 | textColor: "{colors.ink}" |
| 107 | height: "62px" |
| 108 | --- |
| 109 | |
| 110 | ## Overview |
| 111 | |
| 112 | The website is a folio read under the sea. The top of every page is paper — |
| 113 | Whale Ivory, the very ink the terminal paints on its dark stage — set with a |
| 114 | large serif title voice and thin navy rules. Every page descends: the |
| 115 | homepage through a waterline into the whale's navy for the surfaces, the |
| 116 | composer, and the community; every other page through a shorter waterline |
| 117 | into the footer, which is the seabed. The terminal capture floats at the |
| 118 | waterline like a lantern. The direction in one line, from the founder: |
| 119 | **"like it's a scroll we're reading under the sea."** Serious product, |
| 120 | manuscript character, the product's own ocean ombre. |
| 121 | |
| 122 | This replaces the all-dark "Tideline stage" website of 2026-09-01. The TUI |
| 123 | and the signed-in app keep their dense dark workbench; the website is the |
| 124 | paper the product is read from. The web-specific product truth is in |
| 125 | `docs/PRODUCT.md`. |
| 126 | |
| 127 | ## Anti-slop rules |
| 128 | |
| 129 | Hard rules, not taste notes. |
| 130 | |
| 131 | 1. **One drawn thing.** The water in `web/components/strata.tsx` is the only |
| 132 | illustration on the site: four translucent strata of the palette, softened |
| 133 | like an ink wash, with a few fine current lines. No photographs of water, |
| 134 | no stock imagery, no second illustration, no turbulence or grain filters. |
| 135 | The strata are geometry drawn from tokens — never a hex of their own. |
| 136 | 2. **No gradients as decoration elsewhere.** The ombre `#1535B2 → #6AA6DC` |
| 137 | lives in the mark, the wordmark, and the water. The ocean column's field is |
| 138 | the site's own chrome → bg descent — the navy water column is the TUI's |
| 139 | selectable `underwater` theme, not the ground the terminal opens on. That |
| 140 | ground is Shoreline, the warm charcoal and single blue shared with the GPUI |
| 141 | client (`docs/design/TUI_REDESIGN.md`). No spotlight glows, gradient text, |
| 142 | or gradient rules on paper. |
| 143 | 3. **One shadow.** The terminal plate at the waterline casts one soft, offset, |
| 144 | blue shadow. Nothing else on the site has a drop shadow. |
| 145 | 4. **No generic SaaS scaffolding.** No icon-card grids, logo walls, |
| 146 | testimonials, hero metrics, or badge soup. Sections are ruled columns and |
| 147 | fact lists on paper. |
| 148 | 5. **No fabricated evidence.** The one screenshot is the founder's own capture |
| 149 | of the v0.9.12 development build, captioned as exactly that. No invented |
| 150 | transcripts, benchmarks, or mockups; pending media stays `pending`. |
| 151 | 6. **No cloud claims.** Availability is stated per surface as it is today — |
| 152 | terminal released, web app account sign-in available with the workbench a |
| 153 | development preview, desktop a development build, cloud computers not |
| 154 | available yet — and the page changes when the state does. |
| 155 | 7. **Two dials, exact names.** Plan / Work / Operate and Ask / Auto-Review / |
| 156 | Full Access are typeset literally and never ranked; Full Access is a |
| 157 | choice, never described as a default. |
| 158 | 8. **No text below the floors** (12px functional, 11.2px rubrics) and no |
| 159 | text/background pair under 4.5:1 on either side of the waterline. |
| 160 | |
| 161 | ## Colors |
| 162 | |
| 163 | One palette, owned by `crates/palette/src/tokens.rs` and exported to |
| 164 | `web/app/tokens.css` by `scripts/export-design-tokens.py` — both the |
| 165 | `WHALE_*` dark tokens (`--whale-*`) and the Blue Stage light preset's |
| 166 | `LIGHT_*` tokens (`--light-*`). `web/app/globals.css` maps them to the site's |
| 167 | semantic names and never repeats a hex: |
| 168 | |
| 169 | - **Above the waterline (`:root`)** — `--paper` is Whale Ivory |
| 170 | (`WHALE_TEXT_BODY`), `--ink` the light preset's navy, `--indigo` cobalt for |
| 171 | links and outlines, `--indigo-deep` brand navy for the primary fill and |
| 172 | hover, `--signal-gold` and `--jade` at their light-preset AA values. |
| 173 | - **Below the waterline** — one rule (`.ocean-column, .site-footer, |
| 174 | html[data-theme="dark"] .docs-theme`) re-inks the same names with the dark |
| 175 | whale tokens, so a component is written once and reads correctly on either |
| 176 | side. `--indigo` becomes the sky blue `WHALE_ACTION`; the mark becomes the |
| 177 | white silhouette. |
| 178 | - **Terminal plates** (`pre.code-block`, the screenshot frame, the install |
| 179 | composer) are always the terminal's own navy, on paper or in water. |
| 180 | - The brand ombre exists in the mark, the wordmark, and the water only. |
| 181 | - State colours (`success`, `warning`, `error`, `human`) carry meaning and |
| 182 | never convey state alone. |
| 183 | |
| 184 | ## Typography |
| 185 | |
| 186 | Three faces with distinct roles: |
| 187 | |
| 188 | - **Newsreader 400/500 (+ italic)** — the display voice: `h1`, `h2`, the |
| 189 | gain columns' titles, the chapter title on the water. Book weight, tracking |
| 190 | −0.022em, `text-wrap: balance`. Loaded through `next/font/google` as |
| 191 | `--font-serif`. Never used below 1.3rem. |
| 192 | - **Shannon Sans variable 100–900** — body, buttons, links and small headings. |
| 193 | `--font-body` and the historic `--font-display`/condensed role share one local |
| 194 | upright face; their existing weights and scale distinguish the roles. Measure |
| 195 | ≤ 70ch. The font and its OFL notice live in `web/public/brand/fonts/`. |
| 196 | - **JetBrains Mono 400/500** — code, the `cw` dot chain, the plate's rubric |
| 197 | (`AGENTIC COMPUTING, ON YOUR TERMS`), the running heads (`02 / YOUR MODELS`). |
| 198 | These rubrics are the only tracked uppercase on the site. |
| 199 | |
| 200 | Han locales drop the tracking and set the serif slots in the CJK serif stack. |
| 201 | |
| 202 | ## Layout |
| 203 | |
| 204 | - One container (`--container: min(100% - 2rem, 76rem)`); every gutter aligns |
| 205 | with the nav. |
| 206 | - **The plate** (`.folio-hero`): two columns at ≥ 1050px — copy left, water |
| 207 | right; the terminal spans the left column's second row, the chapter marker |
| 208 | sits on the water bottom-right. Below 1050px it stacks: copy, terminal, |
| 209 | marker; the water still rises from the plate's floor. |
| 210 | - **Reading sections** (`.folio-section`): serif `h2` (max 24ch), an optional |
| 211 | lede (max 40rem), then either three ruled columns (`.folio-gain-grid`) or a |
| 212 | two-column chapter (`.folio-chapter-grid`) with a fact list on the right. |
| 213 | - **The waterline** (`.folio-waterline`, and `.site-footer-waterline` on every |
| 214 | other page): a band of the water, paper above, deep below. |
| 215 | - **The ocean column**: the surfaces list, the composer install band (bracketed |
| 216 | by Signal Gold and Operate violet, as in the TUI), community, footer. |
| 217 | - Breakpoints: 1050px (plate stacks), 760px (columns stack), 520px (compact |
| 218 | nav, full-width buttons). No horizontal overflow at 390px, ever. |
| 219 | |
| 220 | ## Motion |
| 221 | |
| 222 | The page is complete and static. Motion answers a person's action: a hover |
| 223 | draws a rule, a press stamps the copy button, the compact sheet settles in. |
| 224 | The one ambient moment is the ocean column's 90-second breath, opacity only, |
| 225 | gated on `prefers-reduced-motion: no-preference`. No scroll-reveal. |
| 226 | |
| 227 | ## Components |
| 228 | |
| 229 | - **Nav**: paper at 94%, hairline below. Left: navy mark + navy wordmark as |
| 230 | one link. Centre: Product · Models · Plugins · Pricing · Docs. Right: theme (docs |
| 231 | only), locale, stars, Sign in / Create account, one filled Install button. |
| 232 | The compact sheet adds Start · Install · FAQ · Community · Contribute. |
| 233 | - **Buttons**: `.folio-button` — brand-navy fill (primary) or navy outline |
| 234 | (secondary), body face, sentence case. Portal buttons on secondary pages |
| 235 | keep their mono meta style but use the same inks. |
| 236 | - **Fact lists** (`.folio-fact-list`, `.folio-availability-list`): hairline |
| 237 | rows, mono term on paper / serif term in the water, body description. |
| 238 | - **Terminal plate**: the screenshot at native 1136×698 with a chrome-navy |
| 239 | caption carrying the build line and the `cw` dot chain. |
| 240 | - **Footer**: the waterline band, then the seabed with the inverted wordmark. |
| 241 | |
| 242 | ## Do's and Don'ts |
| 243 | |
| 244 | Do |
| 245 | - Derive every fact from the repo; one owner per number. |
| 246 | - Write a component once and let the below-the-waterline rule re-ink it. |
| 247 | - Keep the whale mark and wordmark together in the nav; wordmark alone in the footer. |
| 248 | - Meet AA and the 12px floor on paper and in the water before shipping. |
| 249 | |
| 250 | Don't |
| 251 | - Add a second illustration, a photograph, a shadow, or a gradient on paper. |
| 252 | - Claim cloud execution, a released desktop app, or a default of Full Access. |
| 253 | - Add page-local copy; extend `lib/content/` and the dictionaries. |
| 254 | - Restore the scroll-reveal or any per-section entrance motion. |
| 255 |