Design System

Search

A search screen where the field leads at full measure and everything else is an explicitly secondary suggestion.

What it demonstrates

  • One large field owning the top of the page, scope chips directly beneath it
  • Recent and suggested results as divided lists, not two competing cards
  • The same CommandMenu powering the overlay, so keyboard search behaves identically
  • Result type shown as a subtle badge, with a supporting metadata line

How to adapt it

  • Suggestions must look like suggestions — quieter type, no surfaces, no icons competing with the field.
  • Offer the keyboard route on the page; do not hide it in a help article.
  • Say what each result is and why it is relevant in one metadata line.
Preview at

Annotates each part with the design-system component it uses.

Open full screen

Composed from

Nothing on this screen is new. Every part is an existing component, layout or pattern.

PageHeaderSearchInputChipGroupListBadgeCommandMenuCommandMenuDialogButton