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
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
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:
H2 - Heading
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:
H3 - Heading
This has been saved as:
Button
This has been saved as:
Button Link
This has been saved as:
Dual Buttons
This has been saved as:
Image
This has been saved as:
List Icons
Lesser Used Modules
Title
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt.
This has been saved as:
Info Box
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt.
This has been saved as:
Frequently Asked Questions
This has been saved as:
Testimonials
This has been saved as:
Gravity Form