TURN 2 · PORCELAIN CUTOVER to-be — every live screen from the as-built board, re-cut under Porcelain v2 permission classes

The same estate, in porcelain

Each card pairs the redesign with its permission class and an exact change list against the as-built source. Rules applied: Cinzel uppercase for titling · Iowan/Newsreader carry body · flat surfaces in product, glass only whispered in marketing · gold only as marketing italic pull-quotes (plus pointer role in console) · teal #1AA79D means action, everywhere · one radius scale · cream-fill + gold-ring primary CTA replaces the gold gradient. The cutover order and full change ledger are in 2g. The H1 gate (Cinzel vs Newsreader italic on marketing heroes) is isolated in 2h so it can be decided without blocking the rest.

2a aina-platform landing → Porcelain Marketing (dark) CLASS: MARKETING
AI Native Academy
The diagnosticYour scoreEvery lessonYour home
Log in Start Assessment

Stop watching AI courses.
Start simulating your future.

The driving school for the AI-native era.

Start your AI Readiness Assessment
Scroll to see live demos
The diagnostic

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
Or type your own answer…
What changes
① Ink deepens #070A12 → #07101D, text warms to cream #F5F1EA.
② H1 Playfair italic → CINZEL UPPERCASE; the gold phrase moves out of the H1 into a Newsreader italic pull-quote — gold's only marketing role.
③ Gold-gradient CTA → cream fill + gold ring (the one intentional divergence from production, per the flat lock).
④ Selection + eyebrows flip gold → teal: teal means action, even on marketing.
⑤ Glass demo cards → flat #0B1626 solids; waves whisper at 0.14 (was 0.35–0.6).
⑥ Chat question italic: gold → cream (gold never colors product-like UI, only pull-quotes).
2b Score-in-chat + Home drawer → Porcelain Product (dark) CLASS: PRODUCT
AINA · just now
Your AI Readiness Score
72 /100
Fluent-in-progress
CuriousAwareFluentNativeLeader

You're ahead of where you think you are — and stalled in a fixable place.

Start Lesson 01 → Download report
Academy
Home My Path Lessons Sandbox Score
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
What changes
① All gold leaves the product class: eyebrows, band verdict, chips → teal or cream.
② Primary chip = solid teal fill (action colour), ghost = hairline.
③ Numerals Playfair → Cinzel — titling figures hold the same weight.
④ Glass card fills → flat #0B1626; active nav gets a teal spine.
⑤ Verdict italic ("Fluent-in-progress") is Newsreader — serif italic stays, colour becomes teal.
2c aina-academy landing → Porcelain Marketing (light) CLASS: MARKETING
AI Native Academy
The gapHow it worksOffer
Sign in 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: structured missions, evaluated feedback, and a clear L1-L5 route from first principles to durable fluency.

Join the waitlist → See the practice loop
Confidence route L1-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.
What changes
① Mist #F9F8F4 → porcelain #F5F1EA; radial glows removed, waves whisper at 0.16.
② Variant headline splits: statement in Cinzel, the persona accent ("AINA gives you the road practice.") becomes the gold Newsreader pull-quote — works for all six A/B variants unchanged.
③ Gold-filled buttons → cream fill + gold ring, pill radius; ghost keeps hairline.
④ Instrument card: navy gradient → flat #07101D; step labels + ring gold → teal; the "5" numeral goes cream Cinzel.
⑤ Deck copy moves to Newsreader — Inter stays for nav, chips, buttons only.
⑥ Mobile fixed CTA bar keeps its pattern, opaque porcelain bg (as fixed in 1c).
2d Home dashboard → Porcelain Product (light) CLASS: PRODUCT

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 — 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.
What changes
① Gold exits the product surface entirely: gold kickers → teal, gold "Resume" button → solid teal, gold current-node ring + glow → 1.5px teal border, no glow.
② Continue card: navy gradient → flat #07101D; backdrop-blur cards → flat #FDFBF7.
③ H1 + card titles → Cinzel uppercase (sizes drop ~25% to hold optical weight); body/lede → Newsreader.
④ Loop grid fixed: 5 columns for 5 nodes (kills the phantom 6th track).
⑤ Buttons go pill (999px) per Porcelain control language; radius scale unified.
2e My Path → Porcelain Product (light) CLASS: PRODUCT

Level 2

Context Provision and Briefing

AINA routed this from your learner profile and recent evidence.

33% done
✓
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-provision constraint-setting
18m
○
03

Briefing under ambiguity

Locked · AI Fluent Plus

Upgrade to unlock the pedagogically ideal next step.

Practice in the Arena → View progress
What changes
① Title's gold-italic last word goes away — full Cinzel title; italics live only in Newsreader body.
② Radius unified to the Porcelain scale (16px cards — ends the 8px-vs-16px drift with 2d).
③ Status encoding adopts Mission Control's glyph contract: ✓ done, ◐ ring active, ○ open — shape + colour, colour-blind-safe; active card gets the teal border, not gold.
④ Locked state: 0.62 opacity fade → dashed hairline + explicit "Locked · AI Fluent Plus" pill (state named, not dimmed).
⑤ Gold Arena CTA → solid teal pill; "Free" chip gold → teal.
2f Sign-in → Porcelain Product (themed Clerk) FIXES 1f
AI Native Academy

Sign in to AINA

Welcome back. Pick up where you left off.

Continue with Google
or
Email address
you@company.com
Continue

No account? Sign up

What changes
① Pure Clerk appearance change in SignInPage.tsx / SignUpPage.tsx — no layout work: card #07101D, input #0B1626, primary #1AA79D, links teal.
② Sits on porcelain with the brand lockup above the card.
③ Cheapest ship in the whole cutover — recommended first.
2h The open gate — marketing H1 face
Option A — Cinzel uppercase (used across this board)
Stop watching AI courses. Start simulating your future.
Option B — Newsreader/Iowan, italic close (nearer the live Playfair voice)
Stop watching AI courses. Start simulating your future.

Only marketing heroes are gated — product/console typography (Cinzel titles, Inter chrome) is settled either way. Option B keeps the gold phrase inside the H1 (the live pattern); Option A moves gold to standalone pull-quotes. Everything else on this board is unaffected by the pick.

2g Change ledger + cutover sequence
Where each change lands in code
Tokens (both repos)One shared package: navy → #07101D, cream → #F5F1EA, one radius scale, kill glass/backdrop tokens on product, delete the @theme blue + stage colors in academy global.css. Files: aina-platform packages/ui/tokens/*.css · aina-academy packages/ui/src/tokens.css + apps/web/src/styles/global.css
TypeAdd Cinzel (400/500) + Newsreader var italic woff2 next to the existing self-hosted fonts; --aina-font-display → Cinzel (Georgia fallback), new --aina-font-editorial → Newsreader/Iowan. Uppercase-only rule enforced at the token layer with a documented lint note.
CTAsReplace --aina-gold-grad primary with cream-fill + gold-ring (marketing) and solid-teal (product). Files: components.css .aina-button--primary · marketing.css .marketing-button · HomeDashboard.tsx .home-btn--gold · MyPath.tsx Arena CTA
Gold demotionProduct surfaces: every gold fill/kicker/border → teal or hairline (2b 2d 2e). Marketing keeps gold only in Newsreader italic pull-quotes + CTA ring. Console keeps gold-as-pointer.
AuthClerk appearance overrides only (2f): SignInPage.tsx / SignUpPage.tsx.
HygieneLoopNav.tsx unicode glyphs → icons.svg sprite refs; HomeDashboard loop grid 6→5 columns; MyPath locked state named, not faded; stale DESIGN.md in mission-control rewritten to match.
Cutover sequence (risk-ordered)
1
Auth + hygiene

Clerk theme, LoopNav sprite, loop grid fix, delete stray blues. No visual-language decisions needed; ships today.

2
Token unification

One package, one radius scale, porcelain values, teal-means-action. Screens re-skin passively via vars.

3
Product surfaces

Dashboard, Path, lesson player, practice: gold demotion, flat lock, Cinzel titles (2b 2d 2e). Behind the staging flag that already exists.

4
Marketing (gated)

Both landings last — they wait on the 2h H1 decision and A/B cleanly against the live pages (the 6-variant harness already exists).

5
Console

Mission Control adopts the Console class (Inter, provenance pills, LivenessDot, gold-as-pointer) — already spec'd in Porcelain v2.