Darker cells mean a higher score for this topic on that metric.
LessMore
Last reviewed Sources & creditsMedia creditsMethodology
Quick answers
When should I pick Slide and document grid?
When the story is: PowerPoint or Google Slides, one-pagers, classroom posters.
When should I avoid Slide and document grid?
Skip it in cases like: stacking free-floating boxes with no shared edges.
Who invented or popularised it?
Swiss grid systems; later presentation templates and CSS Grid
What does it encode?
columns, gutters and margins as a shared spatial system
Is it OK in ads?
Yes if one claim is visible at a glance in Meta, Google and retail print; otherwise link to a full figure.
Will a teacher accept it?
Yes for lab reports and poster boards if axes, units and a source line are present.
Slide and document grid encodes values as columns, gutters and margins as a shared spatial system. Swiss grid systems; later presentation templates and CSS Grid.
In reports, ads and assignments it fits PowerPoint or Google Slides, one-pagers, classroom posters. Skip it when stacking free-floating boxes with no shared edges.
Software
- Open Props — Design tokens including space and size scales for consistent layout. · MIT · github.com/open-props/open-props
- normalize.css — Baseline rendering consistency when you ship HTML handouts. · MIT · github.com/necolas/normalize.css
- Primer CSS — Open GitHub design-system spacing patterns you can study. · MIT · github.com/primer/css
- Tailwind CSS — Utility spacing scale - steal the rhythm, not necessarily the stack. · MIT · github.com/tailwindlabs/tailwindcss
- Geometry demos — Server-drawn shape skeletons that teach alignment. · CC0 examples · github.com/Tool-Lifes/viz-atlas
Exports
- Exports 1 — SVG
- Exports 2 — PDF
- Exports 3 — EMF/SVG into slides (no screenshots)
- Exports 4 — SVG for web, PDF for print
Accessibility
- Accessibility 1 — Never hue alone. Stack pattern, label and position.
- Accessibility 2 — 4.5:1 for text, 3:1 for large marks.
- Accessibility 3 — Short alt text on the chart; numbers also as an HTML table.
- Accessibility 4 — Motion only as emphasis. Honour prefers-reduced-motion.
Slide and document grid: honour columns, gutters and margins as a shared spatial system, and switch when stacking free-floating boxes with no shared edges.