Ready to dive into the heart of our brand?

Here, you’ll find everything you need to create designs that scream “webdew” in the most captivating way possible. No more searching high and low for the right colors, fonts, and logos – it’s all right here.

Typography

Fonts in Typography

The Type Family for webdew is Playfair Display and Poppins.

Inter Light
abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
0123456789

Inter Regular
abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
0123456789

Inter Medium
abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
0123456789

Inter Semibold
abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
0123456789

Inter Bold
abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
0123456789

Inter Extra Bold
abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
0123456789

Typography Guidelines

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

Normal state
Hover state
Heading 1

Inter – Extra bold

Font size: 60px
Line height: 70px
Color : #253342

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

Inter – Extra bold

Font size: 60px
Line height: 70px
Color : #00A9FA

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

Inter – Extra bold

Font size: 54px
Line height: 58px
Color : #253342

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

Inter – Extra bold

Font size: 54px
Line height: 58px
Color : #00A9FA

The quick brown fox jumps over the lazy dog.

Heading 3

Inter – Extra bold

Font size: 36px
Line height: 45px
Color : #253342

The quick brown fox jumps over the lazy dog.

Heading 3

Inter – Extra bold

Font size: 36px
Line height: 45px
Color : #00A9FA

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

Inter – Bold

Font size: 36px
Line height: 45px
Color : #253342

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

Inter – Bold

Font size: 36px
Line height: 45px
Color : #00A9FA

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

Inter – Extra bold

Font size: 26px
Line height: 45px
Color : #253342

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

Inter – Extra bold

Font size: 26px
Line height: 45px
Color : #00A9FA

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

Inter – Bold

Font size: 26px
Line height: 45px
Color : #253342

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

Inter – Bold

Font size: 26px
Line height: 45px
Color : #00A9FA

The quick brown fox jumps over the lazy dog.
Body Text 1

Inter – Bold

Font size: 22px
Line height: 29px
Color : #253342

The quick brown fox jumps over the lazy dog.
Body Text 1

Inter – Bold

Font size: 22px
Line height: 29px
Color : #00A9FA

The quick brown fox jumps over the lazy dog.
Body Text 2

Inter – Medium

Font size: 22px
Line height: 29px
Color : #253342

The quick brown fox jumps over the lazy dog.
Body Text 2

Inter – Medium

Font size: 22px
Line height: 29px
Color : #00A9FA

The quick brown fox jumps over the lazy dog.
Body Text 3

Inter – Bold

Font size: 20px
Line height: 23px
Color : #253342

The quick brown fox jumps over the lazy dog.
Body Text 3

Inter – Bold

Font size: 20px
Line height: 23px
Color : #00A9FA

The quick brown fox jumps over the lazy dog.
Body Text 4

Inter – Medium

Font size: 16px
Line height: 20px
Color : #253342

The quick brown fox jumps over the lazy dog.
Body Text 4

Inter – Medium

Font size: 16px
Line height: 20px
Color : #00A9FA

The quick brown fox jumps over the lazy dog.

Colors

Primary Color

Our primary color is the bold and dependable Blue, representing trust and professionalism.

 
Blue
#00A9FA
 
Blue Light
#E0F5FE

Secondary Color

In addition to our powerful primary blue, we’ve carefully curated a palette of supporting hues that bring nuance and depth to our brand.

 
Dark Blue
#001233
 
Azure blue
#007FFF
 
Pacific Blue
#00A4BD
 
Pacific Light
#BDE1E5
 
Turquoise
#00BDA5
 
Sky Light
#EFF9F8
 
Violet
#6A78D1
 
Violet Light
#F3F4FF
 
Marigold
#F5C26B
 
Pale Beige
#FBF7EE
 
Coral
#FF7A59
 
Coral Light
#FFF8F6
 
Green
#17A700
 
Lime Green
#45B933
 
Mint Green
#74CA66
 
Celadon
#A2DC99
 
Pale Mint
#D1EDCC
 
Minty White
#EDF8EC
 
Salmon Pink
#F5767C
 
Coral Pink
#F7989D
 
Rose Quartz
#FABBBD
 
Blush Pink
#FCDDDE
 
Off-white
#FEF9F9

Grey Colors

Adding balance and sophistication, our shades of grey provide a backdrop for our vibrant colors.

 
Flat Earth
#253342
 
Obsidian
#33475B
 
Eerie
#7C98B6
 
Battleship
#CBD6E2
 
Light Grey
#E2E2E2
 
Koala
#EAF0F6
 
Arctic Mist
#F7FAFC
 
White
#FFFFFF

Gradient Colors

These dynamic combinations of colors are in the shades of blue-white and green-white. They add a touch of modernity and innovation to our designs.

#000000
45deg
#000000
wew
wew
#D1EDCC
#F2755B 84% #F3555C 84% #4109C2 84%

New Colors

 
Bright orange
#FDA50F
 
Bright yellow
#FCE205
 
Purple
#800080
 
Deep violet
#8724A3
 
Pale purple
#8F49C8
 
Green
#009C34
 
Turquoise
#24B991
 
Mint green
#8FDAA8
 
Lime green
#B4E43C
 
Salmon
#F2545B
 
Light coral
#F2755B
 
Indigo blue
#4109C2
 
Deep pink
#B72495

Icons

Only regular outline icons from Flaticons.com to be used

New Icons

Sizing Guidelines

* 40px x 40px is the standard (and the largest available) icon size for web.

* 16px x 16px is the smallest icon size for web (Note: Do nor drop below this size).

Offline icons sizes may vary based on the size of the execution.

Graphics

Curve with white background

Graphics with curves: Elevating our visuals with the elegance of a white background.

Dots with white background

Adding a touch of sophistication to our visual storytelling.

Circular Rings

Circular Rings in our brand colors: Where artistry and brand identity seamlessly intertwine.

Elements

Buttons

Normal State
Let’s talk
Font-size 18px Color: #ffffff Border radius 10px Background color: #00a9fa Border color: #00a9fa Border width 2px
Hover State
Let’s talk
Background color: #e0f5fe Border Color: #00a9fa
Order now
Font-size 18px Color: #00a9fa Border radius 10px Background color: Transparent Border color: #00a9fa Border width 2px
Order now
Background color: #00a9fa Color: #ffffff
Read more
Font-size 16px Color: #001233 Font-weight 700
Read more
Color: #00a9fa

Accordion (FAQs)

Font-size 18px Font-weight 700 Border radius 5px Border color #eeeeee Active border left color #00a9fa Border : 1px 1px 1px 2px

To determine how long it will take to create a video, we need to consider the specific type and complexity of the video. We can provide an estimated range of completion dates when we offer a quote for the project. The final turnaround time will be established upon signing a contract and securing a place in our production schedule. Please note that the turnaround time may be affected by our current workload and the speed at which we receive feedback from you, the customer.
Reach out to us immediately to discuss the details of how this process will work for you specifically.

To determine how long it will take to create a video, we need to consider the specific type and complexity of the video. We can provide an estimated range of completion dates when we offer a quote for the project. The final turnaround time will be established upon signing a contract and securing a place in our production schedule. Please note that the turnaround time may be affected by our current workload and the speed at which we receive feedback from you, the customer.

To determine how long it will take to create a video, we need to consider the specific type and complexity of the video. We can provide an estimated range of completion dates when we offer a quote for the project. The final turnaround time will be established upon signing a contract and securing a place in our production schedule. Please note that the turnaround time may be affected by our current workload and the speed at which we receive feedback from you, the customer.

Accordion (Process)

Font-size 18px Font-weight 700 Border radius 6px Border color #e0e8f0 Border : 1px 1px 1px 1px Active title color: #00a9fa

We kick off the video-making adventure by sitting down with you. We want to understand your video’s mission. Are you aiming to educate, sell, or entertain? Your wish is our command!

Next, we dive into crafting a script that’s more than just words; it’s a recipe for success. We’re talking humor, creativity, and a pinch of personality. It’s like adding sprinkles to a cake – it makes all the difference.

Once the script gets the green light, our storyboard artists get busy. They sketch out a visual roadmap that’s like a treasure map for your video. Every shot, every angle – it’s all meticulously planned.

Now, it’s time for our talented editors and animators to work their magic. They transform the storyboard into a visual masterpiece. Every frame is a work of art, ensuring visual delight.

Last but not least, we add the finishing touches. Think music that sets the mood, sound effects that add depth, and color correction to make your video pop. And guess what? We always deliver on time!

Info boxes

Employee Onboarding Video

Welcome new team members with a red carpet experience, minus the paparazzi.

Background color #f7fafc Background color on hover #001233 Background opacity on hover 22%
Inbound Consulting

Get expert consultancies that will elevate your marketing practices.

Background color #ffffff Background color on hover #001233 Background opacity on hover 22%

Intelligence Exchange

Intelligence Exchange partnered with webdew for an informative whiteboard animation video.

Read more
Border radius 10px Border width 2px Border color #edf2f7 Hover box-shadow 0px 4px 30px 0px rgba(0, 0, 0, 0.1)

Rich Bergman

Owner, Decksgo

“webdew delivered an outcome beyond the client’s expectations. The team maintained communication through online chat. Above all, their creativity, work quality, and promptness were the highlights of the collaboration.”

Border radius 10px Border width 2px Border color #edf2f7 Hover box-shadow 0px 4px 30px 0px rgba(0, 0, 0, 0.1)

Forms

Videos

Border radius 10px

Videos content boxes

How-to Tutorial Video

Learning should be fun, right? Our How-to Tutorial Video combines education with entertainment.

Order now
Border radius of video 10px

Veronica Bishop

Content writer & developer Bishop Content Studio

“We worked with webdew over the past several months to create a series…”

Border width 2px Border color #edf2f7 Hover box-shadow 0px 4px 30px 0px rgba(0, 0, 0, 0.1)

Pros & Cons Block

Color Code: #00bda5
Color Code: #f2545b

Pros

  • It has a user-friendly and intuitive interface.
  • It has provided services to more than 100 email clients, supported.
  • There is a free trial available
  • It provides support to over 100 email clients.

Cons

  • Its variety of features can make it overwhelming sometimes.

  • Its variety of features can make it overwhelming sometimes.

List Items

  • Bespoke editors will work closely with you to understand your goals and preferences.
  • They will take the time to understand your target audience and create a video that resonates with them.
  • Whether you need a promotional video, a product demonstration, or a training video, this type of editing can help you achieve your desired results.
  • The editor will also ensure that the video is properly paced and has a clear storyline that communicates your message effectively.

AB Notice Block

Color Code: #00a9fa

What sets this video apart

The seamless integration of 3D animation to show the process of making 3D animation makes it overall aesthetic. This impacts the animation studio and how prospects get attracted to the kind of work they do. 

Based on 1000+ Reviews on