Graphic Recording Thumbnail V3 Ryoga (Simple)

Intended Use

• Create Ryoga color palette thumbnails simply
• Generate simple HTML thumbnails without editing features
• Use Ryoga design with light/dark themes

Prompt

# Graphic Recording Thumbnail Prompt v3 ~Ryoga~

This prompt generates **high-quality blog article thumbnails** that sublimate the aesthetics of summer coolness and Japanese harmony into modern times. Create visually polished 16:9 aspect ratio infographic thumbnails that convey content at a glance, like top-tier consultants create, using ***Font Awesome extensively*** with Ryoga's summer aesthetic.

## Basic Structure

### Prompt Format for Thumbnail Creation

Create a thumbnail for [Article Title] in HTML/CSS Make it 16:9 size (1920x1080px) Use Font Awesome icons to enhance infographic readability and professionalism Also use the Ryoga color map and fonts below

## Design Specifications

### 1. Color Palette Definition (Ryoga Summer Harmony)

#### Light Theme "Ryoga" - Summer Day
| Name | HEX | RGB | Primary Use | Font Awesome Icon Example |
|------|-----|-----|-------------|-------------------------|
| Primary | #025E73 | rgb(2,94,115) | Title, important background | `<i class="fas fa-water"></i>` |
| Secondary | #038C8C | rgb(3,140,140) | Accent, links | `<i class="fas fa-wind"></i>` |
| Accent | #04BFAD | rgb(4,191,173) | Highlight, decoration | `<i class="fas fa-leaf"></i>` |
| Neon-Gold | #F2C166 | rgb(242,193,102) | Hover, glow effect | `<i class="fas fa-sun"></i>` |
| BG-Dark | #F2F2F2 | rgb(242,242,242) | Base background | `<i class="fas fa-circle"></i>` |
| BG-Light | #FAFAFA | rgb(250,250,250) | Section background | `<i class="fas fa-square"></i>` |

#### Dark Theme "Yaryo" - Summer Night
| Name | HEX | RGB | Primary Use | Font Awesome Icon Example |
|------|-----|-----|-------------|-------------------------|
| Primary-Dark | #04BFAD | rgb(4,191,173) | Title, important background (firefly light) | `<i class="fas fa-moon"></i>` |
| Secondary-Dark | #F2C166 | rgb(242,193,102) | Accent, links (starlight) | `<i class="fas fa-star"></i>` |
| Accent-Dark | #038C8C | rgb(3,140,140) | Highlight, decoration (night sea surface) | `<i class="fas fa-fish"></i>` |
| Neon-Dark | #66D9EF | rgb(102,217,239) | Hover, glow effect (moonlight) | `<i class="fas fa-feather"></i>` |
| BG-Dark-Dark | #0A1A1F | rgb(10,26,31) | Base background (deep night sea) | `<i class="fas fa-circle"></i>` |
| BG-Light-Dark | #1A2F35 | rgb(26,47,53) | Section background (night mist) | `<i class="fas fa-square"></i>` |

How to Use

1. Copy the prompt text
2. Enter actual title in [Article Title] section
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)
Use Font Awesome icons to enhance infographic readability and professionalism
Also use the Ryoga color map and fonts below

Output Example

• 16:9 aspect ratio thumbnail HTML
• Beautiful design based on Ryoga color palette
• Two patterns: light/dark themes

Notes

• Screenshot required when using as thumbnail
• Unlike V4, no editing features included
• Simple structure for quick generation