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

FreelanceCivilServices_logo
Screen Shot 2021-02-01 at 11.05.55 am

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

about-img-1

This has been saved as:

Image

  • This is the title
  • This is the title

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

 

What is a Frequently Asked Question?

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt.

What is a Frequently Asked Question?

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt.

What is a Frequently Asked Question?

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt.

What is a Frequently Asked Question?

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