Other

The smaller bits — inline chips and status banners.

Chips

A chip is a small inline label — a tag, a filter, a badge. Static ones are a span; interactive ones are a button or a. They wrap in a flow.

default accent teal a tag 
<div class="flow">
  <span class="chip">default</span>
  <span class="chip accent">accent</span>
  <button class="chip">filter</button>
</div>

Status

A status banner is a div class="status" with a type, and a role so assistive tech announces it when it changes.

User created successfully
3 users found
Password expires in 2 days
<div class="status success" role="status">Saved</div>
<div class="status error" role="alert">Email already exists</div>
<div class="status info" role="status">3 users found</div>