Foreman Page
Marketing, pricing, privacy, terms and support pages for Foreman, in English (root) and Korean (ko/), the promo film, and the place where the Mac app's Sparkle updates will live.
Published with GitHub Pages from main at https://bbdyno.github.io/Foreman-Page/.
Pages
| Page | English | Korean |
|---|
| Landing | index.html | ko/index.html |
| Pricing | pricing/ | ko/pricing/ |
| Privacy Policy | privacy/ | ko/privacy/ |
| Terms of Use | terms/ | ko/terms/ |
| Support | support/ | ko/support/ |
The HTML is generated and committed. All links are relative, so the site works from any base path. To preview, serve the folder (python3 -m http.server).
Where things come from
| What | Source | Made by |
|---|
| Copy | tools/site/en.mjs, tools/site/ko.mjs | tools/site/build.mjs (templates) |
| Cloud mailbox wording (iCloud for Apple devices, Google Drive app folder for Android/Windows) | tools/site/relay.mjs, the one place to change it | used by the copy, the privacy policy and the FAQ |
| Colors, fonts, easing | Foreman brand docs/design/tokens.json (Foreman repository, read only) | tools/theme/from-brand.mjs → tools/theme/theme.json → assets/tokens.css |
| Logo, favicon, touch icon, OG images | Foreman brand docs/design/logo, app-icon | tools/brand.mjs → assets/brand/ |
| Product screens | Real app captures (Foreman/docs/screens, clients/flutter/docs/screens), brand mockups where none exists | tools/screens.py → assets/screens/*.webp, screens.json |
| Layout and type | assets/site.css (uses only the token variables) | by hand |
| Fonts, icons | npm packages pinned in tools/package.json | tools/vendor.mjs → assets/fonts/, assets/icons/ |
| Promo film | tools/video/ (concept, storyboard, scenes, music spec) | tools/video/build.sh → assets/video/ |
Screens with neither a capture nor a mockup are left out of the pages, not replaced by placeholders. When the design repository adds a mockup, map its name in tools/screens.py (KEYS) and reference the key from the copy.
Build
cd tools
npm install && npx playwright install chromium
python3 -m venv .venv && .venv/bin/pip install pillow numpy
node vendor.mjs # fonts and icons into assets/
node theme/from-brand.mjs # brand tokens -> theme.json
node brand.mjs # logo, favicon, touch icon, OG images
.venv/bin/python screens.py # captures (or mockups) -> assets/screens
node site/build.mjs # tokens.css + the ten pages
The film uses the showreel skill's engine (~/.claude/skills/showreel, not vendored here):
python3 ~/.claude/skills/showreel/scripts/new_project.py video --ratio 16:9 --duration 40 # engine.js, fx.js, fonts
sh video/prepare.sh # captures and logo into the film project
sh video/build.sh # music, render (ko, en), mix, finish, site encodes
build.sh writes assets/video/foreman-<lang>-1080p.mp4 (download, with music), foreman-loop-<lang>.{webm,mp4} (720p, muted, for the landing page) and foreman-poster-<lang>.jpg. The landing page shows the film only when these files exist.
Changing the brand
Everything visual comes from the Foreman design repository (Foreman/docs/design, read only). A new brand version needs no edits to pages, CSS or scenes, only a rebuild:
cd tools
node theme/from-brand.mjs # tokens.json -> theme/theme.json (prints roles it had to fill by fallback)
node brand.mjs # logo, favicon, touch icon, OG images
.venv/bin/python screens.py # captures (or mockups) -> assets/screens
node site/build.mjs # assets/tokens.css + pages
node a11y.mjs # axe-core on all pages, light and dark (needs a local server on :8765)
sh video/prepare.sh && sh video/build.sh # film tokens (reel/theme.css), logo, captures; render ko/en
node verify.mjs # after pushing: live links, film playback, screenshots
theme/from-brand.mjs maps the brand's semantic tokens to the site's roles. A brand that leaves a role out (a monochrome brand may have no separate signal, success or danger color) gets the nearest role it does define; the script lists those substitutions.brand.mjs looks for each logo file under several names (FILES at the top). A brand that names its files differently needs a new candidate there.- Logo colors: parts drawn in the brand ink become
currentColor (so the header logo follows light/dark); parts in the brand accent, if any, take --signal.
- The film reads the same
theme.json (video/brandjs.mjs writes reel/theme.css). Its closing logo works with any lockup SVG: if the logo has a block drawn in the brand accent, the film's cursor flies into that spot; otherwise the logo is revealed from the left. The lock screen scene paints over the notification with the mockup's own background color, sampled by prepare.sh.
- If the brand changes fonts, update
fonts in from-brand.mjs, the font packages in vendor.mjs, and add the font to the film with new_project.py video --fonts "Family:wght@400;600".
Real captures
The site shows captures of the built apps wherever they exist, and the brand mockups only for screens that have no capture yet. tools/screens.py takes them from the Foreman repository (read only): docs/screens for the Apple apps and clients/flutter/docs/screens for Android and Windows (the Windows set is drawn by the Flutter test renderer). A PNG in tools/captures/ with the mockup's file name overrides both. Rebuild with .venv/bin/python screens.py && node site/build.mjs.
Site (tools/screens.py → assets/screens/<key>-<light|dark>.webp; REAL in the script maps keys to captures):
This is the beginning of the README. Read the rest at the original. Read the full README ↗
