# Material Design × One UI — composed image prompt # IndexStyle — https://indexstyle.org/compose?ids=material-design+one-ui # Material Design carries the structure. One UI appear as accents, each further back than the last. # Style descriptors only. Never imitates a specific artist, studio, brand or work. An original image that takes its structure from Material Design (Style, 2014–) and its accent from One UI (Style, 2018–). Structural cues: Hierarchy and shadow expressed by elevation; Surfaces overlapping like sheets of paper; Motion that shows cause and effect; A standardized unit of spacing. Accent cues, used sparingly: The upper part of the screen holds nothing but a title and open space, with no touchable control in it; Text and images are collected into card shaped containers with strongly rounded corners; The title bar has only two states, expanded and collapsed, and never rests anywhere in between; In the dark theme the ground goes to true black and only the blue accent sits on top of it. Composition: Place elements on a grid of multiples of 8 and standardize the spacing.. Type and lettering: Build the hierarchy from one type family and separate levels by weight and size.. Let one material quality come from the second style: Round corners generously, roughly 12dp to 26dp. Choose one of two grounds, #fafafa or #000000, restrict the accent to a single blue, and bring no other hue onto the screen.. Mood: Trust, Technology, Play, Calm, Intimacy. Color: build on #e9e6dd, #67635d, #171615 with a single accent drawn from #0381FE, #FAFAFA, #000000. Constraints: do not imitate, reference or name any specific artist, studio, brand, character or copyrighted work. Produce an original composition in the general period languages described above. # Cautions carried from each entry # - Material Design: Do not add shadow as decoration. The moment the elevation rules break, the hierarchy is telling a lie. # - One UI: Putting a pressable control into the viewing area destroys the reason for splitting the screen at all, and what is left is just a layout with a lot of empty space at the top. # Design specs: https://indexstyle.org/styles/material-design/design.md · https://indexstyle.org/styles/one-ui/design.md