Depth

Every experience humans have throughout their lives takes place in a 3D space. Our brains are hardwired to navigate the world - whether digital or physical - spatially.

By using depth to fit OpenSail's digital identity into a space that seems to actually exist within your computer or phone, we can help users feel more at ease make it easier for them to find the information they are looking for.

introducing panes

Panes are a physical metaphor for a digital environment

Think of Panes as containers for various kinds of content.

Panes are designed to look like glass. They're opaque, so light can pass through them, yet they still cast a shadow on the surface below.

Panes are fluid in the way that they can resize to fit more or less content depending on what you need them to house.

Panes are lighter than air. They gently float off the website's backdrop, and have a weightless feel.

Properties of Panes

Background colour

Panes are designed to look like semi-transparent glass. The background colour should be set to a shade lighter than it's background.

BG Color: #dfe4ea
Border Radius

Rarely do objects in the physical world have perfectly square corners.

Objects with Rounded corners have a friendlier energy to them. They're not sharp, or dangerous. They're organic and positive.

Corner Radius: 32px
Border Colour

Panes have an extremely subtle 1 pixel border around their perimeter. It creates the illusion that they have a slightly chamfered edge, and helps make them look more part of the real environment.

Border Color: rgba(5, 26, 45, 0.12)

Elevation Level

Objects can exist on 2 different planes, which we refer to as elevation levels.

You can imagine Level 1 as being 1mm off the of the surface, where Level 2 is about a 1cm above Level 1.

The surface (the blue-grey background at the bottom of this page) is the bottom-most layer of Depth's environment.

There are two levels: Level 1, and Level 2.

Level 1
Distance: 0px
Blur: 4px
Size: 0px
rgba(5, 26, 45, 0.16)
Level 2
Distance: 0px
Blur: 32px
Size: 0px
rgba(5, 26, 45, 0.24)

It is possible for panes to overlap, but it is only recommended for stylistic or illustrative use.

Future Goal

Panes are made of an opaque, frosted, glasslike material. If two panes were to overlap each other, it would appear that whatever was on the lower pane would be blurred out.

Right now, it's an extreme challenge to get this effect to work within Webflow's environment, but in the future it would be interesting to see how this would look.