Skip to main content
XD@JW
XD@JW
Principles
Experience
Design system
Patterns
Buttons and links
Empty states
Form validation
Loading states
Tables vs. lists
Tabs and friends
Components
Avatar
Badge
Button
Checkbox
Chip
Date inputs
Divider
File input
Input label
Input message
Menu
Multi-select
Notice
Page header
Radio button
Select box
Skeletons
Spinner
Stepper
Table
Text box
Textarea
Toggle switch
Tooltip
Design tokens
Space
Color
Typography
Shadows
Imagery
System icons
Display icons
Home
Components
Avatar
Show a person in the system, with their photo or initials.
Badge
Some say we don't need no stinking badges. They're wrong.
Button
Button, button, who's got the button?
Checkbox
Check, please!
Chip
Not as yummy as they sound. Still useful though.
Date inputs
Different ways to ask someone for a month, day, and year (not necessarily in that order).
Divider
You gotta draw the line somewhere.
File input
Drop a file or two in the box.
Input label
Make sure people understand what they're being asked for.
Input message
Give people guidance on how to fill in a form field, or respond to their input.
Menu
Expose a list of actions or destinations.
Multi-select
Choose one or more, and hide the options when you're not choosing.
Notice
Some content just wants to be noticed.
Page header
Set the stage for what to expect on this page.
Radio button
Choose one, and only one.
Select box
Choose one, and hide the choices when you're not choosing.
Skeletons
Show a placeholder text or images while content is loading.
Spinner
Generic loading state.
Stepper
Tell someone where they've been, where they are, and where they can go.
Table
Put two-dimensional data in rows and columns.
Text box
Get a few words from people.
Textarea
Get a lot of words from people.
Toggle switch
On. Off. On. Off.
Tooltip
We all need a little helping hand sometimes.