# UI Theme Directions

Pick one direction before implementation. Use it consistently.

You may invent a new direction if the seminar topic calls for it, but it must be visibly different from the prior warm paper/rust editorial look.

## 1. Warm Studio Playbook

Feeling:

- warm
- premium
- strategic
- human
- less hard than command-center UI

Visual system:

- base: warm off-white, pale gold, pale mint
- accents: graphite, teal, muted gold, coral used sparingly
- typography: bold Japanese headings, but with soft surrounding UI
- layout: bright first view, left chapter rail, body-first large diagrams, rich chapter chips
- cards: warm white, subtle border, soft shadow, not paper-grid/rust-template
- nav: left chapter rail is encouraged when the page is long

Best for:

- monetization seminars
- beginner-friendly AI/business workshops
- community seminar pages
- cases where the user wants rich and warm, not cold or hard

Specific rules:

- Do not put the main diagram inside the first viewport by default.
- Put the first major diagram after `要点まとめ`.
- Make chapter numbers large and decorative.
- Use colorful generated image variants when similarity risk comes from the old image color mood.

## 2. Studio Playbook

Feeling:

- strategic
- premium
- crisp
- creator/business seminar

Visual system:

- base: white, graphite, pale gray
- accents: electric blue, signal green, or vivid coral
- typography: bold condensed-ish headings if available; otherwise strong system sans
- layout: sharp content bands, offset image blocks, executive-summary panels
- cards: flatter, crisper, less paper-like
- nav: compact top command bar or slim chapter rail

Best for:

- business strategy
- monetization
- creator economy
- AI workflow seminars

Avoid:

- cream paper
- rust-dominant palette
- hand-paper background grid

## 3. Workshop Board

Feeling:

- practical
- live classroom
- friendly
- action-focused

Visual system:

- base: clean whiteboard white and cool gray
- accents: marker blue, sticky-note yellow, green check, coral warning
- layout: board sections, workshop blocks, checklists
- cards: whiteboard panels, sticky-note callouts, task rows
- nav: session agenda strip or stepper

Best for:

- community workshops
- beginner AI lessons
- hands-on sessions

Images:

- hand-drawn educational diagrams can fit well
- frame them as workshop board inserts, not paper illustrations

## 4. Magazine Course

Feeling:

- editorial
- polished
- spacious
- less tool-like

Visual system:

- base: off-white or very pale neutral, not warm cream paper
- accents: black, one strong brand color, muted secondary colors
- layout: large chapter openers, pull quotes, image spreads
- cards: article modules, side notes, numbered feature blocks
- nav: minimal article index

Best for:

- thought leadership
- mindset seminars
- narrative-heavy lectures

Avoid:

- making it look like a landing page hero
- overly decorative magazine gimmicks

## 5. Product Manual

Feeling:

- clear
- operational
- tool-guide
- reliable

Visual system:

- base: white, slate, pale blue-gray
- accents: blue, teal, amber for warnings
- layout: docs-like but more visual, with examples and tables
- cards: instruction panels, API-doc-like blocks, checklists
- nav: left sidebar or sticky compact index

Best for:

- tool training
- ChatGPT/AI Studio/NotebookLM operations
- repeatable workflows

Avoid:

- dry documentation with no visual energy

## 6. Community Classroom

Feeling:

- warm
- inclusive
- beginner-safe
- local/community oriented

Visual system:

- base: light neutral, white, pale mint or sky
- accents: friendly blue, green, sunny yellow, small coral
- layout: classroom cards, group exercise areas, Q&A panels
- cards: soft but not paper/rust style
- nav: lesson tabs or module cards

Best for:

- beginner communities
- local business sessions
- family/friend teaching formats

Images:

- friendly hand-drawn diagrams are allowed
- avoid the old page's exact color, texture, and card framing

## 7. Command Center

Feeling:

- advanced
- analytical
- strategic
- high energy

Visual system:

- base: charcoal or near-white with strong contrast
- accents: cyan, lime, magenta, or orange used sparingly
- layout: dashboards, metric strips, map panels, status cards
- cards: data modules and control panels
- nav: dashboard header or rail

Best for:

- advanced AI systems
- operations
- analytics
- automation seminars

Avoid:

- making beginner content feel intimidating

## Selection Rule

If the user does not choose, pick based on topic:

- monetization or business: Warm Studio Playbook
- hands-on beginner lesson: Workshop Board
- narrative/mindset: Magazine Course
- tool training: Product Manual
- community/local: Community Classroom
- advanced operations: Command Center

If the user says the output is too hard, dark, or difficult to read, switch toward Warm Studio Playbook.

Tell the user the chosen direction in the final summary.
