hubspot-design-certification-1
hubspot-design-certification-1
hubspot-design-certification-1
hubspot-design-certification-1

What We Can Do?

We have a firm belief that people who work at Webdew enjoy being and working here, with great client teams and also enjoy practicing their expertise with a diverse group of people.
Acquire a smooth User Interface via growth-driven website for your business.
Empower brands via videos as it’s an ongoing strategy for any business.
Market your business globally and get the best business results.
Strategy to leverage the powerful tool HubSpot and see your business on top.
Refer to

webdew brand guidelines

Get all the branding information in one place to create brand specific designs

(4.8 out of 5 Ratings)
Based on 1000+ Reviews on
banner-img-2
 
  • Typography

  • Colors

  • CTAs

  • Logo

  • Grow Together

  • Illustrations

  • Icons

  • Graphic

Fonts

The type family for webdew is Proxima Nova.


Proxima Nova Light
abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
0123456789
Proxima Nova Regular
abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
0123456789

 

Proxima Nova Semibold
abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
0123456789
Proxima Nova Bold
abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
0123456789

 

Proxima Nova Extrabold
abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
0123456789
Proxima Nova Black
abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
0123456789

 

Typography Guidelines

Looking for font hierarchy? Our typography guidelines include H1–H6's, body copy, how to denote a link, micro copy, and micro headings on both white and color backgrounds.


Heading 1

Font-size: 54px

Font-weight: 'proxima_nova_rgbold'

Line-height: 1.4

Color: #33475b

The quick brown fox jumps over the lazy dog.


Heading 1 Hover

Font-size: 54px

Font-weight: 'proxima_nova_rgbold'

Line-height: 1.4

Color: #00A9FA

The quick brown fox jumps over the lazy dog.


Heading 2

Font-size: 32px

Font-weight: 'proxima_nova_rgbold'

Line-height: 1.4

Color: #33475b

The quick brown fox jumps over the lazy dog.


Heading 2 Hover

Font-size: 32px

Font-weight: 'proxima_nova_rgbold'

Line-height: 1.4

Color: #33475b

The quick brown fox jumps over the lazy dog.


Heading 3

Font-size: 28px

Font-weight: 'proxima_nova_rgbold'

Line-height: 1.4

Color: #33475b

The quick brown fox jumps over the lazy dog.


Heading 3 Hover

Font-size: 28px

Font-weight: 'proxima_nova_rgbold'

Line-height: 1.4

Color: #33475b

The quick brown fox jumps over the lazy dog.


Heading 4

Font-size: 24px

Font-weight: 'proxima_nova_rgbold'

Line-height: 1.4

Color: #33475b

The quick brown fox jumps over the lazy dog.


Heading 4 Hover

Font-size: 24px

Font-weight: 'proxima_nova_rgbold'

Line-height: 1.4

Color: #33475b

The quick brown fox jumps over the lazy dog.


Heading 5

Font-size: 18px

Font-weight: 'proxima_nova_rgbold'

Line-height: 1.4

Color: #33475b

The quick brown fox jumps over the lazy dog.

Heading 5 Hover

Font-size: 18px

Font-weight: 'proxima_nova_rgbold'

Line-height: 1.4

Color: #33475b

The quick brown fox jumps over the lazy dog.

Heading 6

Font-size: 16px

Font-weight: 'proxima_nova_rgbold'

Line-height: 1.4

Color: #33475b

The quick brown fox jumps over the lazy dog.

Heading 6 Hover

Font-size: 16px

Font-weight: 'proxima_nova_rgbold'

Line-height: 1.4

Color: #33475b

The quick brown fox jumps over the lazy dog.

Body Text

Font-size: 18px

Font-weight:'proxima_nova_rgregular'

Line-height: 1.4

Color: #33475b

The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.


Body Link

Font-size: 18px

Font-weight:'proxima_nova_rgregular'

Line-height: 1.4

Color: #33475b

The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.

 

 

 

Color Palette

 

Primary Color

  • Blue#00a9fa
  • Blue light#e0f5fe

 

Secondary Color

  • Tiffany Blue#00bda5
  • Tiffany Blue Light#eff9f8
  • Violet#6a78d1
  • Violet Light#f3f4ff
  • Marigold#f5c26b
  • Marigold light#fbf7ee
  • Coral#ff7a59
  • Coral light#fff8f6
  • Candy Apple#F2545B
  • Coral light#FCE3E5
  • Oz#00A4BD
  • Coral light#BDE1E5

 

Color Greys

  • Flat Earth#253342
  • Obsidian#33475b
  • Eerie#7c98b6
  • Battleship#cbd6e2
  • Koala#eaf0f6
  • White#ffffff

 

Gradients

  • guidelines_color-palette-gradient-1
  • guidelines_color-palette-gradient-1
  • guidelines_color-palette-gradient-1
  • guidelines_color-palette-gradient-1

 

Primary CTA

 

Secondary CTA

 

Resource CTA

  • resource-CTA-3
  • CTA-Card-with-Image
  • resource-CTA-1
  • resource-CTA-2

 

Blog CTA

  • blog-CTA-1
  • blog-CTA-2
  • blog-CTA-3
  • blog-CTA-4

 

Logo

 

The Logo

The webdew logo is the representing symbol of the company and the focal point of the brand. It is paramount and mandatory for everyone inside and outside the company to use this logo exactly as mentioned in the guidelines.

  

guidelines_the-logo-1

 

The Symbol

We sometimes use the webdew symbol on its own , instead of the full logo. Usually these are on platforms or channels where we have already established webdew as a brand.

There will be other instances where webdew will need a subtler representation or in a narrow space. In such cases, we will use this logo, in its full accuracy.

Instances where we can use the webdew logo symbol:

  

guidelines_the-symbol

 

Space/Size

Whenever you use the logo, make sure you ensure maximum exposure and legibility of the logo, by allowing an area of clearance around the entire logo.

  

Logo Appropriate Clearance

  

guidelines_logo-clearance

 

Symbol Appropriate Clearance

  

guidelines_the-symbol-1-1

 

Minimum Size

Never reproduce the Logo at a size smaller than these recommendations, as it will result in the loss of their impact and readability.

  • guidelines_logo-size-min

    The webdew logo should never be smaller than 162px in digital or 42.8625 in print.

  • guidelines_logoSmall-size-min

    The webdew logo should never be smaller than 42px in digital or 11.1125 in print.

 

Logo Use

 

Webdew logo

 

  • tick

    guidelines_approved-logo-1
    Yes
  • tick

    guidelines_approved-logo-2-1
    Yes
  • tick

    guidelines_approved-logo-3
    Yes
  • tick

    guidelines_approved-logo-4
    Yes

 

 

  • close

    guidelines_condemned-logo-1
    No
  • close

    guidelines_condemned-logo-2
    No
  • close

    guidelines_condemned-logo-3
    No
  • close

    guidelines_condemned-logo-4
    No

 

 

Symbol

 

  • tick

    guidelines_approved-symbol-1
    Yes
  • tick

    guidelines_approved-symbol-2
    Yes
  • tick

    guidelines_approved-symbol-3
    Yes
  • tick

    guidelines_approved-symbol-4
    Yes

 

 

  • close

    guidelines_condemned-symbol-1
    No
  • close

    guidelines_condemned-symbol-2
    No

 

Wordmarks

The webdew watermarks are logos for Webdew sub-brands, i.e, departments and teams. The systematic structure of our wordmarks ensure consistency throughout the company. You are not allowed to create team or department logos outside these specifications.

  
  • Center Aligned
    guidelines_wordmark-centered
  • Left Aligned
    guidelines_wordmark-left
  • One Line
    guidelines_wordmark-one-line

 

 

Compound Naming

Given that our brand is associated with any service or another brand, it should be made clear we do not encourage or tolerate compound naming in wordmark treatment. We believe it reduced the value or our brand name.

  • tick

    Group 29-2
    Yes
  • tick

    Group 29-1
    Yes

 

  • close

    Group 27-1
    No
  • close

    Group 27-2 (1)
    No

 

 

Grow Together

 

webdew Grow Together

 

  • Center Aligned
    guidelines_webdew-grow-together-centered
  • Left Aligned
    guidelines_webdew-grow-together-left
  • One Line
    guidelines_webdew-grow-together-one-line

 

Symbol Grow Together

 

  • Center Aligned
    guidelines_symbol-grow-together-centered
  • One Line
    guidelines_symbol-grow-together-one-line-1

 

Grow Together

  • Center Aligned
    guidelines_text-grow-together-centered
  • Left Aligned
    guidelines_text-grow-together-left
  • One Line
    guidelines_text-grow-together-one-line

*white and dark color variations should be use.

 

 

 

Illustrations

 

  • guidelines_sample-illustration-1
  • guidelines_sample-illustration-2
  • guidelines_sample_illustration_3
  • guidelines_sample-illustration_6
  • guidelines_sample-illustration-3
  • guidelines_sample-illustration-5

 

Sizing Guidelines

  • 300x300px is the standard (and largest available) illustration size for web
  • 100x100px is the smallest illustration size for web (do not drop below this size)
  • Offline illustration sizes may vary based on the size of the execution

 

Icons

 

  • guidelines_sample-icon-1-1
  • guidelines_sample-icon-2-1
  • guidelines_sample-icon-3-1
  • guidelines_sample-icon-4-2
  • guidelines_sample-icon-5-1
  • guidelines_sample-icon-6-1

For reference purpose please go to this https://www.flaticon.com/uicons and use uicons  regular only.

 

Sizing Guidelines

  • 40x40px is the standard (and largest available) icon size for web
  • 16x16px is the smallest icon size for web (do not drop below this size)
  • Offline icon sizes may vary based on the size of the execution

 

Graphic

 

Curve with White Background

  • shape-1

 

Dots with White Background

  • dots-with-white-background

 

Dots with Color Background

  • dots-with-color-background-1
  • dots-with-color-background-2
  • dots-with-color-background-3
  • dots-with-color-background-4