design principles
2020

Building a cohesive brand made easy with a design system

Logo Usage

Produck's logo associates the word “product” and a duck, but not just a fluffy duck, a powerful duck, taking off in flight.

What does Produck mean?

We wanted to create a brand that is memorable, fun and powerful. In order to do  this, we’ve played with the word “product” and associated it with ducks. But we didn’t want a fluffy duck, we wanted to show a powerful duck, taking off in flight. That’s how Produck’s name and logo was created.

Use blue/Black
Don’t switch colors
about our essence

Combining the duck and a “P” (from Produck) with a mighty duck icon to create a powerful brand that shows Produck’s voice and character: it’s not just a duck, it’s a pro-duck!

Logo Sizes

Typography

Primary Typography

Lato Black
Lato Bold
Lato SemiBold
Lato Medium
Lato Regular
Lato Light
Lato Thin
Lato Hairline

Text Styles

HEADLINES

Font-size: 56px
Line-height: 68px
H1 Header

Font-size: 36px
Line-height: 48px
H2 Header

Font-size: 22px
Line-height: 36px
H3 Header

Font-size: 20px
Line-height: 36px
H4 Header
Paragraph

Font-size: 18px
Line-height: 32px
Title/Subtitle

Font-size: 16px
Line-height: 28px
Parragraph

Font-size: 14px
Line-height: 20px
Tags

Font-size: 12px
Line-height: 20px
Impressum
testing area
Your team deserves to be more successful!

The project management tool teams use to stay organized, avoid delays, and have time for the work that matters most.

Cross-project tasks

Perfect for when your team has different departments that share some tasks, such as your engineering and success teams.

Colors

Produck is designed with the base colour blue. This colour is associated with trust and reliability and provides security and stimulates productivity.

main color
Blue Produck
Hex: #2693FF
secondary color
Light Blue Produck
Hex: #E8F4FF
secondary color
Light Blue Produck
Hex: #67CDFF
gray scale
Hex: #202326
RGB (38,147, 255)
Gradients
Hex: #4DC4FF
Hex: #2693FF
Hex: #FFFFFF
Hex: #F4F6FA

Layout

desktop
Tablet
MOBILE