# AINA — Design Options Summary **Date:** 4 May 2026 · last revised 5 May 2026 (V4 homepage chosen · final brand artwork shipped) **Build:** [`apps/web/public/mockups/`](.) **Open the comparison board:** [`index.html`](./index.html) (open in any browser, or live at `/mockups/`) **Homepage redesign options:** [`landing-v2/index.html`](./landing-v2/index.html) (V4 chosen — see [landing-v2/README](./landing-v2/README.md)) --- ## Status (final) **Locked decisions:** - **Chat-first sandbox** is the product. One streaming-conversation primitive. Lesson + practice + evaluator + diagnostic all render as messages with embedded structured cards. - **Style B (Luminous Dark Glass) is primary** — the chrome for the chat shell, sandbox, assessment, and all in-product surfaces. - **Style A (Editorial Premium light) is secondary** — the chrome for marketing surfaces, the assessment intro page, and the dashboard. - **Style C (Sovereign Bold)** stays as the brand-campaign / printable-report wildcard. Not in production rotation. - **Indigo (#6F77FB) removed.** Gold + teal carry meaning; indigo was the SaaS tell. - **The "✨" emoji is gone.** Replaced with Playfair italic display in all dashboard / welcome contexts. **Original 22 mockups across eight screens (Turn 1–3):** | # | Screen | A · Editorial | B · Luminous | C · Sovereign | |---|---|---|---|---| | 01 | Marketing landing | ✓ | ✓ | ✓ | | 02 | Active learner dashboard | ✓ | ✓ | ✓ | | 03 | Sandbox lesson (chat-first) | ✓ | ✓ | ✓ | | 04 | Assessment-as-chat | ✓ | ✓ | — (inherits) | | 05 | Assessment intro (marketing) | ✓ | ✓ | ✓ | | 06 | **Sandbox states** (streaming · hint · success · error) | — | ✓ (1 file, 4 frames) | — | | 07 | **Q12 score reveal** (the climax) | — | ✓ | — | | 08 | **Mobile pass** | — | ✓ (sandbox 3 frames + assessment 2 frames) | — | **Added in Turn 4 (homepage redesign + brand refresh):** | # | Folder | What | Status | |---|---|---|---| | 09 | [`landing-v2/`](./landing-v2/) | 4 homepage redesign directions (V1 re-skin · V2 chat-as-hero · V3 score-card · **V4 product-tour**) + comparison board | **V4 chosen** — see [`landing-v2/README.md`](./landing-v2/README.md) | | 10 | [`mobile/frames/`](./mobile/frames/) | 3 single-frame phone mockups (`sandbox-resting`, `sandbox-hint-sheet`, `assessment-score-reveal`) extracted for reuse | Used by V4 | --- ## Revision (added after first review) User pushed back on the original 3-pane "flight simulator" sandbox: *"feels overwhelming. Why not a single chat window like Claude/ChatGPT/Gemini, with the lesson, exercise, and feedback streaming in one thread? That's how people actually use LLMs, it's mobile-friendly by default, and we can borrow Vercel AI Elements / shadcn primitives."* He's right and the call collapses the product. **All three sandbox variants have been rewritten as chat-first**, and a new Assessment-as-Chat surface has been added in Style A to demonstrate that the same shell handles the diagnostic. The 3-pane spec from the build doc is now an alternate "expert mode" idea, not the default. The chat shell: - Sticky orientation strip at top (lesson · step · score) - Conversation column max-width ~720px, centered - Mix of: streamed assistant prose · embedded structured cards (rubric, callouts, MCQ) · user attempts · inline action chips - Sticky composer at bottom - Two collapsible sidebars on desktop (lesson outline + trajectory); both become drawers on mobile The structured-card-in-message pattern is the load-bearing primitive — rubric scores, hint stacks, multiple-choice question cards, glossary cards all render *inside* assistant messages but are not text. This maps 1:1 onto Vercel AI Elements' `` / `` / `` primitives plus a small set of AINA-specific ones (``, ``, ``). --- ## TL;DR You stepped away with a request to brainstorm design options. You came back to **twelve self-contained HTML mockups** — four core screens × three style directions — plus one master comparison board that shows all of them in one grid. Design CLI couldn't run (needs an OpenAI key the host doesn't have), so I pivoted to handwritten production-quality HTML. Higher fidelity than image-gen for layout/typography, viewable in a real browser, copy-paste-able into Astro/Next as a starting scaffold. --- ## What was built ### 5 surfaces 1. **Landing Page** — first viewport above the fold (hero + score card + trust strip) 2. **Active Learner Dashboard** — post-assessment home (Continue Learning + Score + Next Up) 3. **Sandbox Lesson — chat-first** ✱ — the "flight simulator" rebuilt as a streaming conversation with embedded structured cards. Lesson, exercise, attempt, evaluator, hints all in one thread. 4. **Assessment-as-Chat** ✱ — same chat shell repurposed to deliver the 12-question diagnostic. Demonstrates one-primitive-many-products. 5. **Assessment Intro (Marketing Page)** — pre-assessment app landing ("Discover Your AI Readiness") that flows into the chat above. ✱ = chat-first surfaces (revised after first review) ### 3 style directions - **A — Editorial Premium** (light, refined, Knopf-meets-New Yorker) - **B — Luminous Dark Glass** (sovereign glassmorphism, sandbox-native, Apple × Arc) - **C — Sovereign Bold** (anti-decoration, max-scale Playfair, Phaidon × Linear) ### Files ``` aina-screens-20260504/ ├── index.html ← Master comparison board (start here) ├── SUMMARY.md ← This document ├── _shared/ │ ├── aina.css ← Design tokens shared by all mockups │ └── aina-mark.svg ← Logo mark ├── landing/ │ ├── A-editorial-premium.html │ ├── B-luminous-dark.html │ └── C-sovereign-bold.html ├── dashboard/ │ ├── A-editorial-premium.html │ ├── B-luminous-dark.html │ └── C-sovereign-bold.html ├── sandbox/ ← CHAT-FIRST (revised) │ ├── A-editorial-premium.html (streaming chat, light, message bubbles) │ ├── B-luminous-dark.html (streaming chat, dark glass, gold gradient) │ └── C-sovereign-bold.html (transcript style, no bubbles, hairline rules) ├── assessment-chat/ ← CHAT-FIRST (new) │ └── A-editorial-premium.html (Q4 of 12 diagnostic mid-flow) └── assessment/ ├── A-editorial-premium.html ├── B-luminous-dark.html └── C-sovereign-bold.html ``` Each HTML file is **self-contained** — Tailwind via CDN, Google Fonts (Playfair Display, Inter, JetBrains Mono), no build step. Open any one in a browser. --- ## What I locked in from your docs I read your full positioning doc, the Split-Screen Sandbox UI build spec, the Gemini Landing Page + Dashboard React scaffolds, the AINA Website / Dashboard / Luminous OS reference zips, and the brand board PNGs. The brief these mockups encode: **Brand:** - Deep navy `#0B132B` · Gold `#D4AF37` (and warmer bronze `#B88A44` → `#E4C177` for dark) · Teal `#1AA79D` · Cream `#FFFCF8` · Ink `#070A12` - Playfair Display 600/700 + italic for display · Inter for UI · JetBrains Mono for code - Logo: gold geometric "A" wing-mark + Playfair "AI NATIVE" with hairline gold rules framing "ACADEMY" small caps - Tagline: "Learn AI. Grow Your Edge. **Lead the Future.**" (last sentence italic gold) **Tone:** - Editorial, premium, calm, sober. Not generic SaaS. - Anti-hack ("AI fluency for your *actual* job. Not a job description. Not a template. Yours.") - Pro-flight-simulator (sandbox is the product) - Pro-meet-you-where-you-are (anxious skeptics welcome) **Hard rejections enforced everywhere:** - ❌ Generic 3-column SaaS feature grid (replaced with hairline-divided editorial blocks) - ❌ Purple/violet/indigo gradients (gold + teal only — see "kill the indigo" note below) - ❌ Icon-in-colored-circle as decoration (only used where it serves a state, e.g. progress) - ❌ Centered-everything (left-aligned editorial composition) - ❌ Decorative blobs / wavy SVG dividers - ❌ Emoji as design (the original `✨` welcome line is gone — Playfair italic replaces it) - ❌ "Welcome to AINA" / "Unlock the power of AI" / "Your all-in-one solution" (no generic hero copy) --- ## My recommendation **Don't pick one direction. Pick two.** ### Use Style A (Editorial Premium) for: - Marketing landing page - Assessment Intro (the new-user moment) - Dashboard (active learner home) This direction is the natural evolution of what you already have. It evolves the Gemini scaffolds and the Premium Brand Board V2 mockup. Cream + Playfair italic + soft wave patterns + refined cards. It's the trust/credibility face of AINA. ### Switch to Style B (Luminous Dark Glass) the moment the user enters the sandbox. The sandbox is your product. It should feel like a **cockpit**, not a course page. Dark glass + bronze gold gradient buttons + frosted panels matches your stated direction verbatim — *"Apple × Arc × premium glassmorphism × serious learning platform"*. It also gives the JetBrains Mono editor and the streaming output a genuine code-tool feel rather than a textbook one. There's also a strong narrative: the marketing world is light and editorial; the work world (sandbox) is luminous and focused. Light → dark = conscious work mode. That's a brand story that writes itself. ### Hold Style C (Sovereign Bold) as the wildcard. This is the most opinionated direction — and the one that would set AINA apart hardest from generic AI courseware. The 110px Playfair "Discover Your AI Readiness" hero, the editorial 4-column hairline grids, the Phaidon-meets-Linear restraint. Worth keeping for: - Investor/press materials - The brand campaign / homepage hero (if you wanted to stake a maximalist position) - Print-style report PDFs (the actionable AI Readiness Report would look stunning in this voice) For daily app chrome it's probably *too* opinionated. But the world has plenty of premium-feeling Stripe-clones; it has very few Phaidon-clones. Don't lose this idea entirely. --- ## Three concrete fixes I want to flag before you ship anything 1. **Kill the indigo `#6F77FB` accent.** Your canon currently lists three accents (gold, teal, indigo). Two is plenty — gold + teal carry meaning (warm value-creating signal vs. cool calm-knowledge signal). Indigo is what every SaaS tool uses, and it's the color closest to making this feel generic. Drop it. The variant mockups still use it sparingly so you can see what removing it would look like — A/B test if you must, but my call is remove. 2. **The "✨" welcome emoji has to go.** The current Gemini dashboard uses `Welcome back, Ali ✨` — emoji-as-decoration is a hard-rejection pattern in your own positioning. All three of my dashboard variants replace it with either Playfair italic + a hairline rule (A, B) or just Playfair on its own (C). Pick one and stick with it. 3. **The Sovereign Bold dashboard "AI Readiness 68" treatment is the strongest single visual idea in this set.** A 120px Playfair number with the label below, no chart, no card. It would make a perfect "investor visual" or "press shot" of the product even if you don't ship it as the main dashboard. Worth screen-recording. --- ## What's NOT in scope here (deferred, not forgotten) - **Mobile** — All mockups are desktop 1440px. With chat-first, the mobile design is now mostly free: drop both sidebars to drawers, keep the conversation column at 100%, bottom-sheet for hint stack. One mockup pass would lock it. Much smaller follow-up than the original 3-pane mobile redesign would have been. - **States beyond default** — These are "happy path" frames. Empty / loading-spinning / error / partial-stream / network-fail / rate-limit states for the chat aren't drawn. The pre-stream "AINA is thinking…" placeholder is implied but not rendered. - **Assessment-as-Chat in Styles B & C** — Only Style A is built (Editorial Premium). The dark-glass and transcript variants would inherit directly from the corresponding Sandbox shells; building them is mechanical. Tile placeholders are shown on the comparison board. - **In-lesson reading view** — There's a "long-form lesson chapter" view (the kind a user might want to print or read offline) that's *not* a chat. The chat handles "interactive lesson"; some content might still want a static reader. Not built — flag. - **Pricing / membership page** — Per ADR-022 (no regional pricing UI), needs careful design. - **For Teams / B2B page** — Not built. - **A11y review** — Color contrast on Style B `#A7A9B4` body on `#070A12` is at the edge of WCAG AA at small sizes. Fine for marketing flourishes; tighten for app body text. The amber tag color on cream in Style A needs a contrast double-check. The chat composer placeholder text is dim (`#0B132B/35`) — bump for AA. - **Vercel AI Elements actual code** — These mockups encode the structure. Porting to real `` / `` / `` / `` components from `ai-sdk` + shadcn is the next concrete build step. --- ## What I notably did NOT do (and why) - **No CSS framework migration.** I used Tailwind via CDN for the mockups so they're throwaway-easy to inspect. Production should use the design tokens in `_shared/aina.css` plus your existing `@aina/ui` package. The mockups are visual references, not component contracts. - **No image generation.** The gstack design CLI requires an OpenAI key. I pivoted to HTML, which I think gives you something more useful anyway — these are interactive, resizable, copy-paste-able. Image mockups would have been frozen pixels. - **No comparison-board feedback collection server.** The Step 0.5 flow in `/plan-design-review` would normally serve the board on a port and collect Submit/Regenerate JSON. Since you're stepping away, I left the board as a static `index.html` you can open. When you come back, just open it and tell me which directions you like — I'll iterate. --- ## Suggested next move — port to code Mockups encode every structural decision. Porting is mechanical, not design work. Three packages, each independently shippable: ### № 01 — `@aina/ui` chat shell (foundation) The reusable component package. Built on Vercel AI Elements + shadcn-ui + your existing tokens. **Components:** - `` — scrollable message column with auto-scroll behavior - `` — turn renderer with avatar + speaker label + timestamp - `` — sticky bottom textarea + tool buttons + submit, with mobile keyboard handling - `` — sticky top: lesson title + step pills + score chip - `` — left sidebar (collapsible on desktop, drawer on mobile) - `` — right sidebar (collapsible on desktop, swipe-up sheet on mobile) - `` — the structured evaluator card - `` — progressive hint reveal with bottom-sheet on mobile - `` — multiple-choice cards with selected state (used by diagnostic) - `` — the "earlier in this exchange" recap block - `` — inline horizontal action buttons (Try again / Hint / Solution) **Tokens:** port `_shared/aina.css` directly. CSS variables for `--aina-ink`, `--aina-glass`, `--aina-gold-grad`, `--display`, `--ui`, `--mono`, etc. **Storybook:** one story per component, plus integration stories for the four sandbox states + the Q12 reveal. ### № 02 — Marketing surfaces (Editorial Premium) Astro static, edge-cached, sells on first paint. Three pages first: - `/` — landing (hero + score card + trust strip + 3-promise + CTA) - `/assessment` — the intro page that flows into the chat - `/app/dashboard` — active learner dashboard (after they've taken the diagnostic) Reuse the `` tokens. Static where possible. Only the dashboard needs auth + data. ### № 03 — Diagnostic + first sandbox lesson, end-to-end The whole "first 15 minutes" of the product. Wired to: - Cloudflare Workers (`UserLearningAgent` + sub-agents per the runtime SDK) - The evaluator canon at `packages/canon/` - Score persistence in D1 - Streaming via the AI SDK - Q12 score reveal as the conversion moment This is where chat-first earns its keep — every component built for the diagnostic is the same one used in lessons. ### Out of scope for code port (deferred) - **Sovereign Bold** as a styled mode. Hold for later — possibly only ever shipped as the printable PDF report and the brand campaign site. - **In-lesson long-form reader** (the static reading view) — likely needed for some content types but not for the chat-first flow. - **For Teams / B2B page** — separate workstream. - **Pricing page** — needs the ADR-022 decision applied carefully. ### Three small fixes the port should bake in (already in the mockups, easy to miss) 1. **Body-text contrast on dark.** `#A7A9B4` body on `#070A12` is at the edge of WCAG AA at 12px. Bump to `#B8BAC4` or up the body text size to 13.5px+. 2. **Mobile composer keyboard handling.** Use `viewport-fit=cover` + `env(safe-area-inset-bottom)` so the composer doesn't get hidden by the home indicator. 3. **Reduced-motion respect.** The Q12 score reveal uses CSS animations. Wrap in `@media (prefers-reduced-motion: no-preference)` so the score appears immediately for users who've opted out. --- ## What's still NOT built (deferred) - **Sandbox states in Style A.** Only built in B since B is primary. If A is used for any in-app surface that needs state coverage, port the states across. - **In-lesson long-form reader** — non-chat content surface for explainer content. - **Pricing / membership page** — per ADR-022. - **For Teams / B2B page.** - **AI Readiness printable report** in Sovereign Bold — would be a beautiful brand artifact; not yet built. — end — — end —