# Warm Studio Final Pattern

This is the currently approved visual direction for the distinct-UI seminar HTML format.

Use it as the strongest default when the user says:

- "前回の構成で、見た目は別物にしたい"
- "リッチ感がほしい"
- "温かみのあるテイスト"
- "硬すぎない感じ"
- "パクリ感を避けたい"
- "画像は良いけど色味やページUIを変えたい"

## Why This Pattern Worked

The accepted sample kept the successful lecture structure and friendly generated illustrations, but changed the visible UI enough to feel like a different product:

- bright warm first view instead of dark command-center hero
- graphite, teal, and gold palette instead of blue/black hardness
- left chapter rail retained because the user liked it
- large decorative chapter-number chips instead of tiny plain numbers
- major image removed from the first viewport and placed after `要点まとめ`
- images remained large and educational
- tables, cards, notes, tabs, and conclusion stayed clean but warmer

## First View

Use a bright, warm premium hero by default.

Recommended:

- warm off-white / pale gold / pale mint gradient
- dark readable text
- one accent word in teal or gold
- no major generated image inside the first viewport by default
- metadata cards in soft translucent white

Avoid:

- very dark hero backgrounds unless topic requires it
- putting the main generated image beside the H1 if it makes the first view dense
- low-contrast text over dark gradients

## Main Image Placement

For the first large diagram:

- place it after `要点まとめ`
- use a full-width body image frame
- use a clear caption
- keep it similar in size to other major section images

This solved the user's complaint that the first-view image made the hero hard to read.

## Chapter Number Treatment

The chapter badge should be visually rich and readable.

Recommended CSS characteristics:

- min-width around `104-116px`
- min-height around `60-72px`
- number size around `23px` on mobile and `27px` or larger on desktop
- rounded 16-20px chip
- small `CHAPTER` pill floating at the top
- subtle gold/teal accent line or gradient border
- warm soft shadow

Avoid:

- tiny `00` badges
- plain white rectangles with small blue text
- one-kanji or single-character badges

## Palette

Good default variables:

```css
--bg: #f6f1e8;
--surface: #fffdf8;
--ink: #25231f;
--muted: #776d61;
--line: #e1d4c3;
--graphite: #24312f;
--teal: #287a73;
--gold: #c58a31;
--coral: #d7664d;
```

Use graphite for strong panels, teal for primary UI/action, gold for warmth, and coral sparingly for contrast.

## Images

The user liked the generated illustrations, but wanted to avoid the same image color mood.

For future first images, generate a more colorful version:

- teal, coral, sunny yellow, sky blue, mint green, soft lavender accents
- bright modern seminar board
- same teaching meaning
- not mostly cream/rust/brown
- no dense text
- no one-kanji badge labels

Bundled sample:

`assets/colorful-route-shift-sample.png`

Use it as a visual reference for color mood, not as a mandatory reusable asset.

## Similarity Boundary

Structure may remain the same. Visual identity should differ.

Keep:

- lecture flow
- large images
- hand-drawn educational warmth
- left navigation if useful
- tables/tabs/worksheet/conclusion

Change:

- color mood
- first-view layout
- chapter badge style
- image palette and framing
- card/table/note warmth

## Final QA Question

Before delivery, ask:

`Would the user say this feels richer, warmer, and clearly different, while preserving the practical seminar quality?`

If not, keep refining.
