Colour and Typography: Essential Elements for Your Production
Colour should guide attention, while type should always be readable. You don’t need an art degree to learn the basics; and with the basics in hand, your brand can quickly distinguish itself from its competition.
With a concise, purposeful colour palette and a few defined typographic rules, your productions will feel clearer, deliver your message faster, and present a more professional image.
At-a-Glance
Start with jobs, not hues
A great colour scheme isn’t about simply picking ‘prettier’ options; rather, it’s about signaling - without ambiguity – what should matter to your user. Every colour used in your video or on your website should have a job – viewers and readers will instinctively understand this, even if they don’t consciously acknowledge it.
Take our website, for example. Every button that invites contact with a client is blue, while knowledge documents are green. This rule – simple to apply – is devastatingly effective. Consistency builds trust without much effort.
Eagled eyed readers will immediately point out that the ‘call us’ button in the site header breaks this rule. This is deliberate. Rules should be followed, until they shouldn’t. A pivotal point of contact – the ‘contact us’ button – remains visible on every page.
A colour palette that does the work for you
Understanding the role of colour is vital for a visually appealing production.
Whole tomes have been written on colour – far too much to cover in one post. Instead, let’s summarise the most important points:
◼️ Your Primary Colour(s) - this is your brand personality. It's the colour or colours you associate with every brand, used in headlines and key shapes. Every successful brand is distinguished by this key component.
◼️ Your 'Action' Colour - this is the colour you want the viewer to associate with performing an action. Think: buttons or CTAs. Bold choices here include red, blue, and green.
◼️ Your 'Feedback' Colour(s) - the colour(s) you want to associate with any change; be it success, a warning, or an error. Red, yellow, and green are typical choices.
◼️ Your 'Neutral' Colour(s) - these form the scaffolding of your animation or website. They might not be shiny or flashy, but they do a vital job - tying everything together into a cohesive whole. White, black, grey, or other light tones are good choices.
Let's take a look at this in action with an example from the Animara Studios Demo Library:
Primary Colours – dark blue and white; Action Colour – green (success); Feedback Colour -red (failure/error); Neutral Colours – black, white, and grey.
Guide the eye step-by-step through your production by only using bright tones for what you want your viewer to focus on. Fade elements out once used and apply duller tones.
One final note on colour – avoid confusing pairings.
Red and green are a classic tripwire for colour-blind viewers. If you must use them, use a clear label or additional text to clarity meaning (note in the ComplicCore Europe Demo that the red and green colours are always accompanied by text and numbers)
Typography – not just words on a page
Now that you’ve got your colour palette and wider visuals under control, the next important thing to consider is typography. That's a fancy word used to describe the science of applying text on screens.
You can be forgiven for thinking it's simple; but, in fact, typography makes or breaks your production.
Let's look at at a simplified example:
Both colour and text play a vital role in defining the identity of your visuals. Immediately, you experience a different feeling looking at both images.
Bold fonts are perfect for an energetic brand, while a more refined font is perfect for demonstrating luxury or refinement. Colour and size matter too – too large and you risk overwhelming your viewer – too small and it’s lost on smaller screens.
Here are a few simple rules to follow:
◼️ Headlines: 44-64 px, using Bold, Sentence Case.
◼️ Body Text: 24-28 px, using Regular/Medium.
◼️ Captions: 24-26 px, left aligned, short phrases, soft shadow or box applied for contrast (learn more about accessibility here)
◼️ UI Body: 16-18 px, Regular.
◼️ Numbers: align appropriately and always use words for one-ten, digits for 11+
◼️ Spacing: allow generous line height and consider extra padding between sections.
In Summary
Colour and type aren’t decoration - they’re navigation. Keep your palette small and purposeful, make sure you’re using an appropriate range of tones that naturally lead your viewer towards particularly actions real screens, and ensure your typography convey the message you want.
At Animara Studios, our team of creatives understand these rules intuitively. With decades of experience working across graphic design and visual production they've built up a deep well of knowledge and apply this to every production - converting confusion into visual clarity.
◼️Our team take the time to understand your brand, intimately through a detailed Onboarding process. Getting it right, the first time and every time thereafter.
◼️ Every script is crafted with design in mind - voice, text, and visuals are worked on together, ensuring clarity at every stage of the process.
