AINA Design System · Landing the direction

One system, two surfaces,
a chat-first core.

A synthesis of v1 (warm editorial), v2.1 (Apple-meets-Arc discipline), and the live product truth — reconciled against the locked A/B/C decision and the chat-first canon. Toggle the theme to see both surfaces this system serves.

01 — THESIS

The synthesis in one sentence

Keep v2's discipline — material, depth & light; glass chrome; a floating shell; teal = interaction; gold = achievement; navy-tinted shadows; concentric radii; one emphasis per element — but re-found the system on the live dual-theme truth: warm-cream Editorial Premium for marketing, Luminous dark glass for the app, a single Playfair-italic gold accent re-permitted, the real live hexes, JetBrains Mono for prompts, and a chat-first shell as the core primitive.

02 — THE LOCKED CALL

B primary · A secondary · C wildcard

From the 4 May mockup board. Not one style — a dual-theme system with a campaign wildcard, unified by one _shared/aina.css token set.

Cream #FFFCF8

Secondary · Light

Editorial Premium

Marketing, onboarding intro, dashboard. Playfair italic gold accents, wave lines, sober slate body, solid deep-navy primary buttons.

A · secondary

Near-black #070A12

Primary · App chrome

Luminous Dark Glass

Sandbox, assessment, lessons. Bronze-gold radial glow, frosted glass, hairline borders, bronze→gold gradient buttons.

B · primary

Wildcard

Sovereign Bold

Brand campaign / printable report. Max Playfair (88–120px), hairline rules only, one bronze-gold accent, anti-decoration.

C · wildcard

03 — CONFLICTS RESOLVED

Where the versions disagreed

"Superseded" is not canonical — each conflict resolved against the live product, keeping v2's rules where they still hold.

Dimension	v1	v2.1	Resolved
Light atmosphere	warm beige	cool porcelain	Warm cream #FFFCF8→#F6F2EA + gold/teal washes
App chrome	—	white stage / porcelain	Luminous dark glass #070A12 + bronze-gold glow
Teal	#249487	#1C6B65	#0D7B72 light · #1AA79D dark — interaction
Gold	#C9A96E	#B88E4C only	Ramp #8F6F2F · #B88A44 · #6B5121 (dark #E4C177)
Emphasis	gold italic	zero italics	One Playfair-italic gold accent (A only)
Extra accent	lavender #6F77FB	deleted	Killed for good ✕
Product model	pages	page-based	Chat-first — one streaming conversation
Diagnostic	6 Q	6 Q	12 Q · MCQ + freeform · resumable
Naming	"assessment"	"assessment"	AI Readiness Assessment → Snapshot · no "unlock"
Fonts	3 families	2 families	Playfair (+italic) · Inter · JetBrains Mono

04 — RESOLVED TOKENS

The palette, live in this theme

Swatches read from the current theme — hit the toggle (top-right) to see the other surface. This is the _shared/aina.css set.

Atmosphere

#FFFCF8

Ink

#0B132B

Teal · interaction

#0D7B72

Gold · achievement

#B88A44

Bronze

#6B5121

Body · mist

#1F2937

Muted

#4B5563

User bubble

bronze→gold

05 — THE STRUCTURAL CHANGE

Chat-first shell

One conversational surface handles diagnostic + lesson + sandbox + evaluator. Lessons are inline widget cards, not pages. Below: the assessment-as-chat, rendered in the current theme.

AI Readiness AssessmentQuestion 4 of 12 · Snapshot pending

When AI gives you an answer that's almost right, what do you usually do? ▍

ATake it — good enough, move on.

BRe-prompt with more context and constraints.

CEdit it myself; faster than re-prompting.

DBuild an evaluator so it self-checks next time.

B — I usually re-prompt with more context.

Type your answer, or pick an option above…Send

Primitives: Conversation · Message · Composer · OrientationStrip · MCQCard · RubricCard · HintStack · ScoreReveal. Desktop adds two collapsible sidebars (steps / trajectory); mobile → drawers + bottom-sheet + keyboard-hugging composer.

06 — SCOPE OF CHANGES

What changes in this design system

Phased so we can land it incrementally. Nothing below is executed yet — this is the plan.

Re-found the token layer

Replace cool-porcelain with the dual-theme set; add a real [data-theme="dark"] Luminous scope in tokens/colors.css
Teal → #0D7B72/#1AA79D; gold → bronze-gold ramp; ink → #0B132B; add success/warning/error, glass, shell, user-bubble
Add Playfair italic axis + --font-mono (JetBrains); delete lavender/indigo; confirm no ✨

Chat-first shell components

New components/chat/: Conversation, Message, Composer, OrientationStrip, MCQCard, RubricCard, HintStack, ScoreReveal, ExplainerCard, Callout
Re-skin Button to A/B rules (deep-navy solid on light · bronze→gold gradient on dark)

Re-theme the UI kits

Platform → chat-first Luminous app (sandbox lesson · assessment-as-chat · Q12 reveal)
Website → Editorial cream V6 sticky-shell, light default + dark toggle · Social/Slides palette shift

Content & copy canon

12-Q diagnostic · 5 bands (Anxious·Curious·Strong·Fluent·Native) · 5 levels (MetaPrompting·Operator·Centaur·Builder·Orchestrator)
"AI Readiness Assessment/Snapshot" · strip "unlock" · landing fixes ($pnts, contrast, tap targets)

Cards + README

Redo specimen cards on the new tokens (light + dark) · rewrite README around A/B/C + chat-first · sync SKILL.md

07 — YOUR CALL

Four decisions to land it

Dual-theme frame confirmed?Editorial-cream = marketing/onboarding/dashboard · Luminous-glass = the app. Is the dashboard light (A) or dark (B)?

Italic gold accent back in?One Playfair-italic gold phrase per headline, in Editorial (A) only — agreed, or keep it out?

Systematize Sovereign (C)?Package it as a third theme, or leave it as a campaign/report wildcard we don't build into the system yet?

Execution order?Start P1 (tokens) + P2 (chat shell) now, or react to this doc first? Which repo screens should I ground the app kit against?

One system, two surfaces,a chat-first core.