Online platforms style definition
The NFB ‘Balmoral’ style is defined by the following objects :
- A palette of 8 colours
- The NFB eyecons
- Short horizontal lines (dash)
- Ciutadella & Suisse font
Colour themes
The 8 colours of the NFB Palette can be used to ‘theme’ the main content of a site. Themes are monochromatic. Only one colour should be used on a page main content.
The objects that can be coloured are :
- Eyecons
- Dashes
- Buttons & links
- Articles lead
- Play button
Never use the NFB colours on :
- NFB logo
- body text
The colour theme is site or page specific. A colour theme can be chosen for an entire site or be set dynamically depending on pages content.
Dynamic themes are selected based on the dominant image on a page.
The colours should not be used to identify the sections of a website. Colour themes should not be meaningful in terms of a site’s architecture.
Eyecons
Eyecons must always be placed flush to the edge of a page or of an interface element that has clear borders.
There can be multiple eyecons on a page.
Eyecons should not be burned into images.
Download Eyecons (.ai)
Fonts
We use a combination of serif and sans-serif font.
Ciutadella is the sans-serif font used on interface components (navigation, buttons and cards) and on heading in text block.
The Suisse font (serif) is used on text blocks.
Ciutadella Bold All Caps is used to identify the different section of a page. Example, it’s used on the titles of components like carousel. It can be used in very large type as a main header on the top of a page.
see Typography
Dash
The dash can be used as a divider to mark the beginning or the end of a block.
It can also be combine with text (Ciutadella bold) to recreate the signature titles of NFB advertising. In this context, the width of the dash should match the size of the font (the width of a character’s stroke)