Design principles

Whatever we do, we are always unmistakably Emotify

A confident, clean system: red leads, white gives room to breathe, charcoal guides the eye, and colour accents add energy where it helps a child understand.

Red leadsEmotify Red and white are always the dominant colours. Headlines and key actions are red.

Charcoal guidesCharcoal and its tints build hierarchy for subheadings, body text and quiet UI.

Accents onlySecondary colours add energy or calm, highlight information and help navigation. They never dominate.

Flat & clearNo gradients. Colours come in 80 / 60 / 40 / 20 tints. Text always has strong contrast.

Our identity

The talking wheel

A speech bubble holding the six-colour emotion wheel: “If it’s mentionable, it’s manageable.” The wordmark is set in condensed capitals in Emotify Red.

Do

Use the red logo on white, and the white logo on Emotify Red only.
Keep clear space equal to the height of the bubble’s tail.
Use the mark alone for app icons and favicons (min 24px).

Don’t

Recolour or reorder the wheel segments — they are the emotion system.
Place the logo on secondary colours, gradients or busy images.
Stretch, outline, rotate or add effects.

Colour

Core colours

Click any swatch to copy its hex code.

Balance

White 45%

Red 30%

Charcoal 15%

Secondary colours

For energy or calm, important information, navigation, illustrations and infographics. If a secondary colour is dominating a design, it is being used incorrectly.

Emotion colours

From the Switch Emotion Wheel™. These six colours only ever mean an emotion family. They appear with the family’s face icon and name, and tint from soft (calm) to full (intense).

Signature graphic

Emotion Facets

Wedges cut from the emotion wheel, fanning outward — feelings opening up, growing and changing. The first facet is always 100% colour; middle facets sit at 90% opacity in 60% and 35% tints; the last facet is a 20% tint at 100%. Don’t overuse them: one per screen is plenty.

Typography

Bold, welcoming, confident

Barlow Condensed
Headlines · ExtraBold 800 · uppercase

Feel it. Name it. Switch it.

Barlow
Sub-headings & body · 400–700

Feelings aren’t good or bad — they just are. When we learn to manage them, they become our superpowers.

Hierarchy

Headline

Sub-heading is ⅓ the size of the headline

Body copy is half the sub-heading size, never below 15px on screen.

Headline

White headlines on red

Body copy in white when used on red.

Iconography

System icons

Minimal and modern with rounded ends, 2px stroke on a 24px grid. Use them alone or in a circular container.

Illustrated icons

Simple shapes, two or three colours, with translucent overlaps. Emotify Red is always present. Mono versions use 100% and 70% white on red.

Tone of voice

A warm mentor

We say…

“It’s okay to go there, just don’t stay there.”
“Let’s dial it down a notch.”
“Asking for help is brave.”
“Every try grows your brain!”

We never say…

“Calm down.” / “Stop crying.”
“That’s a bad feeling.”
“Cheer up!” (to someone grieving)
“Wrong answer.” (we say “Not quite — try another!”)