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.

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 the 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 in the 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 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.

Pictures

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

Exclusions

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