A clear and consistent visual expression that reflects Navix’s position and personality.
Chapter 04 – Overview
The Navix visual expression is pared back and built on a few recurring elements. Used consistently and with restraint, they make Navix recognisable without dominating the message.
This chapter describes each building block and how to apply it. Every part has its own section below, with rules, live examples and files to download.
Building blocks
Seven recurring elements make up the Navix identity. Each one links straight to its guidelines.
Logotypes, symbols, fonts and templates are ready to download – always start from the original files.
Visual identity
The clearest symbol of our brand – always used consistently, in its approved versions and with room to breathe.
01 The logotype
The Navix logotype is the clearest symbol of our brand and a central part of our visual identity. It should always be used consistently and with enough space around it to retain its clear and distinctive expression.
The symbol. Used together with the wordmark, or on its own when space, material or context calls for it.
NAVIX in capitals. Never retype or redraw the wordmark – always use the original artwork.
The height of the logotype is the unit of measure. The clear space is defined as 0.5X.
02 Versions
Three groups of approved versions, for different backgrounds and production methods. Always start from the original files.
01.
The Navix primary logotype is the main expression and should be used first. It comes in full colour, with a green logomark and blue wordmark, and in a negative version with white text for dark backgrounds.
02.
The one-colour logotype comes in all white and all black. It is used when full colour isn’t possible, or when a more stripped-back expression is needed.
03.
The logomark is primarily used in its green version. When needed it can also be used in a negative or one-colour version – for example when the material, production technique or background calls for a colourless execution.
ZIP · 3.0 MB · SVG, PNG and EPS · all four logotype versions
ZIP · 4.1 MB · SVG, PNG and EPS · logomark and Loadline
Version finder
Choose a background to see which version of the logotype to use. Select any version to preview it.
Recommended
On Deep Sea Blue, use the negative version: white wordmark with the Brand Green logomark.
03 Clear space
To keep the logotype clear at all times, it must be surrounded by a free area of 0.5X, where X is the height of the logotype. No text, images or other graphic elements may be placed within this clear space.
Above the recommended minimum
Drag to scale – the clear space follows.
Practical minimums that keep the logotype legible. Go larger whenever the format allows.
Logotype on screen
24 px
tall – about 147 px wide
Logotype in print
8 mm
tall – about 49 mm wide
Logomark on its own
16 px · 5 mm
on screen · in print
04 Don’ts
To keep the Navix identity clear and consistent, the logotype must always be used in its approved versions and proportions. Avoid changes that affect its shape, colour, contrast or legibility.
Hover or tap an example to see the correct version.
Visual identity
Two typefaces and a few clear levels. Plus Jakarta Sans carries everything – DM Serif Text Italic adds contrast and character where it matters.
01 Plus Jakarta Sans & DM Serif
Navix uses Plus Jakarta Sans (01.) as the primary typeface in all communication. It is the typeface that carries the identity and is used for headlines, body copy and all other information.
DM Serif (02.) is used as an accent typeface to create contrast and character. It is used sparingly – mainly in overlines or to lift single words and messages, for example Performance in the main message Maximizing Fleet Performance.
DM Serif should therefore work as a complement, not as an equal main typeface.
Maximizing Fleet Performance
Plus Jakarta Sans carries the line – DM Serif Text Italic lifts a single word.
Regular, SemiBold & Bold
Primary typeface
Headlines, body copy and all other information. Plus Jakarta Sans carries the identity in every channel.
Point at a character, or use the arrow keys, to see it up close.
Approved weights
Regular 400
Headlines and body copy
SemiBold 600
Body copy on complex backgrounds
Bold 700
Headlines
Italic
Accent typeface
Overlines, short introductions and selected words. Used sparingly – a complement, never an equal.
Point at a character, or use the arrow keys, to see it up close.
Where it is used
Overlines
Our vision
Short introductions
Our mission is to help shipowners get more out of every vessel.
Selected words
Maximizing Fleet Performance
Try it
Write your own line and try the brand typefaces. The approved weights are marked on the scale – everything in between is for exploring only.
Approved weight
Fonts
Plus Jakarta Sans and DM Serif Text are both free Google Fonts, released under the SIL Open Font License (OFL). They can be installed and used freely in print, presentations and on the web.
navix-fonts.zip
02 Three levels, five styles
Navix typography is built on clear levels, where size, weight and placement create structure and help readers find their way through the content quickly.
Hierarchy is created first and foremost through size, weight and placement – with a few clear levels rather than many different styles.
Point at, tap or scroll through the levels to see where each one sits in a layout.
Commercial management
Maximizing Fleet Performance
Chartering, operations, claims and accounting.
Combining market intelligence, experience and precise execution to optimise every voyage and improve commercial outcomes.
In a volatile market, experience and timing matter.
Plus Jakarta Sans is used for headlines, subheadings and body text. Headlines can be set in Bold (1.1) or Regular (1.2), depending on expression and context.
Headlines can be set in Bold (1.1)
Headlines can be set in Regular (1.2)
DM Serif Italic (2.1) is used sparingly as an accent – for example in overlines, shorter introductions or selected words.
Overline / accent (2.1)
Body text (3.1) is primarily set in Regular, while SemiBold (3.2) can be used when the text needs more clarity – for example against a more complex background.
Body text (3.1) is used for running text in, for example, printed matter, articles and on the web.
Body text (3.2) can also look like this on a complex background.
Web sizes are fluid between small and large screens.
A few rules of thumb that keep the typography consistent across every channel.
Maximizing Fleet Performance
Do
Lift a single word or short phrase with DM Serif Italic. The rest of the headline stays in Plus Jakarta Sans.
Maximizing Fleet Performance
Don’t
Avoid setting whole headlines or running text in DM Serif. It is a complement, not an equal.
In a volatile market, experience and timing matter.
Do
Switch body text to SemiBold when it is placed on photography or other busy surfaces.
Maximizing Fleet Performance
Don’t
Extra weights, capitals, underlines and colours compete with each other. Use size, weight and placement instead.
Visual identity
Eight colours in three tiers – a clear and consistent palette for everything Navix communicates.
01 Eight colours, three tiers
The Navix colour palette is built on three tiers – primary, complementary and accent colours – each with its own role.
Deep Sea Blue is the base. Pure White and Digital Green add contrast, clarity and accents.
01.
The primary colours form the foundation of the identity, with Deep Sea Blue as the main base. Pure White and Digital Green complete the expression and are used for contrast, clarity and accents.
02.
The complementary colours are Sand Beige, Signal Blue and Carbon Black. They create variation and flexibility without competing with the main palette.
03.
The accent colours are used more selectively. Brand Red is used to draw particular attention. Brand Green is primarily tied to the Navix logotype, while Digital Green is the first choice for green accents in all other communication.
Select any value to copy it.
01.
The primary colours form the foundation of the identity, with Deep Sea Blue as the main base. Pure White and Digital Green complete the expression and are used for contrast, clarity and accents.
Base
The main colour of the identity and the base for most surfaces.
Contrast
Creates contrast and clarity – for type on Deep Sea Blue and for open, light surfaces.
Focus
Used selectively for focus and green accents – never for large fields of text.
02.
The complementary colours are Sand Beige, Signal Blue and Carbon Black. They create variation and flexibility without competing with the main palette.
Soft surfaces
A warm, neutral background – also in reduced opacity for softer background levels.
Variation
Complements Deep Sea Blue to create variation between surfaces and sections.
Typography
The colour of type on light surfaces – and, in reduced opacity, of neutral backgrounds.
03.
The accent colours are used more selectively. Brand Red is used to draw particular attention. Brand Green is primarily tied to the Navix logotype, while Digital Green is the first choice for green accents in all other communication.
Attention
For what needs particular attention. Use sparingly, preferably with Deep Sea Blue.
Logotype
Primarily tied to the logotype. For green accents elsewhere, use Digital Green.
Deep Sea Blue carries the identity. Pure White gives contrast and air, the complementary colours add variation, and the accents appear in small doses.
Illustrative – not a fixed ratio
02 Five principles
How the colours work together – from the base that carries every layout to the accents that are used with care.
Deep Sea Blue is the main colour. Pure White creates contrast, and Digital Green is used selectively for focus.
In practiceLet Digital Green mark what matters most – a figure, a button, a highlight.
On light surfaces, Carbon Black is used for typography and Digital Green for smaller accents.
In practiceOn white, green works best as a shape – a rule, a dot, an icon or a button. Keep text in Carbon Black.
Sand Beige and Carbon Black can be used in reduced opacity to create softer background levels.
In practiceUse tints for backgrounds, cards and dividers. Keep type in full-strength Carbon Black.
Brand Red is used sparingly when something needs particular attention, preferably together with Deep Sea Blue.
In practiceGive red one clear job – a band, a label, a single highlight – and let Deep Sea Blue carry the rest.
Signal Blue complements Deep Sea Blue to create variation between surfaces and sections.
In practiceAlternate the two blues to separate sections in presentations, documents and web pages.
Deep Sea Blue is the main colour. Pure White creates contrast, and Digital Green is used selectively for focus.
In practiceLet Digital Green mark what matters most – a figure, a button, a highlight.
On light surfaces, Carbon Black is used for typography and Digital Green for smaller accents.
In practiceOn white, green works best as a shape – a rule, a dot, an icon or a button. Keep text in Carbon Black.
Opacity on white
Sand Beige and Carbon Black can be used in reduced opacity to create softer background levels.
In practiceUse tints for backgrounds, cards and dividers. Keep type in full-strength Carbon Black.
Brand Red is used sparingly when something needs particular attention, preferably together with Deep Sea Blue.
In practiceGive red one clear job – a band, a label, a single highlight – and let Deep Sea Blue carry the rest.
Signal Blue complements Deep Sea Blue to create variation between surfaces and sections.
In practiceAlternate the two blues to separate sections in presentations, documents and web pages.
Every text colour against every background colour, with its WCAG contrast ratio. Body text needs at least 4.5:1; large text, icons and graphic elements at least 3:1.
Select a pairing to preview it. Use the arrow keys to move through the grid.
| Background Text | Deep Sea Blue | Pure White | Sand Beige | Signal Blue | Carbon Black | Brand Red | Digital Green |
|---|---|---|---|---|---|---|---|
| Pure White | Same colour | ||||||
| Carbon Black | Same colour | ||||||
| Deep Sea Blue | Same colour | ||||||
| Digital Green | Same colour | ||||||
| Sand Beige | Same colour |
Digital Green on white reaches only 2.0:1. On light surfaces, set text in Carbon Black and use Digital Green as a shape – a rule, a dot, an icon or a button.
The palette as CSS custom properties, ready to paste into a stylesheet. Use the HEX values for screens, CMYK and PMS for print.
:root {
--navix-deep-sea: #041E42; /* Deep Sea Blue */
--navix-white: #FFFFFF; /* Pure White */
--navix-digital-green: #26D07C; /* Digital Green */
--navix-sand: #F6E7CE; /* Sand Beige */
--navix-signal-blue: #0047BB; /* Signal Blue */
--navix-carbon: #121212; /* Carbon Black */
--navix-brand-red: #CD1239; /* Brand Red */
--navix-brand-green: #AACD72; /* Brand Green */
}Visual identity
A few recurring shapes – the cut corner, the Loadline and a quiet set of outline icons – make Navix recognisable without ever dominating the expression.
01 Shape language
Navix’s visual expression is pared back and built on a small number of recurring shape elements. The clearest signature detail is the cut corner, used on image frames and buttons, for example. The shape is inspired by the bow of a tanker and creates a subtle link to Navix’s business. It is used consistently and with restraint – building recognition without dominating the expression.
From the printed guide
Explore the cut
The chamfer sits on the bottom-right corner and is always cut at 45°. Its size follows the element – generous on large image frames, small on buttons. Try it on different elements and see where it starts to dominate.
Within the recommended range
Recommended 28–80 px
Switching element resets the corner to its recommended size.
Four sizes, defined as CSS custom properties. Click a token to copy it.
clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%); Do
One corner, always the bottom right, always cut at 45° – like the bow of a tanker.
Do
Image frames, buttons and key cards. Most other surfaces stay square.
Avoid
Cutting several corners turns the signature into decoration.
Avoid
No shallow cuts, steep cuts or rounded corners – consistency builds recognition.
02 Symbols
The Loadline symbol is inspired by the marking used on ships and works as a recurring graphic carrier of the identity. It can be used on its own, but can also be integrated into the layout as a graphic divider between colour fields and content areas.
01. Standalone
On a ship’s hull, the load line – a ring crossed by a horizontal bar – marks how deep the vessel may safely be loaded. The Navix symbol borrows that form: a ring and a bar, simple enough to work at any size.
On Deep Sea Blue the symbol can be set in a muted blue tint for a quiet, tone-on-tone effect – as here.
02. As a divider
As a divider, the bar becomes a white line between two colour fields, with the ring resting on it – always at the exact centre of the line. Drag the ring up or down to move the boundary and balance the two fields.
03 Iconography
Navix iconography is built on a simple outline expression with even line work and limited detail. Most icons are based on Google Icons, which makes the system easy to use and develop further in-house.
Material Symbols Outlined, unfilled. Hover an icon to see its name – click to copy it.
From the guide
Icons can be combined with the identity’s colours and background surfaces, following the guidelines for colour usage.
Deep Sea Blue
Digital Green
directions_boat
Digital Green
Deep Sea Blue
language
Signal Blue
Pure White
weight
Sand Beige
Deep Sea Blue
history_edu
Custom icons
When new or custom icons are created, they should follow the same visual principles to keep the expression consistent.
Same stroke
Match the line weight of the Outlined set – never thinner, never bolder.
Same grid
Draw on a 24 × 24 px grid with a 2 px safe area, like Material Symbols.
Limited detail
Simple, geometric shapes. If it doesn’t read at 20 px, simplify.
Outline only
No fills, gradients or second colours inside the icon.
Visual identity
Close relationships on the global stage – how Navix photography balances people and presence with ships, sea and markets.
01 Image concept
Navix imagery is built on the contrast between the close and the global. The people, the collaboration and the decisions show the personal and professional presence, while ships, sea and market environments place the business in a wider international context.
Navix is always at the intersection of the two. It is where close relationships meet a global, ever-changing market – and where the commercial work takes shape.
Putting it to work
02 Imagery in practice
Two families of images carry the Navix expression. Used together – the close and the global – they give the whole picture.
01.
Focus on people, collaboration and the environments where the business takes shape. The expression should feel natural, welcoming and professional – with a clear presence and credibility rather than an overly arranged impression.
Aim for
Avoid
02.
Images that show the maritime context around Navix – ships, sea, ports and other environments connected to the international tanker market. The expression may be more atmospheric, conveying scale, movement and the market Navix operates in.
Aim for
Avoid
Portraits
Staff portraits share one setup: standing, three-quarter length, photographed in the office with the background softly out of focus. New portraits should match the series in light, framing and depth.
Real people and real situations – credibility before polish.
Keep faces and key details clear of the bottom-right corner, where a frame may be cut.
Natural colour and light – no heavy filters.
Balance the close and the global across a page, deck or feed.
JPG files ready for presentations, web and social channels.
