A lightweight, Google-style presentation design system (clean, bright, airy, colorful accents) built as plain HTML/CSS. Designed for a recurring monthly team meeting deck — performance results, people, goals, motivation — but the layouts are generic enough for any internal deck.
The whole system is one theme file of design tokens + a gallery of reusable slide layouts. No build step, no framework — open index.html in a browser.
Open index.html in any browser to scroll the full layout gallery.
- Palette: Google colors (Blue
#4285F4, Red#EA4335, Yellow#FBBC04, Green#34A853) + neutral greys. - Type: Poppins (display) + Inter (body), contrast by weight over size.
- Shape: 16/28px radii, pill buttons, soft material shadows.
- Slide: 1280×720 (16:9), 64px padding.
Change the look globally by editing the CSS variables in :root.
| Group | Layouts |
|---|---|
| Result | Hero number (big $ figure) · Numbers behind the number (channel breakdown) |
| People | Welcome newcomers (1 / 2 / 3 photos) · Team achievements (grids of 3 / 4 / 5 / 6) · Spotlight / hero of the month · Shout-outs |
| Reflection | Challenges (what worked / what hurt) |
| Goals | Goals + progress bars |
| Motivation | Motivational quote · What's next / focuses |
| Frame | Cover · Section divider · Closing |
Avatars in the mockups are placeholders (pravatar) — swap for real photos.
- Copy a
<section class="slide …">block fromindex.html. - Replace the sample content (numbers, names, photos).
- Restyle globally via tokens in
theme.css.
Base system — meant to be refined further (additional layouts, polish, eventual export to Google Slides).
MIT — see LICENSE.