# Visual System

## Personality

The deck should feel like a serious public-account infographic expanded into a live presentation: structured, restrained, sharp, and useful.

It should not feel like:

- The 0531 blue courseware visual skin.
- A SaaS landing page.
- A generic AI black-purple deck.
- A beige workshop template.
- A stock-photo editorial page.

## Canvas

Default HTML slide mode:

- Desktop viewport: full browser.
- Slide card: 16:9 or near 16:9, max width around 1180-1280px.
- Inner content: generous whitespace, strong hierarchy.
- Mobile: single-column reading with the same chapter order.
- Print: each slide becomes one page.

Article graphic mode, when exporting standalone images:

- Width: 660px.
- Common heights: quote card 92-120px, chart 280-410px, header 220-370px.
- Use high DPR canvas export if generating raster images inside HTML.

## Palette

Use this as the default token set:

```css
:root {
  --ink: #111827;
  --text: #2b2f36;
  --muted: #647084;
  --line: #d9e2e7;
  --paper: #ffffff;
  --page: #f8fafc;
  --cream: #f6f1e8;
  --blue: #1f6feb;
  --blue-2: #2f6fed;
  --blue-soft: #eef6ff;
  --navy: #172033;
  --green-deep: #123d3b;
  --teal: #0f766e;
  --success: #1f9d55;
  --gold-bg: #fff8dd;
  --gold: #d9b45f;
  --gold-text: #7c4a03;
  --red: #bd3431;
  --shadow: 0 8px 24px rgba(17, 24, 39, 0.10);
  --radius: 12px;
}
```

Color roles:

- White and soft gray carry most slides.
- Deep navy or deep green is used for covers, strong headers, and serious contrast.
- Blue is used for numbers, active states, key lines, and method paths.
- Teal/green is used for action, operating loops, and correct examples.
- Gold is reserved for quote cards and "this is the sentence to remember".
- Red is reserved for risk, warning, or one strong visual block.

## Typography

Use system Chinese fonts:

```css
font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", "Microsoft YaHei", Arial, sans-serif;
```

Suggested sizes:

- Cover title: 48-68px desktop, 30-38px mobile.
- Slide title: 30-42px desktop, 22-28px mobile.
- Subtitle: 16-20px.
- Body: 16-18px, line-height 1.65.
- Card title: 16-20px, 700-800 weight.
- Small labels: 12-14px.

Use bold Chinese type confidently. Keep letter spacing at 0 except tiny tags.

## Graphic Grammar

Preferred shapes:

- Rectangles and cards with 8-14px radius.
- Numbered circles for sequence.
- Thin arrows for process flow.
- Soft filled panels for groups.
- Left border bars for section emphasis.
- Gold quote cards with one or two centered lines.

Avoid:

- Decorative blobs, bokeh, or random ornaments.
- Huge rounded pills as the main design language.
- Many gradients. Use one serious cover/header gradient at most.
- Image-heavy slides unless showing a real product, screenshot, or case.

## Composition

The source article graphics usually follow:

- A clear title at the top-left.
- One method path or structure in the middle.
- A short takeaway line at the bottom.
- Sparse color, strong whitespace.
- No decorative background noise.

When adapting to slides, preserve this hierarchy and expand the canvas instead of adding more text.

