Unify the editor toolbar and landing page on the single #0071e3 accent
(token --color-action-primary). Replace the fluorescent cyan/green outline
treatment (Libraries pill, overflow icons, compile/run/stop, feature tiles,
pricing/licensing badges, classroom banner) with solid fills following the
+Add button. Green/red kept solid and semantic-only (run/success, stop/error).
Two small fixes that compound:
1. Drop LLM model names from the landing AI section. The agent
auto-routes between several providers (9router combo, direct
DeepSeek, direct Gemini, future-others) and naming any of them on
the homepage misleads visitors. Replace "DeepSeek-V4-Flash and
Gemini 2.5 under the hood" with "frontier LLMs auto-routed for
cost and reliability" so the marketing line stays accurate as the
provider mix changes.
2. Pricing copy switches from absolute message counts (300/day,
700/day — small, intimidating, hard to anchor) to comparative
multipliers (Pro = 20×, Pro Max = 50×). Visitors instinctively
read these as "much more" without needing to count usage. The
multipliers reflect the new backend quotas (400/day, 1000/day,
committed separately in velxio-prod's pro overlay).
3. --color-bg-canvas moves from gray-1000 (#000000) to gray-950
(#0a0a0c). Pure black collided with the slightly-lighter card
surface (gray-900 #141416) and produced a harsh transition wherever
a `min-height: 100vh` page wrapper grew taller than its content —
visible on docs and user-profile pages with sparse content. The
2-luminance-step shift removes the jarring while keeping the dark
palette feel intact. gray-1000 stays in the scale for intentional
black uses.
All 9 locales updated for (1) and (2).
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>
David Montero