Overview

A unified platform experience that uses a normalized cross-device design system to enable more reach and future flexibility.

Elements

Button

Checkbox

Dialog

Loader

Avoid using loaders if you can

Here we grab average color of an image and then pulse and fade in the image when ready, no loader necessary

Types of loaders

Ellipsis

Use this whenever you can

Indeterminate Radial

Use this when queueing or whatever

Determinate Radial

Use this when progress is available

In situ

Here we present radial around an action

In 3d

Radio

Slider

Switch

Toast

Use a toast to communicate and reinforce the state of the spatial world. These messages should be light, glanceable and not require action.

Metrics

Conversion

1px = .1cm = .001m

1px = .039inches = .033ft

Distances

nearDistance .4meters

farDistance 1.2meters

Style

Colors

Main

Blue #2288FF

Red #FF6666

Green #22DD88

Skin Tones

Shirt Colors

Note Colors

Icons

You can see the reference here @material.io/icons

Material Icons

Use this for most everything.

Download Material Icons

Material Icons Outlined

Sometimes we'll use this if it's too thick looking

Download Material Icons Outlined

Type

Face

FF Real

New one comin' at ya

Download Real

Sofia Pro

Use this for most everything.

Download Sofia

FF Enzo [sorta deprecated]

We used to use this, but not so much anymore. Use if ya bored!

Download Enzo

Scale

Large

Medium

Small

Paragraph

Pour-over copper mug XOXO banh mi. Tumblr farm-to-table single-origin coffee gochujang. Yuccie hoodie flexitarian crucifix, mumblecore plaid biodiesel neutra mustache. Ethical vape jean shorts, pok pok glossier yuccie tbh cray. Lumbersexual asymmetrical narwhal listicle, snackwave poutine raw denim hammock kale chips af irony unicorn green juice bespoke. Chambray small batch seitan pabst paleo bicycle rights vinyl normcore. Keytar iceland mlkshk swag put a bird on it paleo PBR&B etsy raw denim church-key yuccie.

Logo

Download Logos View Source

Patterns

Context mode

Muting, presenting, and drawing are examples that enter a "Context mode" where a user is presented with UI that aids a current context. It also visually indicates the context you are in so there are no questions about the expected interaction.

Feedback

Hints

Carry

A simple drag allows a user to carry any object around the room easily. Carry auto-orients toward its beholder to reduce the need for tedious follow-on adjustments.

Grab

Closing your first performs a grab gesture allowing fine grain control over objects. If an object is far, it'll summon the object to the user.

Summon
Position + Rotation triggered by single grab

Resize
Position + Rotation + Scale triggered by two-handed grab

Lightbox

Get a closer look at something

Access content easily on any device with just a toss or lightbox.

Confidential