Context

These are the elements that help put nice finishing touches on the edges and corners of the visual elements of your Web App. And mostly nobody likes edges that scratch, right? Well, apart from cats. We're just not sure if they order online (yet).

Border radius

This property is used to round the corners of an element's outer border edge.

Inputs

• Used for outlined text inputs
• Default value: 8px

Cards

• Cards and surfaces that display content and/or actions. Cards can have elements on top of them like images, texts
• Default value: 8px

Dialogs

• Used for a popup, a container that is displayed on top of your content and page)
• Default value: 16px

Images

• Used on any image except the images that take full width of the website or a container)
• Default value: 8px

Line

Line defines a color for any divider lines used on the interface. The lines are used to visually separate smaller blocks of data. Usually, the smaller blocks refer to the same type of information. It has two different variants, default and passive. They have two values: color of the line and its transparency.

Default

Appropriate when dividing elements on lighter surfaces.
Default values:

• Color: #2C2C31
• Opacity: 6%

Passive

Appropriate when dividing elements on darker surfaces and/or dividing larger sections in a page.
Default values:

• Color: #2C2C31
• Opacity: 20%

Shadows

The main use of shadows is to elevate two surfaces along the z-axis. Larger shadows means bigger elevation from the surface on the z-axis - the vertical one (up/down). 
On the other end, focus shadow is used as a border that indicates which element is selected. This is especially useful for Users with certain sight conditions, who use keyboards to navigate around the app. 

The only value that will affect your branding is the color of the focus shadow. The color should use the values of your primary color. We do not recommend changing any other default as they are finely tuned to enhance functionality.

Shadows are defined by 6 properties:

• X Offset: Pushes the shadow on the X-axis (left/down)
• Y Offset: Pushes the shadow on the Y-axis (right/down)
• Blur: simply, blurs the shadow. Simulates the distance of the surface from the light source. The bigger the blur, the lighter shadow’s outer part is
• Spread: Contrasts the shadow in all directions. Just like blur, contrast and spread are in direct correlation
• Color: Defines the color of the shadow
• Opacity: Defines the transparency of the color property

Usage: Hover states, Card, Modal, Directory containers, Navigation

Shadow Short

Default values: 

• X: 0
• Y: 2
• Blur: 4
• Spread: 0
• Color: #2C2C31
• Opacity: 10%

Shadow Long

Default values: 

• X: 0
• Y: 4
• Blur: 10
• Spread: 0
• Color: #2C2C31
• Opacity: 15%

Shadow Focus

Default values: 

• X: 0
• Y: 0
• Blur: 0
• Spread: 2
• Color: #F2613D
• Opacity: 100%