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
#00A9FABlue Light
#E0F5FESecondary 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
#001233Azure blue
#007FFFPacific Blue
#00A4BDPacific Light
#BDE1E5Turquoise
#00BDA5Sky Light
#EFF9F8Violet
#6A78D1Violet Light
#F3F4FFMarigold
#F5C26BPale Beige
#FBF7EECoral
#FF7A59Coral Light
#FFF8F6Green
#17A700Lime Green
#45B933Mint Green
#74CA66Celadon
#A2DC99Pale Mint
#D1EDCCMinty White
#EDF8ECSalmon Pink
#F5767CCoral Pink
#F7989DRose Quartz
#FABBBDBlush Pink
#FCDDDEOff-white
#FEF9F9Black
#000000Grey Colors
Adding balance and sophistication, our shades of grey provide a backdrop for our vibrant colors.
Flat Earth
#253342Obsidian
#33475BEerie
#7C98B6Battleship
#CBD6E2Light Grey
#E2E2E2Koala
#EAF0F6Arctic Mist
#F7FAFCWhite
#FFFFFFGradient 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.
45deg
#000000
wew
#D1EDCC
New Colors
Bright orange
#FDA50FBright yellow
#FCE205Purple
#800080Deep violet
#8724A3Pale purple
#8F49C8Green
#009C34Turquoise
#24B991Mint green
#8FDAA8Lime green
#B4E43CSalmon
#F2545BLight coral
#F2755BIndigo blue
#4109C2Deep pink
#B72495Logos
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.
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 :
Size
Whenever you use the logo, make sure you ensure maximum exposure and legibility of the logo, by allowing an are of clearance around the entire logo.
