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 {
  transition: all 1s cubic-bezier(0.77, 0, 0.175, 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.

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.



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.











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


• 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


• 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.


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


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