Design in HTML. Build in Svelte. Ship to the App Store.
Every app on the Pal-E platform starts here as vanilla HTML and CSS. No frameworks, no build steps, no abstractions. When the design is right, it promotes through the pipeline unchanged. This page is built with the system it describes.
One CSS file per project. Design tokens in :root. Everything derives from them. Change a token, change everything. Projects override tokens to express their brand — the rules stay the same.
Every color, font, and spacing value lives in :root as a custom property. No hardcoded hex anywhere else. Brand changes are one-line edits.
Design for the phone. Add desktop at 600px. Two layouts, not five. The phone is the product.
Playground HTML copies directly into .svelte files. No screenshots. No reinterpretation. Copy-paste, add data bindings, done.
One container. One font stack. One accent. Fewer decisions, faster iteration. Structure the same, design what's different.
The default palette. Projects inherit these and override what they need. Westside uses #d42026 as its accent on a dark #0a0a0a background. MCD Tracker keeps the default blue. The system adapts — tokens change, rules don't.
Atkinson Hyperlegible for body text — designed for maximum readability at every size. System monospace for code. Two weights: 400 and 700. That's the entire type system.
Playgrounds use minimal vanilla JavaScript for interactions — a menu toggle, a tab switcher. Svelte replaces all of it. Event handlers become on:click. Conditionals become {'{#if}'}. Loops become {'{#each}'}. Reactive state becomes $: declarations. No vanilla JS survives promotion — Svelte handles it all.
Every app follows the same path from idea to App Store. Each stage has a gate. Nothing advances without approval.
Vanilla HTML + CSS. Hardcoded data. @-comment specs document what data each page needs. Prove the look on your phone.
Copy HTML into .svelte components. Add interactivity with mock data shaped by the @api specs. Prove interactions work without a backend.
Swap mock data for real API calls. Real auth via Keycloak. Deploy to cluster: Woodpecker CI, Harbor, ArgoCD.
{project}-appWrap in Capacitor. Build on Mac. TestFlight iteration. Apple review. Users install from a link.
board-capacitor-mobileA playground is ready for Stage 2 when all of the following are true. This is the gate — nothing promotes without it.
app.css) — zero inline styles, zero <style> blocksvar(--token) — zero hardcoded hex outside :root@-comment spec: @route, @api, @state, @interactivity, @gapsBasketball league management. Admin, coach, and parent dashboards. Dark theme, red accent.
McDonald's Monopoly code tracker. Scan receipts, track slots, redeem codes. Light theme.
Upload images and files for use across projects. Browser to MinIO in one step.