e0dbde0a76
Foundation
- Add 7 token CSS files in src/tokens/ — semantic colors, 4-pt spacing,
Apple-HIG type ramp, radius/elevation/motion/z-index scales.
- Refactor src/index.css to import tokens and remap legacy aliases
(--accent, --bg, etc.) onto the new --color-* semantics so existing
components keep rendering during migration.
- Drop the duplicate font-family from src/App.css; body inherits from :root.
- Global *:focus-visible ring backed by --color-focus-ring (WCAG 2.4.7).
Webfonts (self-hosted)
- Add Inter.var.woff2 (variable, OFL) and JetBrainsMono.var.woff2 to
public/fonts/. Preloaded in index.html with crossorigin.
- Old stack -apple-system kept as fallback so Mac users still get SF Pro.
- Fixes cross-OS rendering inconsistency (Win/Linux/Android were falling
back to Segoe UI / Roboto, breaking the type grid).
Component primitives
- New src/components/ui/{Button,Card,Input}.tsx + .css. Built on the
semantic tokens, ready for incremental migration of .ap-* CSS classes.
Lucide icons
- Replace 6 inline SVG icon components in LandingPage (IcoChip / IcoCpu /
IcoCode / IcoZap / IcoLayers / IcoMonitor) with lucide-react imports.
Aliased so call sites are unchanged. ~80 lines of inline SVG removed.
- IcoGitHub kept bespoke (filled glyph, brand-correct).
Marketing assets
- Convert top 8 boards to transparent PNG + WebP at 1x / 2x:
Arduino Uno, Nano, Mega 2560, Pi Pico, Pi Pico W, ESP32-C3,
ESP32-DevKit-V1, XIAO ESP32-S3.
- Migrate matching cards in LandingPage and Velxio2Page to <picture>
with WebP > PNG > SVG fallback. Other 8 boards keep <img src=*.svg>
for now (Raspberry Pi 3B, ESP32-CAM, etc.).
- Refresh og-image.png — same canonical URL, new content (4 hero boards
+ branding instead of generic logo card).
- Fix latent bug in LandingPage: ESP32 DevKit V1 card was loading
esp32-devkit-c-v4.svg; now uses esp32-devkit-v1.{webp,png,svg}.
Build verified: npm run build:docker succeeds, 246 SEO pages prerender.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
|
||
|---|---|---|
| .. | ||
| Inter.var.woff2 | ||
| JetBrainsMono.var.woff2 | ||
| README.md | ||
README.md
Self-hosted webfonts
Velxio's design system depends on two variable fonts shipped from this directory:
Inter.var.woff2— Inter variable, 100-900 weight axis. Source: https://github.com/rsms/inter/releases (download the latest, copyInter.var.woff2).JetBrainsMono.var.woff2— JetBrains Mono variable, 100-800 weight axis. Source: https://github.com/JetBrains/JetBrainsMono/releases (latest tag, file iswebfonts/JetBrainsMono[wght].woff2— rename toJetBrainsMono.var.woff2).
Both are SIL Open Font License 1.1 — include the LICENSE files alongside the woff2 if redistributing.
Why self-hosted
We previously used -apple-system, SF Pro which renders correctly on macOS only. Inter renders identically across Mac, Windows, Linux, Android. JetBrains Mono ships every glyph the editor needs (box-drawing, ligatures off by default — Monaco handles its own font separately, but our <pre> and inline <code> use this).
Preload
Both fonts are preloaded in index.html:
<link rel="preload" as="font" type="font/woff2" href="/fonts/Inter.var.woff2" crossorigin>
<link rel="preload" as="font" type="font/woff2" href="/fonts/JetBrainsMono.var.woff2" crossorigin>
The crossorigin attribute is required — without it the browser fetches twice.
Verifying
After deploy, in DevTools Network tab filter by "Font". Should show two requests, both with (memory cache) after the first page load. If you see Roboto / Segoe UI / Helvetica fall through, the font failed to load — check the woff2 path and CORS headers from your CDN.