Confidential

spatial logo

9:06pm 4/02/24

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.

Style

Colors

Blue #2288FF
Red #FF6666
Green #22DD88

Type

Face

FF Enzo

Use this for titles and big bold headers

Download Enzo
Sofia Pro

Use this for paragraphs, buttons, and all else.

Download Sofia

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

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.

Touch 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

Delete

Share

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

Menus

Spaces menu

Dock menu

Content menu (delete, lightbox)