AI NATIVE ACADEMY Design Options · 4 May 2026

The build is shaped.
B primary · A secondary.

Decision locked. Luminous Dark Glass is the primary chrome (sandbox, assessment, app surfaces). Editorial Premium is the secondary light surface (marketing, onboarding intro page, dashboard). Sovereign Bold remains as the brand-campaign / printable-report wildcard. Eight screens · twenty mockups across landing, dashboard, sandbox (chat-first + 4 states), assessment-as-chat (incl. Q12 score reveal), assessment intro page, and a full mobile pass.

Click any thumbnail to open full · All 1440×900 desktop unless noted · Read full notes
Style A

Editorial Premium (light)

Cream BG #FFFCF8, refined New Yorker / Knopf-book energy. Playfair italic gold accents on key phrases. Soft wave-line patterns. Sober slate body. Buttons: solid deep-navy primary. The closest evolution of the existing AINA visual identity.

Style B

Luminous Dark Glass

Near-black #070A12 with bronze-gold radial glow. Frosted glass panels, hairline borders, backdrop-blur. Bronze→gold gradient buttons. Apple × Arc × premium glassmorphism. Reads native for the sandbox. Premium fintech-of-learning.

Style C

Sovereign Bold

Cream BG, MAXIMUM-scale Playfair display (88–120px). Almost zero ornament. Hierarchy via type and whitespace. One single accent (bronze gold). Hairline rules only — no shadows, no card chrome. Phaidon book × Linear. Anti-decoration sovereignty.

Screen 01

Marketing Landing Page

First viewport above the fold · 1440×900

A · Editorial Editorial Premium
Open →
B · Luminous Luminous Dark Glass
Open →
C · Sovereign Sovereign Bold
Open →
Screen 02

Active Learner Dashboard

Post-assessment home with Continue Learning + Score + Up Next

A · EditorialEditorial Premium
Open →
B · LuminousLuminous Dark Glass
Open →
C · SovereignSovereign Bold
Open →
Screen 03 · chat-first (revised)

Sandbox Lesson — as a streaming chat

Lesson, exercise, attempt, evaluator — all in one conversation. Structured rubric & hint cards embedded inline. Two collapsible sidebars on desktop, mobile-perfect by construction. Replaces the earlier 3-pane "flight simulator" version.

New direction
A · EditorialEditorial Premium
Open →
B · Luminous Luminous Dark Glass Recommended
Open →
C · SovereignSovereign Bold
Open →
Screen 04 · primitive reuse

The Assessment, as a chat

Same chat shell, completely different content. Multiple-choice cards + suggestion chips replace the rubric + hints. Demonstrates that one primitive handles diagnostic + lesson + sandbox + evaluator — a massive simplification.

Same shell · New use
A · EditorialQuestion 4 of 12
Open →
B · LuminousQuestion 4 of 12Primary
Open →
C · Sovereign
Same shell, transcript.
Inherits the published-interview style from Sandbox C — open if needed; pattern is identical.
C · SovereignNot yet built
—
Screen 05

Assessment Intro (Marketing Page)

The "Discover Your AI Readiness" marketing/onboarding page · clicking Start Assessment opens the chat above.

A · EditorialEditorial Premium
Open →
B · LuminousLuminous Dark Glass
Open →
C · SovereignSovereign Bold
Open →
Screen 06 · Sandbox states (Style B)

The four moments that matter

Streaming · hint expanded · success passed · error. Same chat shell, four content states. Single document, frames stacked vertically — scroll to compare.

4 frames · 1 file
B · LuminousAll 4 states · scroll to view
Open →
Screen 07 · The emotional climax

Q12 — score reveal

The moment after the user finishes the diagnostic. 180px Playfair "68" with a subtle reveal sequence. Where you sit on the Anxious-to-Fluent distribution. Strengths/Focus split. Trajectory projection. Dual CTA: Start lesson or Read full report.

Climax
B · Luminous68/100 · Strong Foundation
Open →
Screen 08 · Mobile pass (Style B)

Same shell — on a phone.

Sidebars become drawers. Hint stack becomes a bottom sheet. Composer hugs the keyboard. The conversation column doesn't change — it's already mobile-perfect. Sandbox B mobile shows resting / drawer-open / hint-sheet states. Assessment B mobile shows Q4 mid-flow and the Q12 score-reveal adapted for mobile (sticky bottom CTA so the action stays thumb-reachable).

390 × 844
B · LuminousMobile Sandbox · 3 frames
Open →
B · LuminousMobile Assessment · 2 frames
Open →
Next step

Port to code.

The mockups encode every structural decision: chat shell, structured-card-in-message primitive, sticky orientation strip, dual collapsible sidebars, sandbox states, score-reveal moment, mobile drawers, dark-glass token system. Porting to real Astro/Next + Vercel AI Elements + shadcn is now mechanical work, not design work.

Suggested ship order — three packages, each independently useful:

  1. № 01@aina/ui chat shell — <Conversation>, <Message>, <Composer>, <OrientationStrip>, plus AINA-specific <RubricCard>, <HintStack>, <MCQCard>. Storybook + tokens.
  2. № 02Marketing surfaces — landing, assessment intro page, dashboard in Editorial Premium. Astro static, edge-cached. Sells on first paint.
  3. № 03Diagnostic + first sandbox lesson end-to-end — the chat shell wired to the evaluator, hint stack, score persistence, Q12 reveal. The whole "first 15 minutes" of the product. Cloudflare Workers + Workflows + the existing eval canon.

Reminder for the port: kill the indigo accent (#6F77FB), kill the "✨" emoji, and use the design tokens in _shared/aina.css as the source of truth, not the variant HTML files. Want me to start with № 01?