Store
CONSUMER SURFACES
floom.dev
The public product. Landing, app pages, install wizard, sign-in, pricing, docs, 404. What visitors see.
Studio
CREATOR SURFACES
floom.dev/studio
The creator workspace. Deploy apps, manage secrets, view runs. 240px sidebar shell. /me now borrows the same tabbed language.
/
LANDING
Landing page · "Ship AI apps fast."
Locked positioning. H1 + sub "The protocol and runtime for agentic work." + kicker "Vibe-coding speed. Production-grade safety." Source of truth for the Floom design language.
/login
STORE
Sign in · Google + GitHub · BYOK note on signup
Magic link dropped this sweep. Two-column: form on left, value-prop panel on right. BYOK callout: "save your own GEMINI_API_KEY once — every app on Floom can use it." Real brand SVGs, no text-in-circles.
/pricing
STORE
Pricing · Free / Pro / Team · TBD placeholders
Renamed Cloud → Pro this sweep. Dollar amounts replaced with TBD/mo · placeholder until post-launch pricing research. Feature matrix still three tiers; fair-use language unchanged.
/store
STORE
App store · 12 cards · star counts + sort dropdown
Added per issue #361: star SVG + count on every card (hot-filled accent when >100), sort dropdown (Trending / Most recent / Most starred — last tagged "post-launch"). Category chips unchanged.
/p/:slug
STORE · RUN STATES
App page · split-view run surface · idle / running / complete
Input-left / output-right split, 380px fixed input column, input always visible during and after run (trust principle). 2026 chrome: quiet surfaces, typography-led output, one accent.
/p/:slug
STORE · INPUT STATES
App page · BYOK modal / saved-secret picker / light progress
State A: anon hits 5/5 free runs → BYOK modal. State B: signed-in user picks saved GEMINI_API_KEY. State C: non-dev progress UI per issue #358 — progress bar + step list + "Show details" disclosure. NOT a black terminal. Topbar Star + Remix + Install buttons per #356 + #361.
/p/:slug
STORE
Using an app · typed form + output side by side · consumer polish
Replaces v16's single-textarea chat UI. Form generated from floom.yaml. "Ran in 1.2s" success toast, "restored from your last run" chip, copy/share/run-again actions on output.
/install/:slug
STORE
Install in Claude · 4 client tabs, one JSON block · connected success state
Tab order: Claude Desktop · Claude Code · Cursor · Other. "Connected" success panel with mini Claude chat preview showing a live tool call. Closes the install loop.
/docs
STORE
Docs · sidebar nav · Examples section added
Added Examples section this sweep: 5 starter-manifest links (Lead Scorer, OpenDraft WhatsApp, Resume Screener, JWT Decode zero-AI, all 22 manifests). Main reference layout unchanged.
/me
STORE
Me · Studio-style tabbed dashboard · Overview / Apps / Runs / Secrets / Settings
Rewritten this sweep. 4 tabs mirror the Studio grammar. Stats strip (runs 7d · avg duration · installed apps · saved secrets), recent runs with fast-pill under 2s, pinned apps grid, right rail with workspace switcher + secrets peek + Discord CTA.
/me/secrets
STORE
Global secrets vault · one-per-user · inline add drawer
Addresses issue #360. Studio-linked shell, Secrets tab active. Callout "available to any app you run on Floom". Preset rows: GEMINI / OPENAI / ANTHROPIC / Custom. Table shows masked value, usage ("used by 3 apps"), rotate / revoke menu. Tip cards on who-can-see + rotation.
/me/apps
STORE
My installs + runs · duration pills + hover rerun
List of installed apps + recent run history. Duration pill per row (accent under 2s), circular rerun button on hover, sparkles empty-state with 3 starter-run chips for brand-new accounts.
/404
STORE
404 · friendly landing · search + popular links
New this sweep. Radial hero with "This page ran away." H1, search input, "Browse all apps" + "Back to home" CTAs, 6 popular-link cards (Lead Scorer, Competitor Analyzer, Resume Screener, OpenDraft, Docs, Pricing).
/studio/build
STUDIO
Deploy from GitHub · 6 steps + post-publish celebration
GitHub-primary, per-action visibility, live build log. Step 6 success state = celebration card with copy-link, "Install in Claude" CTA, view-product-page, share-on-X. Publishing states (draft / pending_review / published) from issue #359.
/studio
STUDIO
My apps · creator dashboard · traction milestone + inspiring empty state
Sidebar + metrics row + 3-col app grid with sparklines + recent activity table. "flyfast passed 500 runs" milestone banner, empty-state preview of what others shipped to seed first-time creators.
PRODUCT ISSUES · COVERAGE 2026-04-22
Seven issues landed in wireframes.
Each issue was translated to the surface it affects. None are implemented in code yet — this sweep is wireframes-only.
#356
Remix button
App page topbar gets a Remix action next to Star. Wireframe: app-page-input-mode.html topbar.
#358
Non-dev light progress output
Progress bar + step list + "Show details" disclosure. Replaces black terminal. Wireframe: State C of app-page-input-mode.
#359
Publishing pipeline states
draft / pending_review / published chips on the Studio build flow. Wireframe: deploy-from-github.html.
#360
Global secrets vault
One per user. Referenced by apps declaring GEMINI_API_KEY in floom.yaml. Wireframe: me-secrets.html.
#361
Star button + counts
Star action on /p/:slug; star counts on every Store card with sort-by-stars filter. Wireframes: app-page-input-mode + store.
#362
Reviews tab
Tab on /p/:slug (noted, structure stubbed in app-page header — dedicated tab surface deferred to next sweep).
BYOK
Rate-limit-then-BYOK
5 free runs on Floom's key → modal asks for user's own key. Login nudges on signup. Wireframes: State A of app-page-input-mode + login BYOK note.
FLOOM DESIGN LANGUAGE · v17
One system, two shells.
TYPE
Inter for body (400/500/600/700)
DM Serif Display for H1/H2
JetBrains Mono for tags, code, URLs
DM Serif Display for H1/H2
JetBrains Mono for tags, code, URLs
COLOR
Surface #f5f4f0 · Ink #0f172a · Muted #64748b
Accent #047857 · Bg #ecfdf5 · Border #d1fae5 · Danger #c44a2b
Accent #047857 · Bg #ecfdf5 · Border #d1fae5 · Danger #c44a2b
SHAPE
Cards: 1px border · 18px radius
Buttons: 10–12px radius · 600 weight
No drop shadows (print-grey); chrome dots + URL bar on every frame
Buttons: 10–12px radius · 600 weight
No drop shadows (print-grey); chrome dots + URL bar on every frame
SHELL
Store: top nav, max-width 1680, radial green hero
Studio: 240px sidebar (#F5F5F1) + topbar crumb + main
Studio: 240px sidebar (#F5F5F1) + topbar crumb + main
NOT THIS
No paper textures (#f3f0e8). No Iowan Old Style serif. No Avenir Next body. No heavy drop shadows. No #1f7a4d bottle-green. No radial gradients other than the single landing hero. No emojis in UI. No coloured left-border cards. No black-terminal run output. No magic-link sign-in. 15 purged colors (#eef2ff, #4338ca, #fef3c7, #92400e, #dcfce7, #166534, #059669, #fce7f3, #9d174d, #e0f2fe, #075985, #dbeafe, #1e40af, #fae8ff, #7e22ce) — gone from this sweep.
LEGEND
new= authored from scratch
·
polished= prior structure kept, content + flow refined
·
copied from v16= byte-for-byte
FLOOM WIREFRAMES · v17 · sweep 2026-04-22 · served from /var/www/wireframes-floom/v17/