Style Guide Outline

Card

Cards are containers to show content or actions relevant to an app or certain function. They are always the top layer when They are shown in any layout. They can contain other components as part of them, also can have multiple behaviours depending on how they are used in a flow. They appear from the bottom and can be scrollable or fixed depending on their type.

Fixed Card

Usage
Anatomy
Specs

A dialog card is a dismissible card used seek or provides feedback in case of an alert. They can also provide choices and ask for text input. Dialog cards are used to show alerts, choices or text entry. They can contain any component based on requirement. They are always top layer in any screen or on top of a notch or fixed card and always dismissible using the cross icon button.

Dialog cards consist of multiple components but the base container remains the same. The height of a dialog card depends on the content they hold and cant be pulled or dismissed with a swipe. They consist of two base components, the card container and the cross icon button(fixed position on the top left corner), the rest is customizable based on requirements.

Mandatory Elements

1. Small Sub-Headline
2. Main Headline
3. Body Copy
4. Image

Following are the specifications for dialog card component.

Spacing

Text

Dimensions

Typography

Our primary font is Montserrat.

Available from google fonts:
https://fonts.google.com/specimen/Montserrat
Used for headlines, subheads and display

Click here for the type scale source.

h1-Montserrat 54px line height: 1.5 em weight: 500

h2-Montserrat 38px line height: 1.5 em weight: 700

h3-Montserrat 28px line height: 1.5 em weight: 500

h4-Montserrat 21px line height: 1.5 em weight: 700

h5-Montserrat 16px line height: 1.5 em weight: 100

h6-Montserrat 12px line height: 1.5 em weight: 700

p-Open sans 16px line height: 24px weight: 100

Colors

The Halo green and Electric yellow are the primary brand colors. They are used mainly for ui elements and typography as accents on dark neutral backgrounds.

#00ffcc

#00dcaf

#f0f014

#f0f0f5

#50505b

#000000

Spacing

Container

Containers support all content containers. Best practices consist of picking one of three max-width sizes. Then setting your margins to auto. This centers the content containers.

Full Width

Desktop
1200px

Mobile
900px