Compose two styles
Rather than blending two styles into a middle, this assigns them roles: one carries the structure, the other appears as an accent. Where the two fight, it says so before you start.
How to divide the work
- Composition
- Follow Holo: A full width action bar is fixed at the top and a single column list fills the space under it. Sections are separated by hairlines rather than white space, and a strip is reserved at the bottom for the navigation keys.
- Type
- Set in Holo's manner (One geometric leaning sans across the whole interface, in two weights only. Tabs and section headers go uppercase with the tracking opened slightly.), and let Metro's lettering (Headings five times body size, kept in a light weight) appear only where you want the eye to catch.
- Material
- Ground in Holo's material (Ground is black or a pale #F3F3F3, text is white or dark gray, and rules are one pixel of white at reduced opacity. Restrict the accent to #33B5E5 alone and let it glow only on press, selection and progress.); bring in exactly one thing from Metro (No shadows or borders, black or white ground, saturated flat panels).
- Colour
- Build on #000000, #33B5E5, #F3F3F3 and admit one accent from #e9e6dd, #67635d, #171615.
Where they fight
These two are already listed as related, so the join should come easily.
Caution
- Holo Redrawing the widgets so they no longer inherit from the theme throws away the one thing this style buys you, which is looking identical across devices, and leaves your app the odd one out on a skinned phone.
- Metro Stripping every border and shadow erases the difference between a tappable tile and a plain heading, leaving people guessing where to touch.
Image prompt
An original image that takes its structure from Holo (Style, 2011–2014) and its accent from Metro (Style, 2010–2015). Structural cues: White text on black, with sections divided by one pixel hairlines instead of filled panels; A single cyan blue at #33B5E5 lighting only selection, the underline of a text field, and progress; A full width action bar pinned to the top, and a strip of Back, Home and Recents keys at the bottom; Tab labels and list section headers set in bold, all uppercase. Accent cues, used sparingly: Type as the hero; Flat-color tiles; Compositions running off-screen; Chrome eliminated. Composition: A full width action bar is fixed at the top and a single column list fills the space under it. Sections are separated by hairlines rather than white space, and a strip is reserved at the bottom for the navigation keys.. Type and lettering: One geometric leaning sans across the whole interface, in two weights only. Tabs and section headers go uppercase with the tracking opened slightly.. Let one material quality come from the second style: No shadows or borders, black or white ground, saturated flat panels. Mood: Technology, Futurism, Calm, Trust, Rebellion. Color: build on #000000, #33B5E5, #F3F3F3 with a single accent drawn from #e9e6dd, #67635d, #171615. 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.
Related entries
- Holo 2011–2014 / Style / Google UI
Google's design language for Android, introduced with 3.0 and pushed so hard that carrying it unmodified became a compatibility requirement for every 4.0 device. It rules a black ground with hairlines and lets a single cyan blue carry selection, focus and progress. It arrived as a guarantee as much as a look, since an app that asked for the theme by name would be drawn the same way even on a phone wearing a manufacturer's skin.
- Metro 2010–2015 / Style / Microsoft UI
Windows Phone's flat language, which cast type rather than icons in the lead role. Large typography, flat-color live tiles and layouts that run off the edge of the screen transplanted the clarity of transit signage into UI, opening the flat era ahead of iOS 7.
Share this pairing:https://indexstyle.org/compose?ids=holo+metro