---
title: "Google for Education — Classroom design system"
variant: extended
source: https://edu.google.com/intl/en-US/workspace-for-education/products/classroom/
captured_at: 2026-10-12
theme: light
industry: education
generator: Design DNA (https://four.wiralomi.com/style/classroom-google-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Google for Education — Classroom · Design System

> A clear, friendly canvas for learning tools

**Theme:** light · **Industry:** education · **Source:** https://edu.google.com/intl/en-US/workspace-for-education/products/classroom/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

The page pairs Google’s restrained white-and-blue visual language with approachable education-focused product content. Broad centered headlines, alternating information modules, and soft-tinted feature panels make a long product story easy to scan.

## North star

Keep the page bright and spacious, using Google blue for clear actions and modular layouts to make dense education content easy to scan.

## Overview

The visual strategy is built on a white canvas, with very light gray section bands providing quiet separation across a long page. Google blue marks primary actions, links, and selected interface details; a soft green testimonial band and green highlights add restrained variation rather than competing with the core palette. Google Sans Flex carries the page throughout, from large, dark centered headlines to compact navigation and readable body copy. Headings use confident scale and tight alignment, while body text remains neutral and open. The layout alternates centered introductions, two-column feature stories, and pale multi-column benefit panels, using generous whitespace to keep each content group distinct. Product screenshots and education imagery show real interface context and people, while small icons and app marks reinforce the Workspace ecosystem. Rounded cards and pill-shaped buttons soften the otherwise flat, structured presentation.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Google Blue | `#1a73e8` | `--color-google-blue` | brand | Primary filled CTA, navigation emphasis, and prominent Classroom links. |
| Canvas White | `#ffffff` | `--color-canvas-white` | surface | Main page canvas and the background for most content sections. |
| Slate Gray | `#5f6368` | `--color-slate-gray` | neutral | Default supporting copy, footer navigation, and quieter controls. |
| Cloud Gray | `#f8f9fa` | `--color-cloud-gray` | surface | Pale backgrounds for all-editions feature panels and selected card sections. |
| Link Blue | `#1967d2` | `--color-link-blue` | accent | Text links and secondary blue emphasis within feature descriptions. |
| Google Ink | `#202124` | `--color-google-ink` | neutral | Main headings and high-priority body text. |
| Divider Gray | `#dadce0` | `--color-divider-gray` | neutral | Fine borders around secondary buttons and subtle interface separators. |
| Mist Gray | `#f1f3f4` | `--color-mist-gray` | surface | Low-emphasis interface and border detail; not a defining section background. |
| Charcoal Gray | `#3c4043` | `--color-charcoal-gray` | neutral | Secondary navigation and supporting text where stronger contrast is needed. |
| Pale Sage | `#e6f4ea` | `--color-pale-sage` | semantic | Dedicated testimonial section background, distinguishing customer proof from product panels. |
| Classroom Green | `#188038` | `--color-classroom-green` | accent | Small green text highlights and education-related interface accents. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Canvas White) · `--color-surface` → `#f8f9fa` (Cloud Gray) · `--color-surface-2` → `#e6f4ea` (Pale Sage) · `--color-text` → `#202124` (Google Ink) · `--color-text-muted` → `#5f6368` (Slate Gray) · `--color-text-subtle` → `#3c4043` (Charcoal Gray) · `--color-border` → `#dadce0` (Divider Gray) · `--color-accent` → `#1a73e8` (Google Blue) · `--color-accent-2` → `#1967d2` (Link Blue) · `--color-accent-3` → `#188038` (Classroom Green) · `--color-on-accent` → `#ffffff` (Canvas White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#202124` | `#ffffff` | 16.1:1 | AAA |
| `#202124` | `#f8f9fa` | 15.27:1 | AAA |
| `#202124` | `#e6f4ea` | 14.18:1 | AAA |
| `#5f6368` | `#ffffff` | 6.05:1 | AA |
| `#5f6368` | `#f8f9fa` | 5.74:1 | AA |
| `#5f6368` | `#e6f4ea` | 5.33:1 | AA |
| `#3c4043` | `#ffffff` | 10.47:1 | AAA |
| `#3c4043` | `#f8f9fa` | 9.93:1 | AAA |
| `#3c4043` | `#e6f4ea` | 9.22:1 | AAA |
| `#1a73e8` | `#ffffff` | 4.51:1 | AA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Google Sans Flex | `--font-body` | webfont | 400, 500, 600 | All page typography: headings, navigation, body copy, links, and buttons. | Roboto |

- **Google Sans Flex:** Use regular and medium weights for most content, with semibold display headings; sentence case dominates and uppercase is reserved for small labels.

### Type scale — Perfect Fifth (ratio ≈ 1.495, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 80px | 600 | 1.15 | -0.006em | — | Google Sans Flex | Oversized promotional display headline where shown. |
| h1 | 48px | 600 | 1.17 | -0.01em | — | Google Sans Flex | Primary hero headline and major page section titles. |
| h2 | 28px | 400 | 1.29 | 0 | — | Google Sans Flex | Secondary section headings and prominent feature titles. |
| h3 | 20px | 400 | 1.4 | 0 | — | Google Sans Flex | Feature-card headings and smaller content group titles. |
| body | 16px | 400 | 1.5 | 0.006em | — | Google Sans Flex | Explanatory copy, descriptions, and standard paragraphs. |
| caption | 14px | 500 | 1.71 | 0.036em | uppercase | Google Sans Flex | Compact uppercase labels and editorial metadata. |
| button | 16px | 500 | 1.5 | 0 | — | Google Sans Flex | Primary and secondary call-to-action labels. |
| nav | 16px | 400 | 1.5 | 0.001em | — | Google Sans Flex | Header navigation, menus, and footer navigation. |
| link | 16px | 400 | 1.5 | 0.006em | — | Google Sans Flex | Inline links and text-based calls to action. |
| eyebrow | 14px | 500 | 1.71 | 0.036em | uppercase | Google Sans Flex | Small uppercase section or feature labels. |

## Spacing & layout

- Base unit **8px**, density **comfortable**.
- Scale (most used values): 2, 8, 12, 16, 20, 24, 32, 36, 48, 60, 80, 120 px.
- Section rhythm 48px · element gap 8px · card padding — · max content width 1296px.

The content moves between a centered, single-column introduction and broad multi-column feature areas, with occasional two-column image-and-copy stories. A measured maximum width of 1296px supports wide desktop sections; text blocks are often centered while feature lists and footer columns align left. Section spacing follows a comfortable rhythm, with generous breaks between major topics and tighter grouping inside cards. Pale full-width bands punctuate the otherwise white page. The overall density stays low enough to let headlines, interface screenshots, and benefit summaries read independently.

## Shape & elevation

- Radius: button `9999px` · card `24px` · media `20px` · nav `8px` · link `4px` · xs `4px` · sm `8px` · md `16px` · lg `20px` · xl `24px` · 2xl `28px` · pill `9999px`
- Shadow `sm` (other): `rgba(54, 64, 67, 0.15) 0px 1px 3px 1px`
- Shadow `sm-2` (button): `rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px`
- Shadow `md` (card): `rgba(32, 33, 36, 0.2) 0px 4px 24px 0px`
- Shadow `md-2` (other): `rgba(32, 33, 36, 0.15) 0px 4px 16px 0px`
- Motion: standard transition `0.2s ease` on interactive elements.

Most content sits flat against the page, relying on white space and pale section backgrounds rather than prominent shadows. Fine gray borders define secondary buttons and interface edges. Rounded product cards and the floating AI announcement panel create limited depth, with the latter using a soft shadow over the hero content.

## Imagery

Product-interface screenshots are framed inside broad, rounded media panels, often paired with adjacent feature copy. Customer stories use documentary-style classroom and educator imagery, including video thumbnails with visible play affordances. Workspace app icons and small illustrations support the ecosystem sections. Images retain natural colors and clear context; they are not unified by a heavy filter or decorative overlay.

## Components

### Pill CTA buttons

Primary Contact sales uses Google Blue #1a73e8 with white text; secondary Sign in to Classroom uses a white fill, blue text, and a #dadce0 outline. Both use fully rounded ends.

### Announcement strip

A full-width, lightly blue-tinted banner below navigation pairs centered announcement copy with an inline blue link and a right-aligned close control.

### Feature showcase cards

Rounded panels place Classroom product screenshots above a concise title, description, and compact text-link action.

### All-editions panels

Broad #f8f9fa bands group a section heading with several left-aligned benefit columns and a centered exploration link.

### Expandable feature list

A selected feature uses green emphasis and a vertical green rule alongside supporting copy; other topics remain compact rows.

### Story gallery

A row of classroom-video thumbnails pairs each image with a title, brief case-study description, and watch-video link.

### Testimonial band

A #e6f4ea panel presents a large customer quotation, attribution, pagination dots, and a circular next control.

### Measured component styles

- **Primary button** (“Contact sales”): background #1a73e8 · text #ffffff · border 1px solid · radius 200px · padding 2px 24px 0px 24px · 500 16px Google Sans Flex
- **Secondary button** (“Sign in to Classroom”): transparent background · text #1a73e8 · border 1px solid #dadce0 · radius 200px · padding 2px 24px 0px 24px · 500 16px Google Sans Flex
- **Link** (“Explore practice sets”): transparent background · text #1967d2 · radius 0px · padding 0px · 500 16px Google Sans Flex
- **Input** (“Global (English) Australia (English) Bra”): transparent background · text #5f6368 · radius 0px · padding 0px 24px 0px 0px · 500 16px Google Sans Flex
- **Card** (“AI tools built for educators Go from ide”): background #f8f9fa · text #5f6368 · radius 24px · padding 0px · 400 18px Google Sans Flex
- **Navigation item** (“Our values Our Commitment Privacy and Se”): transparent background · text #5f6368 · radius 0px · padding 0px · 400 16px Google Sans Flex

## Do

- Use white as the dominant page canvas.
- Reserve Google Blue for actions, links, and clear navigation emphasis.
- Break long content into alternating centered and split-layout sections.
- Use pale gray bands to group multi-column benefit summaries.
- Pair product screenshots with concise, relevant explanatory copy.
- Keep typography consistent with Google Sans Flex or a close sans-serif substitute.

## Don't

- Do not introduce unmeasured brand colors or gradients.
- Do not place every content group inside a bordered card.
- Do not let decorative imagery overpower interface content.
- Do not compress the long page into dense, uninterrupted text.
- Do not use heavy shadows as the primary separation method.
- Do not turn small labels or navigation into oversized headings.

## Agent prompt

Build a new education product page in Google for Education’s calm, spacious visual style. Use Canvas White (#ffffff) as the main background, Google Ink (#202124) for prominent headings, and Slate Gray (#5f6368) for supporting copy. Apply Google Blue (#1a73e8) to primary CTAs and Link Blue (#1967d2) to inline links. Use Cloud Gray (#f8f9fa) for broad feature bands and Pale Sage (#e6f4ea) only for a testimonial or similarly distinct proof point. Set the page in Google Sans Flex, or Roboto if unavailable. Organize content into centered introductions, split feature stories, and multi-column benefits with generous whitespace. Use rounded media and pill buttons, subtle borders, and minimal shadows. Let real product UI and educational imagery explain the product without decorative clutter.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | navigation | White global header with multi-level navigation and utility actions. | primary navigation, sign-in access, sales CTA | Google wordmark, active nav underline, blue pill button |
| 2 | hero | Centered product identity, oversized headline, copy, and paired actions. | product introduction, primary and secondary action | large centered heading, product mark, pill CTAs |
| 3 | announcement | Centered announcement text on white, followed by an inline resource link. | feature announcement, resource discovery | centered heading, blue inline links |
| 4 | feature-grid | Two side-by-side product cards with interface images and centered copy. | feature discovery, learn-more actions | rounded media cards, product screenshots, text links |
| 5 | other | Centered section title and short supporting sentence with ample whitespace. | topic transition | small icon, centered heading, brief body copy |
| 6 | feature-split | Two-column feature story with product media alongside an expandable list. | feature exploration, selected-topic detail | media panel, green active rule, compact topic rows |
| 7 | feature-grid | Pale full-width band with a heading and four benefit columns. | benefit scanning, explore all features | #f8f9fa panel, uppercase edition label, multi-column text |
| 8 | other | Centered section heading with a short supporting line. | topic transition | small icon, centered typography |
| 9 | feature-split | Two-column layout pairing product imagery and a premium feature list. | feature exploration, supporting detail | rounded product media, green-highlighted list item |
| 10 | feature-grid | Pale section band with four concise benefit columns and a shared heading. | benefit scanning, feature exploration | #f8f9fa background, column summaries, centered footer link |
| 11 | other | Centered headline and supporting copy introduce organizational controls. | topic transition | centered heading, small line icon |
| 12 | feature-split | Two-column feature presentation with supporting image and selected-feature list. | premium feature discovery, detail on selected topic | product imagery, green active indicator, compact list rows |
| 13 | feature-grid | Light gray band with an introductory heading and four benefit columns. | trust messaging, benefit scanning | #f8f9fa panel, edition label, multi-column copy |
| 14 | gallery | Centered introduction followed by a row of four classroom story cards. | case-study browsing, watch video | video thumbnails, play icons, compact captions |
| 15 | testimonials | Wide pale green quote panel with attribution and carousel controls. | testimonial carousel, quote pagination | #e6f4ea background, large quotation, round next button |
| 16 | feature-split | Award seal beside a left-aligned title, description, and report link. | trust proof, report link | award artwork, two-column alignment, blue text link |
| 17 | feature-grid | Centered heading, role tabs, and a three-column content presentation. | audience selection, role-based resources | tab underline, three-column layout, text-link list |
| 18 | integrations | Pale background with copy and CTA on one side, Workspace app marks on the other. | ecosystem discovery, explore Workspace | app-icon grid, soft gray band, rounded CTA |
| 19 | cta | Full-bleed closing callout with centered headline and action. | conversion prompt | large rounded blue-tinted panel, blue pill CTA |
| 20 | footer | Newsletter prompt above dense multi-column footer navigation and legal links. | email updates, footer browsing, locale selection | email field, social icons, multi-column link groups, bottom utility row |

## Source CSS custom properties (selected)

```css
--progress-bar-duration: 10s;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/classroom-google-com