Timeline Graphic Recording V1 Dark Illustration Colors

Intended Use

• Create timeline with dark illustration color palette (deep green/yellow)
• Create flow from upper left to lower right
• Generate timeline items with circle and flap decorations

Prompt

# Timeline Graphic Recording (Graleco) HTML Creation Prompt V1

## Purpose
Please convert the following content into a perfect Japanese graphic recording-style HTML infographic as created by top-tier designers. Strive for the highest level in both information design and visual design. Use handwritten-style shapes and icons to visually express content.

## Design Specifications
### 1. Color Scheme (Dark Illustration)

```

2. Graphic Recording Elements

• Arrange information sequentially from upper left to right, top to bottom
• Use Japanese handwritten-style fonts (Yomogi, Zen Kurenaido, Kaisei Decol)
• Hand-drawn-style enclosure lines, arrows, banners, speech bubbles
• Combination of text and visual elements (icons, simple shapes)
• Keyword emphasis (colored underlines, marker effects)
• Connect related concepts with lines and arrows
• Effectively place Font Awesome icons
• Use timeline display to visualize information flow

3. Typography

• Title: 32px, gradient effect, bold
• Subtitle: 16px, #475569
• Section heading: 18px, with icon
• Body text: 14px, #334155, line height 1.4
• Font specification: Kaisei Decol, Yomogi, Zen Kurenaido

4. Layout

• Header: left-aligned title + right-aligned date/source
• Use timeline structure to show steps and stages
• Card components: white background, rounded corners 12px, subtle shadow
• Appropriate spacing and hierarchy between sections
• Effectively utilize glassmorphism
• Content width 100%
• Required: Timeline items must include "circle and flap decorations"

---

Content to Convert

[Enter text content to convert to timeline here]

## How to Use

1. Copy the prompt and paste into AI chat tool
2. Enter the text content you want to convert in the content section
3. Display and save the generated HTML in browser

## Input Example

Content to Convert

Product Development Process

1. Planning & Requirements
2. Design & Prototyping
3. Development & Testing
4. Release & Operations

## Output Example

Timeline-style graphic recording HTML with dark illustration color palette (deep green #027333, #4E7329, yellow #F2B705, #F29F05, #D97904) featuring circle and flap decorations will be generated.

## Notes

- Characterized by contrast between deep green and yellow
- Layout flows from upper left to lower right
- Timeline items always include circle and flap decorations