UI Term
 Share
The version of the browser you are using is no longer supported. Please upgrade to a supported browser.Dismiss

Comment only
 
 
 
ABCDEFGHIJKLMNOPQRSTUVWXYZAAAB
1
Color 🔸 Grid 🔸 Iconology 🔸 Typography
2
NameTermDefinitonReference+Image
3
ColorPrimary ColorA primary color is the color displayed most frequently across your app's screens and components. If you don't have a secondary color, your primary color can also be used to accent elements.https://storage.googleapis.com/spec-host/mio-staging%2Fmio-design%2F1563837804615%2Fassets%2F1G9utlx7O2-lxBVs5e3BbWq7kbAdXMwOE%2Fcolor-colorsystem-usagepalettes-1.png
4
Secondary ColorA secondary color provides more ways to accent and distinguish your product. Having a secondary color is optional, and should be applied sparingly to accent select parts of your UI.Secondary colors are best for:

Floating action buttons
Selection controls, like sliders and switches
Highlighting selected text
Progress bars
Links and headlines
5
Variants
6
Surface colorsSureface colors affect surfaces of components, such as cards, sheets, and menus.
7
Background ColorThe background color appears behind scrollable content. The baseline background and surface color is #FFFFFF.
8
Error colorError color indicates errors in components, such as invalid text in a text field. The baseline error color is #B00020.
https://storage.googleapis.com/spec-host/mio-staging%2Fmio-design%2F1566239436131%2Fassets%2F1jTwR_tLfYC3x-B1bD8hN7Nza9x2y1Kny%2Ftheming-color-oncolors.png
9
"On" colorsreferring to the fact that they color elements that are sometimes placed “on” top of key surfaces that use a primary color, secondary color, surface color, background color, or error color. These are labelled using the original category name (such as primary color) with the prefix “on”.

“On” colors are primarily applied to text, iconography, and strokes. Sometimes, they are applied to surfaces.		https://storage.googleapis.com/spec-host/mio-staging%2Fmio-design%2F1563837804615%2Fassets%2F1jTwR_tLfYC3x-B1bD8hN7Nza9x2y1Kny%2Ftheming-color-oncolors.png
10
Alternative ColorsThe Material Design color system supports alternative colors, which are colors used as alternatives to your brand’s primary and secondary colors (they constitute additional colors to your theme). Apps can use alternative colors to establish themes that distinguish different sections.

Alternative colors are best for:

Apps with light and dark themes
Apps with different themes in different sections
Apps that exist as part of a suite of products
Alternative colors should be used cautiously, because they can be challenging to implement cohesively with existing color themes.

https://storage.googleapis.com/spec-host/mio-staging%2Fmio-design%2F1563837804615%2Fassets%2F1Cr__9NRDY9K--yaovyZdora4YWV5bICC%2Fcolor-colorsystem-schemecreation-dataviz.png
11
12
UnitsPixel DensityThe number of pixels that fit into an inch is referred to as pixel density
13
Calculating Pixel DensityScreen density = Screen width (or height) in pixels / Screen width (or height) in incheshttps://storage.googleapis.com/spec-host/mio-staging%2Fmio-design%2F1563837804615%2Fassets%2F100TLfB0GWAxUUCOHQ2kaFaMZX1Zpcc7y%2Flayout-unitsmeasurements-pixeldensity-lower.png
14
dpDensity-independent pixels, written as dp( pronounced "dips"), are flexible units that scale to have uniform dimensions on any screen. They provide a flexible way to accommodate a design across platforms.
15
spScalable pixels (sp) serve the same function as density-independent pixels(dp), but for fonts. The default value of an sp is the same as the defualt value for a dp. The primary difference between an sp and a dp is that sp's preserve a user's font settings. Users who have larger text settings for accessibility will see font sizes match their text size preferences.
16
pts(points)IOS determines density using logical resolution, which measures its units in points. For example, when designing for the iPhone X, you would design for a logical resolution of 375 x 812 points. When rendered, elements are processed by the graphics hardware to fill the iPhone X's 1125 x 2436 pixel screen.
17
Baseline8dp gridAll components align to an 8dp square baseline grid for mobile, tablet, and desktop.

https://storage.googleapis.com/spec-host/mio-staging%2Fmio-design%2F1563837804615%2Fassets%2F1pZAqRhNtwhgKNf_JMuwNgC_uQaGUeV1X%2Flayout-spacing-baslinegrid.png
18
4dp gridIconography, typography, and some elements within components can align to a 4dp grid.

https://storage.googleapis.com/spec-host/mio-staging%2Fmio-design%2F1563837804615%2Fassets%2F18NDMry_mNrQ5kMbkVLuklltSbYeEIiG8%2Flayout-spacing-4dp-baslinegrid.png
19
4dp baseline gridType alogns 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 or list item.https://storage.googleapis.com/spec-host/mio-staging%2Fmio-design%2F1563837804615%2Fassets%2F1rBlxw756KBbmMkweYtXn9MbzuOrcMN3E%2Flayout-spacing-baslinetype.png
20
GridColumnsContent is placed in the areas of the screen that contain columns. Column width is defined using percentagesm rather than fixed values, to allow content to flexibly adapt to any screen size. The umber of columns displayed in the grid is determinted by the breakpoint range ( a range of predetermined screen sizes) at which a screen is viewed, whether it's a breakpoint for mobile, tablet, or another size.
21
GuttersSpacing between columns
22
MarginsMargins 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 content.		https://storage.googleapis.com/spec-host/mio-staging%2Fmio-design%2F1563837804615%2Fassets%2F1KEfrUmIS_cTjLcQdgmkI6ISccOmF0jMd%2Flayout-responsive-margins-360.png
23
On mobile, at a breakpoint of 360dp, this layout grid uses 16dp margins.
24
BreakpointsA breakpoint is the range of predetermined screen sizes that have specific layout requirements. At a given breakpoint range, the layout adjusts to suit the screen size and orientation.
Material Design provides responsive layouts based on the following column structures. Layouts using 4-column, 8-column, and 12-column grids are available for use across different screens, devices, and orientations.
Each breakpoint range determines the number of columns, and recommended margins and gutters, for each display size. 		https://material.io/design/layout/responsive-layout-grid.html#breakpoints
25
SpacingPaddingPadding refers to the space between UI elements. It’s an alternative spacing method to keylines, measured in increments of 8dp or 4dp.https://storage.googleapis.com/spec-host/mio-staging%2Fmio-design%2F1563837804615%2Fassets%2F1281JFDhf8ec5ZcH0ehtQpfofLFVd8SwW%2Flayout-spacing-keylinespadding-padding.png
26
KeylinesKeylines enable the consistent placement 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.https://storage.googleapis.com/spec-host/mio-staging%2Fmio-design%2F1563837804615%2Fassets%2F1tFVHB61zE5yb0JNU3dEtya_GeUyQWqn5%2Flayout-spacing-keylinespadding-keylines.png
27
Vertical spacingrefers to the height of a standard element, such as an app bar or list item. The heights of these elements should align to the 8dp grid.

https://storage.googleapis.com/spec-host/mio-staging%2Fmio-design%2F1563837804615%2Fassets%2F1ukHGXtjoW-SxqTzYegljgtCi3JHsSFmm%2Flayout-spacing-keylinespadding-verticalspacing.png
28
Grid TypeFluid GridsFluid grids use columns that scale and resize content. A fluid grid’s layout can use breakpoints to determine if the layout needs to change dramatically.

https://storage.googleapis.com/spec-host/mio-staging%2Fmio-design%2F1566239436131%2Fassets%2F1BL9SdFCf9qek6sZVtiOwmbGb5YcuatRy%2Flayout-responsive-grid-behavior-fluid.gif
29
Fixed GridsFixed grids use columns of a fixed size, with fluid margins to keep content unchanging within each breakpoint range. A fixed grid’s layout can only change at an assigned breakpoint.https://storage.googleapis.com/spec-host/mio-staging%2Fmio-design%2F1566239436131%2Fassets%2F1ecGfk1w3yeUP9eck81D3Qh1kSPA_pusx%2Flayout-responsive-grid-behavior-fixed.gif
30
UI RegionsA layout is made up of several UI regions, such as side navigation, content areas, and app bars. These regions can display actions, content, or navigation destinations. UI regions should be consistent across devices, while adapting to different breakpoints of different screen sizes.https://storage.googleapis.com/spec-host/mio-staging%2Fmio-design%2F1563837804615%2Fassets%2F0B9msDEx00QXmaldJd3BqU0NJUWc%2F01-ui-regions.gif
31
Permanent UI RegionsPermanent UI regions are regions that can be displayed outside of the responsive grid, like a navigation drawer. These regions cannot be collapsed.https://storage.googleapis.com/spec-host/mio-staging%2Fmio-design%2F1563837804615%2Fassets%2F1LCMRi7tODKHMyKFAPm-kz4M4Jy9xnATZ%2Flayout-responsive-uiregions-permenant.png
32
Persistent UI regionsPersistent UI regions are regions that can be displayed upon command at any time, or they can remain visible. They can be toggled on or off, to appear or disappear. When they appear, they condense both content and the grid.

https://storage.googleapis.com/spec-host/mio-staging%2Fmio-design%2F1563837804615%2Fassets%2F1okgD4gBMG30TClLHE_nJuMdwb3WFokyJ%2Flayout-responsive-uiregions-persistent.gif
33
Temporary UI regionsTemporary UI regions appear temporarily, and when they do, they do not affect the responsive grid. When visible, they can be hidden by tapping an item in their region, or any space outside their region.https://storage.googleapis.com/spec-host/mio-staging%2Fmio-design%2F1563837804615%2Fassets%2F1Y2cQ0buTC-_HzEZZ4DdpbbCUh2qHbgDk%2Flayout-responsive-uiregions-temporary.gif
34
Containers and aspect ratios
ContainersA container is a shpe used to represent an enclosed area, Containers can hold various UI elements such as an image, icon, or surface.https://storage.googleapis.com/spec-host/mio-staging%2Fmio-design%2F1563837804615%2Fassets%2F106BJc2-m_mEZFdZtXC8oNuk3liiNKWY_%2Flayout-unitsmeasurements-dev-containers.png
35
Rigid image containerRigid image container that crops original the image size.
https://storage.googleapis.com/spec-host/mio-staging%2Fmio-design%2F1563837804615%2Fassets%2F1EfIrWcBPIOi6i7eCpoqd-kioV8H-Asbu%2Flayout-spacingmethods-containers.gif
36
Flexible image containerFlexible image container that scales to hold the original image size.
https://storage.googleapis.com/spec-host/mio-staging%2Fmio-design%2F1563837804615%2Fassets%2F1EfIrWcBPIOi6i7eCpoqd-kioV8H-Asbu%2Flayout-spacingmethods-containers.gif
37
Aspect ratiosAn aspect ratio is the porportion of an element's width to its height.To maintain consistency in your layout, use a consistent aspect ratio on elements like images, surfaces, and screen size. Aspect ratio is written as width:height.

The following aspect ratios are recommended for use across your UI:
16:9, 3:2, 4:3, 1:1, 3:4, and 2:3		https://storage.googleapis.com/spec-host/mio-staging%2Fmio-design%2F1563837804615%2Fassets%2F1AjZXUtHEYC-FEwEjcp4xbXqNHMeloLEF%2Flayout-unitsmeasurements-dev-aspectratio.png
38
Flexible ratiosContainer widths are determined by the column widths in the layout grid.https://storage.googleapis.com/spec-host/mio-staging%2Fmio-design%2F1563837804615%2Fassets%2F1qqL5YPK_WOv0pezikoD8J0e9zuX_AFis%2Flayout-unitsmeasurements-dev-aspectratio-baseline.png
39
Responsive CroppingTo display images responsively, define how an image will be cropped at different breakpoint ranges. At different breakpoint ranges cropping can: 1) Maintain one fixed ratio 2) Adapt to different ratios 3) Fix image heightshttps://storage.googleapis.com/spec-host/mio-staging%2Fmio-design%2F1563837804615%2Fassets%2F1nIrW7XJIHE-uw8xDwTT83lZyZWRZuWal%2Flayout-responsive-cropping-maintain-ratio.png
40
41
IconologyIcon sizesSystem icons are displayed as 24 x 24 dp. Create icons for viewing at 100% scale for pixel-perfect accuracy.https://storage.googleapis.com/spec-host/mio-staging%2Fmio-design%2F1563837804615%2Fassets%2F1kmmpvoltbpyx561KFVp66WBmRshx0hG0%2Fproduct-icons-grid-keyline-01.png
42
Icon gridThe icon grid establishes clear rules for the consistent, but flexible, positioning of graphic elements.https://storage.googleapis.com/spec-host/mio-staging%2Fmio-design%2F1566239436131%2Fassets%2F1k9dCJy4l3BjYbh1zuEt92rDVK_4Kq55a%2Fsystem-icons-grid-keyline-shapes-09.png
43
Live areaIcon content is limited to the 20dp x 20dp live area, with 2dp of padding around the perimeter.https://storage.googleapis.com/spec-host/mio-staging%2Fmio-design%2F1563837804615%2Fassets%2F1gr6l8kaWy5l9CduyTY6AtfRY0P8BQlXi%2Fsystem-icons-grid-keyline-shapes-05.png
44
Dense live areaIcon content is limited to the 16dp x 16dp live area, with 2dp of padding around the perimeter.https://storage.googleapis.com/spec-host/mio-staging%2Fmio-design%2F1563837804615%2Fassets%2F1VOjuFaPwphTql2FLFpro2BoiB4vEjAVe%2Fsystem-icons-grid-keyline-shapes-07.png
45
Padding2dp of empty space makes up the padding surrounding the 20dp x 20dp live area.https://storage.googleapis.com/spec-host/mio-staging%2Fmio-design%2F1563837804615%2Fassets%2F17ha_HVc4M6cHtDXppIeobSAlhFfheSvh%2Fsystem-icons-grid-keyline-shapes-06.png
46
Dense Padding2dp of padding surrounds the live area.https://storage.googleapis.com/spec-host/mio-staging%2Fmio-design%2F1563837804615%2Fassets%2F1ELCAO6UHkXfZ9v5tCr-DV3FK_N2WOnrV%2Fsystem-icons-grid-keyline-shapes-08.png
47
Keyline ShapesKeyline shapes are based on the grid. By using these core shapes as a baseline, you can maintain consistent visual proportions throughout your product icons.https://storage.googleapis.com/spec-host/mio-staging%2Fmio-design%2F1563837804615%2Fassets%2F18VENJvsetN9FfbPbcUDojHlgYM7hy6LN%2Fproduct-icons-grid-keyline-03.png
48
https://storage.googleapis.com/spec-host/mio-staging%2Fmio-design%2F1563837804615%2Fassets%2F1rYixqHFnqUZ6wfPXJ4MMEMJQBNv_xDIH%2Fproduct-icons-grid-keyline-04.png
49
https://storage.googleapis.com/spec-host/mio-staging%2Fmio-design%2F1563837804615%2Fassets%2F1bdB4Wvj3725oTSWoeSlKLbvw2lsrn6dw%2Fsystem-icons-grid-keyline-shapes-13.png
50
https://storage.googleapis.com/spec-host/mio-staging%2Fmio-design%2F1563837804615%2Fassets%2F1mufcI6ZgbECblq1k-KucEPoUbbDMwue9%2Fsystem-icons-grid-keyline-shapes-14.png
51
Unfilled iconhttps://storage.googleapis.com/spec-host/mio-staging%2Fmio-design%2F1563837804615%2Fassets%2F15fdIG_fEGkwTL4sSkC61lzR0dziMuQvd%2Fsystem-icons-preset-custom-icon-01.png
52
Filled iconhttps://storage.googleapis.com/spec-host/mio-staging%2Fmio-design%2F1563837804615%2Fassets%2F18r-4N2IjGYsIWiiIC1DyceRQT1dHq9W-%2Fsystem-icons-preset-custom-icon-02.png
53
Two-toned iconTwo-tone icons have added dimension, using the attributes of stroke, fill, and color. Contrasting stroke and fill colors enables the use of multiple brand colors and can improve legibility.https://storage.googleapis.com/spec-host/mio-staging%2Fmio-design%2F1563837804615%2Fassets%2F1kZ8ipZbBcTRT5LbtwS6nvJy0oTrT4rTa%2Fsystem-icons-preset-custom-icon-15.png
54
MetricsTouch targetTouch target apply to an device that 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.https://storage.googleapis.com/spec-host/mio-staging%2Fmio-design%2F1563837804615%2Fassets%2F1V-52jQzdoLsqxrz_JMp20Zbp_a2Zc2gp%2Flayout-spacing-touchtargets.png
55
Click targetsOn non-touch-UIs, click targets should be at least 24*24 dp with at least 8dp of space between themhttps://storage.googleapis.com/spec-host/mio-staging%2Fmio-design%2F1563837804615%2Fassets%2F1CCpcUPwnMC-r-tT-cDz8U8J6PzkGBtkc%2Flayout-spacing-clicktargets.png
56
Icon TypesLeading IconLeading Icon is the icon placed infront of text.
57
Icon signifierIcon signifiers can describe the type of input a text field requires, and be touch targets for nested components. For example, a calendar icon may be tapped to reveal a date picker.

58
Valid or error iconIconography can indicate both valid and invalid inputs, making error states clear for colorblind users.

59
Clear iconClear icons let users clear an entire input field. They appear only when input text is present.

60
Voice input iconA microphone icon signifies that users can input characters using voice.

61
Dropdown Icon (Chevron)A dropdown arrow indicates that a text field has a nested selection component.

62
63
TypographyFont Size UnitAndroid: sp
64
iOS : pt
65
Web: rem
66
Letter Spacing UnitAndroid: em
67
iOS:pt
68
Web: rem
69
HeadlineIn the type scale, headlines span from a range of 1 through 6. Headlines are the largest text on the screen, reserved for short, important text or numerals.

For headlines, you can choose an expressive font, such as a display, handwritten, or script style. These unconventional font designs have details and intricacy that help attract the eye.		https://storage.googleapis.com/spec-host/mio-staging%2Fmio-design%2F1563837804615%2Fassets%2F1foNJWxIuKmdfivR2kYX2rUY1wu8KSkbx%2Fapplyingtypescale-headlines-display.png
70
SubtitlesSubtitles are smaller than headlines. They are typically reserved for medium-emphasis text that is shorter in length. Serif or sans serif typefaces work well for subtitles.https://storage.googleapis.com/spec-host/mio-staging%2Fmio-design%2F1563837804615%2Fassets%2F1iLARwpebcdd_z477DVhvhtEJbhYs6Wrj%2Fapplyingtypescale-subtitle-sanserif.png
71
BodyBody text comes in ranges 1-2, and it’s typically used for long-form writing as it works well for small text sizes. For longer sections of text, a serif or sans serif typeface is recommended.https://storage.googleapis.com/spec-host/mio-staging%2Fmio-design%2F1563837804615%2Fassets%2F1H1-UQam7N-ya38xVm9SHDIQmVv39LVkm%2Fapplyingtypescale-body-serif.png
72
Caption and overlineCaption and overline text (text with a line above it) are the smallest font sizes. They are used sparingly to annotate imagery or to introduce a headline.https://storage.googleapis.com/spec-host/mio-staging%2Fmio-design%2F1563837804615%2Fassets%2F1KznrSH-I5yOSCwtxRXBgv_T15TFqXZA9%2Fapplyingtypescale-capover-serif.png
73
Button TextButton text is a call to action used different types of buttons (such as text, outlined and contained buttons) and in tabs, dialogs, and cards.

Button text is typically an all caps sans serif.		https://storage.googleapis.com/spec-host/mio-staging%2Fmio-design%2F1563837804615%2Fassets%2F1MAj_XQNclJloKf7XuN0UEgbJn1x0xydd%2Fapplyingtypescale-button-sanserif.png
74
Density Line heightLine height, also known as leading, controls the amount of space between baselines in a block of text. A text’s line height is proportional to its type size.https://storage.googleapis.com/spec-host/mio-staging%2Fmio-design%2F1563837804615%2Fassets%2F1b_eDSKKx55WjClBzCdioFKBIS0MuQXvp%2Freadability-line-height.png
75
Paragraph spacingKeep paragraph spacing in the range between .75x and 1.25x of the type size.
https://storage.googleapis.com/spec-host/mio-staging%2Fmio-design%2F1563837804615%2Fassets%2F1ds3iRNQHtmi0o_iWfhluLFQudei9Sygq%2Fparagraph-spacing.png
76
Type alignmentType alignment controls how text aligns in the space it appears. There are three type alignments:

Left-aligned: when text is aligned to the left margin
Right-aligned: when text is aligned to the right margin
Centered: when text is aligned to the center of the area it is set in		https://material.io/design/typography/understanding-typography.html#readability
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100