Design System Explorer

Foundations

• Design tokensHow each system names and layers its design decisions, and which layer designers are meant to work in.8 of 9 systems read
• ColourHow each system organises colour, and what it tells you about using it.9 of 9 systems read
• TypographyDefault body size, the shape of the type scale, and what each system says about hierarchy.8 of 9 systems read
• SpacingThe base unit and scale each system publishes.5 of 9 systems read
• RadiusThe corner-radius values each system defines, and what they are for.5 of 9 systems read
• ElevationHow each system shows that one surface sits above another.6 of 9 systems read
• MotionWhat each system says about animation, where it says anything.6 of 9 systems read

Components

• ButtonHow each system expresses button hierarchy, and what it says about using more than one.9 of 9 systems read
• Error messageWhere each system puts a field error, and when it says to validate.6 of 9 systems read
• Text inputLabels, hints and placeholders in single-line fields.9 of 9 systems read
• SelectWhen a dropdown is the right control, and when it is not.8 of 9 systems read
• ModalWhen to interrupt, and how to keep a modal task small.9 of 9 systems read
• AccordionHiding content behind headings, and when not to.7 of 9 systems read
• NavigationThe primary navigation pattern in each system, and how many items it should hold.6 of 9 systems read
• TableWhat each system's table is for, and where it stops.6 of 9 systems read
• TabsSwitching between related views in place.7 of 9 systems read
• CheckboxMultiple selection and single on or off choices.8 of 9 systems read
• RadioChoosing exactly one option from a visible set.8 of 9 systems read
• Alert and notificationTelling people something happened, at four different levels of interruption.8 of 9 systems read

Viewport and platform

Where systems speak about screen size, touch or folding directly. Other topics have no viewport filter, because few systems publish per-viewport values: where one says nothing, the comparison says so and does not fill the gap.

• BreakpointsWhere each system says a layout should change, and in what unit.7 of 9 systems read
• Touch targetsThe smallest area each system says a finger should have to hit.4 of 9 systems read
• Folding screensWhat Apple and Google each say about designing for a device with two displays.2 of 9 systems read