# Page system

## 1. Canvas and tokens

Build for a 16:9 projection canvas with a responsive browser shell.

```css
:root {
  --navy: #17324d;
  --ink: #17212b;
  --teal: #2f6f73;
  --muted: #5f6b76;
  --blue-gray: #afc4c8;
  --ice: #e8f1f2;
  --mist: #f2f4f5;
  --white: #ffffff;
  --risk: #b76555;
  --radius-lg: 24px;
  --radius-md: 16px;
  --shadow-soft: 0 18px 50px rgb(23 50 77 / 10%);
}
```

- Keep the page background light and reserve navy for structure and emphasis.
- Use teal for the current step, flow, or selected item.
- Use red only for genuine risk, stop, failure, or warning states.
- Do not use yellow, gradients, glass effects, 3D, or decorative neon.
- Use one restrained shadow level; diagrams should rely on border, fill, and whitespace.

## 2. Projection typography

- Cover title: `clamp(42px, 5.2vw, 78px)`.
- Page title: `clamp(30px, 3.3vw, 52px)`.
- Key number or short statement: 44–72px.
- Body: 20–28px on the 16:9 canvas.
- Labels: 16–20px; never use tiny text to rescue an overloaded page.
- Keep body lines around 20–32 Chinese characters where practical.
- Use bold for hierarchy, not for whole paragraphs.

## 3. Composition

- Keep a stable top title zone, flexible content zone, and small page-control zone.
- Use 6%–8% horizontal safe margins.
- Prefer a 12-column grid, 24–32px gaps, and generous internal padding.
- Give the primary visual at least 45% of the content region when it carries the page.
- Limit ordinary pages to one primary object plus up to three supporting objects.
- Keep a clear visual focus visible from the back of a classroom.

## 4. Page types

### Cover

Use one clear title, one short value statement, and only essential metadata. Avoid navigation clutter and dense agenda copy.

### Agenda

Show the supplied route as a sequence, map, or compact module list. Highlight the current route only when the deck has begun.

### Chapter

Use a short chapter label, a large chapter title, and one transition statement. Keep it visually quieter than an information page.

### Content

Choose one of: text plus visual, comparison, evidence table, key statement, or annotated example. Break long paragraphs into visible relationships without changing their meaning.

### Infographic

Use a dominant editable diagram and minimal supporting copy. Follow `notion-infographics.md`.

### Exercise

Show the task, available time, expected output, and completion cue. Add group roles or evaluation criteria only when supplied.

### Summary

Reassemble supplied takeaways into a compact route, checklist, or three-part recap. Do not introduce new claims.

### Q&A

Make Q&A the final slide. Use a calm closing composition, optional discussion prompts derived from supplied content, and contact details only when the user provides them.

## 5. Rhythm

A dependable visual rhythm is:

```text
cover → agenda → chapter → content/infographic → exercise → summary → Q&A
```

Repeat chapter, content, infographic, exercise, and summary as required by the supplied outline. Avoid using the same card grid or the same diagram archetype on three consecutive pages.

## 6. Responsive and print behavior

- Desktop: center the 16:9 canvas and preserve safe margins.
- Mobile: allow vertical scrolling inside the active slide; stack columns and keep controls reachable.
- Fullscreen: scale the canvas to fit without cropping.
- Print: place one slide per landscape page; hide controls, assistant, tooltips, and configuration.
- Keep HTML reading order logical even when CSS changes the visual arrangement.

