A | B | C | D | E | F | G | H | I | J | K | L | M | N | O | P | Q | R | S | T | U | V | W | X | Y | Z | AA | AB | |
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
1 | Color 🔸 Grid 🔸 Iconology 🔸 Typography | |||||||||||||||||||||||||||
2 | Name | Term | Defination | Reference+Image | ||||||||||||||||||||||||
3 | Color | Primary Color | A 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 Color | A 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 colors | Sureface colors affect surfaces of components, such as cards, sheets, and menus. | ||||||||||||||||||||||||||
7 | Background Color | The background color appears behind scrollable content. The baseline background and surface color is #FFFFFF. | ||||||||||||||||||||||||||
8 | Error color | Error 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" colors | referring 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 Colors | The 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 | Units | Pixel Density | The number of pixels that fit into an inch is referred to as pixel density | |||||||||||||||||||||||||
13 | Calculating Pixel Density | Screen density = Screen width (or height) in pixels / Screen width (or height) in inches | https://storage.googleapis.com/spec-host/mio-staging%2Fmio-design%2F1563837804615%2Fassets%2F100TLfB0GWAxUUCOHQ2kaFaMZX1Zpcc7y%2Flayout-unitsmeasurements-pixeldensity-lower.png | |||||||||||||||||||||||||
14 | dp | Density-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 | sp | Scalable 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 | Baseline | 8dp grid | All 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 grid | Iconography, 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 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 or list item. | https://storage.googleapis.com/spec-host/mio-staging%2Fmio-design%2F1563837804615%2Fassets%2F1rBlxw756KBbmMkweYtXn9MbzuOrcMN3E%2Flayout-spacing-baslinetype.png | |||||||||||||||||||||||||
20 | Grid | Columns | Content 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 | Gutters | Spacing between columns | ||||||||||||||||||||||||||
22 | Margins | 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 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 | Breakpoints | A 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 | Spacing | Padding | Padding 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 | Keylines | Keylines 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 spacing | refers 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 Type | Fluid Grids | Fluid 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 Grids | Fixed 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 Regions | A 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 Regions | Permanent 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 regions | Persistent 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 regions | Temporary 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 | Containers | A 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 container | Rigid 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 container | Flexible 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 ratios | An 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 ratios | Container 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 Cropping | To 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 heights | https://storage.googleapis.com/spec-host/mio-staging%2Fmio-design%2F1563837804615%2Fassets%2F1nIrW7XJIHE-uw8xDwTT83lZyZWRZuWal%2Flayout-responsive-cropping-maintain-ratio.png | |||||||||||||||||||||||||
40 | ||||||||||||||||||||||||||||
41 | Iconology | Icon sizes | System 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 grid | The 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 area | Icon 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 area | Icon 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 | Padding | 2dp 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 Padding | 2dp 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 Shapes | 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. | 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 icon | https://storage.googleapis.com/spec-host/mio-staging%2Fmio-design%2F1563837804615%2Fassets%2F15fdIG_fEGkwTL4sSkC61lzR0dziMuQvd%2Fsystem-icons-preset-custom-icon-01.png | ||||||||||||||||||||||||||
52 | Filled icon | https://storage.googleapis.com/spec-host/mio-staging%2Fmio-design%2F1563837804615%2Fassets%2F18r-4N2IjGYsIWiiIC1DyceRQT1dHq9W-%2Fsystem-icons-preset-custom-icon-02.png | ||||||||||||||||||||||||||
53 | Two-toned icon | Two-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 | Metrics | Touch target | Touch 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 targets | On non-touch-UIs, click targets should be at least 24*24 dp with at least 8dp of space between them | https://storage.googleapis.com/spec-host/mio-staging%2Fmio-design%2F1563837804615%2Fassets%2F1CCpcUPwnMC-r-tT-cDz8U8J6PzkGBtkc%2Flayout-spacing-clicktargets.png | |||||||||||||||||||||||||
56 | Icon Types | Leading Icon | Leading Icon is the icon placed infront of text. | |||||||||||||||||||||||||
57 | Icon signifier | Icon 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 icon | Iconography can indicate both valid and invalid inputs, making error states clear for colorblind users. | ||||||||||||||||||||||||||
59 | Clear icon | Clear icons let users clear an entire input field. They appear only when input text is present. | ||||||||||||||||||||||||||
60 | Voice input icon | A 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 | Typography | Font Size Unit | Android: sp | |||||||||||||||||||||||||
64 | iOS : pt | |||||||||||||||||||||||||||
65 | Web: rem | |||||||||||||||||||||||||||
66 | Letter Spacing Unit | Android: em | ||||||||||||||||||||||||||
67 | iOS:pt | |||||||||||||||||||||||||||
68 | Web: rem | |||||||||||||||||||||||||||
69 | Headline | In 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 | Subtitles | Subtitles 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 | Body | Body 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 overline | Caption 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 Text | Button 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 height | Line 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 spacing | Keep 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 alignment | Type 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 |