google-cloud-slides

Google Cloud Slides Skill

This skill provides instructions and assets for creating slide decks that match the visual style of the Google Cloud 2025 presentation template.

Core Visual Style

When creating slides using this skill, always adhere to the following brand guidelines:

• Brand name: Google Cloud
• Footer: Every slide must include "Google Cloud" in the bottom-left corner and "Proprietary & Confidential [page#]" in the bottom-right corner.
• Font: Use Google Sans (or a clean, rounded, modern sans-serif fallback like Product Sans).
• Primary text color: Near-black (#202124).

Color Palette

Role	Hex Code	Usage
Background (light)	#FFFFFF	Default slide background
Background (dark)	#202124	Dark-mode slides
Text (light bg)	#202124	Body and headings
Text (dark bg)	#FFFFFF	Body and headings on dark backgrounds
Google Blue	#3186FF	Accent, section dividers, chart fills, highlighted text
Google Red	#FC413D	Accent, section dividers
Google Yellow/Gold	#FEC700	Accent, section dividers
Google Green	#00AF57	Accent, section dividers

Key Decorative Elements

1. Rainbow divider bar: A thin horizontal line graduating Red → Yellow → Green → Blue. Used as a section separator, sometimes partial-width (left-aligned or right-aligned). Use the bundled asset at templates/GC_Progress_Bar_Gradient_RGB.jpg as an <img> element. Do NOT recreate this bar using CSS gradients.
2. Google Cloud icon: The official Google Cloud icon (multicolour cloud logo). Use the bundled asset at templates/gradient_super_cloud_512_2x.png — always find the absolute path of the image and reference it this way. Place it prominently on the right side of cover and thank-you slides. Do NOT recreate this with CSS arcs.
3. Colored section backgrounds: Full-bleed solid backgrounds in Google Green (#00AF57), Google Blue (#3186FF), or Google Red (#FC413D) for section dividers.

Slide Layouts

The template supports a variety of layouts. When generating content, select the appropriate layout type from the catalog below.

For detailed descriptions of all available layouts, see LAYOUTS.md.

Common Layouts

• Cover / Title: Large bold headline left, date below, Google Cloud wordmark logo top-left, official Google Cloud icon (templates/gradient_super_cloud_512_2x.png) large on the right side (400×400 px, object-fit: contain). Do NOT use CSS arcs as a substitute.
• Section divider: Rainbow bar top, large section number (zero-padded, e.g., "01") + title.
• Title + body (1-col): Slide title top-left, body text below.
• 2-column text: Slide title, two equal text columns.
• Stat / Big number: Large bold stat (e.g., "40%") in Google Blue, label below, supporting text.
• Bullets: Title + bullet list (6–8 items max, no punctuation).
• Big statement: Full-slide large text, first phrase in Google Blue, rest in dark.

Typography Rules

• Bullets: Keep them clear and punchy. Use single lines when possible. Maximum 6–8 items per slide. Do not use punctuation at the end of bullet points.
• Images: Images should help "do the heavy lifting." Keep copy concise and aligned with the image.
• Section numbers: Always use zero-padded 2-digit numbers (01, 02, 03, etc.).
• Chart subtitles: Use UPPERCASE text in Google Blue.

Usage Instructions

1. Understand the Content: Review the content to be presented and determine the best layout for each slide.
2. Select Layouts: Refer to LAYOUTS.md to choose the appropriate layout structure.
3. Apply Styling: Ensure all colors, fonts, and decorative elements match the guidelines above.
4. Generate Slides: Use the slides tool in html mode to generate the presentation, applying the necessary CSS to match the Google Cloud style.

Example CSS Snippets

For reference on how to implement the visual style in HTML/CSS, see CSS_SNIPPETS.md.