Rondo by WavetableDesign System Back to the showcase

THE RONDO COLLECTION

Source library

Explore the foundations, components, and compositions behind the showcase.

Rondo collection

58 component sets2,664 source assets

01 / Foundations

Color palette

The full palette, from expressive brand colors to quiet neutrals. Both semantic color modes are included.

Color styles

Branded
Saturated
Muted
Neutral

Color / Variables

Background/bg-elevated
Text/text
Text/text-secondary
Text/text-tertiary
Text/text-muted
Border/border
Border/border-hover
Accent/accent
Accent/accent-light
Status/success
Palette/blue
Color preview
Branded/wt-purple#813EBE
Collection / group
Color style
Preview surface
Branded/wt-purple#813EBE

02 / Foundations

Typography

Every text style, with the same typefaces used throughout the showcase.

Bricolage Grotesque

header-xl96px / 700Line 90% · Tracking -6%

Shared discoveries

header-base48px / 700Line 90% · Tracking -4%

Shared discoveries

Onest

text-4xl36px / 500Line 100% · Tracking -2%

Make room for another perspective.

text-3xl30px / 500Line 100% · Tracking -2%

Make room for another perspective.

text-2xl24px / 500Line 100% · Tracking 0%

Make room for another perspective.

text-xl20px / 500Line 100% · Tracking 0%

Make room for another perspective.

text-lg18px / 500Line 100% · Tracking 0%

Make room for another perspective.

text-base16px / 400Line 100% · Tracking 0%

Make room for another perspective.

text-sm14px / 400Line 100% · Tracking 0%

Make room for another perspective.

text-xs12px / 400Line 100% · Tracking 0%

Make room for another perspective.

body-medium16px / 500Line 100% · Tracking 0%

Make room for another perspective.

text-italic16px / 400 italicLine 100% · Tracking 0%

Make room for another perspective.

text-sm-caps14px / 400Line 100% · Tracking 0%

Make room for another perspective.

text-5xl48px / 700Line 100% · Tracking -2%

Make room for another perspective.

Caveat

decor-xl42px / 400Line 100% · Tracking -2%

A different perspective

decor-base24px / 700Line 100% · Tracking -2%

A different perspective

03 / Foundations

Space & radius

The spacing and corner radii that give the pieces their shared rhythm.

Space · Local

space-02px
space-15px
space-210px
space-315px
space-420px
space-530px
space-650px
space-770px
space-8100px
space-9150px

Radius · Local

radius-14px
radius-28px
radius-310px
radius-420px
radius-round50px

Radius · Imported

radius-md8px
radius-full9999px
Space & radius preview
space-420px / Space · Local
Collection
Spacing token
space-420pxThe space between each block.

04 / Foundations

Shadows

Two levels of depth, shown with their source values.

Effects

shadow-smX 0 / Y 10 / Blur 20 / Spread 0
#101828 · 20%
shadow-xsX 0 / Y 3 / Blur 6 / Spread 0
#101828 · 25%
Shadow preview
shadow-smOriginal offset, blur, spread, and opacity
Effect style
shadow-smX 0px · Y 10px
Blur 20px · Spread 0px
#101828 · 20%

05 / Foundations

Brand & artwork

The shapes, scribbles, and backgrounds behind Rondo’s visual language.

wt-geometry

8 variants
Loading source…
Option=08250 × 250
Loading source…
Option=07250 × 250
Loading source…
Option=06250 × 250
Loading source…
Option=05250 × 277
Loading source…
Option=04250 × 250
Loading source…
Option=03250 × 250
Loading source…
Option=02250 × 262
Loading source…
Option=01284 × 267

wt-scribble

4 variants
Loading source…
Option=04433 × 449
Loading source…
Option=03449 × 500
Loading source…
Option=02578 × 563
Loading source…
Option=01556 × 615

Background

4 variants
Loading source…
Option=041440 × 900
Loading source…
Option=031440 × 900
Loading source…
Option=021440 × 900
Loading source…
Option=011440 × 900

Color Bar

1 specimen
Loading source…
Color Bar280 × 8

Initials Avatar

1 specimen
Loading source…
Initials Avatar40 × 40

06 / Components

Actions & inputs

Buttons, fields, and choices. Each family is laid out with its complete set of variants.

Button

90 variants
Loading source…
State=Normal, Label=On, Icon=On, Fill=On, Size=XL153 × 49
Loading source…
State=Normal, Label=On, Icon=On, Fill=Off, Size=XL153 × 49
Loading source…
State=Normal, Label=On, Icon=Off, Fill=On, Size=XL127 × 49
Loading source…
State=Normal, Label=On, Icon=Off, Fill=Off, Size=XL127 × 49
Loading source…
State=Normal, Label=Off, Icon=On, Fill=On, Size=XL49 × 49
Loading source…
State=Normal, Label=Off, Icon=On, Fill=Off, Size=XL49 × 49
Loading source…
State=Hover, Label=On, Icon=On, Fill=On, Size=XL153 × 49
Loading source…
State=Hover, Label=On, Icon=On, Fill=Off, Size=XL153 × 49
Loading source…
State=Hover, Label=On, Icon=Off, Fill=On, Size=XL127 × 49
Loading source…
State=Hover, Label=On, Icon=Off, Fill=Off, Size=XL127 × 49
Loading source…
State=Hover, Label=Off, Icon=On, Fill=On, Size=XL49 × 49
Loading source…
State=Hover, Label=Off, Icon=On, Fill=Off, Size=XL49 × 49
Loading source…
State=Clicked, Label=On, Icon=On, Fill=On, Size=XL153 × 49
Loading source…
State=Clicked, Label=On, Icon=On, Fill=Off, Size=XL153 × 49
Loading source…
State=Clicked, Label=On, Icon=Off, Fill=On, Size=XL127 × 49
Loading source…
State=Clicked, Label=On, Icon=Off, Fill=Off, Size=XL127 × 49
Loading source…
State=Clicked, Label=Off, Icon=On, Fill=On, Size=XL49 × 49
Loading source…
State=Clicked, Label=Off, Icon=On, Fill=Off, Size=XL49 × 49
Loading source…
State=Disabled, Label=On, Icon=On, Fill=On, Size=XL153 × 49
Loading source…
State=Disabled, Label=On, Icon=On, Fill=Off, Size=XL153 × 49
Loading source…
State=Disabled, Label=On, Icon=Off, Fill=On, Size=XL127 × 49
Loading source…
State=Disabled, Label=On, Icon=Off, Fill=Off, Size=XL127 × 49
Loading source…
State=Disabled, Label=Off, Icon=On, Fill=On, Size=XL49 × 49
Loading source…
State=Disabled, Label=Off, Icon=On, Fill=Off, Size=XL49 × 49
Loading source…
State=Ticked, Label=On, Icon=On, Fill=On, Size=XL153 × 49
Loading source…
State=Ticked, Label=On, Icon=On, Fill=Off, Size=XL153 × 49
Loading source…
State=Ticked, Label=On, Icon=Off, Fill=On, Size=XL127 × 49
Loading source…
State=Ticked, Label=On, Icon=Off, Fill=Off, Size=XL127 × 49
Loading source…
State=Ticked, Label=Off, Icon=On, Fill=On, Size=XL49 × 49
Loading source…
State=Ticked, Label=Off, Icon=On, Fill=Off, Size=XL49 × 49
Loading source…
State=Normal, Label=On, Icon=On, Fill=On, Size=MD95 × 44
Loading source…
State=Normal, Label=On, Icon=On, Fill=On, Size=SM75 × 27
Loading source…
State=Normal, Label=On, Icon=On, Fill=Off, Size=MD95 × 44
Loading source…
State=Normal, Label=On, Icon=On, Fill=Off, Size=SM75 × 27
Loading source…
State=Normal, Label=On, Icon=Off, Fill=On, Size=MD69 × 44
Loading source…
State=Normal, Label=On, Icon=Off, Fill=On, Size=SM54 × 27
Loading source…
State=Normal, Label=On, Icon=Off, Fill=Off, Size=MD69 × 44
Loading source…
State=Normal, Label=On, Icon=Off, Fill=Off, Size=SM54 × 27
Loading source…
State=Normal, Label=Off, Icon=On, Fill=On, Size=MD44 × 44
Loading source…
State=Normal, Label=Off, Icon=On, Fill=On, Size=SM27 × 27
Loading source…
State=Normal, Label=Off, Icon=On, Fill=Off, Size=MD44 × 44
Loading source…
State=Normal, Label=Off, Icon=On, Fill=Off, Size=SM27 × 27
Loading source…
State=Disabled, Label=On, Icon=On, Fill=On, Size=MD95 × 44
Loading source…
State=Disabled, Label=On, Icon=On, Fill=On, Size=SM75 × 27
Loading source…
State=Disabled, Label=On, Icon=On, Fill=Off, Size=MD95 × 44
Loading source…
State=Disabled, Label=On, Icon=On, Fill=Off, Size=SM75 × 27
Loading source…
State=Disabled, Label=On, Icon=Off, Fill=On, Size=MD69 × 44
Loading source…
State=Disabled, Label=On, Icon=Off, Fill=On, Size=SM54 × 27
Loading source…
State=Disabled, Label=On, Icon=Off, Fill=Off, Size=MD69 × 44
Loading source…
State=Disabled, Label=On, Icon=Off, Fill=Off, Size=SM54 × 27
Loading source…
State=Disabled, Label=Off, Icon=On, Fill=On, Size=MD44 × 44
Loading source…
State=Disabled, Label=Off, Icon=On, Fill=On, Size=SM27 × 27
Loading source…
State=Disabled, Label=Off, Icon=On, Fill=Off, Size=MD44 × 44
Loading source…
State=Disabled, Label=Off, Icon=On, Fill=Off, Size=SM27 × 27
Loading source…
State=Ticked, Label=On, Icon=On, Fill=On, Size=MD95 × 44
Loading source…
State=Ticked, Label=On, Icon=On, Fill=On, Size=SM75 × 27
Loading source…
State=Ticked, Label=On, Icon=On, Fill=Off, Size=MD95 × 44
Loading source…
State=Ticked, Label=On, Icon=On, Fill=Off, Size=SM75 × 27
Loading source…
State=Ticked, Label=On, Icon=Off, Fill=On, Size=MD69 × 44
Loading source…
State=Ticked, Label=On, Icon=Off, Fill=On, Size=SM54 × 27
Loading source…
State=Ticked, Label=On, Icon=Off, Fill=Off, Size=MD69 × 44
Loading source…
State=Ticked, Label=On, Icon=Off, Fill=Off, Size=SM54 × 27
Loading source…
State=Ticked, Label=Off, Icon=On, Fill=On, Size=MD44 × 44
Loading source…
State=Ticked, Label=Off, Icon=On, Fill=On, Size=SM27 × 27
Loading source…
State=Ticked, Label=Off, Icon=On, Fill=Off, Size=MD44 × 44
Loading source…
State=Ticked, Label=Off, Icon=On, Fill=Off, Size=SM27 × 27
Loading source…
State=Hover, Label=On, Icon=On, Fill=On, Size=MD95 × 44
Loading source…
State=Hover, Label=On, Icon=On, Fill=On, Size=SM75 × 27
Loading source…
State=Hover, Label=On, Icon=On, Fill=Off, Size=MD95 × 44
Loading source…
State=Hover, Label=On, Icon=On, Fill=Off, Size=SM75 × 27
Loading source…
State=Hover, Label=On, Icon=Off, Fill=On, Size=MD69 × 44
Loading source…
State=Hover, Label=On, Icon=Off, Fill=On, Size=SM54 × 27
Loading source…
State=Hover, Label=On, Icon=Off, Fill=Off, Size=MD69 × 44
Loading source…
State=Hover, Label=On, Icon=Off, Fill=Off, Size=SM54 × 27
Loading source…
State=Hover, Label=Off, Icon=On, Fill=On, Size=MD44 × 44
Loading source…
State=Hover, Label=Off, Icon=On, Fill=On, Size=SM27 × 27
Loading source…
State=Hover, Label=Off, Icon=On, Fill=Off, Size=MD44 × 44
Loading source…
State=Hover, Label=Off, Icon=On, Fill=Off, Size=SM27 × 27
Loading source…
State=Clicked, Label=On, Icon=On, Fill=On, Size=MD95 × 44
Loading source…
State=Clicked, Label=On, Icon=On, Fill=On, Size=SM75 × 27
Loading source…
State=Clicked, Label=On, Icon=On, Fill=Off, Size=MD95 × 44
Loading source…
State=Clicked, Label=On, Icon=On, Fill=Off, Size=SM75 × 27
Loading source…
State=Clicked, Label=On, Icon=Off, Fill=On, Size=MD69 × 44
Loading source…
State=Clicked, Label=On, Icon=Off, Fill=On, Size=SM54 × 27
Loading source…
State=Clicked, Label=On, Icon=Off, Fill=Off, Size=MD69 × 44
Loading source…
State=Clicked, Label=On, Icon=Off, Fill=Off, Size=SM54 × 27
Loading source…
State=Clicked, Label=Off, Icon=On, Fill=On, Size=MD44 × 44
Loading source…
State=Clicked, Label=Off, Icon=On, Fill=On, Size=SM27 × 27
Loading source…
State=Clicked, Label=Off, Icon=On, Fill=Off, Size=MD44 × 44
Loading source…
State=Clicked, Label=Off, Icon=On, Fill=Off, Size=SM27 × 27

Link

8 variants
Loading source…
XL=On, Stare=Normal147 × 34
Loading source…
XL=On, Stare=Hover147 × 34
Loading source…
XL=On, Stare=Clicked147 × 34
Loading source…
XL=On, Stare=Disabled147 × 34
Loading source…
XL=Off, Stare=Normal75 × 18
Loading source…
XL=Off, Stare=Hover75 × 18
Loading source…
XL=Off, Stare=Clicked75 × 18
Loading source…
XL=Off, Stare=Disabled75 × 18

Switch Button

10 variants
Loading source…
Dark mode=On, State=Normal123 × 36
Loading source…
Dark mode=Off, State=Normal123 × 36
Loading source…
Dark mode=On, State=Hover123 × 36
Loading source…
Dark mode=Off, State=Hover123 × 36
Loading source…
Dark mode=On, State=Clicked123 × 36
Loading source…
Dark mode=Off, State=Clicked123 × 36
Loading source…
Dark mode=On, State=Ticked123 × 36
Loading source…
Dark mode=Off, State=Ticked123 × 36
Loading source…
Dark mode=On, State=Disabled123 × 36
Loading source…
Dark mode=Off, State=Disabled123 × 36

Checkbox

2 variants
Loading source…
Ticked=Off24 × 24
Loading source…
Ticked=On24 × 24

RadioButton

2 variants
Loading source…
Ticked=Off24 × 24
Loading source…
Ticked=On24 × 24

Labeled Checkbox

2 variants
Loading source…
Ticked=Off128 × 44
Loading source…
Ticked=On128 × 44

Choice Chip

2 variants
Loading source…
Ticked=Off101 × 44
Loading source…
Ticked=On101 × 44

Switch

2 variants
Loading source…
Ticked=Off40 × 24
Loading source…
Ticked=On40 × 24

Badge

84 variants
Loading source…
Type=Saturated, Color=Red, Icon=On75 × 27
Loading source…
Type=Saturated, Color=Red, Icon=Off54 × 27
Loading source…
Type=Saturated, Color=Rose, Icon=On75 × 27
Loading source…
Type=Saturated, Color=Rose, Icon=Off54 × 27
Loading source…
Type=Saturated, Color=Coral, Icon=On75 × 27
Loading source…
Type=Saturated, Color=Coral, Icon=Off54 × 27
Loading source…
Type=Saturated, Color=Orange, Icon=On75 × 27
Loading source…
Type=Saturated, Color=Orange, Icon=Off54 × 27
Loading source…
Type=Saturated, Color=Yellow, Icon=On75 × 27
Loading source…
Type=Saturated, Color=Yellow, Icon=Off54 × 27
Loading source…
Type=Saturated, Color=Olive, Icon=On75 × 27
Loading source…
Type=Saturated, Color=Olive, Icon=Off54 × 27
Loading source…
Type=Saturated, Color=Green, Icon=On75 × 27
Loading source…
Type=Saturated, Color=Green, Icon=Off54 × 27
Loading source…
Type=Saturated, Color=Teal, Icon=On75 × 27
Loading source…
Type=Saturated, Color=Teal, Icon=Off54 × 27
Loading source…
Type=Saturated, Color=Cyan, Icon=On75 × 27
Loading source…
Type=Saturated, Color=Cyan, Icon=Off54 × 27
Loading source…
Type=Saturated, Color=Blue, Icon=On75 × 27
Loading source…
Type=Saturated, Color=Blue, Icon=Off54 × 27
Loading source…
Type=Saturated, Color=Pink, Icon=On75 × 27
Loading source…
Type=Saturated, Color=Pink, Icon=Off54 × 27
Loading source…
Type=Saturated, Color=Purple, Icon=On75 × 27
Loading source…
Type=Saturated, Color=Dark, Icon=On75 × 27
Loading source…
Type=Saturated, Color=Light, Icon=On75 × 27
Loading source…
Type=Saturated, Color=Purple, Icon=Off54 × 27
Loading source…
Type=Saturated, Color=Dark, Icon=Off54 × 27
Loading source…
Type=Saturated, Color=Light, Icon=Off54 × 27
Loading source…
Type=Muted, Color=Red, Icon=On75 × 27
Loading source…
Type=Muted, Color=Red, Icon=Off54 × 27
Loading source…
Type=Muted, Color=Rose, Icon=On75 × 27
Loading source…
Type=Muted, Color=Rose, Icon=Off54 × 27
Loading source…
Type=Muted, Color=Coral, Icon=On75 × 27
Loading source…
Type=Muted, Color=Coral, Icon=Off54 × 27
Loading source…
Type=Muted, Color=Orange, Icon=On75 × 27
Loading source…
Type=Muted, Color=Orange, Icon=Off54 × 27
Loading source…
Type=Muted, Color=Yellow, Icon=On75 × 27
Loading source…
Type=Muted, Color=Yellow, Icon=Off54 × 27
Loading source…
Type=Muted, Color=Olive, Icon=On75 × 27
Loading source…
Type=Muted, Color=Olive, Icon=Off54 × 27
Loading source…
Type=Muted, Color=Green, Icon=On75 × 27
Loading source…
Type=Muted, Color=Green, Icon=Off54 × 27
Loading source…
Type=Muted, Color=Teal, Icon=On75 × 27
Loading source…
Type=Muted, Color=Teal, Icon=Off54 × 27
Loading source…
Type=Muted, Color=Cyan, Icon=On75 × 27
Loading source…
Type=Muted, Color=Cyan, Icon=Off54 × 27
Loading source…
Type=Muted, Color=Blue, Icon=On75 × 27
Loading source…
Type=Muted, Color=Blue, Icon=Off54 × 27
Loading source…
Type=Muted, Color=Pink, Icon=On75 × 27
Loading source…
Type=Muted, Color=Pink, Icon=Off54 × 27
Loading source…
Type=Muted, Color=Purple, Icon=On75 × 27
Loading source…
Type=Muted, Color=Dark, Icon=On75 × 27
Loading source…
Type=Muted, Color=Light, Icon=On75 × 27
Loading source…
Type=Muted, Color=Purple, Icon=Off54 × 27
Loading source…
Type=Muted, Color=Dark, Icon=Off54 × 27
Loading source…
Type=Muted, Color=Light, Icon=Off54 × 27
Loading source…
Type=Stroke, Color=Red, Icon=On75 × 27
Loading source…
Type=Stroke, Color=Red, Icon=Off54 × 27
Loading source…
Type=Stroke, Color=Rose, Icon=On75 × 27
Loading source…
Type=Stroke, Color=Rose, Icon=Off54 × 27
Loading source…
Type=Stroke, Color=Coral, Icon=On75 × 27
Loading source…
Type=Stroke, Color=Coral, Icon=Off54 × 27
Loading source…
Type=Stroke, Color=Orange, Icon=On75 × 27
Loading source…
Type=Stroke, Color=Orange, Icon=Off54 × 27
Loading source…
Type=Stroke, Color=Yellow, Icon=On75 × 27
Loading source…
Type=Stroke, Color=Yellow, Icon=Off54 × 27
Loading source…
Type=Stroke, Color=Olive, Icon=On75 × 27
Loading source…
Type=Stroke, Color=Olive, Icon=Off54 × 27
Loading source…
Type=Stroke, Color=Green, Icon=On75 × 27
Loading source…
Type=Stroke, Color=Green, Icon=Off54 × 27
Loading source…
Type=Stroke, Color=Teal, Icon=On75 × 27
Loading source…
Type=Stroke, Color=Teal, Icon=Off54 × 27
Loading source…
Type=Stroke, Color=Cyan, Icon=On75 × 27
Loading source…
Type=Stroke, Color=Cyan, Icon=Off54 × 27
Loading source…
Type=Stroke, Color=Blue, Icon=On75 × 27
Loading source…
Type=Stroke, Color=Blue, Icon=Off54 × 27
Loading source…
Type=Stroke, Color=Pink, Icon=On75 × 27
Loading source…
Type=Stroke, Color=Pink, Icon=Off54 × 27
Loading source…
Type=Stroke, Color=Purple, Icon=On75 × 27
Loading source…
Type=Stroke, Color=Dark, Icon=On75 × 27
Loading source…
Type=Stroke, Color=Light, Icon=On75 × 27
Loading source…
Type=Stroke, Color=Purple, Icon=Off54 × 27
Loading source…
Type=Stroke, Color=Dark, Icon=Off54 × 27
Loading source…
Type=Stroke, Color=Light, Icon=Off54 × 27

Chip

14 variants
Loading source…
Color=Red75 × 27
Loading source…
Color=Rose75 × 27
Loading source…
Color=Coral75 × 27
Loading source…
Color=Orange75 × 27
Loading source…
Color=Yellow75 × 27
Loading source…
Color=Lime75 × 27
Loading source…
Color=Green75 × 27
Loading source…
Color=Cyan75 × 27
Loading source…
Color=Teal75 × 27
Loading source…
Color=Blue75 × 27
Loading source…
Color=Purple75 × 27
Loading source…
Color=Color1375 × 27
Loading source…
Color=Color1475 × 27
Loading source…
Color=Pink75 × 27

IconBadge

12 variants
Loading source…
Size=SM, Type=Filled20 × 20
Loading source…
Size=SM, Type=Neutral Light20 × 20
Loading source…
Size=SM, Type=Neutral Dark20 × 20
Loading source…
Size=SM, Type=Outlined20 × 20
Loading source…
Size=MD, Type=Filled30 × 30
Loading source…
Size=MD, Type=Neutral Light30 × 30
Loading source…
Size=MD, Type=Neutral Dark30 × 30
Loading source…
Size=MD, Type=Outlined30 × 30
Loading source…
Size=LG, Type=Filled50 × 50
Loading source…
Size=LG, Type=Neutral Light50 × 50
Loading source…
Size=LG, Type=Neutral Dark50 × 50
Loading source…
Size=LG, Type=Outlined50 × 50

NumberBadge

12 variants
Loading source…
Size=SM, Type=Filled20 × 20
Loading source…
Size=SM, Type=Neutral Light20 × 20
Loading source…
Size=SM, Type=Neutral Dark20 × 20
Loading source…
Size=SM, Type=Outlined20 × 20
Loading source…
Size=MD, Type=Filled30 × 30
Loading source…
Size=MD, Type=Neutral Light30 × 30
Loading source…
Size=MD, Type=Neutral Dark30 × 30
Loading source…
Size=MD, Type=Outlined30 × 30
Loading source…
Size=LG, Type=Filled50 × 50
Loading source…
Size=LG, Type=Neutral Light50 × 50
Loading source…
Size=LG, Type=Neutral Dark50 × 50
Loading source…
Size=LG, Type=Outlined50 × 50

Progress Indicator

15 variants
Loading source…
Mode=Snack, Progress=2/4176 × 37
Loading source…
Mode=Snack, Progress=1/4176 × 37
Loading source…
Mode=Snack, Progress=0/4176 × 37
Loading source…
Mode=Snack, Progress=3/4176 × 37
Loading source…
Mode=Snack, Progress=4/4176 × 37
Loading source…
Mode=Dark, Progress=0/4100 × 37
Loading source…
Mode=Light, Progress=0/4100 × 37
Loading source…
Mode=Dark, Progress=1/4100 × 37
Loading source…
Mode=Light, Progress=1/4100 × 37
Loading source…
Mode=Dark, Progress=2/4100 × 37
Loading source…
Mode=Light, Progress=2/4100 × 37
Loading source…
Mode=Dark, Progress=3/4100 × 37
Loading source…
Mode=Light, Progress=3/4100 × 37
Loading source…
Mode=Dark, Progress=4/4100 × 37
Loading source…
Mode=Light, Progress=4/4100 × 37

Input

8 variants
Loading source…
Type=Field, Active=Off483 × 103
Loading source…
Type=Line, Active=Off483 × 44
Loading source…
Type=Field, Active=On483 × 103
Loading source…
Type=Line, Active=On483 × 44
Loading source…
Type=Line with Counter, Active=Off483 × 44
Loading source…
Type=Search, Active=Off483 × 44
Loading source…
Type=Search, Active=On483 × 44
Loading source…
Type=Line with Counter, Active=On483 × 44

Dropdown Item

12 variants
Loading source…
Type=Item, State=Default319 × 44
Loading source…
Type=Item, State=Hover319 × 44
Loading source…
Type=Item, State=Click319 × 44
Loading source…
Type=Item, State=Disabled319 × 44
Loading source…
Type=Item Check Off, State=Default319 × 44
Loading source…
Type=Item Check Off, State=Hover319 × 44
Loading source…
Type=Item Check Off, State=Click319 × 44
Loading source…
Type=Item Check Off, State=Disabled319 × 44
Loading source…
Type=Item Check On, State=Default319 × 44
Loading source…
Type=Item Check On, State=Hover319 × 44
Loading source…
Type=Item Check On, State=Click319 × 44
Loading source…
Type=Item Check On, State=Disabled319 × 44

Dropdown Header

8 variants
Loading source…
Descriptor=Off, Ticked=On, Icon=On479 × 64
Loading source…
Descriptor=Off, Ticked=On, Icon=Off479 × 64
Loading source…
Descriptor=Off, Ticked=Off, Icon=On479 × 64
Loading source…
Descriptor=Off, Ticked=Off, Icon=Off479 × 64
Loading source…
Descriptor=On, Ticked=Off, Icon=On479 × 64
Loading source…
Descriptor=On, Ticked=Off, Icon=Off479 × 64
Loading source…
Descriptor=On, Ticked=On, Icon=On479 × 64
Loading source…
Descriptor=On, Ticked=On, Icon=Off479 × 64

Dropdown

2 variants
Loading source…
Active=Off359 × 39
Loading source…
Active=On359 × 39

Dropdown Container

1 specimen
Loading source…
Dropdown Container359 × 192

KeyboardHint

1 specimen
Loading source…
KeyboardHint103 × 30

Image

6 variants
Loading source…
State=Normal, Stroke=Off172 × 228
Loading source…
State=Skeleton, Stroke=Off172 × 228
Loading source…
State=Error, Stroke=Off172 × 228
Loading source…
State=Normal, Stroke=On172 × 228
Loading source…
State=Skeleton, Stroke=On172 × 228
Loading source…
State=Error, Stroke=On172 × 228

Parameter

1 specimen
Loading source…
Parameter105 × 63

Avatar

35 variants
Loading source…
Option=3540 × 40
Loading source…
Option=3440 × 40
Loading source…
Option=3340 × 40
Loading source…
Option=3240 × 40
Loading source…
Option=3140 × 40
Loading source…
Option=3040 × 40
Loading source…
Option=2940 × 40
Loading source…
Option=2840 × 40
Loading source…
Option=2740 × 40
Loading source…
Option=2640 × 40
Loading source…
Option=2540 × 40
Loading source…
Option=2440 × 40
Loading source…
Option=2340 × 40
Loading source…
Option=2240 × 40
Loading source…
Option=2140 × 40
Loading source…
Option=2040 × 40
Loading source…
Option=1940 × 40
Loading source…
Option=1840 × 40
Loading source…
Option=1740 × 40
Loading source…
Option=1640 × 40
Loading source…
Option=1540 × 40
Loading source…
Option=1440 × 40
Loading source…
Option=1340 × 40
Loading source…
Option=1240 × 40
Loading source…
Option=1140 × 40
Loading source…
Option=1040 × 40
Loading source…
Option=0940 × 40
Loading source…
Option=0840 × 40
Loading source…
Option=0740 × 40
Loading source…
Option=0640 × 40
Loading source…
Option=0540 × 40
Loading source…
Option=0440 × 40
Loading source…
Option=0340 × 40
Loading source…
Option=0240 × 40
Loading source…
Option=0140 × 40

07 / Components

UI elements & cards

Cards, feedback, navigation, and the smaller pieces that hold an interface together.

Skeleton

1 specimen
Loading source…
Skeleton246 × 180

Alert

10 variants
Loading source…
State=Information, Highlighted=On246 × 103
Loading source…
State=Information, Highlighted=Off246 × 103
Loading source…
State=Warning, Highlighted=On246 × 103
Loading source…
State=Warning, Highlighted=Off246 × 103
Loading source…
State=Error, Highlighted=On246 × 103
Loading source…
State=Error, Highlighted=Off246 × 103
Loading source…
State=Success, Highlighted=On246 × 103
Loading source…
State=Success, Highlighted=Off246 × 103
Loading source…
State=Accent, Highlighted=On246 × 103
Loading source…
State=Accent, Highlighted=Off246 × 103

Toast

4 variants
Loading source…
State=error250 × 40
Preview differences

Backdrop blur is not shown.

Loading source…
State=success250 × 40
Preview differences

Backdrop blur is not shown.

Loading source…
State=info250 × 40
Preview differences

Backdrop blur is not shown.

Loading source…
State=State4250 × 40
Preview differences

Backdrop blur is not shown.

Spinner

3 variants
Loading source…
Size=Small17 × 17
Loading source…
Size=Medium24 × 24
Loading source…
Size=Large40 × 40

Dialog

2 variants
Loading source…
Option=Confirm232 × 167
Loading source…
Option=Delete232 × 167

Empty State

2 variants
Loading source…
Option=neutral246 × 152
Loading source…
Option=brand246 × 189

Progress bar

3 variants
Loading source…
Size=sm10 × 287
Loading source…
Size=md12 × 287
Loading source…
Size=xs4 × 287

Tooltip

1 specimen
Loading source…
Tooltip264 × 83
Preview differences

Backdrop blur is not shown.

Button/Popup

1 specimen
Loading source…
Button/Popup380 × 175

Button/Sticky Actions

1 specimen
Loading source…
Button/Sticky Actions606 × 47

Button/Cookies

1 specimen
Loading source…
Button/Cookies606 × 67

Button/Sign In

1 specimen
Loading source…
Button/Sign In190 × 19

ExpandableText

1 specimen
Loading source…
ExpandableText461 × 85

MetadataRow

1 specimen
Loading source…
MetadataRow461 × 17

BlockQuote

1 specimen
Loading source…
BlockQuote461 × 145

Header Pair

3 variants
Loading source…
Size=SM337 × 46
Loading source…
Size=LG516 × 225
Loading source…
Size=MD271 × 97

Section Header

3 variants
Loading source…
Option=SM239 × 41
Loading source…
Option=MD239 × 46
Loading source…
Option=LG239 × 58

Status Dot

4 variants
Loading source…
Option=Active57 × 17
Loading source…
Option=Warning71 × 17
Loading source…
Option=Error48 × 17
Loading source…
Option=inactive66 × 17

Content Type Icon

4 variants
Loading source…
Option=Drill59 × 28
Loading source…
Option=Scenario91 × 28
Loading source…
Option=Primer77 × 28
Loading source…
Option=Activity81 × 28

Cell

2 variants
Loading source…
Header=On103 × 50
Loading source…
Header=Off103 × 50

Table

1 specimen
Loading source…
Table571 × 200

Card Container

4 variants
Loading source…
Padding=10220 × 52
Loading source…
Padding=20220 × 72
Loading source…
Padding=30220 × 92
Loading source…
Padding=50220 × 132

StatCard

3 variants
Loading source…
Option=Default175 × 142
Loading source…
Option=wt-purple175 × 142
Loading source…
Option=wt-green175 × 142

DomainCard

4 variants
Loading source…
Color=blue193 × 171
Loading source…
Color=pink193 × 171
Loading source…
Color=yellow193 × 171
Loading source…
Color=purple193 × 171

Sidebar

1 specimen
Loading source…
Sidebar286 × 597
Preview differences

Backdrop blur is not shown.

Step Content

1 specimen
Loading source…
Step Content200 × 182

Sidebar Controls

3 variants
Loading source…
Expanded=On,Light=On16 × 229
Preview differences

Backdrop blur is not shown.

Loading source…
Expanded=Off, Light=Off15 × 133
Preview differences

Backdrop blur is not shown.

Loading source…
Expanded=Off, Light=On15 × 133
Preview differences

Backdrop blur is not shown.

Divider

3 variants
Loading source…
Option=Default400 × 1
Loading source…
Option=Spaced400 × 40
Loading source…
Option=Labeled400 × 17

Tabs

1 specimen
Loading source…
Tabs400 × 39

Step

3 variants
Loading source…
State=Active30 × 30
Loading source…
State=Done30 × 30
Loading source…
State=Inactive30 × 30

Step Indicator

1 specimen
Loading source…
Step Indicator200 × 30

Tab Label

2 variants
Loading source…
State=Off69 × 39
Loading source…
State=On69 × 39

PageHeader-Alt

1 specimen
Loading source…
PageHeader-Alt800 × 82

Nav Button

16 variants
Loading source…
Circle=On, Back=Off, State=Normal36 × 36
Loading source…
Circle=On, Back=Off, State=Hover, 36 × 36
Loading source…
Circle=On, Back=Off, State=Click36 × 36
Loading source…
Circle=On, Back=Off, State=Disabled36 × 36
Loading source…
Circle=On, Back=On, State=Normal36 × 36
Loading source…
Circle=On, Back=On, State=Hover, 36 × 36
Loading source…
Circle=On, Back=On, State=Click36 × 36
Loading source…
Circle=On, Back=On, State=Disabled36 × 36
Loading source…
Circle=Off, Back=On, State=Normal41 × 14
Loading source…
Circle=OffBack=On, State=Hover, 41 × 14
Loading source…
Circle=Off, Back=On, State=Click41 × 14
Loading source…
Circle=Off, Back=On, State=Disabled41 × 14
Loading source…
Circle=Off, Back=Off, State=Normal63 × 14
Loading source…
Circle=OffBack=Off, State=Hover, 63 × 14
Loading source…
Circle=Off, Back=Off, State=Click63 × 14
Loading source…
Circle=Off, Back=Off, State=Disabled63 × 14

Pagination

1 specimen
Loading source…
Pagination151 × 36

PageHeader

1 specimen
Loading source…
PageHeader800 × 98

Labeled Step

3 variants
Loading source…
State=Active102 × 40
Loading source…
State=Done102 × 40
Loading source…
State=Inactive102 × 40

Labeled Step Indicator

1 specimen
Loading source…
Labeled Step Indicator433 × 40

Menu

2 variants
Loading source…
Compact=On56 × 900
Loading source…
Compact=Off152 × 900

08 / Components

Icons

The full icon collection, ready to browse by its original names.

2,091 original icons

Icon

2,091 icons
Loading source…
ZoomOutSharp16 × 16
Loading source…
DragAndDrop16 × 16
Loading source…
Drag16 × 16
Loading source…
ZoomOutMapSharp16 × 16
Loading source…
ZoomInSharp16 × 16
Loading source…
ZoomInMapSharp16 × 16
Loading source…
YoutubeSearchedForSharp16 × 16
Loading source…
YardSharp16 × 16
Loading source…
WysiwygSharp16 × 16
Loading source…
WrongLocationSharp16 × 16
Loading source…
WrapTextSharp16 × 16
Loading source…
WorkspacesSharp16 × 16
Loading source…
WorkspacePremiumSharp16 × 16
Loading source…
WorkSharp16 × 16
Loading source…
WorkOutlineSharp16 × 16
Loading source…
WorkOffSharp16 × 16
Loading source…
WorkHistorySharp16 × 16
Loading source…
WomanSharp16 × 16
Loading source…
Woman_2Sharp16 × 16
Loading source…
WineBarSharp16 × 16
Loading source…
WindowSharp16 × 16
Loading source…
WindPowerSharp16 × 16
Loading source…
WifiTetheringSharp16 × 16
Loading source…
WifiTetheringOffSharp16 × 16
Loading source…
WifiTetheringErrorSharp16 × 16
Loading source…
WifiSharp16 × 16
Loading source…
WifiProtectedSetupSharp16 × 16
Loading source…
WifiPasswordSharp16 × 16
Loading source…
WifiOffSharp16 × 16
Loading source…
WifiLockSharp16 × 16
Loading source…
WifiFindSharp16 × 16
Loading source…
WifiChannelSharp16 × 16
Loading source…
WifiCallingSharp16 × 16
Loading source…
WifiCalling_3Sharp16 × 16
Loading source…
Wifi_2BarSharp16 × 16
Loading source…
Wifi_1BarSharp16 × 16
Loading source…
WidthWideSharp16 × 16
Loading source…
WidthNormalSharp16 × 16
Loading source…
WidthFullSharp16 × 16
Loading source…
WidgetsSharp16 × 16
Loading source…
WhereToVoteSharp16 × 16
Loading source…
WheelchairPickupSharp16 × 16
Loading source…
WhatshotSharp16 × 16
Loading source…
WestSharp16 × 16
Loading source…
WeekendSharp16 × 16
Loading source…
WebhookSharp16 × 16
Loading source…
WebStoriesSharp16 × 16
Loading source…
WebSharp16 × 16
Loading source…
WebAssetSharp16 × 16
Loading source…
WebAssetOffSharp16 × 16
Loading source…
WcSharp16 × 16
Loading source…
WbTwilightSharp16 × 16
Loading source…
WbSunnySharp16 × 16
Loading source…
WbShadeSharp16 × 16
Loading source…
WbIridescentSharp16 × 16
Loading source…
WbIncandescentSharp16 × 16
Loading source…
WbCloudySharp16 × 16
Loading source…
WbAutoSharp16 × 16
Loading source…
WavingHandSharp16 × 16
Loading source…
WavesSharp16 × 16
Loading source…
WaterfallChartSharp16 × 16
Loading source…
WaterSharp16 × 16
Loading source…
WaterDropSharp16 × 16
Loading source…
WaterDamageSharp16 × 16
Loading source…
WatchSharp16 × 16
Loading source…
WatchOffSharp16 × 16
Loading source…
WatchLaterSharp16 × 16
Loading source…
WashSharp16 × 16
Loading source…
WarningSharp16 × 16
Loading source…
WarningAmberSharp16 × 16
Loading source…
WarehouseSharp16 × 16
Loading source…
WallpaperSharp16 × 16

09 / Compositions

Screens & artefacts

Workplace artefacts, cards in context, and example screens from the design file.

Data and Status

34 variants
Loading source…
Card Container250 × 177
Loading source…
Card Container377 × 110
Loading source…
Card Container380 × 250
Loading source…
Accordion Example380 × 324
Loading source…
Card Container380 × 250
Loading source…
Card Container1103 × 510
Loading source…
Card Container230 × 236
Loading source…
Card Container230 × 236
Loading source…
Card Container230 × 236
Loading source…
Card Container230 × 236
Loading source…
Card Container230 × 236
Loading source…
Card Container230 × 236
Loading source…
Card Container230 × 236
Loading source…
Card Container230 × 236
Loading source…
Card Container377 × 259
Loading source…
Card Container377 × 259
Loading source…
Card Container260 × 442
Loading source…
Card Container260 × 432
Loading source…
Card Container563 × 248
Loading source…
Card Container563 × 248
Loading source…
Card Container217 × 258
Loading source…
Card Container230 × 333
Loading source…
Card Container230 × 333
Loading source…
Card Container230 × 333
Loading source…
Card Container230 × 333
Loading source…
Card Container217 × 258
Loading source…
Card Container217 × 258
Loading source…
Card Container217 × 258
Loading source…
Card Container317 × 174
Loading source…
Card Container317 × 174
Loading source…
Card Container317 × 174
Loading source…
Card Container317 × 174
Loading source…
Card Container317 × 177
Loading source…
Card Container279 × 144

Drill Examples

5 variants
Loading source…
Intro1440 × 900
Loading source…
Step 1 - 11440 × 900
Loading source…
Step 1 - 21440 × 900
Loading source…
Step 2 - 21440 × 900
Loading source…
Step 2 - 11440 × 900

Scenario Example

8 variants
Loading source…
Step 1 - 5 - 1 of 371440 × 900
Preview differences

Backdrop blur is not shown.

Loading source…
Step 1 - 71440 × 900
Preview differences

Backdrop blur is not shown.

Loading source…
Step 1 - 81440 × 900
Preview differences

Backdrop blur is not shown.

Loading source…
Step 1 - 91440 × 900
Preview differences

Backdrop blur is not shown.

Loading source…
Step 1 - 61440 × 900
Preview differences

Backdrop blur is not shown.

Loading source…
Intro1440 × 900
Loading source…
Step 1 - 5 - 1 of 351440 × 900
Preview differences

Backdrop blur is not shown.

Loading source…
Step 1 - 5 - 1 of 331440 × 900
Preview differences

Backdrop blur is not shown.

Workplace Artefacts

7 variants
Loading source…
Slack375 × 866
Loading source…
Voice / text message elements1445 × 1127
Loading source…
Voice / text message375 × 850
Loading source…
Text Document375 × 637
Loading source…
Spreadsheet Document375 × 441
Loading source…
Email375 × 1046
Loading source…
Calendar375 × 781

Slack

1 specimen
Loading source…
Slack565 × 771

Read_Mark

1 specimen
Loading source…
Read_Mark15 × 9

Message_Tail

2 variants
Loading source…
Right=On11 × 13
Loading source…
Right=Off11 × 13

Timestamp

2 variants
Loading source…
Read_Mark=On44 × 14
Loading source…
Read_Mark=Off24 × 14

Message

4 variants
Loading source…
Right=On, Last=Off300 × 68
Loading source…
Right=On, Last=On300 × 68
Loading source…
Right=Off, Last=Off300 × 68
Loading source…
Right=Off, Last=On300 × 68

Voice_Message

1 specimen
Loading source…
Voice_Message267 × 36

Voice_Msg_Control

2 variants
Loading source…
Play=On24 × 24
Loading source…
Play=Off24 × 24

Message

4 variants
Loading source…
Right=On, Last=Off287 × 56
Loading source…
Right=On, Last=On287 × 56
Loading source…
Right==Off, Last=Off287 × 56
Loading source…
Right==Off, Last=On287 × 56

Reply

3 variants
Loading source…
State=Default525 × 37
Loading source…
State=Hover525 × 37
Loading source…
State=Click525 × 37

Voice / text message

1 specimen
Loading source…
Voice / text message565 × 799

Text Document

1 specimen
Loading source…
Text Document565 × 637

Spreadsheet Document

1 specimen
Loading source…
Spreadsheet Document565 × 441

Email

1 specimen
Loading source…
Email565 × 759

Calendar

1 specimen
Loading source…
Calendar565 × 781

PlaySplash

4 variants
Loading source…
Intro1440 × 900
Loading source…
Intro1440 × 900
Loading source…
Intro-mobile375 × 755
Loading source…
Intro-mobile375 × 954

10 / Compositions

Activity modules

The complete family of ways to respond, choose, sort, and reflect.

Rate Card

1 specimen
Loading source…
Rate Card400 × 59

Drag Card

1 specimen
Loading source…
Drag Card400 × 60

Rate Cell

2 variants
Loading source…
Active=Off20 × 15
Loading source…
Active=On20 × 15

Rate Bar

1 specimen
Loading source…
Rate Bar108 × 15

ExpHeader

1 specimen
Loading source…
ExpHeader400 × 86

ExpTooltip

1 specimen
Loading source…
ExpTooltip39 × 29

Bid Card

1 specimen
Loading source…
Bid Card400 × 70

MultiSelect-Line

2 variants
Loading source…
Ticked=On256 × 44
Loading source…
Ticked=Off256 × 44

SingleChoice-Line

2 variants
Loading source…
Ticked=On256 × 44
Loading source…
Ticked=Off256 × 44

Line to Fill

2 variants
Loading source…
Filled=On164 × 28
Loading source…
Filled=Off164 × 34

Bid Chip

1 specimen
Loading source…
Bid Chip42 × 36

Marker

1 specimen
Loading source…
Marker24 × 24

Stepped Slider Point

3 variants
Loading source…
State=Inactive24 × 24
Loading source…
State=Done24 × 24
Loading source…
State=Active24 × 24

Stepped Slider Section

3 variants
Loading source…
State=Done159 × 24
Loading source…
State=Active159 × 24
Loading source…
State=Inactive159 × 24

Stepped Slider

1 specimen
Loading source…
Stepped Slider465 × 24

Dot-Vote

1 specimen
Loading source…
Dot-Vote565 × 328

Multi-Select

1 specimen
Loading source…
Multi-Select565 × 381

Single-Choice

1 specimen
Loading source…
Single-Choice565 × 332

Forced-Rank

1 specimen
Loading source…
Forced-Rank565 × 331

Text-Field

1 specimen
Loading source…
Text-Field565 × 244

Text-Response

1 specimen
Loading source…
Text-Response565 × 281

Slack

1 specimen
Loading source…
Slack565 × 364

Triangle

1 specimen
Loading source…
Triangle565 × 420

Results

1 specimen
Loading source…
Results565 × 446

Spectrum

1 specimen
Loading source…
Spectrum565 × 254

Prediction

1 specimen
Loading source…
Prediction565 × 287

Slider-Builder

1 specimen
Loading source…
Slider-Builder565 × 268

Combo-Randomizer

1 specimen
Loading source…
Combo-Randomizer565 × 253

Person-Selection

1 specimen
Loading source…
Person-Selection565 × 368

Madlib

1 specimen
Loading source…
Madlib565 × 237

Reflection

2 variants
Loading source…
Filled=Off565 × 403
Loading source…
Filled=On565 × 402

Card sort

2 variants
Loading source…
State=Default565 × 365
Loading source…
State=Sorted565 × 308