Components

A person or entity at a glance — a photo, or initials when there is none.

A short status label, tinted by what it means: info, success, warning, danger or neutral.

The action a reader takes, from the one primary call to quiet secondary ones.

An on/off choice, with a mixed state for "select all".

A name from code inside a sentence: a token, a prop, an API.

Keeps a page to a readable width, from prose to fluid.

Quiet supporting text that explains a field or a section.

Lays content out in responsive columns with system gaps.

The title ramp, from section headings to the display serif.

A small symbol sized to sit beside text, in the colour of its words.

An action shown as a single symbol, with a name for screen readers.

A single line where people type text, with a clear invalid state.

A keyboard shortcut, set as keys — like the ⌘K that opens search.

Names a form control and marks it as required.

Takes the reader to another page, within a sentence or on its own.

How far a task has got, as a bar.

One choice out of a few, shown together in a group.

A quiet line that divides content, across or along.

Loading shimmer placeholder.

A trend in one line, with the current value marked.

Indeterminate progress glyph.

Turns a setting on or off, applied at once.

Body text in the system's sizes and tones.

Multi-line text input.

Screen-reader-only content.

The Poesía brand mark, set as a word.

Cluster of related actions (e.g. dialog footer).

One event in a feed: who did what to what, and when.

A message about the page or a section of it, in the tone of what it says.

A few people at a glance, overlapping, with a count for the rest.

A raft of page actions pinned to the bottom of the frame.

Names ranked by a value — a label, the value and a thin bar per row.

Where the reader is: the trail of pages above this one, each a link back.

A content surface that groups one subject, with optional actions.

A row of slides to swipe or step through.

One message in a conversation, sent or received.

Pick one or many from a short set, each choice with a title and a line of detail.

A select you can type into to filter a long list.

One command in the command menu, with its icon and shortcut.

One comment: who wrote it, what they said, and the reactions to it.

Asks a reader to confirm or cancel before something that matters.

Generic row for narrow lists (settings, audit).

Date input with custom calendar popover.

A modal surface for a focused task; the page waits behind it.

A panel that slides in from an edge for a secondary task.

A menu of actions opened from a button.

Tells people why a surface is empty and what to do first.

Lists what went wrong in a form and takes people to each mistake.

One form question: its label, the control, a hint and any error.

Lets people drop files onto an area or browse for them.

Narrows a list by a few filters and shows which ones are on.

Gathers related form fields under a title and a short explanation.

A text input joined with a prefix, a suffix or a button.

Takes a one-time code, one digit per box, pasted or typed.

One row of a list: a title, a line of detail and an action.

What a surface shows while it loads: a spinner, a skeleton of its content, or progress.

Locale picker with native language names.

Model or editorial Markdown painted with atoms; app pieces through render slots.

One number that matters, with its label, unit and change.

Gathers related navigation rows into one group, with or without a title.

A navigation row — an icon in the rail that opens its peek, a labelled row in a panel.

One notification: who, what happened and when.

The top of a page: its title, a line about it and its main actions.

Moves through a long list a page at a time.

One pricing plan: its name, price, what it includes and how to choose it.

A small floating surface anchored to what opened it.

One choice of plan, to pick among a few.

Key/value rows for record metadata.

Quick emoji reactions with their counts; the reader's own stands out.

Scrolls one axis with soft edge fades instead of a heavy scrollbar.

A search box that can be cleared in one press.

One of a few values, all in view; the thumb slides to the choice.

Sub-section title within a page body.

Picks one value from a list in a dropdown.

One setting: what it does, in a line, and its control.

A document pane: one surface divided into sections.

The sidebar's content — in the rail, one group of rows.

Picks a value along a range by dragging.

A main action with a menu of related ones beside it.

The state of one thing, named and explained in a line.

Multi-step process indicator.

DataTable header cells with sort indicators.

Pagination footer for DataTable.

One row of a table, selectable when the table is.

Switches between sibling views of the same subject.

One step in a timeline: what happened, who did it and when.

A brief message about something that just happened.

Generic horizontal toolbar of actions.

A short label that appears on hover or focus.

Brand, search and actions across the top of a page without a rail.

The account menu: who is signed in, their settings, and sign out.

The sky behind the glass — a themed ground with slow-drifting light.

Sign in and sign up: credentials, a one-time code, a forgotten password, and what follows each.

Writes a message or post — text, attachments, mentions and send.

Line, area and column charts with a legend, a table view and keyboard readout.

Finds and runs anything from the keyboard (⌘K).

A discussion: comments, replies to them and a box to add yours.

Shows records in rows and columns that people can sort, select and page through.

A stream of posts that loads more as people scroll.

One post in a feed: who wrote it, what it says and how people reacted.

Runs a whole form: checks every answer and shows what needs fixing before it sends.

The opening section of a landing or welcome page, with its headline and main action.

Shows a picture or video full screen, to zoom and step through.

Dropdown-anchored notification panel.

The app frame: an icon rail whose rows peek, the page header, the content; tabs on phones.

The top of a profile — cover, avatar, name, stats and actions.