| 1 | # Public website design |
| 2 | |
| 3 | The GPUI app is the product client and the website follows its visual language: |
| 4 | warm paper or charcoal, Shannon Sans, quiet navigation, distinct raised inputs, |
| 5 | and restrained blue for actions, selection and keyboard focus. This supersedes |
| 6 | the earlier serif “Tidal Folio” palette and typography description in this file. |
| 7 | The source already made that visual transition; this document now names its |
| 8 | actual authority. |
| 9 | |
| 10 | ## Source and updates |
| 11 | |
| 12 | `vendor/codewhale-design/` is the complete versioned GPUI design artifact. |
| 13 | Its `tokens.json` owns semantic colors, font fallbacks, spacing, control/panel |
| 14 | radii, focus geometry and native motion constants. Update it from the app's |
| 15 | design package as one folder; never edit consumer copies by hand. |
| 16 | |
| 17 | Run `python3 scripts/export-design-tokens.py` to regenerate |
| 18 | `web/app/tokens.css`. The exporter checks the portable artifact's own generated |
| 19 | files and maps its semantic names to the website's existing aliases. Run the |
| 20 | same command with `--check` to reject drift. A source digest identifies the |
| 21 | snapshot. Builds require no sibling checkout or network lookup for tokens. |
| 22 | |
| 23 | The terminal's Whale, Blue Stage and Shoreline presets remain owned by |
| 24 | `crates/palette/src/rgb.rs`. They are distinct themes; their copied GPUI |
| 25 | constants no longer supply the website's colors. |
| 26 | |
| 27 | ## Theme and components |
| 28 | |
| 29 | The website respects the OS appearance and the person's theme choice. The |
| 30 | footer, terminal code plates and existing homepage water section retain dark |
| 31 | surfaces. `web/app/styles/tokens-roles.css` maps each surface to the shared |
| 32 | palette; components use roles rather than hex values. |
| 33 | |
| 34 | Use the official whale assets and locally loaded Shannon Sans. Code uses the |
| 35 | system monospace stack at the artifact's size. CJK uses the shared fallback |
| 36 | order. The website keeps its larger reading measure and responsive heading |
| 37 | scale; a desktop workbench's density is not a requirement for a reading page. |
| 38 | |
| 39 | Controls and rows use the shared 6px radius, panels and code surfaces use 10px. |
| 40 | The native composer's 14px sheet radius and small pills remain explicit layout |
| 41 | choices. The common page gutter uses the shared page spacing; the responsive |
| 42 | section rhythm remains specific to the website. |
| 43 | |
| 44 | Reuse the existing navigation, command-copy control, sidebar, disclosure, |
| 45 | button and state components. Status needs words as well as color. Keep |
| 46 | permissions, costs and recovery understandable without implementation jargon. |
| 47 | |
| 48 | ## Interaction and evidence |
| 49 | |
| 50 | Keep one visible focus ring, using the artifact's width and offset. Body text, |
| 51 | secondary text, links and button labels must meet WCAG AA in both appearances. |
| 52 | Phone layouts must support keyboard navigation and avoid page overflow. |
| 53 | |
| 54 | The existing CSS easing fits the native 420/42/1 panel spring. Revisit that fit |
| 55 | if the shared spring changes. Motion responds to actions; no new decorative |
| 56 | animation. Reduced motion removes transition duration and looping animation. |
| 57 | |
| 58 | Verify the changed surface in a real browser at desktop and phone widths, |
| 59 | including focus, theme controls and reduced motion. Screenshots prove the |
| 60 | rendered source; they do not prove deployment or release acceptance. Public |
| 61 | claims continue to come from repository facts and the media manifest. |
| 62 |