Color 🔸 Grid 🔸 Iconolog

Name Term
Primary Color
Secondary Color
Variants
Surface colors
Color Background Color
Error color
"On" colors
Alternative Colors

Pixel Density
Calculating Pixel Density
Units dp
sp
pts(points)

8dp grid

Baseline 4dp grid

4dp baseline grid

Columns
Gutters

Grid Margins

Breakpoints
Padding

Spacing Keylines
 Spacing

Vertical spacing
Fluid Grids
Fixed Grids
UI Regions
Grid Type Permanent UI Regions
Persistent UI regions
Temporary UI regions
Containers Containers
Rigid image container
and aspect Flexible image container

ratios Aspect ratios

Flexible ratios
Responsive Cropping

Icon sizes
Icon grid
Live area
Dense live area
Padding
Dense Padding
Iconology
Keyline Shapes

Unfilled icon
Filled icon
Two-toned icon

Touch target
Metrics
Click targets
Leading Icon
Icon signifier
Valid or error icon
Icon Types Clear icon
Voice input icon
Dropdown Icon (Chevron)
 Font Size Unit

Letter Spacing Unit

Typography Headline
Subtitles
Body
Caption and overline
Button Text
Line height
Density Paragraph spacing
Type alignment
Grid 🔸 Iconology 🔸 Typography
Defination
A primary color is the color displayed most frequently
across your app's
A secondary color screens
providesand components.
more If youand
ways to accent don't
distinguish your product. Having a secondary color is
Sureface colors affect surfaces of components, such as
cards, sheets, and
The background menus.
color appears behind scrollable content.
The
Error color indicates errorsand
baseline background surface color such
in components, is #FFFFFF.
as
invalid text
referring to in
thea fact
text that
[Link]
Thecolor
baseline error color
elements is
that are
sometimes
The Materialplaced
Design“on”
colortop of keysupports
system surfaces alternative
that use a
colors, which are colors used as alternatives to your

The number of pixels that fit into an inch is referred to as

pixel
Screendensity
density = Screen width (or height) in pixels /
Screen width (or height)
Density-independent in inches
pixels, written as dp( pronounced
"dips"), are flexible units that
Scalable pixels (sp) serve the same scale to have uniform
function as density-
independent pixels(dp), but for fonts. The default
IOS determines density using logical resolution, which value
measures its units
All components in points.
align to an 8dp Forsquare
example, whengrid for
baseline
mobile, tablet, and desktop.

Iconography, typography, and some elements within

components can align to a 4dp grid.
Type aligns to the 4dp baseline grid
Typography can be placed outside of the 4dp
grid when it's centered eithin a component, such as a
button orislist
Content [Link] the areas of the screen that contain
placed
columns. Column columns
Spacing between width is defined using percentagesm
Margins are the space between content and the left and
right edges of the screen.

Margin widths are defined as fixed values at each

breakpoint range. To better adapt to the screen, the
margin width can change at different breakpoints. Wider
margins are more appropriate for larger screens, as they
create more whitespace around the perimeter of
A breakpoint is the range of predetermined screen sizes
that haverefers
Padding specific layout
to the requirements.
space between UI At a given It’s an
elements.
alternative spacing
Keylines enable the method to keylines,
consistent placement measured in
of elements
outside of the layout grid. They are vertical lines that
show where elements are placed in a design that doesn't
align to the grid. Keylines are determined by each
element's distance from the edge of the screen,
measured in increments of 8dp. TIPS: Keylines can
create more or less space between elements in a layout.
They are adjustable per breakpoint range.
refers to the height of a standard element, such as an
app
Fluidbar
gridsor list
useitem. The that
columns heights
scaleofand
these elements
resize content. A
fluid grid’s layout can use breakpoints to
Fixed grids use columns of a fixed size, with fluid determine if
margins
A layout to keep content
is made unchanging
up of several within
UI regions, each
such as side
navigation, content areas, and app bars. These
Permanent UI regions are regions that can be displayed regions
outside
Persistentof the responsive
UI regions grid, like
are regions a navigation
that drawer.
can be displayed
upon command
Temporary at anyappear
UI regions time, or they can remain
temporarily, visible.
and when
they do, they
A container is do not affect
a shpe used totherepresent
responsive an grid. When
enclosed
area, image
Rigid Containers can hold
container thatvarious UI elements
crops original such as
the image size.
Flexible image container that scales to hold the original
image
An [Link] is the porportion of an element's width to
aspect
its [Link]
Container maintain
widths consistencyby
are determined inthe
your layout,widths
column use a
in the layout grid.
To display images responsively, define how an image will
be cropped at different breakpoint ranges. At different

System icons are displayed as 24 x 24 dp. Create icons

for
Theviewing atestablishes
icon grid 100% scaleclear
for pixel-perfect
rules for theaccuracy.
consistent,
but flexible, positioning of graphic elements.
Icon content is limited to the 20dp x 20dp live area, with
2dp
Icon of padding
content aroundto
is limited the
theperimeter.
16dp x 16dp live area, with
2dp of padding around the perimeter.
2dp of empty space makes up the padding surrounding
the
2dp 20dp x 20dpsurrounds
of padding live [Link] live area.
Keyline shapes are based on the grid. By using these
core shapes as a baseline, you can maintain consistent
visual proportions throughout your product icons.

Two-tone icons have added dimension, using the

attributes
Touch targetof stroke,
apply tofill,
anand color.
device Contrasting
that stroke
receives both touch
and non-touch input. To balance information density and
usability, touch targets should be at least 48*48dp with
at least 8dp of space between thm.
On non-touch-UIs, click targets should be at least 24*24
dp with at
Leading least
Icon 8dpicon
is the of space
placedbetween them
infront of text.
Icon signifiers can describe the type of input a text field
requires, andcan
Iconography be touch
indicatetargets for nested
both valid components.
and invalid inputs,
making
Clear error
icons letstates
usersclear
clearfor
an colorblind
entire inputusers.
field. They
appear
A only when
microphone iconinput textthat
signifies is present.
users can input
characters
A dropdownusing
arrow voice.
indicates that a text field has a nested
selection component.
Android: sp
iOS : pt
Web: rem
Android: em
iOS:pt
Web: rem
In the type scale, headlines span from a range of 1
through
Subtitles6. Headlines
are are the
smaller than largest text
headlines. Theyon arethe screen,
typically
reserved
Body textfor medium-emphasis
comes in ranges 1-2, andtext it’s
thattypically
is shorter in for
used
long-form
Caption andwriting as ittext
overline works well
(text forasmall
with text sizes.
line above For
it) are
the smallest
Button text isfont sizes.
a call They are
to action usedused sparingly
different typestoof
buttons
Line (such
height, as known
also text, outlined and contained
as leading, controls the buttons)
amount
of space between baselines in a block
Keep paragraph spacing in the range between .75xof text. A text’s
and
1.25x of the type size.
Type alignment controls how text aligns in the space it
appears. There are three type alignments:
graphy
Reference+Image
[Link]

[Link]
[Link]
[Link]

[Link]

[Link]

[Link]

[Link]

[Link]

On mobile, at a breakpoint of 360dp, this layout

grid uses 16dp margins.

[Link]
[Link]

[Link]
[Link]
[Link]
[Link]
[Link]
[Link]
[Link]
[Link]
[Link]
[Link]
[Link]
[Link]
[Link]
[Link]

[Link]
[Link]
[Link]
[Link]
[Link]
[Link]
[Link]
[Link]
[Link]
[Link]
[Link]
[Link]
[Link]

[Link]

[Link]
[Link]
[Link]
[Link]
[Link]
[Link]
[Link]
[Link]
[Link]
 Surface 🔸 Sheets 🔸 Navigation 🔸 Tab 🔸 Drawer 🔸 Backdrop
Group Term Defination Reference+Image
Rigid surfaces Rigid surfaces remain the same size through all
Stretchable surfaces interactions
Stretchable surfaces can grow and shrink along [Link]
Surface Pennable Surfaces one or more
Pennable edges remain
Surfaces up to a the
sizesame
limit,size
the
Scrim throughout
Scrims interactions.
are temporary treatments that can be [Link]
applied to Material surfaces for the purpose of

Side sheets Side sheets are surfaces containing [Link]

Standard Side Sheets supplementary content
Standard side sheets that are
display anchored
content that to [Link]
Modal Side Sheets complements the screen’s primary content.
Modal side sheets are used on mobile instead [Link]
Sheets Bottom Sheets
of standard
Bottom side
sheets sheets,
are duecontaining
surfaces to limited screen [Link]
supplementary
Usage: contentare
Bottom sheets that are anchored to
supplementary [Link]
Standard bottom sheets surfaces
Standardprimarily used on
bottom sheets mobile.
display Therethat
content are [Link]
Panel Modal bottom sheets complements the screen’s primary content.
Modal bottom sheets are an alternative to [Link]
Full-Screen modal bottom inline menus or simple dialogs on mobile and [Link]
sheet
Expanding bottom sheets Expanding bottom sheets provide a small, [Link]
collapsed surface that can be expanded by the

Lateral navigation refers to moving between screens at the same

Navigation Forward navigation
Reverse navigation
level oftohierarchy.
refers
consecutive
refers
moving between
to moving levels
An app’sscreens
primary
of hierarchy,
backwards
atnavigation
stepsscreens
through in a flow,
Hierarchy either
From achronologically
parent screen, (within one appchild
an embedded or across [Link]
Navigation Peer transitions element lifts up on touch and
occur between screens at the same levelexpands in place,
of
hierarchy.
Transition Sibling transitions
Top-level transitions
Sibling transitions occur between peers that
share
At the atop
parent,
level while top-level
of an app, peer transitions
destinations are [Link]
Top app bar often grouped
The top app bar into major tasks
provides content(and
andthe tasks
actions [Link]
Contextual action bar related to the current screen. It’s used for
A top app bar can transform into a contextual [Link]
Bottom navigation bar action bar
Bottom to provide
navigation contextual
bars actionsto
provide access to2-5 [Link]
Badges top-levelnavigation
Bottom destinations on can
icons mobile devices.
include Their
badges in [Link]
their upper right
Breadcrumbs corner.
allow usersThese
to makebadges can
selections
Breadcrumbs from a range of values. [Link]
Navigation
Types Collapsed breadcrumbs

Steppers convey progress through numbered

Horizontal Stepper steps. It provides a wizard-like workflow.
[Link]

Vertical Stepper
Tab (Pivot Fixed tabs
Scrollable tabs
Fixed tabs display all tabs on one screen, with [Link]
each tab attabs
a fixed width. Thewithout
width offixed
each tab [Link]
web) Scrollable are displayed
widths. They are scrollable, such that some

Navigation drawer Used for top-level destinations (5+

Standard drawer desitinations) Mobile,
Standard navigation Tablet,allow
drawers Desktop
users to
Drawer
[Link]
Modal drawer simultaneously
Modal access
navigation drawer
drawers use adestinations and [Link]
scrim to block
Bottom drawer interaction
Bottom with thedrawer
navigation rest of are
an app’s content.
a specialized [Link]
type of modal drawer for use with a bottom app

A backdrop appears behind all other surfaces in

an app, displaying contextual and actionable
content.
A backdrop is composed of two surfaces: a [Link]
back layer and a front layer. The back layer
displays actions and context, and these control

Backdrop Backdrop
and inform the front layer’s content.
A backdrop consists of a back layer, a front
layer, and an optional subheader. Either the
back layer or the front layer can be active at a
time. [Link]

The back layer can be concealed by either

interacting with the the front layer or tapping a
conceal affordance on either layer.
 Dialogs 🔸 Snackbars 🔸 Banner 🔸 Alert
Name Term Defination Reference+Image
Alert Dialogs An alert dialog confirms the Alert dialogs interrupt [Link]
Simple Dialogs users with
Simple urgent
dialogs information,
display details,
a list of items or actions.
that take [Link]
Confirmation Dialogs immediate
Confirmation effect when
dialogs selected.
require users to confirm a
Dialogs
[Link]
Form dialogs choicedialogs
Form beforeallow
the dialog
users is todismissed.
fill out form fields within [Link]
Full-screen dialogs a dialog. Fordialogs
Full-screen example, if your
fill the sitescreen,
entire prompts for
containing [Link]
Dialog windows actions
Launchingthata require a series
full-screen oftemporarily
dialog tasks to complete.
resets the [Link]
app’s perceived elevation, allowing simple menus or

Simple Snackbars An acknowledgement notifies the user about system [Link]

Snackbars Consecutive Snackbars actionsmultiple
When occurring in the background.
snackbar updates are It appears for
necessary, a [Link]
they
should appear one at a time.

Banner Banners A banner displays an important, succinct message, [Link]

and provides actions for users to address (or dismiss

Alert Alert Use alerts to deliver a persistent, in-app message

that informs users of a particular change state.
[Link]
 Search 🔸 Text Fie
Name Term
Persistent Search
(SearchBox)

Expandable Search
Zero Input State

Autocomplete Suggestions

Best Match

Search

Full Search
 Search Scopes

Chips
Chips Input chips
Chip array
Chips are compact elements that Choice chips
represent an input, attribute, or Filter chips
action. Chips allow users to enter
Action Chips
information, make selections, filter

Single line text fields

Input Text Multi-line text fields

Field
Text fields let users enter and
Text Area
Read-only fields
edit text.
Container
Label Text
Elements Required text indicator
Input Text
Helper Text
Error message
Assistive Elements Character counter
Prefix and suffix text
arch 🔸 Text Field 🔸 Chips
Defination
Use persistent search when search is the primary focus of
your
Usage app. The search text field is presented inside of a search
When
Use in focus, the
expandable search
search whenexperience
search isexpands
not the to fill thefocus
primary
of your app. Expandable search displays a search icon in the
Usage
The user
When thetaps
userthe
hassearch
clickedicon
into(in the
the toolbar) tobut
SearchBox, transform
has not it
entered anyenters
As the user text, there is an
a query opportunity
string, toprovided
they are display "hint
with text"
a
dropdown of autocomplete suggestions or disambiguation
options. This will help them expedite the input process and
formulate an effective query. Recent search history, trending
searches, contextual search suggestions, hints and tips are
all good candidates for autocomplete content. In general,
autocomplete suggestions have the user's input highlighted
in some way (generally bolded) to indicate why it's being
displayed. As the user enters more keystrokes, the
suggestions update continuously/in real time. To see
autocomplete suggestions, the user does not need to hit
enter (execute a full search), as it is a lightweight way to get
quick suggestions or results. If there are mixed result types
within the autocomplete suggestions, provide visual
indicators or grouping to help organize the information,
making it easier
If nothing exactlytomatches
parse. a user's query, content that
contains the best match to the query can be displayed, by
returning results for a query spelled slightly differently. By
showing these results, the user may find what they're looking
for.

If a user hits "enter" after entering input, a full search is

executed. Full searches often go to another "results"
page, or change/filter the content of the current page
to show only applicable content. The results can appear in
any form that best communicates the content.

As a general guideline, results should be displayed in context

with the query that was typed, with immediate access to edit
the query or enter a new one. One method to enable efficient
access to both edit the previous query and enter a new query
is to highlight the previous query when the field is
reactivated. This way, any keystroke will replace the
previous string, but the string is maintained so that the user
Although search entry points tend to be similarly visualized,
they can provide access to results that range from broad to
narrow. By effectively communicating the scope of a search,
you can help to ensure that the user expectation will be met
by the capabilities of the search you are performing, which
will reduce the possibility of frustration. The search entry
point should be juxtaposed with the content being searched.

Some common search scopes include:Global: Search across

multiple sources of cloud and local content. Varied results
include URLs, documents, media, actions, apps, and more.
Web: Search a web index. Results include pages, entities,
and answers.
My stuff: Search across device(s), cloud, social graphs, and
more. Results are varied, but are constrained by the
connection to user account(s)

Chips are compact elements that represent an input,

attribute,
Input chipsorrepresent
action. information used in fields, such as an
entity or different
An example attributes.
of rendering multiple Chips from an array of
values. Deleting a chip removes it from the
In sets that contain at least two options, array.
choice Note that
chips
represent a represent
Filter chips single selection.
filters for a collection.
Action chips trigger actions related to primary content.

Single line text fields display only one line of text

In single-line
Multi-line textfields,
fieldsas the to
grow cursor reaches the
accommodate right field
multiple lines of
text
Text areas are fixed-height fields
Text areas text
Read-only are taller
fields than text
display fields and
pre-filled textwrap
thatoverflow
the user text
cannot edit. A read-only text field is styled the same as a
regular text field and is clearly labeled as read-only.
Containers improve the discoverability of text fields by
creating
Label text contrast
is used between
to informthe textasfield
users and surrounding
to what information is
requested for a text field. Every text field
To indicate that a field is required, display an asteriskshould have a(*)label.
next
Inputtotext
theislabel
text text and mention
the user has entered nearinto
the aform
text that
field.
Helper text conveys additional guidance about the input
field,
Whensuch as how
text input it will
isn’t be used.
accepted, anIterror
should only take
message canup a
display
instructions
Character oron howcounters
word to fix it. should
Error messages
be used ifare displayed
there is a
character
A text fieldorwith
word limit. They
a currency display
symbol theprefix.
text ratio of characters
Reference+Image
[Link]
[Link]
[Link]

[Link]

[Link]
[Link]
[Link]

[Link]
[Link]
[Link]

[Link]
[Link]
[Link]
[Link]

[Link]
[Link]

[Link]
[Link]

[Link]
、cont r Button 🔸Selection 🔸Controls 🔸 Pick
Name Term
Text button

Text label

Button

Floating Action button (FAB)

Speed Dial
Morph
Full Screen
Extended FAB

Selection Radio Buttons

Selection Controls
Checkboxes
controls allow users to Switches
complete tasks that involve making SpinButton (Stepper iOS)
 Page Controls

Date pickers let users select a

date, or a range of dates.
Mobile calendar date picker
Picker Mobile date range picker
Mobile input picker

Continuous sliders
Slider
Discrete sliders
Track
Thumb

Editable numeric values

Content

Value label(optional)

Sliders allow users to make selections Tick mark(optional)

from a range of values. Sliders reflect a
range of values along a bar, from which
users may select a single value. They Slider status
are ideal for adjusting settings such as
volume, brightness, or applying image
filters. Sliders can have icons on both
 Progress indicators

Progress Linear progress indicators

indicators

CIrcular progress indicator

ntrols 🔸 Picker🔸Slider 🔸 Progress indicators
Definition
Text buttons are typically used for less-
pronounced actions,
A button’s text including
label is the mostthose located:
important
element on aOutlined
Text button; button, as it communicates
Button; the
Contained Button;
Toggle Button

The floating action button (FAB) should be one of

the most
When recognizable
pressed, items
a FAB can on your
display screen.
three to six
related
The FABactions in the form
can transform intoofanother
a speedsurface
dial. This
in an
[Link]
The Morphing should be
can transform reversible
into and transform
a new surface that
spans
The the entire
extended FABscreen. Thisand
is wider, type
it of
includes a text
label.

Use radio buttons to:

Checkboxes allow the user to select one or more
items from
Switches a [Link]
toggle Checkboxes
state of a can be setting
single used toon
turn
or
off. They are the
A SpinButton preferred
allows way
the user to to adjust settings
incrementaly
adjust a value in small steps. It is mainly used for
numeric values, but other values are supported
too.
A page control shows the position of the current
page in a flat list of pages. It appears as a series
of small indicator dots, representing the available
pages in the order they were opened. A solid dot
denotes the current page. Visually, these dots are
always equidistant, and are clipped if too many
appear onscreen. Users can tap the leading or
trailing edge of a page control to visit the next or
previous page, but they can't tap a specific dot to
go to a specific page. Navigation always occurs
sequentially, usually by swiping the page to one
side.
-iOS

A date picker is an efficient interface for selecting

a specific date, time, or both. It also provides an

Continuous sliders allow users to select a value

along a subjective range.

Discrete sliders can be adjusted to a specific value

by referencing
Discrete its value indicator.
slider states
The track shows the range available for user
selection.
The thumbFor left-to-right
slides along the(LTR)
track,languages,
displayingthe
the
selected
Editable value
numericthrough
valuesits position.
allow users to set the
exact value of a slider.

A value label displays the currently selected,

specific numerical value.

Tick marks represent predetermined values to

which the user can move the slider.
Progress indicators are a subtle but powerful
place to incorporate brand color, as they tie the
function of the app to the brand.
🔸 Progress indicators
Reference+Image

[Link]

[Link]
[Link]
[Link]
[Link]

[Link]
[Link]
[Link]

[Link]
[Link]

[Link]
[Link]
[Link]
[Link]

[Link]

[Link]
[Link]
[Link]

[Link]

[Link]
[Link]
 Star Content 🔸 Onboarding 🔸
Name Term

Empty State

Defect
Starter Content
Educational
Content
Coachmark

Self-Select Model

Onboarding Quickstart Model

Top User Benefits

Feature Discovery
Launch Brand Launch Scree
Placeholder UI
Screen (Skeleton)
Shimmer
nt 🔸 Onboarding 🔸 Launch Screen
Defination
When a UI is only available online and
content has failed to load or sync, use an
empty state. The user should be able to
interact with as much of the rest of the
app as possible. A link to reload can be
presented to help a user accomplish their
To help users new to an app or section,
screens which of
If the purpose would otherwise
the screen isn'tbe empty
easily
conveyed
Coachmarksthrough an image
are used and
to draw tagline,
a persons
attention to a part of the UI, and

The Self-Select model allows users to

customize
In their first-run
the Quickstart model, experience
users land by
directly
The Top in the Benefits
User UI without any onboarding
onboarding model
contains a brief autoplay carousel, or

New features can be highlighted to

ensure
Brandedthe user sees
launch them
screens by using color
express
branding whileUI
A placeholder anisapp loads, by
displayed while
screen content loads. Including a brand
color here assures users that they are
Shimmer is a temporary animation
placeholder for when a service call takes
🔸 Launch Screen
Reference+Image
[Link]

[Link]

[Link]
[Link]
[Link]

[Link]
[Link]
[Link]

[Link]
[Link]
[Link]
[Link]
[Link]