# Visual Style Reference

This is the visual DNA for the seminar HTML format.

## Overall Feeling

Aim for:

- premium but approachable
- editorial Japanese explainer
- handmade warmth
- clear enough for a live seminar
- visually rich without becoming noisy

The user likes an editorial HTML lecture document: a long, readable page with image-rich explanations, cards, tables, and conclusion blocks.

## Layout

Use:

- centered shell around 960px for reading
- wider shell around 1120px for major visuals
- sticky horizontal table of contents
- progress bar
- section spacing that feels like a lecture sequence
- cards for individual repeated items and tools
- full-width bands for notes or emphasis

Avoid:

- nested cards
- landing-page hero layout when the user wants usable seminar material
- tiny panels that compress important images
- excessive floating ornaments

## Color System

Good default palette:

- paper: warm cream
- card: near-white
- ink: charcoal
- muted text: warm gray
- line: beige
- accent: rust/salmon
- gold: muted ochre
- green: sage
- blue: muted steel
- dark conclusion: near-black charcoal

Avoid one-note palettes. The page should not become all purple, all beige, all dark blue, or all orange.

## Typography

Use Japanese system fonts:

`"Yu Gothic", "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, system-ui, sans-serif`

Rules:

- letter spacing should be 0 for body and headings unless a tiny label needs spacing
- line-height should be generous for Japanese text
- headings should be bold and readable
- do not scale body text with viewport width
- inside cards, keep headings compact enough for the container

## Components

### Section Title

Use a number plus title:

`01 なぜ今これをやるのか`

Number can have a left border accent.

### 要点まとめ

Use this instead of `TL;DR`.

Should contain 3 concise numbered points.

### Cards

Use 8-10px border radius unless an existing system says otherwise.

Cards should contain:

- icon badge
- heading
- practical text

### Icon Badges

Use small icons, not one-kanji badges.

Good icon themes:

- speech bubble for prompt
- document for context
- map/network for relationships
- monitor for demo
- check-list for homework
- coin or yen for monetization
- brush/image for image generation

If no icon library is installed, inline SVG icons are acceptable.

### Tables

Use comparison tables for decision support:

- route A vs route B
- risky wording vs safer wording
- menu vs what to show vs who it helps

Highlight only the important row. Do not make every row colorful.

### Notes

Use colored note bands for thesis or warnings.

Good note types:

- rust/salmon for important caution or core idea
- green for practical positive principle

### Dark Conclusion

End with a dark box:

- title: `結論`
- 3 numbered points
- concise, decisive, presenter-readable

## Interaction Patterns

Use interaction only when it helps teaching:

- tabbed demo menu
- copyable prompt
- worksheet that generates a draft script
- progress bar
- scroll TOC

If a tabbed section has a large overview image between the tabs and the changing content, duplicate the tabs below the image.

Both tab groups should remain synchronized.

## Responsive Rules

Desktop:

- major visuals should be large and inspectable
- two-column layouts are useful, but avoid squeezing images

Mobile:

- stack columns
- tables may scroll horizontally, but avoid making the main message table-only
- keep important images full width
- check sticky TOC overlap
- make tap targets comfortable

## Print

If feasible, add simple print CSS:

- hide progress, TOC, float nav, copy buttons, demo tabs
- avoid breaking key sections inside cards
- remove heavy shadows

## Visual QA Smell Tests

Regenerate or redesign if:

- the page looks like Markdown with CSS
- the images are mostly text
- generated image text is unreadable and relied on for facts
- cards are too small to read
- tabs are hard to use
- section images are visually inconsistent
- mobile has text overlapping or button labels clipped
- a generated image looks like generic stock art
