# Application 2 — Learning (Courses) · Design System

> Single source of truth for continuing App 2. New screens **must** use only these tokens, components and patterns. If something is missing, add it here first, then build.

- Entry file: `apps/app-2/App 2 - Learning.html`
- Source: `apps/app-2/src/ui.jsx` (icons + reusable components) and `src/screens.jsx` (data, screens, phone shell, stage)
- Assets: `apps/app-2/assets/` (AI-generated illustrations, matched to the reference)
- Stack: React 18 + Babel in-browser. Plain CSS with custom properties in the HTML `<style>` block.

---

## 1. Principles

1. **Soft pastel blocks on cool off-white.** Each course or category owns one muted pastel (lavender, mustard, mint, sand). Everything else is white/grey + black.
2. **Black is the only "action" colour.** Play buttons, the active nav item, the selected day and the "+23" badge are solid `#111`.
3. **Pill and circle geometry.** Every control is fully round: 42px round icon buttons, pill chips, pill CTA.
4. **Editorial illustration.** Thin black line art + flat yellow/lavender fills, placed on the card colour and bleeding off the right edge.
5. **Big, tight headlines.** Titles are 20–24px semibold with negative tracking. Everything else is small (6.5–12px).

---

## 2. Canvas & device

| Token | Value |
|---|---|
| Stage | `1024 × 768`, scaled to fit (`Math.min(w/1024, h/768)`) |
| Page bg | vertical gradient `#EDE3DC → #E2D5CC → #C9B9AD` |
| Phone (frameless card) | `257 × 558`, radius `30`, bg `--screen`, shadow `0 24px 50px rgba(90,60,40,.10)` |
| Ghost reflections | the same phones at `opacity .28` + `blur(.6px)`, positioned above/below, `pointer-events:none` |
| Live phone positions | S1 `101,47` · S2 `383,86` · S3 `665,130` (staggered by ~40px) |
| Screen padding | `0 16px 90px` (horizontal gutter **16px**) |

No status bar or device bezel. The screens are shown as floating cards, as in the reference.

---

## 3. Colour tokens (CSS vars)

| Var | Hex | Use |
|---|---|---|
| `--screen` | `#F5F4F8` | Screen background |
| `--card` | `#FFFFFF` | Cards, round buttons, list rows |
| `--ink` | `#111111` | Text, play button, active states |
| `--muted` | `#7A7A80` | Secondary text ("Basic Member", meta) |
| `--muted-2` | `#A3A3AA` | Tertiary (author, lessons count) |
| `--line` | `#E7E6EC` | Hairlines, search border, calendar divider |
| `--field` | `#F0EFF4` | Search field fill |
| `--lavender` | `#B8BDF4` | Category "UI Design", hero bg (`#B8BFF5`) |
| `--mustard` | `#D8C573` | Category "Webflow", yellow progress card |
| `--mint` | `#CFE2D9` | Category "3D Design", mint progress card (`#BFDCD2`) |
| `--sand` | `#EEE3D7` | Business Analytics card; pill inside it `#E6D6C6` |
| `--peach` | `#F1E4D8` | Schedule header band |
| `--yellow` | `#F5C518` | "See all" links, avatar ring, yellow progress fill |
| `--teal` | `#2DE0CF` | Mint-card progress fill |
| `--green` | `#3A9A4A` | "35% Complete" |

**Per-course palette rule:** a course defines `bg` (card) + `pill` (CTA pill, one step darker). Blob shapes on progress cards use the card colour about 6% darker.

---

## 4. Typography

Font: **Plus Jakarta Sans** 400/500/600/700 (Google Fonts). Antialiased.

| Role | Size / weight / tracking | Example |
|---|---|---|
| Display | 24px / 600 / -0.6 | `Letis Learn Now!` |
| Course title | 21px / 600 / -0.4, lh 1.28 | `Business Analytics` (2 lines) |
| Page title | 20px / 600 / -0.4, lh 1.35 | `From Basics to Breakthroughts` |
| Section | 14px / 500 | `Ongoing`, `Your Progress`, `Courses` |
| Greeting | 13px / 600 | `Hi,Sarah` |
| Subtitle | 12px / 400 muted | `Basic Member` |
| Month | 12px / 600 | `October 2025` |
| Chip | 10px / 600 | `UI Design` |
| Link | 10px / 500 yellow | `See all` |
| Body small | 8.5–9.5px | meta, search placeholder, row titles |
| Micro | 6.5–7.5px | author, lessons, % complete, chip count |

The reference copy is kept verbatim, typos included ("Letis", "Breakthroughts", "Customerjourney map").

---

## 5. Spacing & radius

- Gutter **16px**. Vertical rhythm: 20–28px between blocks; section header `22px` top / `10px` bottom.
- Card gap `9px`; list row gap `6px`; chip gap `8px`.
- Radius: `8` (thumbnails) · `12` (list rows) · `20` (hero, progress cards, search) · `22` (course cards) · `26` (sheet top) · `30` (phone) · `50%` (buttons, avatars).

---

## 6. Components (`ui.jsx`)

| Component | Spec |
|---|---|
| `RoundBtn` | 42px white circle, icon centred, press `scale(.92)` |
| `AvatarStack` | 25px avatars with a 1.5px white ring, overlapping by -7px, then a black `+N` circle |
| `SectionHead` | Title left, yellow `See all` right |
| `CourseCard` | 197px tall (compact: 128px), radius 22, pastel bg, 2-line title, avatar stack. The illustration is absolutely positioned and bleeds off the right edge. Bottom **Start pill**: 42px, radius 21, darker tint, "Start Learning" + 34px black play button |
| `Blobs` | Organic SVG shapes behind progress cards |
| `Progress` | 3.5px bar, 92px wide, track `rgba(255,255,255,.6)`, animated width 1.1s |
| `I.*` icons | 1.3–1.6 stroke, round caps, 16 viewBox. Add new icons in the same style |

**Patterns (screens.jsx + CSS)**
- **Search field**: 40px pill, `--field` fill with a 1px `--line` border, search icon + input + filter icon.
- **Category chip**: 32px pill in a pastel, label + white 19px count circle. Selected = 1.5px black ring. Scrolls horizontally and bleeds off the edge.
- **Profile avatar**: 40px, yellow ring with a black inner stroke.
- **Floating nav (`FloatNav`)**: 4 × 39px glass circles (`rgba(255,255,255,.55)` + backdrop blur) in a frosted capsule; active item is black with a white ring. It floats over content at the bottom and only appears on Home.
- **Meta chip**: 36px white circle icon + muted label (`2 hours 10 mins`, `17 Lessons`).
- **Ongoing row**: white, radius 12, padding 5. 50×44 thumbnail (radius 8) on the course colour, title / author / lessons, green `% Complete` at bottom-right.
- **Calendar week strip**: 7 columns; the selected day is a 30×62 black capsule with a white inner ring. Today-ish (Tu 26) is bold. ‹ › step by week.
- **Progress card**: 175×132, radius 20, pastel + blobs, white book button, `•••`, title, bar, "Progress · 52%". Scrolls horizontally.
- **Sheet**: the Schedule screen has a peach header band with a `--screen` sheet (radius 26 at the top) sliding over it.

---

## 7. Motion

| Pattern | Spec |
|---|---|
| Screen enter | `vin` .38s `cubic-bezier(.2,.8,.2,1)`: opacity 0 → 1, translateY 8px |
| Week change | the same `vin` on the week strip |
| Progress fill | width 0 → p, 1.1s, 200ms delay |
| Hero hover | image `scale(1.04)` over .6s, play button fades in |
| Press | round buttons `.92`, chips `.95`, cards `.985` |

---

## 8. Navigation (per phone)

Each `<Phone>` holds its own stack: `home → detail`, `home → schedule` (tap avatar).
FloatNav: Home = `home`, ↻ = `detail`, share/wallet = `schedule`. The back arrow pops the stack.
Home interactions: search filters course titles; chips filter by category.

## 9. Assets

| File | Use |
|---|---|
| `woman-dog-cut.png` | Business Analytics card art (transparent background) |
| `man-laptop-cut.png` | Second course card art (transparent background) |
| `hero-vr.png` | Course detail hero + ongoing thumbnail 1 |
| `thumb-yellow.png` | Ongoing thumbnail 2 |
| `sarah.png` | Profile avatar |
| `av1/2/3.png` | Learner avatars |

New illustrations must match: thin black line art + flat yellow `#F2C94C` / lavender `#8E9BF0` fills, with a plain background that is keyed out or matches the card colour.

## 10. Screens

| Screen | Status |
|---|---|
| Home (`Home`) | ✅ |
| Course detail (`Detail`) | ✅ |
| Schedule / progress (`Schedule`) | ✅ |
| Lesson player, Profile, Wallet | **TODO** |

## 11. Adding a screen: checklist
1. Build it as a component in `screens.jsx`, using `RoundBtn` back/more in a `.bar2` header.
2. Route it in `Phone()` (`push('key')`).
3. Stick to the tokens: the 16px gutter, pastel card + black action, a pill or circle for every control.
4. Keep ≥ 90px bottom padding if FloatNav is shown.
5. Update §10.