Every screen below is rebuilt from the production source — real tokens, real copy, real breakpoints — not from memory. Desktop and mobile per route, with each screen's actual responsive behavior annotated. Reconciliation against Porcelain v2 is in 1g. Linear is not connected to this workspace, so issue references come from what's embedded in code (AIN-93 / AIN-168 waitlist gate).
1aaina-platform · Landing (V6 tour-then-chat, dark default)apps/web/public/homepage/index.html + landing-v6.css
The diagnosticYour scoreEvery lessonYour home
Log inStart Assessment
Stop watching AI courses. Start simulating your future.
Start your AI Readiness Assessment
Scroll to see live demos
The diagnostic
It starts with six honest questions. None of them are about AI.
✓ Streaming chat — feels like Claude, ChatGPT, Gemini
✓ MCQ + freeform escape — never trapped in 4 choices
✓ Resumable — close the tab, pick up where you left off
AINA · Question 4 of 6
Let's get honest for a second — no wrong answers here.
When you use AI at work, how do you actually feel?
Pick the closest match
AConfident — I direct it like a colleague
BFast but uneasy — I rarely check its work
CBehind — everyone else seems fluent
Or type your own answer…
Start Assessment
Stop watching AI courses. Start simulating your future.
Start your AI Readiness Assessment
Scroll to see live demos
The diagnostic
Six honest questions. None of them are about AI.
AINA · Question 4 of 6
When you use AI at work, how do you actually feel?
BFast but uneasy — I rarely check its work
Or type your own answer…
Responsive truth: dark theme is the shipped default with a light toggle (light flips gold to #8F6F2F for AA). Phone frames in the tour are hard-sized 390×844 to match /mockups/mobile/sandbox-B. Nav links hide below lg; hero drops 64→~38px.
You're ahead of where you think you are — and stalled in a fixable place.
Start Lesson 01 →Download report
Academy
HomeMy PathLessonsSandboxScore
Tuesday · 5 May
You've nudged your score by +6 this week.
Continue learning · Lesson 04 / 16
Constraint-setting: the brief that can't be misread
Score
72 +6
Path
L2
Lessons
4/16
Note: these are the animated in-page demos on the live landing (elements start hidden, JS reveals per scroll step) — the score card and dashboard drawer are the product's real visual contract: Playfair numerals, five-band strip, teal progress, gold-grad chips only.
You are not behind. The rules of competent work changed. AINA gives you the road practice.
You already know your field. AINA helps you translate that judgment into AI-native work: structured missions, evaluated feedback, and a clear L1-L5 route from first principles to durable fluency.
Join the waitlist →See the practice loop
Shipped now: structured practice, evaluator feedback, and the L1-L5 learning spine.
Confidence routeL1-L5
5 levels
BaselineKnow where you are before you start.
PracticeRealistic missions, not passive videos.
EvaluationScored feedback against visible criteria.
ProofArtifacts that show capability improving.
Fear
Everyone else seems fluent, and asking basic questions can feel expensive.
Agency
Treat AI fluency like driving: learn the controls, practice judgment, and build confidence before the stakes rise.
Join the waitlist
For experienced professionals
You are not behind. The rules of competent work changed. AINA gives you the road practice.
You already know your field. AINA helps you translate that judgment into AI-native work.
Confidence routeL1-L5
5 levels
Join the waitlist →See the practice loop
Responsive truth: ≤980px hero and offer collapse to 1 column, nav links hide; ≤640px the "Sign in" link disappears and a fixed bottom CTA bar (backdrop-blur) carries both actions — main gets 7.25rem bottom padding. Copy is a live 6-variant persona A/B (senior-pro default, PostHog-tracked); all CTAs are waitlist-locked by AIN-93/AIN-168.
1daina-academy · Home dashboard (/dashboard)HomeDashboard.tsx (styles inlined in component)
Learn · Grow · Command
Welcome back, Alex
You are building fluency. Pick up where you left off, or run a practice mission to make it stick.
Continue · Context Provision and Briefing
Constraint-setting: briefs that can't be misread
Practice setting boundaries an AI can't wander out of — scope, tone, and the failure modes you refuse to accept.
Resume lesson →Practice instead
Your AI readiness
Building fluency
62/100
Building fluency
Personalized for Marketing Manager.
View snapshot →
The learner loop
DiagnoseFind your current AI fluency baseline.
My PathFollow a path tailored to what you told us.
LessonLearn one durable capability in context.
PracticeRun missions and get scored feedback.
ProgressTrack growth and the next best step.
Next best action
Constraint-setting: briefs that can't be misread
Pick up your path and keep building practical AI fluency.
Open lesson →See full path
62%AI fluency
7Lessons completed
Building fluencyReadiness band
Marketing ManagerRole profile
Learn · Grow · Command
Welcome back, Alex
Continue · Context Provision
Constraint-setting: briefs that can't be misread
Resume lesson →Practice instead
Your AI readiness
62/100
Building fluency
Personalized for Marketing Manager.
LessonLearn one durable capability in context.
PracticeRun missions and get scored feedback.
Responsive truth: ≤900px hero/bottom grids collapse to 1 column and the loop goes 2-up; ≤600px h1 drops 56→40px, ring stacks above copy, loop and stats go 1-up. As-coded quirk: the loop grid declares 6 columns but renders 5 nodes — one empty track on desktop. Includes a full account-deletion card with receipt (not shown).
1eaina-academy · My Path (/path)MyPath.tsx (Tailwind + tokens)
Level 2
Context Provision and Briefing
AINA routed this from your learner profile and recent evidence.
33% done
Context Provision and Briefing
Give AI what it needs to do the work right - 45 min
✓
01
Why context beats cleverness
Free
The gap between a lazy prompt and a real brief, shown on your own work.
12m
02
The briefing pattern
In progress
Role, constraints, examples, escape hatches — the reusable brief skeleton.
context-provisionconstraint-setting
18m
🔒
03
Briefing under ambiguity
Upgrade to unlock the pedagogically ideal next step.
More unlocks as you progress — AINA re-routes your next step after every lesson.
Practice in the Arena →View progress
Level 2
Context Provision and Briefing
33% done
✓
01
Why context beats cleverness
The gap between a lazy prompt and a real brief.
02
The briefing pattern
In progress
Role, constraints, examples, escape hatches.
🔒
03
Briefing under ambiguity
Practice in the Arena →
Responsive truth: single 768px column throughout; ≤640px the header stacks (ring drops below title) and card meta wraps. The route serves one next lesson + optional locked "AI Fluent Plus" preview — the full-track list only appears in demo mode. Note the smaller radius scale here (8px cards) vs the dashboard's 16px.
Flag: the shipped Clerk theme uses default blues (#2563EB button, #60A5FA links) and a #0f1f3d card that belongs to no AINA token system. Cheapest brand win in the estate: navy-900 card, gold-grad primary, cream text.
1gReconciliation — live estate vs the design projects
Playfair italic is the shipped display voice. Gold-gradient CTAs, teal progress, cream/ink themes with a dark default on marketing.
Off-token strays (academy)
global.css @theme still ships Tailwind brand-blues + five "loop stage" colors, and the Clerk sign-in inherits default blue. None appear in the token files.
Porcelain v2 (this project)
Cinzel + Porcelain is a deliberate departure: nothing live sets uppercase titling serif, and aina-design's SKILL.md explicitly rejects Cinzel. Teal 1AA79D is the one unanimous constant.
Findings to act on
Radius drift: platform tokens say sm/md/lg = 4/8/12px; academy tokens say 10/16/22px. Same variable names, different geometry — visible between 1d (16px cards) and 1e (8px cards).
Clerk auth is unthemed (1f) — the only surface a paying user hits that carries zero brand tokens.
Stray blue token layer in academy global.css contradicts both token files and the DS guide's restraint on lavender/indigo.
LoopNav.tsx uses unicode glyphs (◎ ⟶ ◈ ▶ ↑) as icons — the DS bans unicode icons; HomeDashboard already does it right with the sprite.
Cinzel decision gates rollout: if Porcelain v2 ships, every screen above changes display face; if not, Porcelain's flat-surface + permission-class rules can still land on top of the live Playfair system with minimal churn.
All public CTAs are waitlist-locked (AIN-93/AIN-168 embedded in marketingVariants.ts) — design for the post-checkout CTA swap now so it's a copy change, not a layout change.