Google for Education. A digital classroom where whitespace, type, and one blue accent do all the work.
- Productivity
- Light theme
- 9 colors
- 2 typefaces
Google for Education operates as a restrained utility surface: a near-white canvas anchored by two type families (Google Sans Text for body and UI, Google Sans Display for headlines) and a single brand blue that functions as the system's only chromatic voice. Hierarchy comes from scale jumps and tracking — the 80px display headline is tightly tracked, while 12–16px body text opens up with positive letter-spacing for small-size legibility. Surfaces avoid decorative gradients and heavy shadows, relying on generous whitespace, 24–28px card radii, and pill-shaped controls to feel approachable rather than corporate. Color is functional punctuation, not atmosphere: green identifies the Classroom brand mark, blue marks links and active states, and everything else stays in a narrow gray scale (#202124 → #3c4043 → #5f6368 → #dadce0).
Google for Education design system
Brand2
Blue supporting accent for decorative details and low-frequency emphasis. Do not promote it to the primary CTA color
Blue supporting accent for decorative details and low-frequency emphasis. Do not promote it to the primary CTA color
Accent1
Green supporting accent for decorative details and low-frequency emphasis
Neutrals6
Primary text, display headlines, active icon strokes — the deepest readable black-blue for maximum hierarchy
Secondary headings, nav text, strong body — one step lighter than charcoal for sub-headings and navigation labels
Muted body text, helper copy, icon glyphs, breadcrumb separators, footer micro-copy
Soft elevation on focused inputs and floating chips
Hairline borders, card outlines, input strokes, dividers between sections — the only structural separator in the system
Page background, card surfaces, section bands — the off-white ground that prevents harshness against pure white product screenshots
Try a pairing
Pick any two colors from the palette to check whether text stays readable on top.
Aa
#fafafa on Google Blue
4.32 : 1 contrast
- Body textFails AA 4.5
- Large textPasses AA 3
- StrictFails AAA 7
