Google Fonts Japanese Tutorial Infographic

{
  "type": "Japanese Infographic",
  "topic": "How to use Google Fonts",
  "style": "The design features a clean, modern flat style with a white background, soft light blue and mint green corner blocks, rounded corner cards with subtle shadows, a tech tutorial aesthetic, and crisp vector typography and UI illustrations.",
  "canvas": {
    "aspect_ratio": "16:9"
  },
  "headline": {
    "main": "How to use Google Fonts",
    "sub": "Basic 3 steps"
  },
  "layout": {
    "sections": [
      {
        "title": "1. Select font",
        "position": "left",
        "count": 1,
        "labels": [
          "1. Select font"
        ],
        "card_style": "Rounded white panel with light blue border/shadow",
        "icon": "Blue number 1 circle",
        "illustration": "A browser window displays the font search interface, with three visible font previews, featuring large Aa and あ samples, a search bar at the top, small colored window buttons, light gray interface lines, and blue accent lines.",
        "body_text": "Search for your favorite fonts on the Google Fonts website."
      },
      {
        "title": "2. Obtain the embedded code",
        "position": "center",
        "count": 1,
        "labels": [
          "2. Obtain the embedded code"
        ],
        "card_style": "Rounded white panel with light blue border/shadow",
        "icon": "Blue number 2 circle",
        "illustration": "The dark code panel contains two labeled code examples separated by a thin separator.",
        "code_blocks": {
          "count": 2,
          "labels": [
            "<link> (HTML)",
            "@import (CSS)"
          ],
          "content": [
            "<link href=\"https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap\" rel=\"stylesheet\">",
            "@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap');"
          ]
        },
        "body_text": "Copy display<link> Or CSS code."
      },
      {
        "title": "3. Applying in CSS",
        "position": "right",
        "count": 1,
        "labels": [
          "3. Applying in CSS"
        ],
        "card_style": "Rounded white panel with light blue border/shadow",
        "icon": "Blue number 3 circle",
        "illustration": "A white code card containing CSS, with two selectors and a font-family rule.",
        "code_blocks": {
          "count": 2,
          "labels": [
            ".title",
            "body"
          ],
          "content": [
            ".title { font-family: 'Poppins', sans-serif; }",
            "body { font-family: 'Noto Sans JP', sans-serif; }"
          ]
        },
        "body_text": "Specify the font-family and apply it to the design."
      },
      {
        "title": "Key Points",
        "position": "bottom-left",
        "count": 3,
        "labels": [
          "Choose based on readability",
          "Confirm if Japanese is supported.",
          "Do not overuse; limit to 2-3 types."
        ],
        "card_style": "Rounded white panel with light blue undertones",
        "icon": "Blue star in the circle",
        "body_format": "Bullet List"
      },
      {
        "title": "Common combinations",
        "position": "bottom-center-right",
        "count": 2,
        "labels": [
          "Title: Poppins",
          "Main text: Noto Sans JP"
        ],
        "card_style": "Rounded white panel with a light purple hue",
        "icon": "Purple chain symbol",
        "body_format": "Two sample boxes in pill shape"
      }
    ],
    "connectors": {
      "count": 2,
      "style": "Large blue right arrow between the 3 top cards"
    },
    "pagination": {
      "text": "2 / 2",
      "position": "bottom-right",
      "style": "Blue rounded corner label"
    }
  },
  "text_language": "Japanese",
  "color_palette": {
    "primary_blue": "#2f80ff",
    "navy": "#0f2b5b",
    "google_colors": [
      "#4285F4",
      "#DB4437",
      "#F4B400",
      "#0F9D58"
    ],
    "lavender": "#8b6cff",
    "background": "#ffffff"
  }
}