MaterialDesign

Intro
    It is a visual language that synthesizes the classic principles of good design with the innovation of technology and science.
    Adaptable system of guidelines, components, and tools that support the best practices of user interface design
    Theme colors should include -
        Basic (primary, secondary, and primary color variants)
        Surfaces (backgrounds and components)
        States (such as error states)
        Content (typography and iconography)
    Baseline Material color theme - https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F1PZrjuQLwNHJ1ZyWVEI7Kp_z6_fAOSR33%2Fdarktheme-adjustedcolor-baselines-color-scheme-comparison.png
        1. The Material Design baseline default theme
        2. The Material Design baseline dark theme 

Foundation
    Material Design defines the qualities that can be expressed by UI regions, surfaces, and components.
    components has Surface
    Material Design has three-dimensional qualities that are reflected in its use of surfaces, depth, and shadows.
    In the physical world, objects can be stacked or attached to one another, but cannot pass through each other. They cast shadows and reflect light.
    Material has varying x & y dimensions (measured in dp) and a uniform thickness (1dp).
    Environment
        Surfaces
            The basic Material surface is opaque white, with 1dp thickness, and casts a shadow. All UI elements in Material Design result from modifications to this surface.
            Material surfaces can behave in certain ways:
                Rigid surfaces remain the same size through all interactions.
                Stretchable surfaces can grow or shrink along one or more edges up to a size limit to accommodate additional content, then behave as rigid surfaces.  For example, tapping “more details” can cause a card to grow vertically and display additional content.
                Pannable surfaces remain the same size throughout interactions, but content can scroll or pan across the surface.
            Composite Surface
                A card can stretch to display a region that scrolls independently of other card content.
                A single surface can contain multiple pannable surfaces, such as an embedded map that pans independently of a scrollable list
            Material surfaces at different elevations cast shadows. Don’t express shadows without changing a surface’s elevation.
            Content is displayed in any shape and color on Material. Content does not add thickness to Material. Content is expressed without being a separate layer.
            Material can display any shape and color. Content can behave independent of Material, but is limited within the bounds of Material.
            Content behavior can be independent or dependent of surface behavior.
            Material is solid. User input and interaction cannot pass through material.
            Input events only affect the surface of Material. Input events cannot pass through Material.
            Multiple Material elements cannot occupy the same point in space simultaneously.
            Prevent multiple Material elements from simultaneously occupying the same point in space, such as by separating elements with elevation.
            Material cannot pass through other Material. For example, one Material surface cannot pass through another Material surface when changing elevation.
            Material does not behave like a gas. Material enters and exits through changes in opacity, size, or position.
            Material is not fluid like a liquid or gel, though it may display content with these properties.
            Material can change shape.
            Material can change opacity.
            Material grows and shrinks only along its plane.
            Material bends or folds within the depth of the UI.
            Material surfaces can join together to become a single Material surface.
            When split, Material can rejoin. For example, if you remove a portion of Material from a surface, the surface will become whole again.
            Material can be spontaneously generated or dismissed anywhere in the environment.
            Material can move along any axis.
            Material surfaces can coordinate their motion.
            Material motion along the z-axis is typically a result of user interaction.
            Surfaces can remain in a fixed position. The top app bar remains in a fixed position while the card collection scrolls only vertically behind it.
            Surface movement can be confined to a single axis, allow movement along a single axis at a time, or allow movement along both axes simultaneously.
            Surfaces can move independently of each other, or their movement can affect or be dependent upon the movement of other surfaces. A dependency can be based on a variety of mechanics, such as nearby surfaces moving when another surface expands, or the proportion of movement between surfaces moving in parallax.
            Material surfaces can be transparent, semi-transparent, or opaque. Text on transparent and semi-transparent surfaces may require background treatment to preserve legibility.
            Scrim
                Scrims are temporary treatments that can be applied to Material surfaces for the purpose of making content on a surface less prominent. 
                They help direct user attention to other parts of the screen, away from the surface receiving a scrim.
                Scrims can be applied in a variety of ways, including -
                    Darkening or lightening the surface and its content
                    Reducing the opacity of the surface and its content
        Elevation 
            Elevation in Material Design is measured as the distance between Material surfaces. The distance from the front of one Material surface to the front of another is measured along the z-axis in density-independent pixels (dps) and depicted using shadows(by default) or other visual cues, such as surface fills or opacities.
            Shadows show surface edges, surface overlap, and the degree of elevation.
            Different surface colors show surface edges and overlap, but not the degree of elevation.
            Opacity shows surface edges and overlap, but not the degree of elevation.
            A scrimmed background can indicate surface overlap, but not the degree of elevation.
            Don’t use shadows for style only.
            Surfaces at the same elevation can appear differently when other surfaces are behind them.
            Surfaces at different elevations do the following -
                Allow surfaces to move in front of and behind other surfaces, such as content scrolling behind app bars
                Reflect spatial relationships, such as how a floating action button’s shadow indicates it is separate from a card collection
                Focus attention on the highest elevation, such as a dialog temporarily appearing in front of other surfaces
            Resting elevation
                Resting elevations are starting elevation values given to components by default. 
                Components move from resting elevations in response to the user or a system event. 
                All Material components have resting elevations that are the same for each type of component. 
                For example, all cards have the same resting elevations as each other, and a dialog has the same resting elevation as other dialogs.
                Resting elevations vary based on the environment, platform, or app
            Changing elevation
                Components can change elevation in response to user input or system events. When this happens, components move to preset dynamic elevation offsets, which are the default elevations components move to when not resting.
                Dynamic elevation offsets are the same across each type of component. For example, all cards use the same offset as other cards, and all floating action buttons use the same offset as other floating action buttons.
                Once the user input (or system event) is completed or cancelled, the component swiftly returns to its resting elevation.
            Elevation interference
                When a component moves between its resting elevation and dynamic elevation offset, it shouldn’t collide with other components.
                To avoid these kinds of collisions, components can move out of the way. For example, if increasing a card’s elevation positions it to pass through a floating action button, that button can disappear or move off-screen before the collision occurs.
                You can also design your app’s layout to avoid collisions, such as placing a floating action button beside cards, instead of directly above them.
                Design your app to minimize opportunities for elevation-based interference.
            To successfully depict elevation, a surface must show - 
                Surface edges, contrasting the surface from its surroundings
                Overlap with other surfaces, either at rest or in motion
                Distance from other surfaces
            Motion can emphasize elevation using the following methods -
                Changes in shadows - Changes in shadow size and softness emphasize changes in elevation. The shadow grows to emphasize the card is rising.
                Displaying overlap - A surface may overlap another upon animation, either partially or completely, showing which surface is in front of the other. As a component expands, a surface may show elevation by overlapping nearby surfaces.
                Pushing - Surfaces that share the same elevation can move surfaces in their path. A selected list item expands, pushing surrounding items away.
                Scaling - Scaling the size of a surface up or down can emphasize elevation changes. Foreground and background surfaces scale up and down to emphasize elevation changes.
                Parallax - Multiple surfaces at different elevations that move at different speeds can create a sense of depth and place focus on foreground content.
            Elevation hierarchy 
                Content relates to other content depending on whether they are at similar or different elevations.
                Surfaces in front of other surfaces typically - 
                    Contain more important content
                    Focus attention, such as a dialog
                    Control the surfaces behind it, such as actions in an app bar
                https://material.io/design/environment/elevation.html#default-elevations
        Light and shadows
            Shadows in the Material environment are cast by a key light(create sharper, directional shadows) and ambient light(create diffused, soft shadows)
            Shadow size reflects elevation. Surfaces at higher elevations have larger shadows, while those at lower elevations have smaller shadows.
            If your product doesn’t use shadows, convey elevation in other ways, such as through parallax motion.
            The appearance of a shadow indicates the list item has been picked up and can move in front of its peers during this reorder interaction.
    Layout
        Principles
            Predictable - UIs should use intuitive and predictable layouts, with consistent UI regions and spatial organization.
            Consistent - Layouts should use a consistent grid, keylines, and padding.
            Responsive - Layouts are adaptive and react to input from the user, device, and screen elements.
        Structure
            Material Design layouts are visually balanced. Most measurements align to an 8dp grid applied, which aligns both spacing and the overall layout.
            Smaller components, such as iconography and typography, can align to a 4dp grid.
        Density & resolution
            Pixel density - The number of pixels that fit into an inch is referred to as pixel density.    
            High-density screens have more pixels per inch than low-density ones. As a result, UI elements of the same pixel dimensions appear larger on low-density screens, and smaller on high-density screens.
            Screen density = Screen width (or height) in pixels / Screen width (or height) in inches
            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.
            dp = (width in pixels * 160) / screen density
            Material UIs use density-independent pixels to display elements consistently on screens with different densities.  
            Units for the web - When designing for the web, replace dp with px (for pixel).    
        Responsive layout grid 
            The Material Design layout grid is made up of three elements: columns, gutters, and margins.
            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.
            On mobile, at a breakpoint of 360dp, this layout grid uses 4 columns, 16dp gutters and 16dp margins
            On tablet, at a breakpoint of 600dp, this layout grid uses 8 columns, 24dp gutters and 16dp margins
            The layout grid can be adjusted to meet the needs of both your product and various device sizes. 
            The tighter spacing may suggest the images are closely related to one another, so that they are perceived as part of a collection. The extra space helps each album to be perceived as an individual entity within a collection.
            Don’t make gutters too large, such as the same width as the columns. Too much space doesn’t leave enough room for content and prevents it from appearing unified.
            The Material Design layout grid can be customized for touch UIs that scroll horizontally. Horizontal grids can be positioned to accommodate different heights, allowing space for app bars or other UI regions at the top.
            Whiteframes - Whiteframes are structured layouts that provide a consistent approach to layout, layering, and shadows. They are a starting point, meant to be modified to meet the specific needs of a product.
        Spacing methods
            All components align to an 8dp square baseline grid for mobile, tablet, and desktop.
            Iconography, typography, and some elements within components can align to a 4dp grid.
            Typography can be placed outside of the 4dp grid when it’s centered within a component, such as a button or list item.
            keylines
                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.
                Keylines should be used in combination with the responsive layout grid to place elements consistently across a design.
            Padding
                Padding refers to the space between UI elements. It’s an alternative spacing method to keylines, measured in increments of 8dp or 4dp.
                Padding should be used in combination with the responsive layout grid to place elements consistently across a design.
                Padding can be measured both vertically and horizontally. Unlike keylines, padding does not need to span the whole height of a layout.
            Vertical spacing
                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.
            Increment
                An increment is a measurement used to measure the size and placement of elements in your app.
                It has equal height and width. It can be any number, but it’s recommended to use the height of a standard element (such as the app bar) as your increment.
                This increment is defined using the height of the app bar. If an app bar is 64dp tall, the increment would be 64 x 64dp.
            Containers and aspect ratios 
                A container is a shape used to represent an enclosed area. Containers can hold various UI elements such as an image, icon, or surface.
                Containers can be rigid and restrict the size or cropping of elements within them. Alternatively, they can be flexible and grow to support the size of the content they hold.
                An aspect ratio is the proportion of an element’s width to its height. Aspect ratio is written as width:height.
                To maintain consistency in your layout, use a consistent aspect ratio on elements like images, surfaces, and screen size
                The following aspect ratios are recommended for use across your UI - 16:9, 3:2, 4:3, 1:1, 3:4, and 2:3
                Flexible ratios sizing is determined by the layout grid -
                    Container width is determined by the screen layout, and grows to fill the maximum space available
                    Container height is determined by the height of the image in that container
            Touch targets should be at least 48 x 48 dp with at least 8dp of space between them.
            On non-touch-UIs, click targets should be at least 24 x 24 dp with at least 8dp of space between them
        Component behavior 
            Component width can remain the same across screen sizes, or it can change depending on the layout. Component width can be either - Fixed or Fluid
            Because fixed width elements retain their width during layout changes, their placement can change to accommodate new layouts. Their placement can be either - Pushed or Overlaid
            As screen space increases, the following responsive patterns may be applied -
                Reveal - Parts of the UI hidden by smaller screens can be revealed when additional space becomes available at a designated breakpoint.
                    Elements, such as side navigation, can become visible when screen size increases.
                    A simple UI may reveal more robust or complex options.
                    Content that only appears after tapping on a small screen can be revealed by default when more space is available.
                Transform - A component can transform from one format to another at a designated breakpoint.
                    Side navigation can transform into tabs on a larger screen.
                    A list can transform into an image list on a larger screen.
                    Menu items can transform into icons in a toolbar on a larger screen.
                Divide - UIs with multiple layers can display all of those layers at once when more screen space is available. UI elements are divided across this newly available space.
                    Side navigation, list content, and detailed content divide to fill a single view on a larger screen.
                    Tabbed sibling content is divided within the same view on a larger screen.
                Reflow - A UI may change its layout to reflow across newly available space.
                    Elements from a single-column format can reflow to fill the content area in various combinations on a larger screen.
                    Horizontal tabs can reflow into a vertical list on a larger screen.
                    Elements can reflow within a component based on a new screen ratio or device orientation.
                Expand - The UI can expand across more space.
                    Cards can expand to fill a new and larger space
                    Dialogs can expand proportionally with content or in specific increments.
                Position - The position of UI components can change to more appropriate locations.
                    A bottom sheet on a small screen can reposition itself as a menu on a larger screen.
                    A floating action button (FAB) can move to a more visible location relative to other UI elements on a larger screen.
        Density
            Density principles
                Scannable - Dense UIs improve browsing and interaction with large amounts of content.
                Prioritized - Dense UIs help users focus by reducing space between actions.
                Available - Density exposes more content and actions on a single screen.
            When to apply density
                Components with high density enable users to process and take action against large amounts of information in a more manageable way. 
                List, tables, and long forms are components that benefit from increased density.
            When not to apply density
                Don’t apply density to components that involve focused tasks, such as interacting with a dropdown menu or picker. Increasing density on these components reduces their usability.
                Don’t apply density to components that alert the user of changes, such as snackbars or dialogs. Applying high density to alerts reduces their ability to command attention.
            Layout
                To create more scannable groups of content, use a less-dense grid layout with high-density components. 
                The higher the density of components, the larger their margins and gutter widths should be.
                Don’t use both a dense layout grid and dense components, as this will make it difficult to differentiate content groups
            Touch and click targets
                touch targets should be at least 48 x 48 dp, with at least 8dp of space between each target.
                There are some edge cases when touch target sizes must be smaller than the recommended minimum 48dp -
                    Smaller touch targets for links within a paragraph.
                    Smaller touch targets for a date selection in picker.
                On non-touch UIs, click targets should be at least 24 x 24 dp, with at least 8dp of space between each target.
            Typographic density 
                Line height is the space between lines of text. Line height can be used as a way to create density in typographic layouts. When tightening line height be sure to still use the 4dp baseline grid.
    Navigation
        Navigational directions
            Lateral navigation refers to moving between screens at the same level of hierarchy. An app’s primary navigation component should provide access to all destinations at the top level of its hierarchy.
                Navigation drawers are appropriate for five or more top-level destinations, and can be used across device sizes for a consistent navigation experience.
                Bottom navigation bars provide access to 2-5 top-level destinations on mobile devices. Their location, visibility, and persistence across screens allow quick pivoting between destinations.
                Tabs can be used at any level of an app’s hierarchy to present two or more peer sets of data across screen sizes.
            Forward navigation refers to moving between screens at consecutive levels of hierarchy, steps in a flow, or across an app. Forward navigation embeds navigation behavior into containers (such as cards, lists, or images), buttons, links, or by using search.
            Reverse navigation refers to moving backwards through screens either chronologically (within one app or across different apps) or hierarchically (within an app). Platform conventions determine the exact behavior of reverse navigation within an app.
        Navigation Transition
            Navigation transitions use motion to guide users between two screens in your app. They help users orient themselves by expressing your app’s hierarchy, using movement to indicate how elements are related to one another.
            For example, when an element expands to fill the entire screen, the act of expansion expresses that the new screen is a child element. The screen from which it expanded is its parent element.
            Hierarchical transitions move users one level upwards or downwards through an app’s hierarchy, while peer transitions move users between siblings (screens of equal hierarchy).
    Color
        The color system 
            Helps you create a color theme that reflects your brand or style.
            Principles        
            Hierarchical - Color indicates which elements are interactive, how they relate to other elements, and their level of prominence. Important elements should stand out the most.
            Legible - Text and important elements, like icons, should meet legibility standards when appearing on colored backgrounds, across all screen and device types.
            Expressive - Reinforce your brand by showing brand colors at memorable moments that reinforce your brand’s style.
            Baseline Material color theme
                This includes default colors for primary, secondary, and their variants. 
                This baseline theme also includes additional colors that define your UI, such as the colors for backgrounds, surfaces, errors, typography, and iconography. 
                All of these colors can be customized for your app.
            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.
                Distinguish UI elements
                    To create contrast between UI elements, such as distinguishing a top app bar from a system bar, you can use light or dark variants of your primary color on each elements. 
                    You can also use variants to distinguish elements within a component, such different variants used on a floating action button container, and the icon within it.
            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
                Just like the primary color, your secondary color can have dark and light variants.
            Surface, background, and error colors typically don’t represent brand -
                Surface colors affect surfaces of components, such as cards, sheets, and menus.
                The background color appears behind scrollable content. The baseline background and surface color is #FFFFFF.
                Error color indicates errors in components, such as invalid text in a text field. The baseline error color is #B00020.
            Typography and iconography colors
                Elements, such as text and icons, should use colors specifically designed to appear clearly and legibly against the colors,such as primary color, secondary color, surface color, background color, or error color, behind them.
                The defaults for these colors are #FFFFFF and #000000.
            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).
                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
            Tools for picking colors 
                search google like 'color theme stock market'
                https://www.websitebuilderexpert.com/designing-websites/how-to-choose-color-for-your-website/
                https://material.io/tools/color
                https://material-ui.com/style/color/
                https://materialpalette.com/
                https://material.io/inline-tools/color/
                https://color.adobe.com/create
        Applying color to UI 
            guidelines
                Consistent - Color should be applied throughout a UI consistently and be compatible with the brand it represents.
                Distinct - Color should create distinction between elements, with sufficient contrast between them.
                Intentional - Color should be applied purposefully as it can convey meaning in multiple ways, such as relationships between elements and degrees of hierarchy.
            Identifying app bars
                The primary color (blue 700) is used on this bottom app bar, and the secondary color (orange 500) is used on the floating action button.
                If the bottom app bar and floating action button are the same color, use shadow or alternate means to create enough distinction between them.
            Blending an app bar with the background
                When an app’s top or bottom app bar color is the same color as the background color, they blend together, placing emphasis on an app’s content instead of its structure.
                Both this app’s top app bar color and background color is the primary color: white. However, on scroll the top app bar gains a shadow, showing it has an elevation higher than the content that scrolls behind it.
            Sheets and surfaces
                The baseline color for sheets and surfaces, such as bottom sheets, navigation drawers, menus, dialogs, and cards is generally white. 
                These components can incorporate color to create contrast between other surfaces. Contrast can make surface edges apparent,indicating elevation differences when surfaces overlap.
                The baseline color for cards is white. This color can be customized to express brand or improve legibility. Card text and icons can also use the color theme to improve legibility.
            Buttons, chips and selection controls 
                The baseline color for contained, text and outlined buttons is your primary color.
                The baseline color for floating action buttons and extended floating action buttons is your secondary color.
                The baseline color for selection controls is your secondary color.
                Selection controls can inherit your app’s secondary color.
                Don’t use one of your brand colors for coloring alerts. This will help it stand out.
            Floating action button (FAB)
                The floating action button (FAB) should be one of the most recognizable items on your screen.
                Use color to create contrast between the FAB and surrounding elements, such as the app bar. 
                Your secondary color is the baseline color for use on the FAB. 
                If your canvas uses many colors, your FAB can use monochromatic coloring instead, to stand out from the content.
            Typography and iconography 
                Color can express whether text has greater, or lesser, importance relative to other text. Color also ensures text remains legible when placed above imagery or backgrounds, which can make it difficult to read the text in front of them.
                Important text, like tabs and headlines, can use your primary or secondary color.
                Icons help identify actions and provide information. Their color should contrast against the background to ensure that they are legible and identifiable.
        Color Usage
            Color helps express hierarchy, establish brand presence, give meaning, and indicate element states.
            Hierarchy 
                When an element’s color contrasts with its surroundings, that element stands out, so users can tell it’s important. Because color themes vary – from bold and bright, to monochromatic or muted – there are different ways to indicate which elements have greater importance.
                For example, black icons stand out when they are placed against a white background. Multicolored cards draw attention to themselves when placed next to monochromatic colors.
            Brand 
                Your brand can use color to emphasize its presence. Brand colors can be used in key moments, in ways that associate those colors with specific actions and information. 
            Meaning 
                Color can communicate the meaning of different UI elements. For example, a weather app may display colors indicating current weather conditions, and a navigation app may display color showing traffic conditions, with roads colored red or green
                If red is a brand color, don’t also use it to convey an error state. Choose alternative alert colors that don’t use brand coloring like yellow
            State 
                Color should be noticeable when indicating state changes, as subtle differences in color may be missed. It’s best to indicate a change of state in more than one way, such as by displaying an icon or moving the location of an element.
        Text legibility 
            Black text is recommended for use on light backgrounds, and white text on dark backgrounds. If your app has both light and dark themes, make sure the text is available in a contrasting color against each theme.
            Instead of using gray text and icons on top of colored backgrounds, create better contrast by displaying white or black text with reduced opacity. For example, black text displayed at 75% opacity on a green background gives the text an appearance of black, with a hint of green.
            Alternatively, you can calculate the color of text by doing the following -
                Place the color black at reduced opacity in front of a green background
                Identify the hex value of the resulting darkened green color
                Use that hex value of that color for your text
            Dark text on light backgrounds (shown here as #000000 on #FFFFFF) applies the following opacity levels -
                High-emphasis text has an opacity of 87%
                Medium-emphasis text and hint text have opacities of 60%
                Disabled text has an opacity of 38%
            Colored text should be used sparingly to draw attention and apply selective emphasis. Ideally colored text should be reserved for text elements such as headlines, buttons, and links.
            helper text on light backgrounds could apply the following opacity levels and default hexes -
                High emphasis helper: This text uses a hex value #000000 at 87% opacity
                Default color helper text: This text uses a hex value of #000000 at 60% opacity
                Default error helper text: This text uses a hex value of #B00020 at 100% opacity
            To reflect brand, text selection can use an accent of your primary or secondary color. Selected text should be legible against the selection color, and the selection color should contrast the background color
        Dark Theme
            A dark theme is a low-light UI that displays mostly dark surfaces.
            Dark themes reduce the luminance emitted by device screens, while still meeting minimum color contrast ratios
            principles
                Darken with grey - Use dark grey, rather than black, to express elevation and space in an environment with a wider range of depth. The recommended dark theme surface color is #121212.
                Color with accents - Apply limited color accents in dark theme UIs, so the majority of space is dedicated to dark surfaces.
            Material Design dark themes are defined by the following properties - 
                Contrast - Dark surfaces and 100% white body text have a contrast level of at least 15.8:1
                Depth - At higher levels of elevation, components express depth by displaying lighter surface colors
                Desaturation - Primary colors are desaturated so they pass the Web Content Accessibility Guidelines’ (WCAG) AA standard of at least 4.5:1 (when used with body text) at all elevation levels
                Limited color - Large surfaces use a dark surface color, with limited color accents (light, desaturated colors)
            In a dark theme, components retain the same default elevation levels and shadows as components in lighter themes. However, in a dark theme, The higher a surface’s elevation (raising it closer to an implied light source), the lighter that surface becomes. That lightness is expressed through the application of a semi-transparent white overlay. These surface overlay values are designed to maximize legibility, while ensuring the different elevation levels are discernible from one another -
                Elevation level (White overlay opacity)
                00dp (0%)
                01dp (5%)
                02dp (7%)
                03dp (8%)
                04dp (9%)
                06dp (11%)
                08dp (12%)
                12dp (14%)
                16dp (15%)
                24dp (16%)
            The elevation overlays are not applied to component surfaces that use primary or secondary colors. In a dark theme, shadows remain dark to accurately represent a cast shadow.
            Dark theme surfaces must be dark enough to display white text. They should use a contrast level of at least 15.8:1 between text and the background. This ensures that body text passes WCAG’s AA standard of at least 4.5:1 when applied to surfaces at the highest (and lightest) elevation.
            To create branded dark surfaces, overlay the primary brand color at a low opacity over the recommended dark theme surface color (#121212). The color #1F1B24 is the result of combining the dark theme surface color #121212 and the 8% Primary color.
            A primary color is the color displayed most frequently across your app’s screens and components. The baseline Material Design dark theme uses the 200 tone of the primary color (passing the WCAG’s AA standard of at least 4.5:1 for normal text, at all elevation surfaces).
            In a dark theme, dark surfaces occupy the majority of the UI. Accent colors are typically light (desaturated pastels) or bright (saturated, vivid color) to help accented elements stand out. They should be used sparingly to accent key elements, such as text or buttons.
            To provide more flexibility and usability in a dark theme, it’s recommended to use lighter tones (200-50) in dark theme, rather than your default color theme (saturated tones ranging from 900-500). 
            To retain brand identity, brand colors can be used at full saturation in a dark theme, although application should be limited to one or two branded elements, such as a logo or a branded button. By using branded colors sparingly, the elements remain prominent in the hierarchy.
            This dark theme color for the Error was created by taking the light theme error color (#B00020) and lightening it with a 40% white overlay, to pass AA-Level contrast standards.
            When light text appears on dark backgrounds (like white on black) it should use the following opacity levels -
                High-emphasis text has an opacity of 87%
                Medium-emphasis text and hint text have opacities of 60%
                Disabled text has an opacity of 38%
            When a light surface is needed in a dark theme, light coloring can be used on select component surfaces to preserve hierarchy. For example, a dark theme snackbar can display a light surface to help it stand out. To do so, it can apply the light theme’s Surface and On Surface colors.
            State
                States visually communicate the status of a component or interactive element through the use of overlays. In a dark theme, states should use the same overlay values as their default (or light) theme, and they can be adjusted to pass AA-level contrast standards.
                Surface containers that use the color called “Surface” should apply an overlay that matches the color of their icon or text label (if no icon is present).
                For surface containers that use the “Primary” color, their state overlay is white.
                overlay for various state
                    Hovered - 4% overlay
                    Focused - 12% overlay and for stroke, 100% overlay
                    Pressed - 10% overlay
                    Dragged - 8% overlay and 8dp shadow
                All disabled components are displayed using 12% White for container outlines and fills and 38% White for content such as labels or icons.
            Tutorial - https://codelabs.developers.google.com/codelabs/design-material-darktheme/#0
    Typography
        Category of typography - https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F1W8kyGVruuG_O8psvyiOaCf1lLFIMzB-N%2Ftypesystem-typescale.png
        The following units are used to express font size on Android, iOS, and the web -
            Platform - Android - iOS - Web
            Font size unit - sp - pt - rem
            Conversion ratio - 1.0 - 1.0 - 0.0625
        Headlines are the largest text on the screen, reserved for short, important text or numerals.
        Subtitles are smaller than headlines. They are typically reserved for medium-emphasis text that is shorter in length
        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.
        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 
        Regardless of pt / sp size, a text’s baseline must sit on the 4dp grid. Line-height must be a value divisible by 4 to maintain the grid.
        Weight - order of thickness - Light, Regular, Medium, Bold
        Larger type sizes, such as headlines, use tighter letter-spacing to improve readability and reduce space between letters. For smaller type sizes, looser letter spacing can improve readability as more space between letters increases contrast between each letter shape. Text in all caps, even at small type sizes, has improved readability because of its added letter spacing.
        Use tabular figures (also known as monospaced numbers), rather than proportional digits, in tables or places where values may change often.
        Line lengths for body text are usually between 40 to 60 characters. In areas with wider line lengths, such as desktop, longer lines that contain up to 120 characters will need an increased line height from 20sp to 24sp.
        A text’s line height is proportional to its type size. Type size 14, Line-height 20dp. Type size 20, Line-height 28dp
        Keep paragraph spacing in the range between .75x and 1.25x of the type size. Type size 20sp, line-height 30dp, paragraph spacing 28dp
        
guidelines
    Overview
        Create custom Material Themes to make your product unique. Implement your design vision with Material Theming, which simplifies the process of customizing your product and using components, which are the building blocks that make a product usable and functional.
        Usability and platform guidance describe how to make sure your app is usable for all users. Platform guidance helps you make detailed decisions about what conventions are proper for each platform.
        Material Theming is the ability to systematically customize Material Design to better reflect your product’s brand. Material Theming consists of three main actions: customizing your theme, applying it across your design mocks, and using it in code. Material Design comes designed with a built-in, baseline theme that can be used as-is, straight out of the proverbial box. You can then customize it as little, or as much, as you like to make Material work for your product.
    Implementing your theme 

    Usability
    Components
    Communication