Heartbeat design principles

In general

It is all about simplicity. We focus our emotional message on lightness freedom and ease. We are playing with space, objects, story, motion principles, limitation, and harmonization.

In motion

div {
-webkit-transition: all 600ms cubic-bezier(0.86, 0, 0.07, 1);
transition: all 600ms cubic-bezier(0.86, 0, 0.07, 1); }

Nothing in nature moves linearly from one point to another. An aesthetically pleasing animation is the result of right easing. We love when animated objects act close to real-life. We tend to perceive what we expect to perceive.

You can check the exact easing we use and many other variants. We’ve also uploaded our animation on Codepen.

At its heart

Green shape is the main character in our story. It is fast, proactive and ready to adjust. It clearly defines the core values and responsibility of the Agency.

Spacings

8pt

All spacing we use are the multiple of 8: 8 / 16 / 24 / 32 / 40 / 48 /... 8*n.

You can use 4 on a very exceptional basis.

• The spacings have their logic — two unrelated things must be far away.
• Layouts need to breathe.
• The bigger the object, the bigger space around it.

Colors

80%
White
#fff
10%

Brand

#62e6ac

10%

Black

#191919

1%

CTA

#ff8c5f

• Overall color proportions 🔝
• CTA color is different from others

Illustrations

• Chaotic at first glance, but precise in details
• #62e6ac as background for back
• Smaller elements on background are #fff with black 2px border
• Copy is #191919

Content

• Use 40-60 symbols in a line of text
• All font sizes are defined it the guide — follow the guide
• Provide enough space between paragraphs

Case studies

• Copy and images complement each other
• We use storytelling where possible.
• Spacings may look chaotic.
• But that’s not true.
• Unlimited amount of elements possible.
• But with limited styles and fonts.
• It's all about the little things.

Pictures

All avatars and pictures of Heartbeat Crew are black and white with the black shade.

Exclusions

We allow more freedom, as we are speaking about the creative website.