About Shrine
The Shrine app provides an online marketplace featuring lifestyle and fashion items from promoted labels. Shrine’s brand aesthetic is modern, elegant, and sophisticated. Shrine is the unifying concept behind the various brands and products showcased.
Minimal aesthetic
Shrine uses a minimalist aesthetic, creating an experience where content and actions take the forefront of the user experience. Shrine’s brand plays an important role as the central, unifying scaffolding for the variety of products and brands showcased.
Product architecture
The Shrine app’s information architecture has a catalog structure. A catalog contains categorized data, with a top level consisting of peers which may contain subordinate items. Shrine’s top level categories group types of items (shoes, accessories, dresses), so they can be seen in relation to each other.
Adopting a catalog structure allows users to browse an area of interest, compare items to each other, and view the details of a specific item.
Layout
Color
Shrine’s color theme is monochromatic, using light and dark variations of the primary color Shrine Pink. Shrine’s primary color (Shrine Pink 100) fills the back layer, and the secondary color (Shrine Pink 50) fills the bottom sheet. The main content is on white, and the dark Shrine Pink 900 is used for typography and iconography.
Color and image
Shrine uses image treatments to indicate a change of state (such as selection), or as a scrim. Custom image treatments are a way of reinforcing the Shrine brand.
Typography
Iconography
Shrine uses Material Design’s default iconography system. These icons are constructed to remain legible and clear at small sizes.
Shape
Components are grouped into shape categories based on their size. Shape categories let you set multiple component values at once. Shape categories include:
- Small components
- Medium components
- Large components
Components
Motion
Shrine’s motion design uses emphasized easing, longer durations, and staggering to establish an elegant and delightful tone.