buy now

style guide

about smart beat

intended purpose

Smart Beat develops software that reads vital signs using just a camera—no wearables or contact of any kind.

Its first product, a video baby monitor with breath detection, tracks breathing by measuring the change in pixel color each time the baby’s body moves.

Breathing status and HD video stream to the Smart Beat app, which notifies parents if breathing is too fast or too slow, or stops.

how it works

Can you identify more than 16 million shades of color?Smart Beat can.

That’s why Smart Beat can detect movement too small to be seen by the human eye, like the inhale and exhale of a swaddled newborn.

to use smart beat

1. Place the camera at the corner of the crib or bassinet where the baby is sleeping.

2. Monitoring starts automatically.

3. See the HD video feed and real-time breathing status on your smart phone or tablet.

4. If there is a problem, Smart Beat will sound the alarm.


nate ruben

“knowing that our son was at high risk for sudden infant death syndrome, my beautiful wife woke five or six times a night for the next six months to check for breathing. the lack of sleep triggered a severe episode of postpartum depression.”

In 2012, their first child was born four weeks premature, and Nate and his wife Sarah had the bittersweet experience of seeing him tied to monitoring machines for his first days of life.

Little did they know, that was just the beginning.Knowing he was at high risk for Sudden Infant Death Syndrome, Sarah woke every two hours for six months to check for breathing, the lack of sleep triggering a severe episode of postpartum depression.

An engineering student at the time, Nate knew there had to be a better way, so he started working on a camera that could read and report his son's breathing so that Sarah could sleep.


smart beat is... encouraging, empathetic, sincere, trustworthy, reliable, validating, honest.

smart beat is not... judgmental, cold,  forceful,  stressful,  deceptive.

get personal

Where possible, Smart Beat copy should address the customer as if  they were talking directly to them, using “you” and “your”.

Never refer to Smart Beat in the first person “I understand how you feel” or “we can help”.

Instead, say: “Smart Beat is made with your needs in mind” or “Smart Beat can help” (example A).

To relate to the customer and make them feel understood, headlines to sections or pages should be short and relatable where possible (example B).

All headlines are typed in lower-case (see page 14) to feel more approachable.

Keep in mind – despite trying to be empathetic and trusted by the customer, Smart Beat should always sound like a reliable and professional source. Use correct terminology and don’t use slang.


There’s a lot for a parent to do, and validation is everything. Smart Beat believes in parents, and encourages them to make sure to take care of themselves. Smart Beat can help with that process of self-care.

believe in the customer

In the situation of new parents, helping them feel confident in their abilities as parents is crucial in appealing to them. Try to end each message with something encouraging (example D) or something that will ease their angst. In live interactions with customers (customer service phone calls, conferences, etc.), never imply that they would be a bad parent for not using the product/if something went wrong with their product. This will only make them turn away. Instead, help them feel like you believe that they will make the best decision as a parent.

keep calm & buy smart beat

No overwhelmed caretaker needs to feel pressured or obligated to do anything. That’s why Smart Beat doesn’t use exclamation points or all caps in order to get attention. Instead, keep the writing soothing and simple. Hit only one important point at a time, don’t use language that is desperate for a sale (example C).

brand colors

Utilizing the brand colors is key to creating a recognizable brand. Everything that belongs to the Smart Beat brand should include these color guidelines. The teal and light blue are trustworthy and calm. The red and light pink are warm and more energetic than the blues. The grays are key players as neutrals.


RGB: 0, 183, 189
CMYK: 74, 0, 29, 0 @ 100%

light blue

RGB:184, 221, 225
CMYK: 20, 0, 7, 0 @ 100%, 40%


RGB: 221, 121, 117
HEX: DD7975
CMYK: 0, 68, 51, 0 @ 100%

light pink

RGB: 234, 190, 175
CMYK: 1, 26, 21, 0 @ 40%, 15%

medium gray

RGB: 124, 135, 142
HEX: 728089
CMYK: 33, 18, 13, 40
@ 100%, 60%

light gray

RGB: 208, 211, 212
CMYK: 7, 3, 5, 8
@ 100%, 40%

importance colors

Importance colors are used sparingly, so that when they are used, the elements which they color are brought to the customer’s attention.

They stand out against the lighter color background elements and are more legible. They should not be used as background elements.

Teal should be used for the logo, icons, primary buttons, “good” indicators in the Smart Beat app, and some headers as needed.

Red should be used for icons, secondary buttons, “bad” indicators in the Smart Beat app, and some headers as needed. Red should not be seen as a color that always indicates that there is something wrong, so feel free to use it as a secondary attention-grabber in things outside the app.

Medium gray should be used for most headers and all body text, as well as line decorations (can be used to underline headers or point the viewer’s attention to specific objects).

Importance colors should never be paired together, such as alternating teal and red icons. Each section of a design (for example, sections on the website) should have only one importance color at a time.

supplementary colors

Supplementary colors are used generously, as they are the building blocks of the brand’s designs. They are light and easy on the eye, so that they are not too overwhelming to the customer.

Light gray should be used as a background color. It should never be used as the color for body text, headers, or icons. It is too light to be legible.

Light pink and light blue should also be used as background colors, and likewise should not be used for body text, headers, or icons.

Pair two supplementary color blocks together for interest in the design, but do not pair blocks of importance colors with supplementary colors.


The stylization of how text is displayed is extremely important to maintaining Smart Beat’s refined brand image.

basic type rules

Avoid orphan words. If a line contains only a single word, increase or decrease tracking to correct.

Avoid splitting the brand name between lines. If Smart and Beat are on different lines, force a line break before Smart.

Avoid center-aligned text. Use left align when possible, and a right align if not.

Do: Use just one “ing”: breathing monitor, breath monitoring.
Don’t: Use two “ing”s or no “ing”s: breath monitor, breathing monitoring.
Exceptions: Breath detection, monitoring breathing.

Do: Use periods at the end of sentences only, not phrases.

Do: Use punctuation outside of quotation marks. I.e. Click “start monitoring”.
Don’t: Click “start monitoring.”

Don’t: Use contractions unless it is on purpose (to be casual/friendly, like on social media.)

type styles

Headers are to always be in Montserrat Alternate, either semi-bold or bold. Never capitalize headers (h1, h2, h3), except for acronyms and the word “I”. This is a piece of Smart Beat’s branding that shows approachability, and ties back into the logotype. Body text should be capitalized as normal.

Never use all capital letters in text. Many companies use this to grab the viewer’s attention, but at Smart Beat we understand that our style is neither aggressive nor abrasive.

Instead, try other styling options to bring the customer’s eyes to your goal.

type settings


Headers can be dark grey, dark red or teal (depending on context), or white if the text is on top of a dark background.


montserrat alternates semibold emphasis
58 pts. 50pt tracking, 69pt leading.


montserrat alternates semibold emphasis
52 pts. 50pt tracking, 58 pt leading


montserrat alternates semibold emphasis
32 pts. 50 pt tracking, 38 pt leading


montserrat alternates semibold emphasis
24 pts, 50 pt tracking, 32 pt leading

body type

Montserrat, regular
32 pts. 50 pt tracking, 52 pt leading.

subhead, description text

Montserrat regular
16 pts, 0 pt tracking, 32 pt leading



montserrat alternates semibold emphasis
24 pts. 50pt tracking, 32pt leading.


montserrat alternates semibold emphasis
20 pts. 50pt tracking, 28pt leading.


montserrat alternates semibold emphasis
16 pts. 50pt tracking, 32 pt leading.


montserrat alternates semibold emphasis
14 pts. 0pt tracking, 20pt leading.

paragraph & subhead

Montserrat, regular
16 pts. 0 pt tracking, 32 pt leading.



Montserrat Alternates: Regular & Semibold | PANTONE 446 C
Font Size: 20 (font-size: 2.5rem;) | Leading: 24 (line-height: 3rem;) | Tracking: 50 (letter-spacing: 0.15rem;)


Montserrat Alternates: Regular & Semibold | PANTONE 446 C
Font Size: 14 (font-size: 2rem;) | Leading: 16 (line-height: 2.8rem;) | Tracking: 10 (letter-spacing: 0.1rem;)


Montserrat Alternates: Regular & Semibold | PANTONE 2397 C,  PANTONE 2030 C,  & PANTONE 446 C.
Font Size: 12 (font-size: 1.6rem;) | Leading: 14 (line-height: 2rem;) | Tracking: 10 (letter-spacing: 0.08rem;)

body copy

Montserrat: Regular & Semibold | PANTONE 446 C
Font Size: 8 (font-size: 1rem or 16px;) | Leading: 12 (line-height: 1.5rem;) | Tracking: 0 (letter-spacing: 0rem;)

logo concept

When the new Smart Beat logo was being developed, the goal was to create something that spoke to not only what the current product’s capabilities, but also the possibilities of the future of Smart Beat.

Smart Beat will one day extend beyond video breath monitoring – one day the Smart Beat camera will include even more innovative technology to watch over loved ones with even more information than ever before. It was also very important that the logo did not look too childish so that it could be applicable to elderly and disability care.

logo usage

The logo is the most important piece of the brand to maintain unblemished – if we compromise our logo, we compromise our ability to build recognizability with our audience.

The Smart Beat logo can be either stacked vertically or laid out horizontally. Note that the size of the icon relative to the text changes depending on the stacking.

To ensure that the logo is formatted correctly, just use each format as-is and use the two different files rather than attempting to stack it on your own.

Ensure that both variations have the minimum blank space around them as shown.

logo variations

As Smart Beat is marketed to specific markets, the logo can be accompanied by a secondary line of text in grey.

The specific markets include baby monitoring, monitoring of the elderly, and monitoring of those who are cared for by others for their day-to-day living because of disabilities or illnesses (Smart Beat Care).

In a situation where this variation of the logo is on a non-white background, both the primary and secondary lines of text should be white.

logo sins

Although there may sometimes appear that there is a need to use the logo in different ways than shown, it is important that the guidelines are heeded.

Never use the logotype on its own. You should have either the icon only or icon and text.

Never change the proportions of any part of the logo, including the spacing between elements.

Never change the color of the logo. If color simply cannot be used, change the teal color to grayscale and ensure that it is at least 50% gray.

Do not add any drop shadows, or other effects to the logo.

Never make the logo smaller than 0.5 inches in height.

photography style

Smart Beat photography should reflect peace of mind, family connection, safety (safe sleep practices), reliability and serenity. Photographs should be taken in a well-lit, white-walled area with as much natural light as possible. The people in the picture should have light-colored clothing, as opposed to harsh and vibrant colors. Were it not so, the image could distract from the Smart Beat brand and interrupt its calming feel.

Images should be either taken close for detail shots (2-3  sides are touching/cropping the subject), or far enough away for ample negative space in the image.

photography edits


Make sure that the whites in the image (i.e. the wall, the camera, etc.) are as white as possible by adjusting it in Lightroom. The effect shown above is achieved with turning up whites and making shadows lighter, so everything feels softer in general. Change the image temperature so it is neither bluish nor yellowish.


While it is ideal to have all colors in the image have a pastel feel to them when they are taken, but if that is not an option, consider taking bright colors down to more neutral tones, as seen above (top: original, bottom: edited).

website design


Although the standard spacing around the logo is  normally much tighter, we want to allow for more breathing room on the website. People interested in Smart Beat may already be overwhelmed, so having a simple and beautiful experience on the website is crucial.

Notice that the margins on the website are about three to four times the height of the horizontally arranged logo.

site header

The home page doesn’t have a visible header, so that the user can focus on the camera and the interaction between the mother and child. The logo, search icon, order button, and menu icon will stick to the top of the page as the user scrolls, so that there is always an option to navigate to another page or go directly to the product page (once it passes the main image, it will have a white header background so that it does not get lost in the other content of the page.

Notice how the main image is completely white at the top so the logo stands out more. A white-to-transparent gradient is overlaid in order to achieve that.

buttons & icons

Buttons and icons are what should stand out most on the page. As per the brand color guide (pages 14-15), the primary teal color is used sparingly. It is on every important call-to-action and is included on some headers. The icons should have a cohesive feel and tie back to the style of the logo.


The secondary colors may be used to add interest to a layout without interrupting the breathing room of the content.

secondary buttons

Secondary buttons are styled in a way that they are not the main focus of the content but are there nonetheless in case it helps the user along their journey. It is important to use the red color in positive ways so that it is not simply associated with “bad readings” on the app.

supplemental elements

As seen throughout the style guide and in the concept for the website, there are supplemental lines added to the design. Their purpose is to direct the attention to where the viewer should be looking, add elegance to the layout, and make it simpler to understand the layout of the content. These lines don’t have to be used in every instance, but they are helpful and attractive in certain circumstances.

detail shots

When purchasing online, the user engages fewer senses than they would when purchasing in-store. In order to help them along in getting a feel for Smart Beat’s reliable and advanced technology, close-ups of the camera and displays of the app should be used. Consider getting a 3D model of the camera in order to create up close looks at the product.


All in all, remember that everything done for the brand should embody Smart Beat's value proposition:

Smart Beat is the safest, easiest, most secure way to know your baby is breathing.