# Design Separation Strategy

This reference explains how to keep the successful seminar structure while making the visible design original.

## What Can Stay Similar

These are structural and pedagogical patterns. They can remain because they serve the lecture:

- hero thesis
- `要点まとめ`
- numbered sections
- large generated images
- comparison tables
- tabbed demo menu
- action worksheet
- fact-check table
- homework section
- conclusion block
- source footer
- desktop/mobile/browser QA

## What Must Change

These create the visible "same design" impression and should be changed:

- background texture and color
- dominant palette
- heading layout
- section number treatment
- table styling
- card shape, border, shadow, and spacing
- navigation shape
- note/callout styling
- tab styling
- conclusion block visual style
- image frame and caption treatment
- decorative accents

## Similarity Risk Checklist

Before final delivery, ask:

- Is the background still warm cream paper with a subtle grid?
- Are the cards still cream/white with rust accents and soft shadows?
- Are section numbers still shown with the same left-border style?
- Are tables still styled with the same beige header and pink highlight?
- Are tabs still small cream buttons with rust selected state?
- Is the conclusion still the same dark rounded rectangle pattern?
- Do screenshots side-by-side look like the same template?

If yes, redesign.

## Safe Transformation Pattern

Keep the content skeleton but swap the design system.

Example:

```text
Same structure:
Hero -> 要点まとめ -> comparison -> demo tabs -> worksheet -> conclusion

Different design:
Graphite/white interface, compact nav rail, sharp cards, neon accent, modular panels
```

## "Different Enough" Standard

A viewer should be able to see the old and new pages side-by-side and say:

`The lecture structure is similar, but the visual design is clearly different.`

If the difference is only color, it is not enough.

## Keep Image Quality

The user explicitly said the hand-drawn educational illustration feel may remain.

So do not solve similarity by removing illustrations. Instead:

- change how images are framed
- change surrounding UI
- change page palette
- vary image composition and panel density
- avoid relying on the same exact hero/image layout every time

## Useful Ways To Differentiate

- replace sticky horizontal TOC with compact rail, chapter chips, or split header
- use a white/graphite or cool-neutral base instead of cream paper
- use squared or clipped cards instead of soft paper cards
- use stronger typographic hierarchy
- use numbered blocks, labels, or sidebars instead of left-border section numbers
- style tables like dashboards or playbooks
- style tabs like segmented controls, vertical menus, or stepper controls
- make conclusion look like a memo, checklist, terminal, or executive summary panel

## Avoid Overcorrecting

Do not make the page cold, generic, or hard to teach just to be different.

Originality should improve the document, not fight the seminar.
