Overview
Future platform stuff for spatial that will be much more harmonious
Metrics
Logo
Use these logos according to the circumstances fig-svg
Grid
hit the 16 or the 8 on the grid in that order.
even multiplier is better (8*4=32 vs 8*5=40)
fig-svg
Spacing
use these spacing metrics for general spacing between content. Use gutters for margins on the outside of of the page(think modal margins or page margins)
Responsiveness
There are 3 categories of responsiveness for Menus: Side Panels, Full Screen Menus, and Non-Full Screen Menus
Style
Type
Our headlines are now fresh and bold with Real Head Pro or ff-real-headline-pro, try using the thickest weight @ Black. Since headlines are bold, we bring more contrast to other body type where we use regular weight and the Real Text Pro or ff-real-text-pro family that provides more legibility.
Writing Guidelines
With such cool type developed by Yoonwoo, here are some rules on how we should use them letters together. If you remember anything, remember this: be specific, be concise, avoid redundancies, and make our happy Spatial community smile!
Icons
We use Material Icons Outlined for a more modern and thin look. If there's a specific need requiring a filled in icon (eg: pinned vs unpinned states) feel free to use the normal set which provides filled versions. You can see the reference @ material.io/icons.
Colors
Colors belong to brands on our platform, that's why for the most part we stick to pure black and pure white. We throw in some hints of red and blue but never too much.
Shadows
Shadows should cast straight down and should feel as if it's lifting off the ground. The blur size is always twice the y-offset.
see spec
fig-svg
Borders
Generally, modals and panels should have 16px border radii. Smaller elements like containers and input fields should have 8px border radii, and suuuper small stuff like tooltips and toasts should have 4px border radii. Isn't radii a weird word though? see spec fig-svg
Elements
Input Fields
I know these input fields look complicated, but it's actually really easy to use. There are a lot of states for the purposes of providing clearer mocks, but the primary states are unselected, activated, disabled, and error. Only use hints if absolutely necessary.
Forms
Like input fields, input forms also have the main states of unselected, activated, disabled, and error. However, unlike input fields, forms have an underlying grouping mechanism. Use autolayout to combine form blocks to make one giant input collection artifact. It's like legos, but for adult-use.
Containers
And... like forms, containers... well... containers seem really complicated just like input fields, and they group together like input forms. These container elements can be buttons, they can be dropdown lists, they can be toggles, they can be anything. They're containers. And they're commonly found in panels.
Buttons
Buttons follow the same base 8 format in terms of padding.
Tabs
There are two types: Vertical Tabs , Horizontal Tabs. Both of which follow a base 8 format in terms spacing and padding.
Tooltip & Toast
There are three different types of tool tips and toasts as listed below.
Overflow
Drop downs follow the same base 8 format for both spacing and padding.
Dropdowns
Drop downs follow the same base 8 format for both spacing and padding.
Things to note:
- Unavailable options are shown at 50% opacity.
- The options provided within the dropdown match the font weight and style of the main option.
Banner & Notification
You can see the basic size spec of banner & notification in the slide below. If you need some additional rules, please click "see spec" to check it.
Sliders
There's not much to sliders, and they're currently only used in the object transform panel and the avatar customization panel. When you do use sliders, make sure to fill the knob with whatever color the color of the bar underneath it is.
Components
Modals
Modals are scary. And they should scare you. Except they shouldn't, because they're actually really easy to use. Just search for modals in our component library, and you can choose between modals for web vs mobile. From there, you can choose whether or not it's a blocking modal (close button or not), whether there's an image, and whether there's one, two, or a bajillion buttons.
Menus
There are four different types of Menus: Full Screen , Modal , Dropdown, and Overflow.
Things to Note
- Full Screen Menus: Breakpoints are dictated by columns. There is a
Min of 2 columnsand aMax of 4 Columns. Excluding the homepage which can resize to fit any # of Spaces. - Non Full Screen Menus: Are set to a fixed width of
564px(480px + 42px padding). 480px is on average about 1/3 of screen space for most screens today.
-For Greater Detail Here are the Specs
Side Panels
Side Panels fill 1/4 of the users screen space with a min-width of 320px and a max-width of 480px. An important distinction between Sidepanels and Menus is the direction of focus. Menus consume all of the user's focus while side panels balance providing the user information while still allowing them to see their space.
Thumbnails
Thumbnails are always within a 2:3 Ratio as well as have a min-size of 240px x 160px and a max-size of 360px x 240px. If the thumbnail passes either one of those constraints a column of thumbnails is to added or removed.
-See specs for greater detail. fig-svg fig-svg
Canvases
Home
Home is Live Explore, in layman terms, is the homepage of Spatial.io. There are two states to the Live Explore page: Logged-out and Logged-In. Both states emphasize two primary sections, the featured unit (curated by Spatial), and the gridded space section beneath (dynamically sorted).