Digital Style Guide

This style guide will outline the design parameters to ensure there is consistency throughout the website.

Overall Theme Style

Light Theme

Light Backgrounds

Dark Text

Dark Theme

Dark Backgrounds

Light Text

SELECTED

Mixed Theme

Contrasting Rows

Breaking up sections

Typography

HEADINGS: Mukta

Mukta is a Unicode compliant, versatile, contemporary, humanist, mono-linear typeface family available in seven weights, supporting Devanagari, Gujarati, Gurumukhi, Tamil and Latin scripts. This type family is a libre licensed version of Ek's self-titled multi-script project, an ongoing effort to develop a unified type family for each Indian script. The goal is to build one harmonious family across all Indian scripts without letting the visual features of one script dominate over others. This ensures that the fonts can be used successfully for both single and multi-script purposes.

Mukta was designed by Girish Dalvi and Yashodeep Gholap. Mukta Vaani was designed by Noopur Datye and Pallavi Karambelkar with support from Sarang Kulkarni and Maithili Shingre. Mukta Malar was designed by Aadarsh Rajan. Mukta Mahee was designed by Shuchita Grover and Noopur Datye.

Ek would like to thank Vinay Saynekar, Santosh Kshirsagar, Shubhanand Jog, Yogesh Jahargirdar, Pradnya Naik, Snehal Patil, Omkar Shende and Dave Crossland for their suggestions and feedback during the font design process. Ek would also like to thank faculty and friends from the Industrial Design Centre, IIT Bombay, and from Sir J J Institute of Applied Art, for their support and encouragement.

This project is led by Ek Type, a collective of type designers based in Mumbai focused on designing contemporary Indian typefaces. To contribute, see github.com/EkType/Mukta

BODY FONT: Roboto

Roboto has a dual nature. It has a mechanical skeleton and the forms are largely geometric. At the same time, the font features friendly and open curves. While some grotesks distort their letterforms to force a rigid rhythm, Roboto doesn't compromise, allowing letters to be settled into their natural width. This makes for a more natural reading rhythm more commonly found in humanist and serif types.

This is the regular family, which can be used alongside the Roboto Condensed family and the Roboto Slab family.

To contribute, see github.com/google/roboto

License

These fonts are licensed under the Open Font License.

You can use them freely in your products & projects - print or digital, commercial or otherwise. However, you can't sell the fonts on their own.

This isn't legal advice, please consider consulting a lawyer and see the full license for all details.

Colours

LIGHT

PRIMARY

#e80d0d

LIGHT

SECONDARY

#ff924f

LIGHT COMP

#ecead9

PRIMARY

#ba0c0c

SECONDARY

#e36a20

DARK COMP

#37202b

DARK

PRIMARY

#750202

DARK

SECONDARY

#ad5216

Padding and Margins

Element Padding

Padding is the space that's inside the element between the element and the border.

div {
padding: 20px 20px 20px 20px;
}

Element Margin

The CSS margin properties are used to create space around elements, outside of any defined borders.

p {
margin: 20px 20px 20px 20px;
}

Row Padding

Row Padding is the space that's inside the row between the row and the next row.

div {
padding: 60px 30px;
}

Border, Border-radius & Shadows

Border

The CSS border properties allow you to specify the style, width, and color of an element's border.

div {

border: none;
}

Border Radius

The border-radius property defines the radius of the element's corners.

#element {
border-radius: 4px;
}

Shadows

The box-shadow CSS property adds shadow effects around an element's frame. You can set multiple effects separated by commas. A box shadow is described by X and Y offsets relative to the element, blur and spread radius, and color.

#element {
box-shadow: none;
}

Recurring features

Highly Used Modules

Title

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

This has been saved as:

H1 - Heading

Title

This has been saved as:

H2 - Heading

Title

This has been saved as:

H3 - Heading

Click Here

This has been saved as:

Button

Click Here

This has been saved as:

Button Link

Button 1

Button 2

This has been saved as:

Dual Buttons

This has been saved as:

Image

This is the title
This is the title

This has been saved as:

List Icons

Lesser Used Modules