# Master Design

Practical web interface guidelines. The canonical Markdown also ships in the portable master-design skill.

- [Design for the task. Refine every detail.](https://design.master.co/guidelines/overview.md): Practical guidelines for clear, adaptable and carefully made web interfaces.
- [Design principles](https://design.master.co/guidelines/principles.md): Purpose, agency, familiarity and hierarchy guide the details of an interface.
- [Accessibility](https://design.master.co/guidelines/accessibility.md): A practical web baseline for semantics, keyboard, contrast, targets and feedback.
- [Color](https://design.master.co/guidelines/foundations/color.md): Choose semantic roles and keep meaning clear across themes.
- [Typography](https://design.master.co/guidelines/foundations/typography.md): Establish readable hierarchy with real fonts, content and scripts.
- [Spacing](https://design.master.co/guidelines/foundations/spacing.md): Use space to express grouping and preserve relationships.
- [Sizing and density](https://design.master.co/guidelines/foundations/sizing.md): Balance content, visible surfaces and interaction targets.
- [Shape](https://design.master.co/guidelines/foundations/shape.md): Give containment and nested geometry a coherent form.
- [Elevation and surfaces](https://design.master.co/guidelines/foundations/elevation.md): Use surface treatment to explain regions and layers.
- [Icons and imagery](https://design.master.co/guidelines/foundations/icons.md): Support recognition without hiding meaning behind a glyph.
- [Motion](https://design.master.co/guidelines/foundations/motion.md): Explain change while respecting interruption and reduced motion.
- [Actions](https://design.master.co/guidelines/components/actions.md): Choose links and buttons, define emphasis and preserve state.
- [Fields and forms](https://design.master.co/guidelines/components/forms.md): Connect labels, inputs, help and validation feedback.
- [Selection](https://design.master.co/guidelines/components/selection.md): Match checkboxes, radio groups, switches and options to the decision.
- [Navigation](https://design.master.co/guidelines/components/navigation.md): Use familiar patterns to establish location and destinations.
- [Overlays](https://design.master.co/guidelines/components/overlays.md): Choose modality, manage focus and provide a clear exit.
- [Feedback](https://design.master.co/guidelines/components/feedback.md): Explain progress, results and recovery at the right level.
- [Data display](https://design.master.co/guidelines/components/data-display.md): Structure lists, tables and charts around meaningful comparison.
- [Form flows](https://design.master.co/guidelines/patterns/forms.md): Preserve work through entry, validation, submission and recovery.
- [Search and filtering](https://design.master.co/guidelines/patterns/search.md): Keep queries, criteria and result state connected.
- [Navigation flows](https://design.master.co/guidelines/patterns/navigation.md): Support deep links, context and responsive navigation.
- [Asynchronous work](https://design.master.co/guidelines/patterns/async.md): Represent waiting, progress, partial completion and failure honestly.
- [Recovery](https://design.master.co/guidelines/patterns/recovery.md): Make consequences clear and help people recover their work.
- [Responsive composition](https://design.master.co/guidelines/patterns/responsive.md): Adapt the composition while preserving the task.
- [Surface craft](https://design.master.co/guidelines/surfaces.md): Rings, hairlines, layered shadows and dark surfaces.
- [Geometry](https://design.master.co/guidelines/geometry.md): Insets, painted boundaries and nested corners.
- [Image craft](https://design.master.co/guidelines/images.md): Outlines, crop, container edges and image identity.
- [Typographic craft](https://design.master.co/guidelines/typography.md): Glyphs, numbers, line boxes and mixed scripts.
- [Layout craft](https://design.master.co/guidelines/layout.md): Grouping, alignment, mixed-content rows and reading controls.
- [State craft](https://design.master.co/guidelines/states.md): Concurrent states, stable feedback, targets and focus.
- [Motion craft](https://design.master.co/guidelines/motion.md): Interruptions, state identity and transition details.
- [Material craft](https://design.master.co/guidelines/materials.md): Glass, directional edges, masks and falloff.
- [Avatar stacks](https://design.master.co/guidelines/avatar-stacks.md): Overlap, separation, image edges and participant interaction.
- [Evidence and verification](https://design.master.co/guidelines/evidence.md): Separate measurements, deductions and visual judgments.