AI Native Academy · Consolidated Reference

All the design work, in one place

Every AINA design project — the design systems, Luminous OS and Luminous Glass, product surfaces, the lesson experience, the 30 lesson videos, website explorations, and the shipped Mission Control app — catalogued with what was done, the palette each era used, and where the files live. Key token files and docs are copied into this project under reference/.

Compiled 6 Aug 2026 · sources: local archive “AINA Design Explorations”, this project, and the aina-mission-control repo sync.

The lineage at a glance

Six eras. Each re-founded the palette; teal survived every one.

1 · Apr–May 2026
v1 — Warm Editorial

Playfair italic-gold accents, mist/stone neutrals, lavender info accent (later killed). Full DS + Luminous OS/Glass kits.

2 · Locked 4 May 2026
Luminous Dark Glass — B primary

The mockups-board call: dark glass app chrome primary, cream Editorial Premium secondary. Bronze→gold gradient CTAs, frosted panels.

3 · May 2026
Lesson UX canon + monorepo tokens

Chat-first lesson shell locked (Why → Mechanism → Practice → Refine → Apply). Ali’s recovered previews + LDS built on the real monorepo tokens.

4 · Jul 2026 (“0807”)
Porcelain v2.1 → Synthesis

“Apple-meets-Arc” cool porcelain, zero italics, glass discipline — then SYNTHESIS.md reconciled it back against the live dual-theme truth.

5 · Locked 16 Jul 2026
Sovereign — Cinzel edition

Ali’s locked call: Cinzel titling caps, hairline-only chrome, warm black (not navy), one gold phrase per screen. Supersedes the May 4 call.

6 · Aug 2026 · this project
Cinzel & Porcelain + shipped truth

Porcelain v2 boards reconciled against Mission Control’s real shipped “Luminous Glass” palette. Cinzel direction is a deliberate departure from the bound system.

Design systems

Five systems were built; each card says what it contains and where it lives in the local archive.

v1 · full brand system

AI Native Academy Design System

The original working system, translated from the brand boards + handoff doc. 22 preview specimens, full logo suite, voice & copy canon, and four UI kits: Luminous OS, Luminous Glass, website, plus a Learner Loop prototype and Mobile & Assistant surfaces.

archive: AI Native Academy Design System tmp/
tokens copied → ds-v1-tmp-colors_and_type.css
monorepo distillation

AINA Design System Exploration

Distilled from the live ainative-academy/ainativeacademy repo — canonical tokens from packages/ui/tokens/tokens.css, marketing-site + in-app chat-shell UI kits, 27 preview cards, and an animated explainer-video engine.

archive: AINA Design System Exploration/
tokens copied → ds-exploration-colors_and_type.css
lesson design system

AINA LDS Exploration

The canonical lesson UX as a system: one capability = one chat conversation = five steps. Tokens + lesson-shell UI kit (Message, ExplainerCard, RubricCard, HintStack, Composer, ScoreReveal) with 16 component preview cards. Built from Ali’s recovered previews.

archive: AINA LDS Exploration/
tokens copied → lds-aina-tokens.css
porcelain v2.1 + synthesis

0807 Design Exploration — Porcelain Cinzel

Full token layer (colors, type, elevation, materials, motion, radius, spacing), 8 component card groups, guidelines, and a variant lab (dashboard, platform, sandbox, score-reveal). Its SYNTHESIS.md reconciles v1 vs v2.1 vs the live product. A second copy exists as “…0807 (2)”.

archive: 0807 AINA Design Exploration Porcelain Cinzel/
copied → colors.css · typography.css · SYNTHESIS.md
locked direction · 16 Jul 2026

Ali — Cinzel Design System (“Sovereign Edition”)

The locked brand spec from Ali’s variant-lab screenshot: Cinzel titling caps + Inter + IBM Plex Mono, parchment #FDFBF6, warm ink #141210 (not navy), gold #7A5C24, teal #2C6E52, hairline-only chrome, one gold phrase per screen. Includes a full implementation handoff (DESIGN-HANDOFF.md + DESIGN-MANIFEST.json, 38 screens) and the sovereign board HTML. Note: the bound design system explicitly rejects Cinzel — this is a deliberate fork, continued in this project’s Cinzel & Porcelain boards.

archive: Ali - Cinzel Design System/ · brand spec copied → cinzel-brand-spec.md

Luminous OS · Luminous Glass · Surfaces

The learning-app surface work, from first kit to shipped product.

ui kit · dual theme

Luminous OS — lesson shell

Three-column chat-first lesson screen: LessonNav · ChatThread + sticky Composer · TrajectoryRail. Recap cards, streaming AINA messages, gold user bubbles, RubricCard with scored bars, hint ladder. Dual themes luminous-dark / luminous-light, persisted toggle.

archive: …Design System tmp/ui_kits/luminous-os/
css copied → luminous-os-app.css
ui kit · dark only

Luminous Glass — glassmorphic variant

Same lesson primitive on deep navy (#0A1422→#050B14) with fixed radial gold/teal light sources, fractal-noise grain, frosted panels (blur 20–28px), inset rim highlights, and gold as “liquid amber” fills. The name later became the shipped Mission Control palette.

archive: …Design System tmp/ui_kits/luminous-glass/
css copied → luminous-glass-app.css
pitch deck

Luminous OS — presentation deck

A standalone slide deck presenting the Luminous OS direction, built on the v1 foundations (navy 900, teal ramp, gold #C9A96E, mist/stone neutrals — the era that still had lavender). The self-contained export is viewable right here: open the deck.

archive: Luminous OS/ · v1 tokens → luminous-os-v1-colors_and_type.css
mobile + prototype

Mobile & Assistant Surfaces · Learner Loop

iOS/Android framed mobile surfaces and assistant chat (surfaces/), plus the interactive Learner Loop prototype (home → lesson → practice → assess screens with tweakable theme).

archive: …Design System tmp/surfaces/ + prototype/
shipped product · github

Mission Control — the real “Luminous Glass” in production

The ops dashboard (ainative-academy/aina-mission-control) ships navy #07101D · cream #F5F1E6 · teal #1AA79D · gold #E6C883, real glass surfaces, gold-gradient CTAs, and the data-trust state contract (live / stale / alert / not-wired). Its DESIGN.md is stale — trust src/index.css. Adopted into Porcelain v2: LivenessDot glyphs, provenance pills, gold-as-pointer, and the Console permission class. Full findings in github.md.

Lesson experience & lesson videos

canonical lesson ux · recovered 18 May

Ali’s lesson previews (recovered)

The canonical L1.1 prototype (structured-intent-spec), the L1→L3 universal-path viewer, all 30 authored lesson markdowns, and the governing docs: VISION, DECISIONS, CURRICULUM-MAP. This is the source the LDS and video work built on.

archive: ui-lesson-previews-ali-recovered-2026-05-18/
copied → lesson-ux-VISION.md · ali-recovered-tokens.css
motion · explorations

Lesson Video Explorations

First round of animated lesson videos: style-direction boards and five format prototypes — explainer (L1.9), whiteboard (L1.7), YouTube cut (L1.6), plus “Break the Monolith” and “When Sources Disagree” — with the studio/video kit that became the motion engine.

archive: Lesson Video Explorations Video/
motion · final system

30 Lesson Videos — Motion Language

All thirty 90-second 1920×1080 lesson videos across 3 levels, each page carrying six switchable style directions (Mixed Media default · Editorial Focus · Warm Editorial · Night Studio · Nightfall · Counterpoint). Deterministic playback with a render API (?t=12.5&chrome=0 / AINA_RENDER.seek()) for frame-capture pipelines. Plus launch films (Introducing / Teaser / Hook Cut), social cuts (9:16 reel, 1:1 square, “30 in 90”), a lyric manifesto, and style posters. The motion palette here is the fourth independent confirmation of the V6 dark ramp.

archive: 30 Lesson Videos Motion Language/ (open index.html for the library)
render guide copied → 30-lesson-videos-HANDOFF.md

Website & marketing

homepage explorations

AINA Website Explorations

Three homepage directions — Homepage.html, a “Streaming Window” variant, and a classic v1 — with live chat/lab demo components, Pi-style coding-animation briefs, and the scrollytelling reference. The V6 sticky-shell landing later became canon.

archive: AINA Website Explorations/
in this project: uploads/website-v4-tour-then-chat.html
this project · current boards

Cinzel & Porcelain (here)

The live working set: Cinzel Porcelain board, Porcelain Surfaces, Porcelain DS v2, v2 Restrained, v1 vs v2 surfaces, Amplifying Intelligence, and the Marketing Kit. Self-contained exports live in export/ with aina-tokens-all-themes.css.

Cross-project canon

Unanimous — safe to build on
  • Teal #1AA79D (dark) — confirmed in Mission Control, the V6 shell, the video tokens, and the bound system. Teal = interaction, exclusively.
  • Gold = achievement / emphasis only; never body text, never a wash. Ramp shifts per era but the role never does.
  • Chat-first lesson shell — one conversation, five steps — is the product primitive in every lineage.
  • Cream/parchment light + deep dark app chrome dual-theme model.
  • Inter for UI chrome; mono (JetBrains / IBM Plex) for prompts and scores.
Killed — do not resurrect
  • Lavender #6F77FB — removed in every post-v1 system.
  • ✨ emoji and “unlock / unlocked” in persuasion copy.
  • Stale specs: Mission Control’s DESIGN.md (olive-black + Cabinet Grotesk) — the shipped CSS is the truth.
  • Pill buttons (radius 10, never a pill) and stacked emphasis (italic + gold + weight together).

Still contested between lineages: display face (Playfair italic vs Cinzel caps), light ground temperature (warm cream vs cool porcelain vs parchment), and whether the app dark is navy or warm black. The Cinzel & Porcelain boards in this project are the active reconciliation.

Copied into this project

Token files and key docs now live here under reference/ so nothing depends on the local archive being mounted.

tokens/ds-v1-tmp-colors_and_type.css tokens/ds-exploration-colors_and_type.css tokens/lds-aina-tokens.css tokens/ali-recovered-tokens.css tokens/luminous-os-v1-colors_and_type.css tokens/luminous-os-app.css tokens/luminous-glass-app.css tokens/porcelain-0807-colors.css tokens/porcelain-0807-typography.css docs/0807-SYNTHESIS.md docs/cinzel-brand-spec.md docs/lesson-ux-VISION.md docs/30-lesson-videos-HANDOFF.md Luminous OS Deck (standalone).html