Activ online styleguide v09 cs6 rev 2

Activ Foundation Digital Styleguide

Table of Contents.

Brand Strategy Overview. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4 Activ’s Brand, Logo and Name. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5 The Logo Options.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8 Logo Guidelines.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9 The Brand Colours.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10 Fonts and Typefaces. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11 Copywriting. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12 Navigation. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18 Visual Elements. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21 Imagery. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22 Image Reference Guide. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27 Introducing Grid Systems.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29 The Activ Grid System. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30 Desktop Grid System.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31 Tablet Grid System.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32

2

Mobile Grid System. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33 Font Styles.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34 Buttons and Text Link Styles.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35 Icon Style.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35 Form Styles.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36 Table Styles.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37 Design Reference Guide.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38

3

Brand Strategy Overview.

The image and style of an organisation is a reflection of its professionalism, values and the quality of the services it provides. This styleguide has been produced to ensure complete uniformity in style and formatting wherever the Activ brand is used to ensure there is no dilution. It ensures that there is a consistent and professional online image.

Activ’s brand is an important asset. It represents an enduring value or quality about Activ, it’s people, products and services. The brand embodies the reputation of Activ and, when represented by a logo or other identity, it is something that is easily and quickly recognized by the public and further reinforces the way Activ is represented.

Activ’s fonts and font sizes, as well as design and layout style, reflect guidelines for accessible communication. The styles and designs provided in this document have been agreed by Activ and are to be used by the whole organisation as a guide for the correct use of Activ’s logo, colours, font, terminology, publications and other online materials. All artwork and promotional material must be approved by Activ Communications. Templates provided must be followed, as detailed within this document. If you have any questions relating to the Style Guide please contact Activ Communications and Fundraising.

This document was revised in March 2014. There are three additional, separate documents: Activ’s Brand Styleguide, Accessible Communications Terminology Guide and Tone of Voice Guide.

4

Activ’s Brand, Logo and Name.

Activ’s Brand Identity.

Activ’s brand identity projects unity, warmth, strength and vision. It reflects Activ’s values of teamwork and being compassionate, pragmatic, respectful and persistent. The organisation has a strong community history and a vision for the future. Since 1951 we have stayed true to our purpose of providing a range of services for people with disabilities, enabling them and their families to pursue a better life. Today, the brand reflects the stability and strength of the organisation’s history while being contemporary, visionary and community focused.

Activ’s Logo, Colour and Meaning.

Activ’s logo distinguishes and differentiates Activ, contributing to awareness and recognition in the community. The circle of the logo symbolises a person with a disability. The branch under the circle symbolises the loving arms of the family and community. The segments represent the different services that Activ provides to people with disabilities. The letters in the logo are lowercase, reflecting the rounded shape of the five elements that make up the logo symbol. The logo colours are essential to the brand identity. Blue projects unity, strength and vision, and is consistent with our values of being pragmatic, respectful and persistent. Orange projects warmth and energy, reflecting values of teamwork, being compassionate and welcoming, encouraging interaction in the community. Along with the logo, an additional theme is an orange and yellow gradient strip, often applied along one side of publications. This extra touch of colour adds vibrance to the logo and draws the viewer in with a sense of welcoming. In addition, a white background is frequently used in publications for a clean, contemporary style and assists with accessibility.

The Name “Activ”.

The name Activ was first used by the organisation for Activ News and Activ Industries in the 1970s.

It was inspired by a brand of carbon paper used for typewriters. In the 1980s, when the organisation decided to change its name from the Slow Learning Children’s Group or SLCG, Activ Foundation was chosen because it was perceived to be non-labelling, inclusive, positive and not subject to the passage of time. Activ is not an acronym and should not be written with all capitals (not ACTIV).

5

Registered Trademark.

While the Activ logo and name is registered as a trademark, the TM or ® symbol in the top right hand corner of the logo is not to be used. Activ’s trademark rights remain even when the symbol is not used. Therefore, the symbols are unnecessary and project a corporate image, which does represent the organisation’s purpose or values as a community organisation, nor its image of being contemporary and community focused.

Activ’s Official Name.

Activ Foundation Incorporated (Activ Foundation Inc.) is the organisation’s official, legal name which should be included on all official documents. In most other instances, the word “Activ” may be used on its own, like it is in the logo. The single word reflects a contemporary and positive image. “Activ Foundation” may be used in formal situations and for fundraising purposes to portray the organisation as a charitable body.

Organisational identification (to be included on all print publications):

Activ Foundation Inc. ARBN 060 921 271 Members’ liability limited ABN 11 553 592 765

6

The Logo.

The outer Grey area indicates the safe zone. Other graphical and visual elements can be safely positioned up to the Blue line, which indicates clear space. The blue area must be kept free of all other graphical and visual elements. Magenta indicates element alignment and boundaries.

x

x

x x

x

x

x

x

The ideal placement for the logo on the Activ website is to the top left. This ties in with standard website conventions, ensuring consistency for users. Notice the padding that sits around the logo.

7

The Logo Options.

The logo usage preference is as follows: 1. Primary full colour logo 2. Secondary reversed (white) logo 3. Secondary monochromatic greyscale 4. Secondary black logo.

1.

2.

3.

4.

8

Logo Guidelines.

Do not change the format of the logo at any point.

Do not recreate the font in another typeface.

activ Do not stretch the logo in any way.

Do not mix a coloured logo with a coloured background.

9

The Brand Colours.

There are 2 core brand colours, as outlined below.

Active blue R0 G44 B87 Hex: #002c57

Active orange R239 G123 B11 Hex: #ef7b0b

We have introduced a secondary palette to assist with additional visual items, accessibility and content in the website. Please note that “Accessible Orange� is only to be used for text links, it is not to be used at any point as a design element.

Dark grey R51 G51 B51 Hex: #333333

Light grey R238 G238 B238 Hex: #eeeeee

Accessible orange R183 G74 B1 Hex: #b74a01

10

Fonts and Typefaces.

Arial Font and Typefaces.

Arial is used as the primary font family. The typefaces to use are bold and regular. Arial is used for all the main content areas within the website.

Sketchtik Font and Typefaces.

Sketchtik is used as the secondary font family. The typeface to use is bold. Sketchtik is used for all headings and subheadings throughout the website.

Sketchtik must be used as a webfont and referenced accordingly in the HTML head. The webfont file types to use are .eot, .woff, .ttf and .svg. To ensure the deepest level of @font-face support, please ensure that all these are referenced in the CSS with: @font-face { font-family: ‘Sketchtik’; src: url(‘sketchtik.eot’); /* IE9 Compat Modes */ v: url(‘sketchtik.eot?#iefix’) format(‘embeddedopentype’), /* IE6-IE8 */ url(‘sketchtik.woff’) format(‘woff’), /* Modern Browsers */ url(‘sketchtik.ttf’) format(‘truetype’), /* Safari, Android, iOS */ url(‘sketchtik.svg#svgFontName’) format(‘svg’); /* Legacy iOS */ }

Please ensure that your website service provider has installed the font on their server otherwise the above CSS code will not work.

11

Copywriting.

Overview.

Just as the logo identifies Activ, so does the tone of voice. The Activ unique voice—whether it comes through in conversations on a Facebook page, the website, in print, or in person—is a powerful tool in building the Activ brand and it’s relationships within the community. Here are some tips to help you write in alignment with the Activ brand.

Tone, Voice, and Style Guidelines.

•

Firstly, identify the purpose of the page. Who are you talking to - who is your audience? What question are you answering? What problem are you solving? The answer to these questions may be a great first sentence, and will guide efforts to edit the content.

•

Put the most important information first. Lead with the strongest proposition, and follow with content to support that proposition.

•

Use an informal, positive, conversational tone that demonstrates the friendly atmosphere at Activ.

Generally, use present tense and the second-person point of view (e.g., “you,” not “the client”). Generally, refer to Activ in first-person plural (e.g., we, our).

•

Write like this

Not like this

Because

“If you’re thinking of volunteering with us, simply call 08 9387 0555.”

“If a prospective volunteer is considering volunteering, he or she should call Activ on 08 9387 0555.”

Using a informal, conversational tone demonstrates Activ’s welcoming approach. Addressing readers directly is engaging and shows that Activ approachable and friendly.

Avoid unusual contractions (e.g., not it’d, would’ve) and avoid overly colloquial language and slang.

12

•

Write concise, short sentences using an active—rather than passive—voice.

Write like this

Not like this

Because

“We transport 500 daily to their workplaces and other venues in the State through 25 bus runs.”

“Every day we transport 500 people to their places of work and other venues throughout Western Australia, through the use of 25 bus runs.”

Readers appreciate directness.

The passive voice can be vague or awkward, and is often more wordy.

Concise writing shows that Activ respects it’s readers’ time.

Bullets and Lists.

A list should be introduced with a heading, or a phrase ending in a colon. Use bulleted lists for unordered items and numbered lists for priorities, instructions, or sequential steps.

Each item in the list should have consistent structure for clarity and reading ease. Each item should be complete sentences, or all phrases or fragments.

For example: •

Use all complete sentences.

•

Capitalize the first word of each list item.

•

Add periods at the end of each item.

The exception is numbered or bulleted lists that complete a sentence that begin in an introductory element, and that consists of phrases or sentences with internal punctuation. For example:

When a bulleted list could be considered to be part of a long sentence, another acceptable option is to: •

begin each line in lowercase;

•

end each line with a semi-colon;

•

end the second-last line with “and” or “or” (optional); and

•

end the final line with a period (as in this list).

Such lists read as if they form a paragraph in the overall piece of text.

13

Capitalisation.

•

Do not use capitals or all capitals for emphasis in standard content areas. For example:

Write like this

Not like this

"Do not use capitals or all capitals for emphasis."

“Do NOT use capitals or All Capitals for emphasis.”

•

Use Activ, Activ Foundation or Activ Business Services (not Activ foundation, Activ business services).

•

Headlines should be concise and written in title case. Do not capitalize articles (“the” and “a”) and conjunctions (“and,” “but,” and “or”) and “for,” “to,” and “as,” except if they are the first word. If the headline contains a hyphenated word, capitalise the first element, and the second if it is a proper noun or adjective.

•

Page titles should be in title case, and should exactly match the corresponding entry in the navigation menu. Do not capitalize articles (“the” and “a”) and conjunctions (“and,” “but,” and “or”) and “for,” “to,” and “as,” except if they are the first word. If the headline contains a hyphenated word, capitalise the first element, and the second if it is a proper noun or adjective.

•

Subheadings should be written in title case. Do not capitalize articles (“the” and “a”) and conjunctions (“and,” “but,” and “or”) and “for,” “to,” and “as,” except if they are the first word. If the headline contains a hyphenated word, capitalise the first element, and the second if it is a proper noun or adjective.

•

There should be one space only after any instances of full stops and commas.

14

Numbers, Time, & Measurements.

•

Spell out whole numbers under 10, except, for consistency, if there are numerals in the same category or series, or if important information would otherwise be easily overlooked (especially online).

•

Round numbers and approximate numbers are usually spelled out in text, e.g., thousands, a thousand reasons.

•

Numbers at the start of a sentence should be spelled out, or the sentence rewritten.

•

Use numerals with any measurement abbreviations and for percentages.

•

In amounts of four or more digits, add a comma between groups of three digits, e.g. 4,000.

•

Very large numbers can be written as a numeral and word combination, e.g, 4.5 million.

•

In general, avoid using numerals for ordinal numbers like first, second, and third. Spell out ordinal numbers in text, and do not use superscript, e.g., first, not 1st.

•

Hyphenate number-noun compound adjectives, e.g., first-year, two-month, 35-millimetre, but not with percentages or measurement abbreviations, e.g., 20 percent raise, 100 KB file.

•

Hyphenate spelled-out fractions smaller than one, e.g. one-third.

•

In writing phone numbers, use spaces not hyphens (eg. Use 08 9387 0555 not 08-9387-0555)

•

Include zeros after the decimal in dollar figures in text (eg. $76.00 not $76)

•

Always spell out the month. Do not use numerals (not 08-03-14) to avoid confusion between month-day-year or day-month-year formats.

•

If abbreviating the days of the week, use Sun. Mon. Tues. Wed. Thurs. Fri. Sat.

15

•

If abbreviating the months, use Jan. Feb. Mar. Apr. May June July Aug. Sept. Oct. Nov. Dec.

•

Use a comma between date and year, e.g., December 11, 2013.

•

Add an “s” to pluralise years, e.g., 1920s, not an apostrophe, e.g., 1920’s. Informally, the year can be abbreviated with an apostrophe, e.g., ‘09.

•

Units of measurement without a numeral should always be spelled out (e.g., several kilometres). Measurement abbreviations are usually only used in tables or lists, and should always be used with a numeral, not a spelled-out number (e.g., 15 km).

Percentages are always expressed as numerals.

•

Abbreviations of measurements do not change if plural e.g., 4 cm., except for some for times: hrs., yrs.

•

Add a space between the units and the abbreviation.

•

Most common measurement abbreviations do not require periods following, with the exceptions of times (sec., hr., mo., yr.), and measurements, e.g., centimetres (cm.), metres (m.), and kilograms, (kg.).

•

Generally, use the 12-hour clock for time.

•

Emphasise specific times and use numerals (e.g., 5:00 p.m., 3:45 p.m.).

•

Include time zone following in brackets if it is very important or may seem unclear.

16

Web Formatting.

Studies show that people read web pages differently than they do books. Instead of reading every word, readers scan web pages for relevant information, picking out individual words and sentences.

To make sure your information is seen, web pages should use something called “scannable text,” which is achieved through formatting and a more concise writing style.

You can create scannable text by: •

breaking up long sections of text into smaller chunks

•

using headings and sub-headings

•

formatting unordered lists of items in bullets and sequential steps in numbered lists

•

using consistent structure for easy reading

•

including only one idea per paragraph

•

using the inverted pyramid style of writing, starting with the conclusion

•

using half the word count (or less) than conventional writing.

How to Use Links.

Links to pages within the Activ site should open up in the same window. All links to web pages outside the Activ site should open in a new window.

Due to the different ways that browsers treat PDF files, PDF files should be opened in a new window.

Links to PDF files should also be marked with “[PDF].”

Links should appear as descriptive text. The address of the site being linked should generally not appear on the page. Avoid using generic text that does not actually describe what the user will find when they click on the link, such as “More information” or “Check it out,” and definitely never “Click here”.

Do this: Get more information about volunteering with Activ.

Or this: Volunteering with Activ.

Not this: For more information about volunteering with Activ, visit http://www.activ.asn.au/volunteering.

Never this: For more information about volunteering, click here.

One exception to the rule about not showing the web address would be in the case where you are giving information about a company or organisation, including their name, phone number, email address and website. In that case the link could be the web address, but should start with “www” or equivalent, never with “http://”.

17

Navigation.

Primary Navigation.

Guidelines for main navigation menus are as follows: •

Menu label names should be concise and relevant to the content within the section.

•

Avoid using acronyms in menu labels unless widely understood/defined within the site.

•

Active/non active menu label states must remain with the established CSS styles.

Do not alter or edit these styles. High colour contrast between navigation items and background colours are to ensure that WCAG 2.0 accessibility levels are met.

•

Do not place supporting files in main navigation menus.

18

Secondary Navigation.

Guidelines for secondary (dropdown) navigation menu is as follows: •

The dropdown navigation should be applied consistently throughout the site to avoid user confusion.

•

The blue overlay should be applied to the main website content for all instances in which the dropdown menu is being used.

•

Each menu should contain a header that identifies that this is the section’s navigation menu, i.e., “About Us”.

•

Menus should be composed of between two and ten primary links.

19

Secondary Navigation (continued).

•

All links must have a valid destination that corresponds with the link label. Avoid “mail to” links in navigation menus by creating a contact page where such links can be found. Similarly, supporting files should be linked from page content rather than included as links in navigation menus. Links to other areas of the site should not be included in left navigation unless clearly labelled, (i.e., “Related links”).

•

Link text should match the page title of the page it links to.

•

All links in the dropdown navigation should open within the same browser window.

•

Do not use acronyms.

•

Supporting files should not be linked from the dropdown navigation

Breadcrumb Navigation.

Breadcrumb links aid users in knowing where they are in the site. Any page that is equal to or deeper than 2 levels deep must have a breadcrumb navigation situated on the top left of the main content area on the site (see below). The links should represent the hierarchical order of each section, and always take the user through the shortest path to the home page.

20

Visual Elements.

Used properly, branding and visual elements can strengthen the Activ reputation and create an engaging experience for users.

The overall website design for Activ has the primary purposes of: •

Creating a clear visual hierarchy of contrast, so you can see at a glance what is important and what is peripheral.

•

Defining functional regions of the page.

•

Grouping page elements that are related, so that you can see structure in the content.

The website uses familiar principles of page layout design, and users can easily predict the location of major content and functional elements.

Avoid crowded pages, as this tends to confuse the user when trying to understand the page’s content organisation. It is vital that visual confusion is avoided in the design of the Activ website.

Proximity and uniform connectedness are important in the page layout design. Visual elements should be grouped within “chunks” , making it easy to scan through a page. At a glance, users should understand how the content is organised. The design should always sets up modular units of content that form a predictable pattern over pages throughout the site

Consistency with overall digital and industry best practices is also generally advised to satisfy user expectations and to allow more time to be spent focusing on content rather than learning how to use the site.

All pages should align with the Activ brand and should look like they are all part of the same website. However no two sections in the site should look 100% identical or even similar enough that it may be unclear which site the user is on. For example, the header images between different sections needs to change as this could create confusion. Following Activ guidelines will help sites create an appropriate level of consistency.

21

Imagery.

Imagery used consistently can support the Activ brand identity. The image themes are based on key pillars of the Activ brand and reflect the Activ brand personality and style, as well as Activ members, areas of expertise, and history. All images should project unity, warmth, strength and vision. Additionally, they should reflect Activ’s values of teamwork and being compassionate, pragmatic, respectful and persistent. All images used in the site must have an alt text description.

Real photographs (not clip art or stock images) should be used at all times to convey these themes. Depth of field should be emphasised, with a focus on the models, and the background blurred. No photos or images to be added without approval by Activ Communications and Fundraising. All updates to the website pages must be approved by the Manager for the service area. Contact your Activ Document Control Officer to make updates.

22

Homepage Slider Images.

1400px

508px

Dominant area of slider area.

Key visual information to be contained in this area.

Submissive area of slider area.

Unimportant visual information to be contained in this area.

23

Innerpage Header Images.

1400px

340px

24

Persona Dropdown Images.

150px

305px

25

Homepage Panel Images.

153px

316px

26

Image Reference Guide.

Homepage Slider Images •

Width: 1400px

•

Height: 508px

•

Resolution: 72dpi

•

Colour mode: RGB

•

Primary visual information to be contained in the 50% lefthand area. The righthand area contains the slider text area which will overlay the image and obscure this image area.

•

Do not include the white gradient when saving out images. This will automatically be applied by the website.

Innerpage Header Images •

Width: 1400px

•

Height: 340px

•

Resolution: 72dpi

•

Colour mode: RGB

•

Do not include the white gradient when saving out images. This will automatically be applied by the website.

27

Persona Dropdown Images.

•

Width: 305px

•

Height: 150px

•

Resolution: 72dpi

•

Colour mode: RGB

Homepage Panel Images.

•

Width: 316px

•

Height: 153px

•

Resolution: 72dpi

•

Colour mode: RGB

Business Services Menu Images.

•

Width: 325px

•

Height: 279px

•

Resolution: 72dpi

•

Colour mode: RGB

28

Introducing Grid Systems.

Overview The design of the Activ website is based around a grid system. The reason a grid system is used in web design is to make it quick, easy and flexible to create a responsive layout of the site that works across all screen sizes and devices.

A grid is nothing more than a series of intersecting horizontal and vertical lines spaced at regular intervals, but it creates order out of chaos, making it one of the most powerful tools at a designer’s disposal.

Well designed grid systems can make your designs not only more beautiful and legible, but more usable.

Features There are several reasons why a grid systems are used in web design: •

Grids strengthen the page design layouts. Additionally, using a consistent grid with your files and code streamlines your development process files and make future edits less painful.

•

Grids creates connectedness. Grid systems help connect or disconnect content.

They help people read and aid comprehension by chunking together similar types of content, or by regular positioning of content, they can help people navigate the content.

Connectedness helps brands tell a consistent story in layout.

•

Grids help solve layout problems We all need answers to layout problems. How wide should a table be? What should the whitespace be around this area? Grid systems help us with that with predefined alignment points.

•

Grids provide visual pathways for the readers eye to follow A well-designed grid system will help use whitespace dynamically and in a powerful way. By filling a space with negative space instead of content, we can force the direction of the readers eye more effectively than anything else.

29

The Activ Grid System.

The default grid system for the Activ website is 12 columns at a width of 980px for desktop.

The below chart and grid examples provide further details including tablet and smartphone sizes.

Screen Format

Screen Width

Layout Width

Column

Gutter

# of Columns

Desktop

> 1024px

980px

67px

16px

12

Tablet (vertical)

768px

700px

40px

20px

12

Tablet (horizontal)

1024px

980px

Smartphone (vertical)

320px

280px

Smartphone (horizontal)

480px

440px

Utilises desktop layout

40px

20px

5

Fluid expansion of vertical smartphone

30

Desktop Grid System.

16 px

67 px

980 px

648 px

316 px

316 px

316 px

482 px

565 px

316 px

482 px

565 px

31

Tablet Grid System.

20 px

40 px

700 px

460 px

220 px

220 px

220 px

340 px

220 px

340 px

460 px

220 px

32

Mobile Grid System.

40 px

20 px

280 px

280 px

280 px

280 px

280 px

33

Font Styles.

H1 (Example: “About Activ”) Colour: #002c57.

Primary font: Sketchetik bold.

Backup fonts: Arial, sans-serif.

Font size: 44px.

H2 (Example: “Latest News”) Colour: #002c57.

Primary font: Sketchetik bold.

Backup fonts: Arial, sans-serif.

Font size: 26px.

H3 (Example: “Certified Training”) Colour: #002c57.

Primary font: Sketchetik bold.

Backup fonts: Arial, sans-serif.

Font size: 20px.

H4 (Example: “Quicklinks”) Colour: #002c57.

Primary font: Arial.

Backup fonts: Helvetica, sans-serif.

Font size: 14px.

Normal text (Example: Placeholder text) Colour: #242323.

Primary font: Arial Backup fonts: Helvetica, sans-serif.

Font size: 16px.

34

Buttons and Text Link Styles.

(Colour: #b64900)

(Colour: #333333)

(Colour: #002c57)

Icon Style.

There are very few icons used throughout the Activ website. Where required, they should adhere to the brand colours and be a simple, solid shape.

Donate now

35

Form Styles.

Text input.

Standard HTML5 radio buttons.

Dropdowns.

Standard HTML5 checkboxes.

Form states.

36

Table Styles.

Title Row.

Alternating Row 2.

Background colour: #002c57.

Font colour: #ffffff.

Primary font: Arial.

Backup fonts: Helvetica, sans-serif.

Font size: 20px.

Font style: Bold.

Background colour: #efefef.

Font colour: #242323.

Primary font: Arial.

Backup fonts: Helvetica, sans-serif.

Font size: 16px.

Font style: Regular.

Alternating Row 1.

Additional Styles.

Background colour: #ffffff.

Font colour: #242323.

Primary font: Arial.

Backup fonts: Helvetica, sans-serif.

Font size: 16px.

Font style: Regular.

Border style: Solid.

Border thickness: 1px.

Border colour: #e1e1e1 Cell padding: 15px

37

Design Reference Guide.

1. Homepage.

38

2. Menu Dropdown.

39

3. Personas Dropdown.

40

4. About Us.

41

5. News Landing Page.

42

6. News Article Page.

43

7. Contact Page.

44

8. Email Activ Page.

45

9. Business Services Homepage.

46