Personal Intelligence / Ambience Mirror

Design Guidelines

2 Structure General layout of elements on the Ambience Mirror 3 Iconography and meaning 4 Type styles and applications 5 Weather Layer Weather types and appearances 6 Navigation Layer Greeting and navigation icon layout 7 Scene Layer Charts, notifications, and statements Personal Intelligence / Ambience Mirror Design Guidelines 2/9 Navigation Layer The navigation layer is always present and pro- vides the user with the time, lighting mode, Structure current user, scene, available scenes, and blurb. Scene Layer Customized content based on the user’s Weather Layer selections. Available scenes include weather, The Ambience Mirror The weather layer sits at the top of the today, calendar, social, and history. mirror, adding ambience through the presents information to slow, subtle animation of scenes. the user in five layers, three being digital. The user uses a VUI to interact, never touching the mirror itself.

Mirror The mirror layer reflects the user. Addi- tional layers of information can be turned off for a simpler mirror experience. Light Light comes from the edges of the mirror. A chain of individually addressable LEDs allows for carefully controlled lighting scenes. Personal Intelligence / Ambience Mirror Design Guidelines 3/9 Iconography

The Ambience Mirror combines dynamically generated weather with simple icons and typography.

Icons are designed to be pixel perfect on an weather calendar social today history firmware insight sleep 18 px. square grid and use rounded corners with 0.5, 1.0, and 2.0 px. radii. Spacing heart rate steps workout email note ovulation news air quality between elements is 1.0 px.

hydration weight skin sick humidity Twitter Facebook Personal Intelligence / Ambience Mirror Design Guidelines 4/9 Typography

Ambience Mirror’s Greeting, Current User design balances Proxima Nova Thin 84 pt. / no wrapping subtlety with legibility. Hello

The interface uses Blurb, Data Summaries only Proxima Nova in Proxima Nova Regular You slept well last night. thin, regular, and 26 pt. / 30 pt. line height Time to conquer the day! medium weights in four distinct styles. Data Details Proxima Nova Regular 6'03" avg. pace 18 pt. / 20 pt. line height 57 m elevation gain

Time, Lighting Mode, Titles Proxima Nova Medium 16 pt. / no wrapping 7:48 AM • Natural Light Personal Intelligence / Ambience Mirror Design Guidelines 5/9 Weather Layer Clear Day / Night The sun or moon moves through the sky, The weather layer sits rising and setting with the day or night. metaphorically behind navigation and scene Partly Cloudy Day / Night layers. Weather is The sun and moon move through the sky generated and accompanied by randomly generated clouds whose movement is based on wind speed animated using actual and direction. weather data. Foggy / Cloudy / Stormy Fog shifts subtly.

Cloud formations move through the sky based on wind speed and direction. Intensity is increased based on real-world data.

Storms build in intensity with randomly generated lightning and cloud formations.

Rainy / Snowy Both rain and snowfall are randomly generated at a density based on actual weather data. Personal Intelligence / Ambience Mirror Design Guidelines 6/9 Navigation Layer 7:48 AM • Natural Light Anonymous The navigation layer When no user has identified themself, the mirror displays generic weather content. Hello provides the user with Time and lighting mode are always shown, a sense of place. regardless of log-in state. It’s 64° and air quality is good. Light rain is expected this afternoon.

Available Lighting Greeting Navigation Scenes Time Mode with Current User When a user has identified themself, the 7:48 AM • Natural Light mirror prominently displays their name.

A series of icons represents the scenes the user has configured for display using the app. Weather is always the default scene to avoid Hello Allison revealing any sensitive information. You slept well last night. Time to conquer the day!

Scenes Blurb The user configures their Ambience Mirror to Selected Scene have up to five scenes. Available scenes include weather, today, calendar, social, and history.

Only weather and today scenes are required. Available Scene Selected Scene 40% opacity 100% opacity Today, social, and history scenes are highly customizable. Personal Intelligence / Ambience Mirror Design Guidelines 7/9

Title Data Scene Layer Summary Title Data Chart Detail Charts all lead with the appropriate title and Main data point Scenes are made of optional secondary data point icon followed by a short data summary and optional secondary data point data modules. Users up to two lines of details. The chart itself is dynamically generated and formatted to fit can select which within the allotted . modules are most Modules contents (not including icons) should never exceed 400 px in width. important to them, Chart Icon Max 240  80 px building custom 18  18px Skin chart 130 px tall layouts.

Notification Title Data Summary Notifications lead with the title or source and Content modules icon. Notifiations use the data summary style Title with an additional 10 px between lines. follow one of three Notification Type 1 templates: chart, Notification Type 2 notification, or Icon 18  18px statement. Statement Statements consist of merely an icon and a Title short data summary. Summary statement or notification

Icon 18  18px Personal Intelligence / Ambience Mirror Design Guidelines 8/9 Scene Layer

Chart Modules

Last Night’s Sleep Your cycle Weight Skin 7:42 total sleep Low temperature 135.3 lbs You have moderate irritation 2:06 deep sleep 26 days since your last period Weekly average up 0.2 lbs from last week 1 wake up 137

L R

133

Yesterday’s Steps Heartrate Running Workout this Morning 12,324 total steps 55 resting average 5.01 km 8.2 km 145 max / 56 min 6'03" avg. pace 103 walking average 57 m elevation gain

145

56 Personal Intelligence / Ambience Mirror Design Guidelines 9/9 Scene Layer

Notification Modules

Email Twitter Today’s Headlines 5 unread Personal emails 3 replies The giant cow the internet loves 112 unread Work emails 1 direct message is not a cow. Mexico’s new president faces staunch divide. Events Facebook You have 6 events today. 4 comments The first one is from 9:00 – 10:30. 6 likes 2 messages

Statement Modules

You’re looking slightly dehydrated Hi Evie. Good luck on It’s currently 74° and dropping to a your chemistry test today! low of 62°. Light rain is expected. Nothing to worry about 2 new invitations Get to sleep by 10:30 to get 8 hours of sleep. You’re looking well today You slept 7:42 last night Take a deep breath. Today’s air quality is good.