Cheat Sheets

Working spacing scales, padding and gaps across mobile, tablet and desktop.

Mobile · Tablet · Desktop

Font sizing, hierarchy, line height and responsive type guidance.

Viewport-aware in part

Neutrals, the roles a palette needs, and giving every colour a job.

How round, how many values, and when roundness starts to look templated.

An elevation ladder, and when a border, a shadow or neither is the right separator.

Containers, columns, content width and responsive behaviour across viewports.

Mobile · Tablet · Desktop

Compact, comfortable or spacious: when to make it tighter, and how that changes with viewport.

Viewport-aware in part

A basic token set, how to name it, and how SGDS structures its own.

Height, touch targets, hierarchy, labels and the states people forget.

Viewport-aware in part

When a container helps, when it is noise, and what to use instead.

Viewport-aware in part

When tabs fit, when they do not, and what the tab row does when it runs out of room.

Viewport-aware in part

Select, radio buttons, searchable list or menu: which one, and how each behaves on a phone.

Viewport-aware in part

What to show while people wait, chosen by how long the wait is.

Size, touch area, contrast, and when an icon needs a label.

Viewport-aware in part

Side panels and sheets: how wide, when to use one, and how the same drawer changes across viewports.

Mobile · Tablet · Desktop

Control height, labels, validation, field states and not asking for the same thing twice.

Viewport-aware in part

Design data tables around what people do with them, then choose a pattern for each viewport.

Mobile · Tablet · Desktop

When interrupting is justified, how wide to make it at each viewport, and how to keep keyboard users in control.

Mobile · Tablet · Desktop

What stays visible at each viewport, plus consistency, wayfinding and keyboard access.

Mobile · Tablet · Desktop

The numbers and rules designers reach for most: contrast, targets, keyboard and focus.

Target sizes by platform, gestures and orientation.

Viewport-aware in part

Charts, status colours and dense tables that stay readable.

Headings, labels, links, errors and tooltips that say what they mean.

What an empty screen should tell people, teach them and let them do.

Identify the problem, explain it in words and help people recover.

Choosing a method for the phase you are in, and how many people to test with.

What Figma's Dev Mode gives you for marking, annotating and tracking handoff.

Viewports, breakpoints, fluid layout, touch and pointer, and the widths a layout has to survive.

Mobile · Tablet · Desktop

Designing interfaces that adapt across closed, open and changing device states.

Mobile · Tablet · Desktop

Hug, Fill and Fixed; direction and wrap; padding, gap and min/max.

What variables hold, and how collections, modes and aliases fit together.

Main components and instances, variants and properties, and libraries.

What developers see in Dev Mode, and how to mark work ready for them.

Flows, starting points, and how much of a design is worth wiring up.

The order to build a design system file in, from foundations to a published library.