Visual Language headline image

visual language

Cyber-Duck’s visual language ensures all imagery reflects our brand’s fresh philosophy and personality. Having a visual design system means we can communicate in a meaningful, compelling and accessible way.

Each visual element is distinct, defined and re-usable. This guide helps our team present Cyber-Duck consistently and professionally. Users enjoy dynamic, cohesive experiences!

Logo Vector
It represents our:
Duck

Of course, the abstract beak, head, body and wing of our majestic duck in flight are recognisable. Have you spotted that she occasionally flutters her wings?

Services

She’s built from five identical quadrant shapes. These are used to reflect our five core services: branding, user experience, development, marketing and support.

Adaptability

These quadrants are flexible and organic, ready for us to adapt throughout branded material. For example, our logotype’s hyphen combines two shapes.

History

But we haven’t forgotten our history. Our previous logo drew a duck from the letters ‘c’ and ‘d’. Both are still present here, in an abstract form.
Find out about our 2015 rebrand

Which Version?

For maximum flexibility, we have two versions of our classic logo! This ensures our duck is presented nicely and visibly across different contexts and sizes.

Please choose the logo that fits best and respect each one’s placement and positioning guidelines.

Linear logo Logo Variant
Logo lock up
Logo Variant
Safe area
Logo Variant
Positioning
Positioning Linear
Download PNG SVG
Vertical logo Logo Variant
Logo lock up
Logo Variant
Safe area
Logo Variant
Positioning
Positioning Linear
Download PNG SVG
Monogram

Only use our monogram with audiences that are familiar with Cyber-Duck, or where our name is already mentioned. Full colour where possible! If this clashes with the background, white-out or greyscale are available. The circles below are examples.

Duck monogram Duck monogram Duck monogram

Brand colours

As you can see, our main colours are variants of a cool, calming blue and an energetic, youthful orange. These reflect our brand identity and sub-consciously communicate our enthusiasm and professionalism!

Primary Colours
RGB 242 / 101 / 34
CMYK 0 / 71 / 90 / 0
Hex F26522
Spot 7578U
RGB 0 / 104 / 146
CMYK 89 / 49 / 24 / 8
Hex 006892
Spot 7706C
Orange

Orange is a colour that combines the energy of red with the joy of vibrant sunshine yellow.

Our thirst for the fast-paced, innovative digital world is captured in this fresh colour – but it also matches a duck's bill. Perfect!

Blue

Calming yet professional, the colour blue is often associated with depth and stability.

Ducks just love floating on top of clear blue waters... so it's an obvious choice for Cyber-Duck.

Secondary Colours
RGB 44 / 138 / 190
CMYK 77 / 34 / 10 / 0
Hex 2C8ABE
Spot 7689C
RGB 55 / 155 / 210
CMYK 73 / 25 / 3 / 0
Hex 379BD2
Spot 7688C
RGB 81 / 190 / 237
CMYK 63 / 4 / 0 / 0
Hex 51BEED
Spot 2985C
RGB 60 / 60 / 60
CMYK 0 / 0 / 0 / 90
Hex 3C3C3B
Spot BLACK 7C
RGB 198 / 197 / 198
CMYK 22 / 18 / 17 / 0
Hex C6C5C6
Spot ______
RGB 236 / 236 / 236
CMYK 6 / 4 / 4 / 0
Hex ECECEC
Spot ______

Typography

We chose a type system that is bold and modern with a personable edge.
It balances our brand’s professional, meticulous approach, alongside our eager enthusiasm for sharing fresh insights.

Usage Web & print Fallback alternative Usage
Primary Heading Font Type Font Type Please use for headings and primary messaging in all caps. Select the correct font variation (Bold).
Secondary Heading Font Type Font Type Please use for secondary heading and pull out quotes sparingly. Select the correct font variation (Italic).
Tertiary Heading Font Type Font Type Please use for tertiary headings and hero paragraphs. Select the correct font variation (Medium or Bold).
Body Font Type Font Type Please use for body copy and detailed text, using upper and lower case. Select the correct font variation (Book or Regular).
Primary Heading
Web & print Font Type
Fallback alternative Font Type
Usage

Please use for headings and primary messaging in all caps. Select the correct font variation (Bold).

Secondary Heading
Web & print Font Type
Fallback alternative Font Type
Usage

Please use for secondary heading and pull out quotes sparingly. Select the correct font variation (Italic).

Tertiary Heading
Web & print Font Type
Fallback alternative Font Type
Usage

Please use for tertiary headings and hero paragraphs. Select the correct font variation (Medium or Bold).

Body
Web & print Font Type
Fallback alternative Font Type
Usage

Please use for body copy and detailed text, using upper and lower case. Select the correct font variation (Book or Regular).

Iconography

Icons are the bread and butter of Hollywood… and the web. These pictograms display key points and help users navigate. So it's important to use them correctly. Our Cyber-Duck icon set is comprehensive, sleek and easy to understand across platforms.

Icon principles we think about...
Icon Holistic

No doubt, it will become part of a set and join the website’s design style. So, how well does it fit?

Icon Accessible

Sizing and visibility are key. Users must be able to understand it, whether they’re looking on desktop, iPhone, TV… you name it.

Icon Audience

They are the people we're designing for. Without applying user-centred design thinking, designs could be a stab in the dark.

Icon KISS

That's keep it simple, stupid. Design class 101! The simpler, the easier to ‘read’ and understand.

Service Icons
Service icon Branding
Service icon User Experience
Service icon Development
Service icon Marketing
Service icon Support
Icon sizing
Web

38 px

Print

6 mm

Photography

A solid graphic identity with great logos, colours and font, is all very well. But what about the physical world? Photography shows off our company culture and lovely human faces.

Photography Photography Photography
Photography
Golden Rules
Unique

Just like our agency and employees… our photography is original. We take our photos in-house to create a unique, bespoke look.

Believable

All interactions with Cyber-Duck should be confident and authentic. For example, we avoid staging clichéd poses – instead, show the reality of our agency.

High quality

Camera phones need not apply. We ensure images are top quality and not rushed, tweaking carefully to look the very best they can.

Representative

We should shout about what we stand for! Our photos strive to portray our values, culture and fantastic standards for user-centred design.

Composition

Adhering to popular guidelines – in photography or any visual design – creates a pleasing, compelling quality. It boosts how we communicate our identity, insights and culture!

Photography
Photography
Learn more
Golden ratio

The Sistine Chapel. Snail shells. Pyramids. Spiral galaxies. What do they have in common? The golden ratio! Based on the principle of the ‘perfect number', this is the ratio of 1 to 1.618.

The Fibonnaci spiral is the most famous. Back in the 12th century, the mathematician scoured a number series that could produce a visually appealing composition.

Visualise this spiral as a frame to compose photographs that lead users around the scene in a natural flow. For example, the image’s main focus would not be placed slap-bang in the middle, but feature in the corner-third.

Rule of thirds

This guideline is a touch simpler! Instead, divide photograph frames into thirds, both horizontally and vertically. The crossroads mark four compelling areas for images, where points of interest could be created.

Further elements could be placed on the vertical lines. We use this composition to create balanced images, using the ‘sweet spot’ where users are likely to focus.

Treatment

We use photography in its original form to pack our personality and products into blogs, case studies and more. But to reduce distraction (or add messaging), we brand them with a colour from our palette. Here's some examples.

Photogaphy Photogaphy
RGB 242 / 101 / 34
CMYK 0 / 71 / 90 / 0
Hex F26522
Spot 7578U
Photogaphy Photogaphy
RGB 0 / 104 / 146
CMYK 89 / 49 / 24 / 8
Hex 006892
Spot 7706C
Photogaphy Photogaphy
RGB 44 / 138 / 190
CMYK 77 / 34 / 10 / 0
Hex 2C8ABE
Spot 7689C
Photogaphy Photogaphy
RGB 81 / 190 / 237
CMYK 63 / 4 / 0 / 0
Hex 51BEED
Spot 2985C
How do we do it?

Watch the step-by-step Adobe Photoshop guide to get started with creating our classic photography treatment for web and print-based jobs.

Animation

Visual aids can help push the right buttons, literally and metaphorically! Animation boosts great design. It not only helps guide a user visually, but adds energetic excitement that brings the content to life.

Sounds simple? Without some basic animation principles, it’s easy to make design look too busy. Let's lay the groundwork for these tricky little numbers.

Our over-arching animation principles...
Icon Natural

Motion is a lovely-looking thing, but it must feel natural and suit the design.

Icon Unobtrusive

Unless it’s alone, animation shouldn't detract attention from the main purpose of the design.

Icon Clear

All users should easily understand the purpose of the animation. Otherwise, it adds nothing!

Icon Lightweight

Nobody wants to wait for an animation, however good it could look. Ensure the coding behind it can load quickly.

Logo footer