@origingame/create-game 0.2.0 → 0.3.0

package/archetypes/third-person/assets/{skins/ember/skin.ogt → styles/ember/style.ogt}

@@ -1,52 +1,51 @@
-type skin
+type style
 version 1
 ---
-# Ember Vale's skin: a copy of the fantasy style pack (templates/ui-kit/tools/make-skins.py; CC0 art, OFL fonts; LICENSES.md).
+# Ember Vale's skin: a copy of the fantasy style pack (templates/ui-kit/tools/make-styles.py; CC0 art, OFL fonts; LICENSES.md).
 name "ember"
-base dark
-atlas "skins/ember/atlas.png" 384 256
+scheme dark
+atlas "styles/ember/atlas.png" 384 256
 scale 1
 palette {
-  bg "#1a120b"
-  bgSubtle "#241910"
-  surface "#efdfb8"
-  surfaceRaised "#efdfb8"
-  surfaceHover "#f4e8c8"
-  materialThick "#efdfb8"
-  materialRegular "#efdfb8f2"
-  materialThin "#efdfb8e6"
-  fg "#2a1a0c"
-  fgMuted "#3d2a18"
-  fgSubtle "#654b31"
-  fgInverse "#f4e8c8"
-  fill "#e2cc98"
-  fillStrong "#d6bc82"
-  border "#9b7a4a"
-  borderStrong "#5c4127"
-  accent "#7a520f"
-  accentHover "#74500e"
-  accentActive "#6a470c"
-  accentFg "#fff4dc"
-  accentInk "#6e470d"
-  accentSoft "#7a520f40"
+  backdrop "#1a120b"
+  well "#241910"
+  panel "#efdfb8"
+  panelHover "#f4e8c8"
+  panelRaised "#efdfb8"
+  line "#9b7a4a"
+  lineStrong "#5c4127"
+  ink "#2a1a0c"
+  inkMuted "#3d2a18"
+  inkFaint "#654b31"
+  inkInverse "#f4e8c8"
+  control "#e2cc98"
+  controlStrong "#d6bc82"
+  primary "#7a520f"
+  primaryHover "#74500e"
+  primaryActive "#6a470c"
+  onPrimary "#fff4dc"
+  primarySoft "#7a520f40"
+  highlight "#6e470d"
   focus "#8f2d1f"
-  thumb "#f4e8c8"
+  knob "#f4e8c8"
+  hud "#efdfb8"
   scrim "#0d0805cc"
+  shadow "#000000aa"
+  sheen "#ffffff52"
   success "#2d5a1e"
   warn "#704713"
   danger "#6e1b10"
   info "#22517f"
-  shadow "#000000aa"
-  stage "#1a120b"
+  health "#2d5a1e"
+  mana "#0a84ff"
+  xp "#bf5af2"
+  gold "#7a520f"
 }
 radius {
+  small 4
   control 4
-  field 4
-  block 4
-  card 4
-  panel 6
-  sheet 6
-  button 6
+  bar 4
+  panel 4
 }
 ramp {
   body 15 22
@@ -67,12 +66,12 @@ durations {
   slow 480
 }
 fonts {
-  body "skins/ember/Newsreader-Medium.ttf"
-  display "skins/ember/Cinzel-Bold.ttf"
-  numeric "skins/ember/Cinzel-Bold.ttf"
+  body "styles/ember/Newsreader-Medium.ttf"
+  display "styles/ember/Cinzel-Bold.ttf"
+  numeric "styles/ember/Cinzel-Bold.ttf"
   fallback "fonts/NotoSansSC-subset.ttf"
 }
-icons "skins/ember/icons.png" 8 4 {
+icons "styles/ember/icons.png" 8 4 {
   names "heart" "star" "coin" "lock" "pause" "gear" "sword" "shield" "potion" "gem" "key" "map" "bolt" "clock" "trophy" "home" "plus" "close" "check" "play" "back" "bag" "bomb" "crown" "flag" "apple" "leaf" "fire" "drop" "skull" "music" "person"
 }
 slice panel 4 4 96 96 16 authored
@@ -84,7 +83,7 @@ slice buttonDisabled 328 4 48 48 10 tint
 slice field 4 104 48 48 8 tint
 slice slot 56 104 48 48 10 tint
 slice tooltip 108 104 32 32 8 tint
-slice capsule 144 104 32 32 12 tint
+slice hud 144 104 32 32 12 tint
 slice track 180 104 32 16 6 tint
 slice fill 216 104 32 16 6 tint
 soft 252 104 64 64 24
@@ -96,7 +95,7 @@ tile 204 172 64 64 64 64 0.5 6 panel card
 shadow panel 0 10 18 2 "#000000b3"
 shadow card 0 4 8 0 "#00000066"
 shadow button 0 3 4 0 "#00000073"
-shadow capsule 0 3 6 0 "#00000080"
+shadow hud 0 3 6 0 "#00000080"
 press 0.98 0.96 1
 hover 0 1.0
 motion {

package/archetypes/third-person/package.json

@@ -13,6 +13,6 @@
     "test": "og test ."
   },
   "dependencies": {
-    "@origingame/engine": "0.2.0"
+    "@origingame/engine": "0.3.0"
   }
 }

package/archetypes/third-person/project.ogt

@@ -3,7 +3,7 @@ version 1
 ---
 name "Ember Vale"
 id "third-person"
-engine "0.2.0"
+engine "0.3.0"
 entry "src/main.ts"
 profile "3d"
 tick 60

package/archetypes/third-person/src/main.ts

@@ -26,9 +26,9 @@ import { BEACON_AT, buildVale, ground, HOURS, must, setHour } from "./world.ts";
 
 function start(world: World): void {
   for (const l of LANGUAGES) must(og.i18n.load(world, `strings/${l.code}.ogt`));
-  const skin = must(og.load.skin(world, "skins/ember/skin.ogt"));
+  const skin = must(og.load.style(world, "styles/ember/style.ogt"));
   const sound = (path: string) => must(og.load.sound(world, path));
-  must(og.ui.configure(world, { skin, sounds: { press: sound("audio/ui-press.ogt"), open: sound("audio/ui-open.ogt"), close: sound("audio/ui-close.ogt"), error: sound("audio/ui-error.ogt"), success: sound("audio/ui-success.ogt") } }));
+  must(og.ui.configure(world, { style: skin, sounds: { press: sound("audio/ui-press.ogt"), open: sound("audio/ui-open.ogt"), close: sound("audio/ui-close.ogt"), error: sound("audio/ui-error.ogt"), success: sound("audio/ui-success.ogt") } }));
   buildVale(world);
   spawnHero(world);
   spawnSentinels(world);

package/archetypes/third-person/src/ui.ts

@@ -1,4 +1,4 @@
-// Ember Vale's screens on og.ui and the skin in assets/skins/ember (the
+// Ember Vale's screens on og.ui and the skin in assets/styles/ember (the
 // engine's fantasy pack): the title over an orbit of the vale, the HUD
 // (hearts and beacons top-left, the dusk clock and pause top-right, the
 // kindling prompt and its progress at the bottom; on a touch screen a
@@ -216,7 +216,7 @@ function clock(world: World, g: GameV, dt: number): void {
 }
 
 function capsule(id: string, build: () => void): void {
-  og.ui.row(id, { gap: S.xs, cross: "center", padding: { left: S.sm, top: S.xs, right: S.md, bottom: S.xs }, frame: "capsule", background: { token: "surface" } }, build);
+  og.ui.row(id, { gap: S.xs, cross: "center", padding: { left: S.sm, top: S.xs, right: S.md, bottom: S.xs }, frame: "hud", background: { token: "panel" } }, build);
 }
 
 function clockText(g: GameV): string {
@@ -232,10 +232,10 @@ function hud(world: World, g: GameV): void {
   og.ui.setNavigation(false);
   og.ui.anchor("Status", { anchor: "topLeft", direction: "column", gap: S.sm }, () => {
     capsule("Hearts", () => {
-      for (let i = 0; i < HEARTS; i++) og.ui.icon(`Heart${i}`, "heart", { size: 22, tint: { token: i < g.hearts ? "danger" : "fillStrong" } });
+      for (let i = 0; i < HEARTS; i++) og.ui.icon(`Heart${i}`, "heart", { size: 22, tint: { token: i < g.hearts ? "danger" : "controlStrong" } });
     });
     capsule("Beacons", () => {
-      og.ui.icon("Fire", "fire", { size: 22, tint: { token: "accent" } });
+      og.ui.icon("Fire", "fire", { size: 22, tint: { token: "primary" } });
       og.ui.label("Count", say(world, "hud.beacons", { n: g.lit, total: BEACONS }), { step: "lg", font: "mono", nowrap: true });
     });
   });
@@ -243,9 +243,9 @@ function hud(world: World, g: GameV): void {
   og.ui.anchor("Dusk", { anchor: "topRight", gap: S.sm, cross: "center" }, () => {
     capsule("Clock", () => {
       const left = 1 - (g.hour - HOURS.start) / (HOURS.night - HOURS.start);
-      og.ui.icon("Glyph", "clock", { size: 20, tint: { token: left < 0.25 ? "danger" : "fg" } });
+      og.ui.icon("Glyph", "clock", { size: 20, tint: { token: left < 0.25 ? "danger" : "ink" } });
       og.ui.label("Hour", clockText(g), { font: "mono", nowrap: true, width: px(48) });
-      og.ui.meter("Left", Math.max(0, left), 1, { kind: "accent", width: px(touch ? 70 : 110) });
+      og.ui.meter("Left", Math.max(0, left), 1, { kind: "primary", width: px(touch ? 70 : 110) });
     });
     if (og.ui.actionButton("Pause", say(world, "hud.pause"), { icon: "pause", size: 48 }).clicked) paused = true;
   });
@@ -254,7 +254,7 @@ function hud(world: World, g: GameV): void {
   if (g.near >= 0 && g.ending === Ending.None) {
     og.ui.anchor("Prompt", { anchor: "bottom", offsetY: touch ? -150 : -24, direction: "column", cross: "center", gap: S.xs }, () => {
       capsule("Hint", () => {
-        og.ui.icon("Fire", "fire", { size: 18, tint: { token: "accent" } });
+        og.ui.icon("Fire", "fire", { size: 18, tint: { token: "primary" } });
         const pad = must(world.resource(og.Gamepad)).connected();
         og.ui.label("Text", say(world, touch ? "hud.hint.touch" : pad ? "hud.hint.pad" : "hud.hint.keys"), { nowrap: true });
       });
@@ -346,7 +346,7 @@ function settings(world: World, g: GameV, p: PrefsV): void {
     p.master = slider("Master", "settings.master", p.master);
     p.music = slider("Music", "settings.music", p.music);
     p.effects = slider("Effects", "settings.effects", p.effects);
-    og.ui.label("LanguageLabel", say(world, "settings.language"), { color: { token: "fgMuted" } });
+    og.ui.label("LanguageLabel", say(world, "settings.language"), { color: { token: "inkMuted" } });
     const r = og.ui.radio("Language", LANGUAGES.map((l) => say(world, l.key)), p.language, { horizontal: true });
     if (r.selected !== p.language) setLanguage(world, p, r.selected);
     p.reducedMotion = og.ui.toggle("Motion", p.reducedMotion, say(world, "settings.motion")).on;
@@ -375,7 +375,7 @@ function summary(world: World, g: GameV): "again" | "menu" | null {
   const title = won ? "over.won" : g.ending === Ending.Caught ? "over.caught" : "over.night";
   og.ui.modal("Summary", g.phase === Phase.Over, { title: say(world, title), locked: true, width: px(Math.min(400, og.ui.frameViewport().width - 32)) }, () => {
     og.ui.row("Mark", { width: grow, align: "center" }, () => {
-      og.ui.transition("Icon", true, { kind: "pop" }, () => og.ui.icon("Glyph", won ? "fire" : g.ending === Ending.Caught ? "skull" : "clock", { size: 48, tint: { token: won ? "accent" : "fgMuted" } }));
+      og.ui.transition("Icon", true, { kind: "pop" }, () => og.ui.icon("Glyph", won ? "fire" : g.ending === Ending.Caught ? "skull" : "clock", { size: 48, tint: { token: won ? "primary" : "inkMuted" } }));
       // From a third of a second into the summary, every frame: a burst plays only while it is called.
       if (won && g.overTicks >= OVER_DELAY + 20) og.ui.burst({ count: 14 });
     });
@@ -385,7 +385,7 @@ function summary(world: World, g: GameV): "again" | "menu" | null {
       og.ui.keyValue("Hurts", say(world, "over.hurts"), `${g.hurts}`, true);
       og.ui.keyValue("Best", say(world, "over.best"), g.best > 0 ? seconds(g.best) + (g.newBest ? " ★" : "") : say(world, "over.none"), false);
     });
-    og.ui.label("Record", say(world, "over.record", { runs: g.runs, wins: g.wins }), { color: { token: "fgMuted" }, align: "center", width: grow });
+    og.ui.label("Record", say(world, "over.record", { runs: g.runs, wins: g.wins }), { color: { token: "inkMuted" }, align: "center", width: grow });
     og.ui.row("Actions", { width: grow, gap: S.sm }, () => {
       if (og.ui.button("Again", say(world, "over.again"), { variant: "primary", width: grow }).clicked) chose = "again";
       if (og.ui.button("Menu", say(world, "over.menu"), { width: grow }).clicked) chose = "menu";

package/archetypes/topdown/package.json

@@ -13,6 +13,6 @@
     "test": "og test ."
   },
   "dependencies": {
-    "@origingame/engine": "0.2.0"
+    "@origingame/engine": "0.3.0"
   }
 }

package/archetypes/topdown/project.ogt

@@ -3,7 +3,7 @@ version 1
 ---
 name "Tomb Room"
 id "topdown"
-engine "0.2.0"
+engine "0.3.0"
 entry "src/main.ts"
 profile "2d"
 tick 60

package/archetypes/tower-defense/LICENSES.md

@@ -11,5 +11,5 @@
 | `assets/audio/*.ogt` | CC0 1.0 | `og sfx` presets (click, select, back, error, levelup) that `og cook` synthesises, written by the same script |
 | `assets/strings/*.ogt` | CC0 1.0 | self-made: the English and Chinese string tables |
 | `assets/fonts/NotoSansSC-subset.ttf` | SIL Open Font License 1.1 (`assets/fonts/OFL.txt`) | Noto Sans SC Regular, subset to Latin-1 and the characters of `assets/strings/zh-CN.ogt` by the same script from the project template's `assets/fonts/NotoSansSC-Regular-subset.ttf` |
-| `assets/skins/pathguard/*` | CC0 1.0 art, SIL OFL 1.1 fonts | the engine's cartoon style pack (`templates/ui-kit/assets/skins/cartoon`, `assets/skins/pathguard/LICENSES.md`) with this game's palette |
+| `assets/styles/pathguard/*` | CC0 1.0 art, SIL OFL 1.1 fonts | the engine's cartoon style pack (`templates/styles/cartoon`, `assets/styles/pathguard/LICENSES.md`) with this game's palette |
 | `references/*/*.png` | CC0 1.0 | frames of this game recorded by `tests/frames.og.ts` |

package/archetypes/tower-defense/README.md

@@ -55,10 +55,10 @@ og build . --publish         # dist/: the play page as it ships
   doorstep is a red number, a 6-tick hit stop, trauma and a kick, the
   lantern flashing red and squashing. Plants pop up when set and squash
   when they shoot.
-- **Screens on og.ui with a skin** (og-ui §2–§6, og-taste §1–§7): the
-  engine's cartoon pack recoloured as `assets/skins/pathguard` (cream
+- **Screens on og.ui with a style** (og-ui §2–§6, og-taste §1–§7): the
+  engine's cartoon pack recoloured as `assets/styles/pathguard` (cream
   panels on the night lawn, the lantern's orange as the one accent); the
-  title (`og.ui.mainMenu`), the HUD as capsules in the corners with
+  title (`og.ui.mainMenu`), the HUD as boxes in the corners with
   counting numbers (`og.ui.counter`), the plant tray (right on a wide
   screen, along the bottom on a phone), `og.ui.pauseMenu`, a settings
   dialog and the end card built from widgets (stars landing with
@@ -176,7 +176,7 @@ The visitors' numbers are `KINDS` and the waves `WAVES` in `src/systems.ts`.
    `fire`.
 3. **The field**: `MAP` in `tools/make-assets.py` (H hedge, R stone, G the
    gate, D the doorstep), then `python3 tools/make-assets.py && og cook .`.
-4. **The look**: `assets/skins/pathguard/skin.ogt`'s palette and the art
+4. **The look**: `assets/styles/pathguard/style.ogt`'s palette and the art
    in `tools/make-assets.py`.
 5. **Words**: `assets/strings/*.ogt`; a new Chinese string needs the
    script run again to subset the font.
@@ -225,7 +225,7 @@ in the engine repository).
 give the same bytes): the tileset, the map, the sprite sheet, the glow and
 particle textures and emitters, the sounds and the music, the `og sfx`
 preset files of the UI's sounds, and the font subset. `LICENSES.md` lists
-them; the skin's are in `assets/skins/pathguard/LICENSES.md`.
+them; the style's are in `assets/styles/pathguard/LICENSES.md`.
 
 ## Known limits (engine gaps, not design)
 

package/archetypes/tower-defense/assets/{skins → styles}/pathguard/LICENSES.md

@@ -1,13 +1,13 @@
-# Path Guard's skin (the engine's cartoon style pack, recoloured): licences
+# Path Guard's style (the engine's cartoon style pack, recoloured): licences
 
 | File | Licence | Origin |
 |---|---|---|
-| `atlas.png` | CC0 1.0 | self-made by the Origin Engine authors: drawn by `templates/ui-kit/tools/make-skins.py` (deterministic) |
+| `atlas.png` | CC0 1.0 | self-made by the Origin Engine authors: drawn by `templates/ui-kit/tools/make-styles.py` (deterministic) |
 | `icons.png` | CC0 1.0 | self-made: the kit's 32 icons (`tools/make-assets.py`) restyled by the same script |
-| `skin.ogt`, `*.ogt` | CC0 1.0 | written by the same script |
+| `style.ogt`, `*.ogt` | CC0 1.0 | written by the same script |
 | `Fredoka-SemiBold.ttf` | SIL Open Font License 1.1 (`OFL.txt`) | Fredoka SemiBold (Google Fonts); unmodified. Copyright 2016 The Fredoka Project Authors (https://github.com/hafontia/Fredoka-One) |
 | `LilitaOne-Regular.ttf` | SIL Open Font License 1.1 (`OFL.txt`) | Lilita One (Google Fonts); unmodified (Reserved Font Name "Lilita One"). Copyright (c) 2011 Juan Montoreano (juan@remolacha.biz), with Reserved Font Names "Lilita One" |
 
 Characters these fonts lack (Chinese, Japanese, Korean) are drawn with the
-skin's `fallback` font, `fonts/NotoSansSC-Regular-subset.ttf` (the platform's
+style's `fallback` font, `fonts/NotoSansSC-Regular-subset.ttf` (the platform's
 subset, OFL 1.1, `assets/fonts/OFL.txt`).

package/archetypes/tower-defense/assets/styles/pathguard/style.ogt

@@ -0,0 +1,111 @@
+type style
+version 1
+---
+# Path Guard's style: the engine's cartoon style pack (templates/ui-kit/tools/make-styles.py; CC0 art, OFL fonts;
+# LICENSES.md) in a night-garden palette: cream panels on the dark lawn, the lantern's orange as the one accent.
+name "pathguard"
+scheme light
+atlas "styles/pathguard/atlas.png" 384 256
+scale 1
+palette {
+  backdrop "#10231a"
+  well "#15301f"
+  panel "#fff4dc"
+  panelHover "#ffe9bd"
+  panelRaised "#fff4dc"
+  line "#20302a"
+  lineStrong "#20302a"
+  ink "#0f1a14"
+  inkMuted "#3a483f"
+  inkFaint "#45534a"
+  inkInverse "#fff4dc"
+  control "#ffe08a"
+  controlStrong "#ffd466"
+  primary "#974009"
+  primaryHover "#8f3c0a"
+  primaryActive "#863809"
+  onPrimary "#fff4dc"
+  primarySoft "#ff8c3a40"
+  highlight "#a8400a"
+  focus "#5cb6e8"
+  knob "#ffffff"
+  hud "#fff4dcf5"
+  scrim "#07120ccc"
+  shadow "#0b1a1299"
+  sheen "#ffffff52"
+  success "#06681b"
+  warn "#7b5102"
+  danger "#700b1c"
+  info "#2256af"
+  health "#06681b"
+  mana "#007aff"
+  xp "#af52de"
+  gold "#b44c0d"
+}
+radius {
+  small 6
+  control 6
+  bar 6
+  panel 10
+}
+ramp {
+  body 15 20
+  meta 13 18
+  caption 13 18
+  lg 19 26
+  xl 22 28
+  xl2 26 30
+  xl3 30 34
+  displaySm 32 36
+  displayMd 40 44
+  displayLg 52 56
+}
+durations {
+  instant 110
+  fast 160
+  base 280
+  slow 420
+}
+fonts {
+  body "styles/pathguard/Fredoka-SemiBold.ttf"
+  display "styles/pathguard/LilitaOne-Regular.ttf"
+  numeric "styles/pathguard/LilitaOne-Regular.ttf"
+  fallback "fonts/NotoSansSC-subset.ttf"
+}
+icons "styles/pathguard/icons.png" 8 4 {
+  names "heart" "star" "coin" "lock" "pause" "gear" "sword" "shield" "potion" "gem" "key" "map" "bolt" "clock" "trophy" "home" "plus" "close" "check" "play" "back" "bag" "bomb" "crown" "flag" "apple" "leaf" "fire" "drop" "skull" "music" "person"
+}
+slice panel 4 4 96 96 16 tint
+slice card 104 4 64 64 14 tint
+slice button 172 4 48 48 12 tint
+slice buttonHover 224 4 48 48 12 tint
+slice buttonPressed 276 4 48 48 12 tint
+slice buttonDisabled 328 4 48 48 12 tint
+slice field 4 104 48 48 10 tint
+slice slot 56 104 48 48 10 tint
+slice tooltip 108 104 32 32 10 tint
+slice hud 144 104 32 32 10 tint
+slice track 180 104 32 16 7 tint
+slice fill 216 104 32 16 7 tint
+soft 252 104 64 64 24
+divider 4 172 128 24 48 16 primary
+flourish 136 172 64 24 22 10 primary 2
+shadow panel 0 8 0 0 "#0b1a12cc"
+shadow card 0 5 0 0 "#0b1a1299"
+shadow button 0 5 0 0 "#0b1a12cc"
+shadow hud 0 4 0 0 "#0b1a1299"
+shadow slot 0 3 0 0 "#0b1a1266"
+textShadow display 0 4 0 "#0b1a12"
+# Body text gets a hairline of its own ink to the right: the Chinese fallback
+# (Noto Sans SC Regular) reads at the weight of the Latin face.
+textShadow body 1 0 0 "#20302a"
+press 1.08 0.88 3
+hover -3 1.04
+motion {
+  enter pop
+  stagger 50
+  toast pop
+  progress 360
+  shake 8
+  pop 0.22
+}

package/archetypes/tower-defense/package.json

@@ -13,6 +13,6 @@
     "test": "og test ."
   },
   "dependencies": {
-    "@origingame/engine": "0.2.0"
+    "@origingame/engine": "0.3.0"
   }
 }

package/archetypes/tower-defense/project.ogt

@@ -3,7 +3,7 @@ version 1
 ---
 name "Path Guard"
 id "tower-defense"
-engine "0.2.0"
+engine "0.3.0"
 entry "src/main.ts"
 profile "2d"
 tick 60

package/archetypes/tower-defense/src/main.ts

@@ -32,11 +32,11 @@ function must<T>(r: { ok: true; value?: T } | { ok: false; reason: string }): T
 
 function start(world: World): void {
   for (const l of LANGUAGES) must(og.i18n.load(world, `strings/${l.code}.ogt`));
-  const skin = must(og.load.skin(world, "skins/pathguard/skin.ogt"));
+  const skin = must(og.load.style(world, "styles/pathguard/style.ogt"));
   const sound = (path: string) => must(og.load.sound(world, path));
   must(
     og.ui.configure(world, {
-      skin,
+      style: skin,
       sounds: { press: sound("audio/ui-press.ogt"), open: sound("audio/ui-open.ogt"), close: sound("audio/ui-close.ogt"), error: sound("audio/ui-error.ogt"), success: sound("audio/ui-success.ogt") },
     }),
   );

package/archetypes/tower-defense/src/ui.ts

@@ -1,4 +1,4 @@
-// Path Guard's screens on og.ui and the skin in assets/skins/pathguard:
+// Path Guard's screens on og.ui and the skin in assets/styles/pathguard:
 // the title, the HUD (the light and the coins in the top-left corner, the
 // wave and pause in the top-right, the plant tray on the right on a wide
 // screen and along the bottom on a phone), the pause menu, the settings
@@ -30,8 +30,10 @@ type PrefsV = Value<typeof Prefs>;
  * millisecond), so the screens read it from here.
  */
 const SPACE = { xxs: 2, xs: 4, sm: 8, md: 12, lg: 16, xl: 24 } as const;
-type Theme = { readonly space: typeof SPACE };
-const THEME: Theme = { space: SPACE };
+/** The pathguard style's radius block (assets/styles/pathguard/style.ogt), read from here for the same reason. */
+const RADIUS = { bar: 6, panel: 10 } as const;
+type Theme = { readonly space: typeof SPACE; readonly radius: typeof RADIUS };
+const THEME: Theme = { space: SPACE, radius: RADIUS };
 
 /** A string of the active locale (og.i18n). */
 export function say(world: World, key: string, args?: Record<string, string | number>): string {
@@ -193,10 +195,10 @@ function platform(world: World, g: GameV, p: PrefsV): void {
   }
 }
 
-/** One HUD capsule: an icon and a number counting to its value. */
-function capsule(t: Theme, id: string, icon: string, value: number, tone: "accent" | "danger" | "fg"): void {
-  og.ui.row(id, { gap: t.space.xs, cross: "center", padding: { left: t.space.sm, top: t.space.xs, right: t.space.md, bottom: t.space.xs }, frame: "capsule", background: { token: "surface" }, radius: 999 }, () => {
-    og.ui.icon("Icon", icon, { size: 26, tint: { token: tone === "fg" ? "fg" : tone } });
+/** One HUD box: an icon and a number counting to its value. */
+function hudBox(t: Theme, id: string, icon: string, value: number, tone: "gold" | "danger" | "ink"): void {
+  og.ui.row(id, { gap: t.space.xs, cross: "center", padding: { left: t.space.sm, top: t.space.xs, right: t.space.md, bottom: t.space.xs }, frame: "hud", background: { token: "panel" }, radius: t.radius.bar }, () => {
+    og.ui.icon("Icon", icon, { size: 26, tint: { token: tone } });
     og.ui.counter("Value", value, { step: "xl", font: "display", durationMs: 300, width: px(56), align: "center" });
   });
 }
@@ -205,14 +207,14 @@ function hud(world: World, theme: Theme, g: GameV, t: TuneV): void {
   const small = phone();
   og.ui.setNavigation(false);
   og.ui.anchor("Purse", { anchor: "topLeft", gap: theme.space.sm }, () => {
-    capsule(theme, "Light", "heart", g.lives, g.lives <= 3 ? "danger" : "fg");
-    capsule(theme, "Coins", "coin", g.gold, "accent");
+    hudBox(theme, "Light", "heart", g.lives, g.lives <= 3 ? "danger" : "ink");
+    hudBox(theme, "Coins", "coin", g.gold, "gold");
     // A refused placement shakes the purse once, with the error sound (og-ui §6).
     if (g.refusedTick === world.tick) og.ui.shake({ sound: true });
   });
   let paused = false;
   og.ui.anchor("Waves", { anchor: "topRight", gap: theme.space.sm, cross: "center" }, () => {
-    og.ui.row("Wave", { cross: "center", padding: { left: theme.space.md, top: theme.space.xs, right: theme.space.md, bottom: theme.space.xs }, frame: "capsule", background: { token: "surface" }, radius: 999 }, () => {
+    og.ui.row("Wave", { cross: "center", padding: { left: theme.space.md, top: theme.space.xs, right: theme.space.md, bottom: theme.space.xs }, frame: "hud", background: { token: "panel" }, radius: theme.radius.bar }, () => {
       og.ui.label("Label", say(world, "hud.wave", { n: Math.max(1, g.wave), total: WAVES.length }), { step: "lg", font: "display", nowrap: true });
     });
     if (og.ui.actionButton("Pause", say(world, "hud.pause"), { icon: "pause", size: 48 }).clicked) paused = true;
@@ -223,11 +225,11 @@ function hud(world: World, theme: Theme, g: GameV, t: TuneV): void {
     PLANTS.forEach((name, kind) => {
       const price = cost(t, kind);
       const chosen = g.selected === kind;
-      og.ui.column(og.ui.idi("Plant", kind), { cross: "center", gap: theme.space.xxs, padding: { left: theme.space.sm, top: theme.space.xs, right: theme.space.sm, bottom: theme.space.sm }, frame: "card", background: { token: "surface" }, radius: 18 }, () => {
+      og.ui.column(og.ui.idi("Plant", kind), { cross: "center", gap: theme.space.xxs, padding: { left: theme.space.sm, top: theme.space.xs, right: theme.space.sm, bottom: theme.space.sm }, frame: "card", background: { token: "panel" }, radius: theme.radius.panel }, () => {
         og.ui.row("Top", { cross: "center", gap: theme.space.xs }, () => {
           og.ui.image("Picture", { texture: g.sheet as unknown as never, uv: uvOf(PICTURE[kind]!), width: px(small ? 32 : 44), height: px(small ? 32 : 44) });
           // The price: muted when the purse covers it, in danger's ink when it does not.
-          og.ui.label("Price", `${price}`, { step: "lg", font: "display", color: { token: g.gold >= price ? "fgMuted" : "danger" }, nowrap: true, width: px(40), align: "center" });
+          og.ui.label("Price", `${price}`, { step: "lg", font: "display", color: { token: g.gold >= price ? "inkMuted" : "danger" }, nowrap: true, width: px(40), align: "center" });
         });
         if (og.ui.button("Pick", say(world, `tower.${name}`), { variant: chosen ? "primary" : "secondary", size: small ? "medium" : "small", width: px(small ? 86 : 104) }).clicked) g.selected = kind;
       });
@@ -237,7 +239,7 @@ function hud(world: World, theme: Theme, g: GameV, t: TuneV): void {
   // On a phone the call for the next wave sits over the tray, in the thumb's reach.
   if (small) og.ui.anchor("Call", { anchor: "bottom", offsetY: -112 }, () => callButton(world, g, small));
   if (g.wave === 0 && !small) {
-    og.ui.anchor("Hint", { anchor: "bottom", padding: { left: theme.space.md, top: theme.space.xs, right: theme.space.md, bottom: theme.space.xs }, frame: "capsule", background: { token: "surface" }, radius: 999 }, () => {
+    og.ui.anchor("Hint", { anchor: "bottom", padding: { left: theme.space.md, top: theme.space.xs, right: theme.space.md, bottom: theme.space.xs }, frame: "hud", background: { token: "panel" }, radius: theme.radius.bar }, () => {
       og.ui.label("Text", say(world, "hud.hint"), { nowrap: true });
     });
   }
@@ -267,7 +269,7 @@ function settings(world: World, theme: Theme, g: GameV, p: PrefsV): void {
     p.master = slider("Master", "settings.master", p.master);
     p.music = slider("Music", "settings.music", p.music);
     p.effects = slider("Effects", "settings.effects", p.effects);
-    og.ui.label("LanguageLabel", say(world, "settings.language"), { color: { token: "fgMuted" } });
+    og.ui.label("LanguageLabel", say(world, "settings.language"), { color: { token: "inkMuted" } });
     const r = og.ui.radio("Language", LANGUAGES.map((l) => say(world, l.key)), p.language, { horizontal: true });
     if (r.selected !== p.language) setLanguage(world, p, r.selected);
     p.reducedMotion = og.ui.toggle("Motion", p.reducedMotion, say(world, "settings.motion")).on;
@@ -293,15 +295,15 @@ function endCard(world: World, theme: Theme, g: GameV, t: TuneV): "retry" | "men
       for (let k = 0; k < 3; k++) {
         const lit = k < stars && since >= 20 + k * 12;
         og.ui.transition(og.ui.idi("Star", k), true, { kind: "scale" }, () => {
-          og.ui.icon("Mark", "star", { size: 40, tint: { token: lit ? "accent" : "fillStrong" } });
+          og.ui.icon("Mark", "star", { size: 40, tint: { token: lit ? "primary" : "controlStrong" } });
         });
         if (lit && since === 20 + k * 12) og.ui.burst({ count: 10 });
       }
     });
     og.ui.counter("Score", g.score, { from: 0, durationMs: 900, step: "displayMd", font: "display", align: "center", width: grow });
     og.ui.row("BestRow", { width: grow, align: "center", gap: theme.space.sm, cross: "center" }, () => {
-      og.ui.label("Best", say(world, "over.best", { n: g.best }), { color: { token: "fgMuted" }, nowrap: true });
-      if (g.newBest) og.ui.transition("NewBest", since > 50, { kind: "pop" }, () => og.ui.badge("Badge", say(world, "over.newBest"), "accent"));
+      og.ui.label("Best", say(world, "over.best", { n: g.best }), { color: { token: "inkMuted" }, nowrap: true });
+      if (g.newBest) og.ui.transition("NewBest", since > 50, { kind: "pop" }, () => og.ui.badge("Badge", say(world, "over.newBest"), "primary"));
     });
     og.ui.column("Stats", { width: grow, gap: 0 }, () => {
       og.ui.keyValue("Waves", say(world, "over.waves"), `${g.won ? g.wave : Math.max(0, g.wave - 1)}/${WAVES.length}`, true);