Heartbeat design principles

In general

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

In motion

div {
  transition: all 1s cubic-bezier(0.77, 0, 0.175, 1);

Nothing in nature moves in a linear manner, 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 our 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 the space around it.











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


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


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

Case studies

• Copy and images complement each other
• We use storytelling wherever 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 predominant black shade.


We allow ample freedom since this is a creative team we are talking about.

Need help with design & processes?