Graphic Recording Thumbnail v4 Ryoka

Intended Use

• Create attractive thumbnail images for blog articles and SNS posts
• Generate professional 16:9 aspect ratio thumbnails
• Create thumbnails with light/dark theme toggle functionality

Prompt

# Editable Graphic Recording Thumbnail Prompt v4 ~ Ryoka ~

This prompt generates **high-quality blog article thumbnails** that elevate **the aesthetics of summer cool and Japanese beauty** to modern times.

**Important**: Editable button and dark theme toggle button must be placed in the **navigation bar**.

## Basic Configuration
### Thumbnail Creation Prompt Format

Create a thumbnail for [Article Title] in HTML/CSS Make it 16:9 size (1920x1080px) Enhance infographic readability and professionalism using Font Awesome icons Place editable button and dark theme toggle button in navigation bar Also use the Ryoka color map and fonts specified below

## Design Specifications
### 1. Color Palette Definition (Ryoka Summer Palette + Yoryo Dark Theme)

#### Light Theme "Ryoka" - Summer Day
- Primary: #025E73 (Titles, important backgrounds)
- Secondary: #038C8C (Accents, links)
- Accent: #04BFAD (Highlights, decorations)
- Neon-Gold: #F2C166 (Hover, glow effects)
- BG-Dark: #F2F2F2 (Basic background)
- BG-Light: #FAFAFA (Section backgrounds)

#### Dark Theme "Yoryo" - Summer Night
- Primary-Dark: #04BFAD (Firefly light)
- Secondary-Dark: #F2C166 (Star light)
- Accent-Dark: #038C8C (Night sea surface)
- Neon-Dark: #66D9EF (Moonlight)
- BG-Dark-Dark: #0A1A1F (Deep night sea)
- BG-Light-Dark: #1A2F35 (Night mist)

### 3. Navigation Bar (Required)
- Edit mode button: Browser editing via contentEditable
- Theme toggle button: One-click light/dark theme switching

How to Use

1. Copy the prompt format text
2. Replace [Article Title] with actual title
3. Send to AI to generate HTML
4. Display in browser and take screenshot

Input Example

Create a thumbnail for "AI Era Programming Learning Methods" in HTML/CSS
Make it 16:9 size (1920x1080px)
Enhance infographic readability and professionalism using Font Awesome icons
Place editable button and dark theme toggle button in navigation bar
Also use the Ryoka color map and fonts specified below

Output Example

• 16:9 aspect ratio thumbnail HTML
• Edit/theme toggle buttons placed in navigation bar
• Beautiful design based on Ryoka color palette

Notes

• To use as thumbnail, display in browser and take screenshot
• Text can be adjusted in edit mode
• Theme switching toggles between light/dark modes