Style Guide Outline


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.





Our primary font is Montserrat.

Available from google fonts:

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


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.




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




Content consist of a variety of different elements.
See below for a glossary of various elements


Mobile Content

For reference Mobile follows a specific stacking order:
Img/Video > Copy > Img



Standard vertical padding is 56px.
Padding follows the rule of being divisible by 8.
*Only applies to top and bottom




Buttons trigger actions and links.

Primary button:

Radius: 3px

Left/Right padding: 32px

Top/Bottom padding: 15px

Font size: 16pt

Font color: #333333

Font weight: 500

Bg color default: #00dcaf

Bg color hover: #00c5a8

Bg color active: #048369

Font color active: #ffffff

Secondary button:

Radius: 3px

Left/Right padding: 32px

Top/Bottom padding: 15px

Font size: 16pt

Font weight: 500

Bg color: #ffffff

Stroke: 1 px

Stroke color default: #333333

Stroke color hover: #048369

Stroke color active: #50505b

Font color: active: #ffffff