Phase 2: React scaffolding, self-hosted fonts, design tokens
Vite builds to dist/, deliberately not www/. www/ is still produced by sync-www.sh for the Phase 1 APK, which stays installable throughout the port; cutover is a one-line webDir change in capacitor.config.json. base is relative because Capacitor serves the bundle from the APK, where absolute asset paths would 404. index.html omits viewport-fit=cover on purpose. That string is what makes Capacitor's SystemBars plugin pass insets through to the page; without it the plugin pads the decor view and the layout is always between the status and gesture bars. Phase 1 learned this the hard way. Fonts are self-hosted for offline use, latin subsets only: three files at 68K, against the 133K Barlow costs today. Space Grotesk is variable, so one file covers 400-700. Dropped latin-ext and vietnamese. Carets are drawn as SVG, not typed. U+25BE and U+23EE sit outside every Latin subset and would fall back to a system font mid-label. base.css carries the settled palette and the measured vertical budget as tokens, so a component cannot quietly exceed it: 8 + 44 + 8 + 525 + 8 + 84 + 8 + 50 = 735 Verified: typecheck clean, 103 tests, vite build emits with the fonts copied, and www/ is untouched. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
13
CLAUDE.md
13
CLAUDE.md
@@ -254,10 +254,15 @@ panel 8 + 36 + 8 + 124 + 10 + 134 + 10 + 187 + 8 = 525
|
||||
pads (187 - 15) / 4 = 43px rows
|
||||
```
|
||||
|
||||
**Still open:** the typeface (mockups use Space Grotesk + Space Mono; Martian
|
||||
Mono and Archivo are the alternates on the specimen board) and whether the accent
|
||||
is `#FF4A00` or the current, softer `#ff7a1a`. Neither blocks the data and logic
|
||||
work, only the UI.
|
||||
**Typeface: Space Grotesk + Space Mono.** Space Grotesk for labels and headings,
|
||||
Space Mono for numerals and technical annotations. Self-hosted as woff2 under
|
||||
`public/fonts/` — the app must work with no network, as Barlow did. Martian Mono
|
||||
was the alternate and was rejected on measurement: it is a wide mono, and key
|
||||
labels already clear their buttons by only 2.3px at 7px.
|
||||
|
||||
**Accent: `#FF4A00`.** TE's orange, not the softer `#ff7a1a` Phase 1 used. It
|
||||
holds against both the light body and the dark mode's near-black, which matters
|
||||
because the accent has exactly one job — marking a control as live.
|
||||
|
||||
## Phase 2 must carry these UI changes
|
||||
|
||||
|
||||
Reference in New Issue
Block a user