From cf3c5ef833b3150ecba519705acd6c5fba6b797d Mon Sep 17 00:00:00 2001 From: Nathan Rogan Date: Thu, 3 Dec 2020 16:22:17 +0000 Subject: [PATCH] fix: json data build issue --- src/www/assets/json/merged.njk.json | 732 +--------------------------- src/www/data.njk.json | 731 +++++++++++++++++++++++++++ 2 files changed, 732 insertions(+), 731 deletions(-) create mode 100644 src/www/data.njk.json diff --git a/src/www/assets/json/merged.njk.json b/src/www/assets/json/merged.njk.json index ac11a541..9e26dfee 100755 --- a/src/www/assets/json/merged.njk.json +++ b/src/www/assets/json/merged.njk.json @@ -1,731 +1 @@ -{ - "navItems": [ - { - "name": "Styles", - "subnavItems": [ - { - "name": "A to Z content style guide" - }, - { - "name": "Colour palettes" - }, - { - "name": "Icons" - }, - { - "name": "Images" - }, - { - "name": "Layout" - }, - { - "name": "Maps" - }, - { - "name": "Typography" - }, - { - "name": "Utility classes" - } - ] - }, - { - "name": "Components", - "subnavItems": [ - { - "name": "Accordion" - }, - { - "name": "Breadcrumb" - }, - { - "name": "Buttons" - }, - { - "name": "Content card" - }, - { - "name": "Content Tiles" - }, - { - "name": "Details" - }, - { - "name": "File download" - }, - { - "name": "Form elements" - }, - { - "name": "Inset text" - }, - { - "name": "In-text step" - }, - { - "name": "Links" - }, - { - "name": "Lists" - }, - { - "name": "Loader" - }, - { - "name": "Message" - }, - { - "name": "Phase indicator" - }, - { - "name": "Table" - }, - { - "name": "Warning text" - } - ] - }, - { - "name": "Patterns", - "subnavItems": [ - { - "name": "Autocomplete" - }, - { - "name": "Banner" - }, - { - "name": "Cookies" - }, - { - "name": "Contact Details" - }, - { - "name": "Content cards" - }, - { - "name": "Feedback loop" - }, - { - "name": "Header and footer" - }, - { - "name": "Question Form" - }, - { - "name": "Search" - } - ] - }, - { - "name": "User research" - } - ], - "colors": { - "brand": [ - { - "varName": "brandFurnaceOrange", - "name": "Furnace Orange" - }, - { - "varName": "brandCoolGrey", - "name": "Cool Grey" - }, - { - "varName": "brandWmGreen", - "name": "WM Green" - }, - { - "varName": "brandWmRed", - "name": "WM Red" - }, - { - "varName": "brandWmPurple", - "name": "WM Purple" - }, - { - "varName": "brandWmBlue", - "name": "WM Blue" - } - ], - "web": [ - { - "varName": "primary", - "name": "Primary Orange" - }, - { - "varName": "secondary", - "name": "Secondary Grey" - }, - { - "varName": "text", - "name": "Text" - }, - { - "varName": "cta", - "name": "Call to Action" - }, - { - "varName": "error", - "name": "Error" - }, - { - "varName": "warning", - "name": "Warning" - }, - { - "varName": "success", - "name": "Success" - } - ], - "backgroundOnly": [ - { - "varName": "background", - "name": "Background" - } - ] - }, - "abc123": [ - { - "name": "colour", - "type": "pink", - "description": "red" - } - ], - "aToZOfStyles": [ - { - "letter": "A", - "styles": [ - { - "title": "Abbreviations and acronyms", - "content": "

The first time you use an abbreviation or acronym explain it in full on each page unless it's well known, like UK or BBC. Then refer to it by initials.

Do not use full stops in abbreviations: BBC, not B.B.C.

If you only use a term once, you don't need to include the abbreviation afterwards.

Use 'm' (for millions) and 'bn' (for billions) for sums of money and measurable quantities: £10bn; 1bn litres of water. However, spell out for people and countable nouns: 3 billion commuters; 10 billion tickets.

Use lower case for standard measurements: kg; km; lb; mph but use upper case for KB; GB; MB.

Exception: Spell out metres to prevent confusion with abbreviation for million.

Note:

  1. Do not include a space between the number and the unit: 20km; 50kph; 100KB
  2. Never add an 's' to measurements: 20km, not 20kms

Use lower case for ie and eg, but avoid using these terms altogether where possible. Use 'that is' or 'for example' instead.

" - }, - { - "title": "Active voice", - "content": "

Use the active voice, not the passive voice - it’s easier to read. For example:

We’re going to get the train tomorrow (active voice)

A train is going to be caught by us tomorrow (passive voice)

" - }, - { - "title": "Addresses", - "content": "

Use the contact details design pattern. This shows you how to format addresses.

" - }, - { - "title": "Addressing the user", - "content": "

Address the user as 'you' wherever possible.

" - }, - { - "title": "Adult rate", - "content": "

Do not hyphenate.

" - }, - { - "title": "Ages", - "content": "

Do not use hyphens in ages unless to avoid confusion, although it's always best to write in a way that avoids ambiguity. For example, 'a class of 15 16-year-old students took the A level course' can be written as '15 students aged 16 took the A level course'.

Write ages like this: XX years old (for example, 66 years old).

Exception - use hyphens when talking about age groups:

" - }, - { - "title": "American and UK English", - "content": "

Use UK English spelling and grammar. For example, use 'organise' not 'organize', 'modelling' not 'modeling', and 'fill in a form', not 'fill out a form'.

American proper nouns, like 4th Mechanized Brigade or World Health Organization, take American English spelling.

" - }, - { - "title": "Ampersand", - "content": "

Use and rather than &, unless it's a department's logo image or a company's name as it appears on the Companies House register.

" - }, - { - "title": "Antisocial", - "content": "

Hyphenated.

" - }, - { - "title": "A-road", - "content": "

Hyphenated.

" - } - ] - }, - { - "letter": "B", - "styles": [ - { - "title": "Bacs (Bankers Automated Clearing System)", - "content": "

Use the acronym as it's more widely known than the full name. No need to include the full name in brackets.

" - }, - { - "title": "bold", - "content": "

Only use bold for instructions when you’re talking about an interactive service.

You can use bold to explain what field a user needs to fill in on a form, or what button they need to select. For example: \"Select Continue.\"

Use bold sparingly - using too much will make it difficult for users to know which parts of your content they need to pay the most attention to.

Do not use bold in other situations, for example to emphasise text.

To emphasise words or phrases, you can:

" - }, - { - "title": "bus station", - "content": "

Only use upper case if you're talking about a specific bus station: Dudley Bus Station, Coventry Pool Bus Station.

Use lower case if you're talking about bus stations in general: You can find bike racks at our bus stations.

" - }, - { - "title": "borough council", - "content": "

Lower case except in a name: Dudley Metropolitan Borough Council.

" - }, - { - "title": "Bullet points and numbered steps", - "content": "

You can use bullet points to make text easier to read. Make sure that:

Bullets should normally form a complete sentence following from the lead text. But it's sometimes necessary to add a short phrase to clarify whether all or some of the points apply. For example, 'You can only register a pension scheme that is (one of the following):'

The number and type of examples in a list may lead the user to believe the list is exhaustive. This can be dealt with by

Numbered steps

Use numbered steps instead of bullet points to guide a user through a process. List the things the user needs to do in order. You do not need a lead-in line. Steps end in a full stop because each should be a complete sentence.

" - } - ] - }, - { - "letter": "C", - "styles": [ - { - "title": "campaign/scheme names and brands", - "content": "

If you have a scheme or campaign brand, explain the brand. Don't expect users to understand what you mean. If you say ‘be aware and share’ or ‘get your roll and stroll on’ out of context, it’s not clear what that means.

Don’t capitalise slogans like ‘be aware and share’. If you’re talking about a specific brand or campaign, use capitals. For example, Workwise, PassProtect. Don’t tell people to ‘Be Aware and Share’, but do say ‘the Be Aware and Share’ campaign.

For example:

" - }, - { - "title": "cash fare", - "content": "Do not use - it's confusing. Say 'ticket bought on the bus, train or tram on the day' instead." - }, - { - "title": "Capitalisation", - "content": "

DO NOT USE BLOCK CAPITALS FOR LARGE AMOUNTS OF TEXT AS IT'S QUITE HARD TO READ.

Always use lower case, even in page titles. The exceptions to this are proper nouns.

" - }, - { - "title": "checkbox", - "content": "

Not \"check box\"

" - }, - { - "title": "child rate", - "content": "

Do not hyphenate.

" - }, - { - "title": "click", - "content": "

Don't use \"click\" when talking about user interfaces because not all users click. Use \"select\".

You can use \"right-click\" if the user needs to right-click to open up a list of options to progress through the user journey.

" - }, - { - "title": "collective nouns", - "content": "

Treat as singular, except staff and police: the committee has but the staff are; the police want.

A pair and a couple are both plural.

" - }, - { - "title": "concessionary", - "content": "

Try to avoid. Use these instead:

It’s okay to use concessionary if you’re talking about the English National Concessionary Travel Scheme.

" - }, - { - "title": "contact details", - "content": "

Use the contact details design pattern.

" - }, - { - "title": "contactless", - "content": "

Not Contactless.

" - }, - { - "title": "contractions", - "content": "

You can use contractions to help make your text less formal.

Avoid negative contractions like can't and don't. Many users find them harder to read, or misread them as the opposite of what they say. Use cannot instead of can't; do not instead of don’t.

Avoid should've, could've, would've, they've too. These can also be hard to read.

" - }, - { - "title": "co-operation", - "content": "

Hyphenated.

" - }, - { - "title": "coronavirus (COVID-19)", - "content": "

Coronavirus is the virus which causes the illness COVID-19. Coronavirus is lower case.

" - }, - { - "title": "council", - "content": "

Use lower case when writing about local councils in general. Use capitals for the official name of a local council, for example: Birmingham City Council.

" - }, - { - "title": "Council Tax", - "content": "

Upper case.

" - }, - { - "title": "customers", - "content": "

Refer to 'customers' rather than 'passengers'.

" - } - ] - }, - { - "letter": "D", - "styles": [ - { - "title": "Dates", - "content": "

Use 'to' instead of a dash or slash in date ranges. 'To' is quicker to read than a dash, and it's easier for screen readers.

Always explain what your date range represents, for example 'tax year 2013 to 2014' or 'September 2013 to July 2014'. Date ranges can be the academic year, calendar year or tax year. This is why date ranges must be very, very clear.

" - }, - { - "title": "daytime", - "content": "

But night-time.

" - }, - { - "title": "Direct Debit", - "content": "

Upper case.

" - }, - { - "title": "Direct Debit Instruction", - "content": "

Upper case.

" - }, - { - "title": "disabled access", - "content": "

Use this term when referring to disabled accessibility, as 'accessibility' has a wider meaning.

" - }, - { - "title": "disabled people", - "content": "

Not 'the disabled' or 'people with disabilities'.

Read GOV.UK advice on words to use and avoid when talking about disability.

" - }, - { - "title": "district council", - "content": "

Lower case even in a name, like Warwick district council.

" - } - ] - }, - { - "letter": "E", - "styles": [ - { - "title": "eg, etc and ie", - "content": "

eg can sometimes be read aloud as 'egg' by screen reading software. Instead use 'for example' or 'such as' or 'like' or 'including' - whichever works best in the specific context.

etc can usually be avoided. Try using 'for example' or 'such as' or 'like' or 'including'. Never use etc at the end of a list starting with these words.

ie - used to clarify a sentence - is not always well understood. Try (re)writing sentences to avoid the need to use it. If that is not possible, use an alternative such as 'meaning' or 'that is'.

" - }, - { - "title": "email", - "content": "

Not e-mail.

Always give the full email address when providing a hyperlink. For example, 'email ticketing@twfm.org.uk' not 'email the ticketing team'

" - } - ] - }, - { - "letter": "F", - "styles": [ - { - "title": "FAQs (frequently asked questions)", - "content": "

Do not use FAQs.

If you write content by starting with user needs, you will not need to use FAQs.

FAQs are discouraged because they:

" - }, - { - "title": "fine", - "content": "

Use 'fine' instead of 'financial penalty'.

For example, \"You'll pay a £50 fine.\"" - }, - { - "title": "first person", - "content": "

Use \"we'\" and \"us\" when addressing the user where possible. For example, instead of \"West Midlands Combined Authority has…\" say \"We have\" - it’s more personal.

" - }, - { - "title": "fire and rescue service", - "content": "

Lower case.

" - }, - { - "title": "focus", - "content": "

Focuses/focused/focusing. Not focusses/focussed/focussing.

" - } - ] - }, - { - "letter": "G", - "styles": [ - { - "title": "government", - "content": "

Lower case unless it's a full title. For example: 'UK government', but 'Her Majesty's Government of the United Kingdom of Great Britain and Northern Ireland'.

" - } - ] - }, - { - "letter": "H", - "styles": [ - { - "title": "Hyphenation", - "content": "

Hyphenate:

Do not hyphenate:

Do not use a hyphen unless it's confusing without it, for example, a little used-car is different from a little-used car. You can also refer to The Guardian style guide for advice on hyphenation.

Use 'to' for time and date ranges, not hyphens.

" - } - ] - }, - { - "letter": "I", - "styles": [ - { - "title": "ie", - "content": "

see eg, etc and ie

" - }, - { - "title": "Italics", - "content": "

Do not use italics. They can be hard to read online.

" - } - ] - }, - { - "letter": "J", - "styles": [ - { - "title": "job titles", - "content": "

Use upper case when referring to a specific role: Lord Mayor of Birmingham.

Use lower case if writing generally: service assistants, station managers.

" - }, - { - "title": "Journey Planner", - "content": "

Our travel tool that helps with live route-planning across our network

A stand-alone link to it should be action-led and first-person: 'Plan my journey'.

If giving instruction, it can be second-person (to avoid mixing perspectives): 'Plan your journey'.

If listing tools, we can use the product name: 'Journey Planner'.

" - } - ] - }, - { - "letter": "L", - "styles": [ - { - "title": "Links", - "content": "

Front-load your link text with the relevant terms and make them active and specific. Do not use ‘click here’. Use text that describes the link instead.

" - }, - { - "title": "Lists", - "content": "

Lists should be bulleted to make them easier to read. See bullets and steps.

Very long lists can be written as a paragraph with a lead-in sentence if it looks better: 'The following countries are in the EU: Spain, France, Italy...'

" - }, - { - "title": "log in", - "content": "

See sign in or log in.

" - } - ] - }, - { - "letter": "M", - "styles": [ - { - "title": "measurements", - "content": "

Use lower case for standard measurements: kg; km; mph; kph but use upper case for KB; GB; MB.

Spell out metres to prevent confusion with abbreviation for million.

Do not include a space between the number and the unit: 20km; 50mph; 100KB.

Never add an 's' to measurements: 20km, not 20kms.

" - }, - { - "title": "Metro", - "content": "

Only use when talking about the company that runs the tram - West Midlands Metro. To talk about the tram as a mode of transport, use tram, not Metro.

" - }, - { - "title": "money", - "content": "

Use the £ symbol: £75.

Do not use decimals unless pence are included: £75.50 but not £75.00.

Do not use '£0.xx million' for amounts less than £1 million.

Write out pence in full: calls will cost 4 pence per minute from a landline.

Currencies are lower case.

" - } - ] - }, - { - "letter": "N", - "styles": [ - { - "title": "nBus", - "content": "

Use when talking about network bus tickets - always use a lower case ‘n’, upper case ‘B’.

" - }, - { - "title": "nNetwork", - "content": "

Use when talking about network tickets for the bus, train and tram - always use a lower case ‘n’, followed by an upper case ‘N’.

" - }, - { - "title": "nTrain", - "content": "

Use when talking about network train tickets - always use a lower case ‘n’, upper case ‘T’.

" - }, - { - "title": "Numbers", - "content": "

Use 'one' unless you're talking about a step, a point in a list or another situation where using the numeral makes more sense: 'in point 1 of the design instructions', for example. Or this:

You'll be shown 14 clips that feature everyday road scenes.

There will be:

  1. developing hazard in 13 clips
  2. developing hazards in the other clip

Write all other numbers in numerals (including 2 to 9) except where it's part of a common expression like 'one or two of them' where numerals would look strange.

If a number starts a sentence, write it out in full (Thirty-four, for example) except where it starts a title or subheading.

For numerals over 999 - insert a comma for clarity: 9,000

Spell out common fractions like two-thirds.

Use a % sign for percentages: 50%.

Use a 0 where there's no digit before the decimal point.

Use '500 to 900' and not '500-900' (except in tables and for the 16-18 photocard).

Use MB for anything over 1MB: 4MB not 4096KB.

Use KB for anything under 1MB: 569KB not 0.55MB.

Keep it as accurate as possible and up to 2 decimal places: 4.03MB.

Addresses: use 'to' in address ranges: 49 to 53 Cherry Street.

Ordinal numbers

Spell out first to ninth. After that use 10th, 11th and so on.

In tables, use numerals throughout.

" - }, - { - "title": "NXWM", - "content": "

see operator names.

" - } - ] - }, - { - "letter": "O", - "styles": [ - { - "title": "off-peak", - "content": "

Use lower case and include a hyphen.

" - }, - { - "title": "older people", - "content": "

Refer to older people rather than elderly people.

" - }, - { - "title": "online", - "content": "

One word. Do not use 'on-line' or 'on line'.

" - }, - { - "title": "operator names", - "content": "

Do not abbreviate the name. For example, do not use ‘WM Metro’, ‘NX West Midlands’ or ‘West Mids Railway’.

You can use an acronym for timetables and passenger information. For example, ‘West Midlands Metro (WMM)’, ‘National Express West Midlands (NXWM)’ or ‘West Midlands Railway (WMR)’.

Do not use the NXWM acronym without explaining it first. It is not a well known acronym.

" - }, - { - "title": "or", - "content": "

Do not use slashes instead of \"or\". For example, do not say \"Do this 3/4 times\".

" - }, - { - "title": "opt in/out", - "content": "

Verb: I would like to opt in

" - }, - { - "title": "opt-in/out", - "content": "

Adjective: an opt-in clause

" - } - ] - }, - { - "letter": "P", - "styles": [ - { - "title": "paper ticket", - "content": "

A ticket that’s printed on paper, not on a Swift card.

" - }, - { - "title": "passengers", - "content": "

Refer to 'customers' rather than 'passengers'.

" - }, - { - "title": "pay as you go", - "content": "

Do not hyphenate and always use lower case.

" - }, - { - "title": "pay as you go credit", - "content": "

Use to describe Swift cards with a stored cash value

Note: Do not use 'pay as you go travel value (cash)' or 'pay as you go cash value'.

" - }, - { - "title": "PDF", - "content": "Upper case. No need to explain the acronym." - }, - { - "title": "plain English", - "content": "

Lower case plain and upper case English unless in a title: the Plain English Campaign.

All content should be written in plain English. You should also make sure you use language your audience will understand. Use the Plain English Campaign’s A to Z of alternative words to avoid complex language.

" - }, - { - "title": "phone numbers", - "content": "

Phone numbers should be split into at least three groups of digits for readability, ideally with no more than four digits in any single group. For example: 020 7378 1705; 0343 222 6666; 0762 480 4299. See also the design pattern for contact details.

" - } - ] - }, - { - "letter": "Q", - "styles": [ - { - "title": "quotation marks", - "content": "

Use single quotation marks in all cases.

Use double quotation marks if using a quote within a quote.

If a quote runs on longer than one paragraph, include quotation marks at the beginning of each subsequent paragraph but only at the end of the final paragraph.

Place full stops and commas inside quotes when they are complete sentences, otherwise place them outside: 'I want to buy a ticket,' said Mr Smith; When he said 'I promise', he didn't really mean it.

" - } - ] - }, - { - "letter": "R", - "styles": [ - { - "title": "real time/realtime", - "content": "

Where possible, use 'live' instead of 'realtime' or 'real time'

real time (noun): this information is being updated in real time.
realtime (adjective): realtime service information.
Not real-time.

" - }, - { - "title": "re-open", - "content": "

Not reopen.

" - } - ] - }, - { - "letter": "S", - "styles": [ - { - "title": "seasons", - "content": "

Use lower case for spring, summer, autumn and winter.

" - }, - { - "title": "Sentence length", - "content": "

Do not use long sentences. Check sentences with more than 25 words to see if you can split them to make them clearer.

" - }, - { - "title": "sign in or log in", - "content": "

Use sign in rather than log in (verb) for calls-to-action where users enter their details to access a service.

Do not use login as a noun - say what the user actually needs to enter (like username, password, National Insurance number).

" - }, - { - "title": "State Pension", - "content": "

Upper case.

" - }, - { - "title": "Station", - "content": "

Lower case. For example, Birmingham New Street station. Do not say tram station, say tram stop.

" - }, - { - "title": "Stop", - "content": "

Lower case. For example, Summer Lane bus stop.

" - }, - { - "title": "Swift card", - "content": "

Do not capitalise 'Card'.

" - }, - { - "title": "step-free", - "content": "

A route between street and platform that doesn't require the use of stairs or escalators.

" - } - ] - }, - { - "letter": "T", - "styles": [ - { - "title": "terms and conditions", - "content": "

Not Terms and Conditions or terms & conditions.

" - }, - { - "title": "text message alerts", - "content": "

Not SMS alerts.

" - }, - { - "title": "TfWM", - "content": "

See entry on Transport for West Midlands.

" - }, - { - "title": "Times", - "content": "

use 'to' in time ranges, not hyphens, en rules or em dashes: 10am to 11am (not 10-11am)
5:30pm (not 1730hrs)
midnight (not 00:00)
midday (not 12 noon, noon or 12pm)
6 hours 30 minutes
Midnight is the first minute of the day, not the last. You should consider using \"11:59pm\" to avoid confusion about a single, specific time.

For example, \"You must register by 11:59pm on Tuesday 14 June.\" can only be read one way, but \"You must register by midnight on Tuesday 14 June\" can be read in two ways (the end of Monday 13, or end of Tuesday 14).

Timetables and printed passenger information use the 24-hour clock in HHMM format.

" - }, - { - "title": "tram", - "content": "

Not Metro.

" - }, - { - "title": "tram stop", - "content": "

Not station.

" - }, - { - "title": "Transport for West Midlands", - "content": "

Avoid referring to Transport for West Midlands (TfWM). Users don't need to know about it while getting travel advice.

Explaining the relationship between West Midlands Combined Authority, TfWM and West Midlands Combined Authority (WMCA) is complicated. Use \"we\" instead. For example, \"we manage the Key Route Network (KRN)\" with a link to the TfWM policy page.

" - } - ] - }, - { - "letter": "U", - "styles": [ - { - "title": "under-16s", - "content": "

Requires a hyphen in all cases. This is true whenever referring to age groups: under-16s; under-18s; over-60s.

Avoid the common error of adding an apostrophe when making a word or abbreviation plural as this makes it possessive: under-16s not under-16's.

" - }, - { - "title": "URL", - "content": "

Upper case. No need to explain the acronym.

" - }, - { - "title": "username", - "content": "

Not \"user name\".

" - } - ] - }, - { - "letter": "W", - "styles": [ - { - "title": "web", - "content": "

Lower case.

" - }, - { - "title": "webpage", - "content": "

One word.

" - }, - { - "title": "website", - "content": "

Not web-site or web site.

" - }, - { - "title": "West Midlands Combined Authority", - "content": "

Avoid referring to West Midlands Combined Authority (WMCA). Users don't need to know about it while getting travel advice.

The exception is if you referring to a statutory responsibility or a contract. For example, concessionary passes or terms and conditions.

" - }, - { - "title": "wifi", - "content": "

Lower case, no hyphen.

" - }, - { - "title": "WMCA", - "content": "

See entry on West Midlands Combined Authority.

" - }, - { - "title": "wmca.org.uk", - "content": "

If you are linking to another page, you should use an in-text link rather than the full URL. See the entry on links for more information.

Sometimes it is better to show the full URL. For example, when telling users to click a link to verify something in an email.

It is important to use the right URL. Only use wmca.org.uk.

Do not prefix the URL with ‘www.’ as this makes our URL hard to read. The domain extension ‘.co.uk’ makes it obvious to users that it is a URL.

" - }, - { - "title": "www.", - "content": "

See entry on wmca.org.uk.

" - } - ] - }, - { - "letter": "Z", - "styles": [ - { - "title": "zero-hours contract", - "content": "

Not \"zero-hour contract\" or \"zero hours contract\"

" - } - ] - } - ] -} \ No newline at end of file +{} \ No newline at end of file diff --git a/src/www/data.njk.json b/src/www/data.njk.json new file mode 100644 index 00000000..ac11a541 --- /dev/null +++ b/src/www/data.njk.json @@ -0,0 +1,731 @@ +{ + "navItems": [ + { + "name": "Styles", + "subnavItems": [ + { + "name": "A to Z content style guide" + }, + { + "name": "Colour palettes" + }, + { + "name": "Icons" + }, + { + "name": "Images" + }, + { + "name": "Layout" + }, + { + "name": "Maps" + }, + { + "name": "Typography" + }, + { + "name": "Utility classes" + } + ] + }, + { + "name": "Components", + "subnavItems": [ + { + "name": "Accordion" + }, + { + "name": "Breadcrumb" + }, + { + "name": "Buttons" + }, + { + "name": "Content card" + }, + { + "name": "Content Tiles" + }, + { + "name": "Details" + }, + { + "name": "File download" + }, + { + "name": "Form elements" + }, + { + "name": "Inset text" + }, + { + "name": "In-text step" + }, + { + "name": "Links" + }, + { + "name": "Lists" + }, + { + "name": "Loader" + }, + { + "name": "Message" + }, + { + "name": "Phase indicator" + }, + { + "name": "Table" + }, + { + "name": "Warning text" + } + ] + }, + { + "name": "Patterns", + "subnavItems": [ + { + "name": "Autocomplete" + }, + { + "name": "Banner" + }, + { + "name": "Cookies" + }, + { + "name": "Contact Details" + }, + { + "name": "Content cards" + }, + { + "name": "Feedback loop" + }, + { + "name": "Header and footer" + }, + { + "name": "Question Form" + }, + { + "name": "Search" + } + ] + }, + { + "name": "User research" + } + ], + "colors": { + "brand": [ + { + "varName": "brandFurnaceOrange", + "name": "Furnace Orange" + }, + { + "varName": "brandCoolGrey", + "name": "Cool Grey" + }, + { + "varName": "brandWmGreen", + "name": "WM Green" + }, + { + "varName": "brandWmRed", + "name": "WM Red" + }, + { + "varName": "brandWmPurple", + "name": "WM Purple" + }, + { + "varName": "brandWmBlue", + "name": "WM Blue" + } + ], + "web": [ + { + "varName": "primary", + "name": "Primary Orange" + }, + { + "varName": "secondary", + "name": "Secondary Grey" + }, + { + "varName": "text", + "name": "Text" + }, + { + "varName": "cta", + "name": "Call to Action" + }, + { + "varName": "error", + "name": "Error" + }, + { + "varName": "warning", + "name": "Warning" + }, + { + "varName": "success", + "name": "Success" + } + ], + "backgroundOnly": [ + { + "varName": "background", + "name": "Background" + } + ] + }, + "abc123": [ + { + "name": "colour", + "type": "pink", + "description": "red" + } + ], + "aToZOfStyles": [ + { + "letter": "A", + "styles": [ + { + "title": "Abbreviations and acronyms", + "content": "

The first time you use an abbreviation or acronym explain it in full on each page unless it's well known, like UK or BBC. Then refer to it by initials.

Do not use full stops in abbreviations: BBC, not B.B.C.

If you only use a term once, you don't need to include the abbreviation afterwards.

Use 'm' (for millions) and 'bn' (for billions) for sums of money and measurable quantities: £10bn; 1bn litres of water. However, spell out for people and countable nouns: 3 billion commuters; 10 billion tickets.

Use lower case for standard measurements: kg; km; lb; mph but use upper case for KB; GB; MB.

Exception: Spell out metres to prevent confusion with abbreviation for million.

Note:

  1. Do not include a space between the number and the unit: 20km; 50kph; 100KB
  2. Never add an 's' to measurements: 20km, not 20kms

Use lower case for ie and eg, but avoid using these terms altogether where possible. Use 'that is' or 'for example' instead.

" + }, + { + "title": "Active voice", + "content": "

Use the active voice, not the passive voice - it’s easier to read. For example:

We’re going to get the train tomorrow (active voice)

A train is going to be caught by us tomorrow (passive voice)

" + }, + { + "title": "Addresses", + "content": "

Use the contact details design pattern. This shows you how to format addresses.

" + }, + { + "title": "Addressing the user", + "content": "

Address the user as 'you' wherever possible.

" + }, + { + "title": "Adult rate", + "content": "

Do not hyphenate.

" + }, + { + "title": "Ages", + "content": "

Do not use hyphens in ages unless to avoid confusion, although it's always best to write in a way that avoids ambiguity. For example, 'a class of 15 16-year-old students took the A level course' can be written as '15 students aged 16 took the A level course'.

Write ages like this: XX years old (for example, 66 years old).

Exception - use hyphens when talking about age groups:

" + }, + { + "title": "American and UK English", + "content": "

Use UK English spelling and grammar. For example, use 'organise' not 'organize', 'modelling' not 'modeling', and 'fill in a form', not 'fill out a form'.

American proper nouns, like 4th Mechanized Brigade or World Health Organization, take American English spelling.

" + }, + { + "title": "Ampersand", + "content": "

Use and rather than &, unless it's a department's logo image or a company's name as it appears on the Companies House register.

" + }, + { + "title": "Antisocial", + "content": "

Hyphenated.

" + }, + { + "title": "A-road", + "content": "

Hyphenated.

" + } + ] + }, + { + "letter": "B", + "styles": [ + { + "title": "Bacs (Bankers Automated Clearing System)", + "content": "

Use the acronym as it's more widely known than the full name. No need to include the full name in brackets.

" + }, + { + "title": "bold", + "content": "

Only use bold for instructions when you’re talking about an interactive service.

You can use bold to explain what field a user needs to fill in on a form, or what button they need to select. For example: \"Select Continue.\"

Use bold sparingly - using too much will make it difficult for users to know which parts of your content they need to pay the most attention to.

Do not use bold in other situations, for example to emphasise text.

To emphasise words or phrases, you can:

" + }, + { + "title": "bus station", + "content": "

Only use upper case if you're talking about a specific bus station: Dudley Bus Station, Coventry Pool Bus Station.

Use lower case if you're talking about bus stations in general: You can find bike racks at our bus stations.

" + }, + { + "title": "borough council", + "content": "

Lower case except in a name: Dudley Metropolitan Borough Council.

" + }, + { + "title": "Bullet points and numbered steps", + "content": "

You can use bullet points to make text easier to read. Make sure that:

Bullets should normally form a complete sentence following from the lead text. But it's sometimes necessary to add a short phrase to clarify whether all or some of the points apply. For example, 'You can only register a pension scheme that is (one of the following):'

The number and type of examples in a list may lead the user to believe the list is exhaustive. This can be dealt with by

Numbered steps

Use numbered steps instead of bullet points to guide a user through a process. List the things the user needs to do in order. You do not need a lead-in line. Steps end in a full stop because each should be a complete sentence.

" + } + ] + }, + { + "letter": "C", + "styles": [ + { + "title": "campaign/scheme names and brands", + "content": "

If you have a scheme or campaign brand, explain the brand. Don't expect users to understand what you mean. If you say ‘be aware and share’ or ‘get your roll and stroll on’ out of context, it’s not clear what that means.

Don’t capitalise slogans like ‘be aware and share’. If you’re talking about a specific brand or campaign, use capitals. For example, Workwise, PassProtect. Don’t tell people to ‘Be Aware and Share’, but do say ‘the Be Aware and Share’ campaign.

For example:

" + }, + { + "title": "cash fare", + "content": "Do not use - it's confusing. Say 'ticket bought on the bus, train or tram on the day' instead." + }, + { + "title": "Capitalisation", + "content": "

DO NOT USE BLOCK CAPITALS FOR LARGE AMOUNTS OF TEXT AS IT'S QUITE HARD TO READ.

Always use lower case, even in page titles. The exceptions to this are proper nouns.

" + }, + { + "title": "checkbox", + "content": "

Not \"check box\"

" + }, + { + "title": "child rate", + "content": "

Do not hyphenate.

" + }, + { + "title": "click", + "content": "

Don't use \"click\" when talking about user interfaces because not all users click. Use \"select\".

You can use \"right-click\" if the user needs to right-click to open up a list of options to progress through the user journey.

" + }, + { + "title": "collective nouns", + "content": "

Treat as singular, except staff and police: the committee has but the staff are; the police want.

A pair and a couple are both plural.

" + }, + { + "title": "concessionary", + "content": "

Try to avoid. Use these instead:

It’s okay to use concessionary if you’re talking about the English National Concessionary Travel Scheme.

" + }, + { + "title": "contact details", + "content": "

Use the contact details design pattern.

" + }, + { + "title": "contactless", + "content": "

Not Contactless.

" + }, + { + "title": "contractions", + "content": "

You can use contractions to help make your text less formal.

Avoid negative contractions like can't and don't. Many users find them harder to read, or misread them as the opposite of what they say. Use cannot instead of can't; do not instead of don’t.

Avoid should've, could've, would've, they've too. These can also be hard to read.

" + }, + { + "title": "co-operation", + "content": "

Hyphenated.

" + }, + { + "title": "coronavirus (COVID-19)", + "content": "

Coronavirus is the virus which causes the illness COVID-19. Coronavirus is lower case.

" + }, + { + "title": "council", + "content": "

Use lower case when writing about local councils in general. Use capitals for the official name of a local council, for example: Birmingham City Council.

" + }, + { + "title": "Council Tax", + "content": "

Upper case.

" + }, + { + "title": "customers", + "content": "

Refer to 'customers' rather than 'passengers'.

" + } + ] + }, + { + "letter": "D", + "styles": [ + { + "title": "Dates", + "content": "

Use 'to' instead of a dash or slash in date ranges. 'To' is quicker to read than a dash, and it's easier for screen readers.

Always explain what your date range represents, for example 'tax year 2013 to 2014' or 'September 2013 to July 2014'. Date ranges can be the academic year, calendar year or tax year. This is why date ranges must be very, very clear.

" + }, + { + "title": "daytime", + "content": "

But night-time.

" + }, + { + "title": "Direct Debit", + "content": "

Upper case.

" + }, + { + "title": "Direct Debit Instruction", + "content": "

Upper case.

" + }, + { + "title": "disabled access", + "content": "

Use this term when referring to disabled accessibility, as 'accessibility' has a wider meaning.

" + }, + { + "title": "disabled people", + "content": "

Not 'the disabled' or 'people with disabilities'.

Read GOV.UK advice on words to use and avoid when talking about disability.

" + }, + { + "title": "district council", + "content": "

Lower case even in a name, like Warwick district council.

" + } + ] + }, + { + "letter": "E", + "styles": [ + { + "title": "eg, etc and ie", + "content": "

eg can sometimes be read aloud as 'egg' by screen reading software. Instead use 'for example' or 'such as' or 'like' or 'including' - whichever works best in the specific context.

etc can usually be avoided. Try using 'for example' or 'such as' or 'like' or 'including'. Never use etc at the end of a list starting with these words.

ie - used to clarify a sentence - is not always well understood. Try (re)writing sentences to avoid the need to use it. If that is not possible, use an alternative such as 'meaning' or 'that is'.

" + }, + { + "title": "email", + "content": "

Not e-mail.

Always give the full email address when providing a hyperlink. For example, 'email ticketing@twfm.org.uk' not 'email the ticketing team'

" + } + ] + }, + { + "letter": "F", + "styles": [ + { + "title": "FAQs (frequently asked questions)", + "content": "

Do not use FAQs.

If you write content by starting with user needs, you will not need to use FAQs.

FAQs are discouraged because they:

" + }, + { + "title": "fine", + "content": "

Use 'fine' instead of 'financial penalty'.

For example, \"You'll pay a £50 fine.\"" + }, + { + "title": "first person", + "content": "

Use \"we'\" and \"us\" when addressing the user where possible. For example, instead of \"West Midlands Combined Authority has…\" say \"We have\" - it’s more personal.

" + }, + { + "title": "fire and rescue service", + "content": "

Lower case.

" + }, + { + "title": "focus", + "content": "

Focuses/focused/focusing. Not focusses/focussed/focussing.

" + } + ] + }, + { + "letter": "G", + "styles": [ + { + "title": "government", + "content": "

Lower case unless it's a full title. For example: 'UK government', but 'Her Majesty's Government of the United Kingdom of Great Britain and Northern Ireland'.

" + } + ] + }, + { + "letter": "H", + "styles": [ + { + "title": "Hyphenation", + "content": "

Hyphenate:

Do not hyphenate:

Do not use a hyphen unless it's confusing without it, for example, a little used-car is different from a little-used car. You can also refer to The Guardian style guide for advice on hyphenation.

Use 'to' for time and date ranges, not hyphens.

" + } + ] + }, + { + "letter": "I", + "styles": [ + { + "title": "ie", + "content": "

see eg, etc and ie

" + }, + { + "title": "Italics", + "content": "

Do not use italics. They can be hard to read online.

" + } + ] + }, + { + "letter": "J", + "styles": [ + { + "title": "job titles", + "content": "

Use upper case when referring to a specific role: Lord Mayor of Birmingham.

Use lower case if writing generally: service assistants, station managers.

" + }, + { + "title": "Journey Planner", + "content": "

Our travel tool that helps with live route-planning across our network

A stand-alone link to it should be action-led and first-person: 'Plan my journey'.

If giving instruction, it can be second-person (to avoid mixing perspectives): 'Plan your journey'.

If listing tools, we can use the product name: 'Journey Planner'.

" + } + ] + }, + { + "letter": "L", + "styles": [ + { + "title": "Links", + "content": "

Front-load your link text with the relevant terms and make them active and specific. Do not use ‘click here’. Use text that describes the link instead.

" + }, + { + "title": "Lists", + "content": "

Lists should be bulleted to make them easier to read. See bullets and steps.

Very long lists can be written as a paragraph with a lead-in sentence if it looks better: 'The following countries are in the EU: Spain, France, Italy...'

" + }, + { + "title": "log in", + "content": "

See sign in or log in.

" + } + ] + }, + { + "letter": "M", + "styles": [ + { + "title": "measurements", + "content": "

Use lower case for standard measurements: kg; km; mph; kph but use upper case for KB; GB; MB.

Spell out metres to prevent confusion with abbreviation for million.

Do not include a space between the number and the unit: 20km; 50mph; 100KB.

Never add an 's' to measurements: 20km, not 20kms.

" + }, + { + "title": "Metro", + "content": "

Only use when talking about the company that runs the tram - West Midlands Metro. To talk about the tram as a mode of transport, use tram, not Metro.

" + }, + { + "title": "money", + "content": "

Use the £ symbol: £75.

Do not use decimals unless pence are included: £75.50 but not £75.00.

Do not use '£0.xx million' for amounts less than £1 million.

Write out pence in full: calls will cost 4 pence per minute from a landline.

Currencies are lower case.

" + } + ] + }, + { + "letter": "N", + "styles": [ + { + "title": "nBus", + "content": "

Use when talking about network bus tickets - always use a lower case ‘n’, upper case ‘B’.

" + }, + { + "title": "nNetwork", + "content": "

Use when talking about network tickets for the bus, train and tram - always use a lower case ‘n’, followed by an upper case ‘N’.

" + }, + { + "title": "nTrain", + "content": "

Use when talking about network train tickets - always use a lower case ‘n’, upper case ‘T’.

" + }, + { + "title": "Numbers", + "content": "

Use 'one' unless you're talking about a step, a point in a list or another situation where using the numeral makes more sense: 'in point 1 of the design instructions', for example. Or this:

You'll be shown 14 clips that feature everyday road scenes.

There will be:

  1. developing hazard in 13 clips
  2. developing hazards in the other clip

Write all other numbers in numerals (including 2 to 9) except where it's part of a common expression like 'one or two of them' where numerals would look strange.

If a number starts a sentence, write it out in full (Thirty-four, for example) except where it starts a title or subheading.

For numerals over 999 - insert a comma for clarity: 9,000

Spell out common fractions like two-thirds.

Use a % sign for percentages: 50%.

Use a 0 where there's no digit before the decimal point.

Use '500 to 900' and not '500-900' (except in tables and for the 16-18 photocard).

Use MB for anything over 1MB: 4MB not 4096KB.

Use KB for anything under 1MB: 569KB not 0.55MB.

Keep it as accurate as possible and up to 2 decimal places: 4.03MB.

Addresses: use 'to' in address ranges: 49 to 53 Cherry Street.

Ordinal numbers

Spell out first to ninth. After that use 10th, 11th and so on.

In tables, use numerals throughout.

" + }, + { + "title": "NXWM", + "content": "

see operator names.

" + } + ] + }, + { + "letter": "O", + "styles": [ + { + "title": "off-peak", + "content": "

Use lower case and include a hyphen.

" + }, + { + "title": "older people", + "content": "

Refer to older people rather than elderly people.

" + }, + { + "title": "online", + "content": "

One word. Do not use 'on-line' or 'on line'.

" + }, + { + "title": "operator names", + "content": "

Do not abbreviate the name. For example, do not use ‘WM Metro’, ‘NX West Midlands’ or ‘West Mids Railway’.

You can use an acronym for timetables and passenger information. For example, ‘West Midlands Metro (WMM)’, ‘National Express West Midlands (NXWM)’ or ‘West Midlands Railway (WMR)’.

Do not use the NXWM acronym without explaining it first. It is not a well known acronym.

" + }, + { + "title": "or", + "content": "

Do not use slashes instead of \"or\". For example, do not say \"Do this 3/4 times\".

" + }, + { + "title": "opt in/out", + "content": "

Verb: I would like to opt in

" + }, + { + "title": "opt-in/out", + "content": "

Adjective: an opt-in clause

" + } + ] + }, + { + "letter": "P", + "styles": [ + { + "title": "paper ticket", + "content": "

A ticket that’s printed on paper, not on a Swift card.

" + }, + { + "title": "passengers", + "content": "

Refer to 'customers' rather than 'passengers'.

" + }, + { + "title": "pay as you go", + "content": "

Do not hyphenate and always use lower case.

" + }, + { + "title": "pay as you go credit", + "content": "

Use to describe Swift cards with a stored cash value

Note: Do not use 'pay as you go travel value (cash)' or 'pay as you go cash value'.

" + }, + { + "title": "PDF", + "content": "Upper case. No need to explain the acronym." + }, + { + "title": "plain English", + "content": "

Lower case plain and upper case English unless in a title: the Plain English Campaign.

All content should be written in plain English. You should also make sure you use language your audience will understand. Use the Plain English Campaign’s A to Z of alternative words to avoid complex language.

" + }, + { + "title": "phone numbers", + "content": "

Phone numbers should be split into at least three groups of digits for readability, ideally with no more than four digits in any single group. For example: 020 7378 1705; 0343 222 6666; 0762 480 4299. See also the design pattern for contact details.

" + } + ] + }, + { + "letter": "Q", + "styles": [ + { + "title": "quotation marks", + "content": "

Use single quotation marks in all cases.

Use double quotation marks if using a quote within a quote.

If a quote runs on longer than one paragraph, include quotation marks at the beginning of each subsequent paragraph but only at the end of the final paragraph.

Place full stops and commas inside quotes when they are complete sentences, otherwise place them outside: 'I want to buy a ticket,' said Mr Smith; When he said 'I promise', he didn't really mean it.

" + } + ] + }, + { + "letter": "R", + "styles": [ + { + "title": "real time/realtime", + "content": "

Where possible, use 'live' instead of 'realtime' or 'real time'

real time (noun): this information is being updated in real time.
realtime (adjective): realtime service information.
Not real-time.

" + }, + { + "title": "re-open", + "content": "

Not reopen.

" + } + ] + }, + { + "letter": "S", + "styles": [ + { + "title": "seasons", + "content": "

Use lower case for spring, summer, autumn and winter.

" + }, + { + "title": "Sentence length", + "content": "

Do not use long sentences. Check sentences with more than 25 words to see if you can split them to make them clearer.

" + }, + { + "title": "sign in or log in", + "content": "

Use sign in rather than log in (verb) for calls-to-action where users enter their details to access a service.

Do not use login as a noun - say what the user actually needs to enter (like username, password, National Insurance number).

" + }, + { + "title": "State Pension", + "content": "

Upper case.

" + }, + { + "title": "Station", + "content": "

Lower case. For example, Birmingham New Street station. Do not say tram station, say tram stop.

" + }, + { + "title": "Stop", + "content": "

Lower case. For example, Summer Lane bus stop.

" + }, + { + "title": "Swift card", + "content": "

Do not capitalise 'Card'.

" + }, + { + "title": "step-free", + "content": "

A route between street and platform that doesn't require the use of stairs or escalators.

" + } + ] + }, + { + "letter": "T", + "styles": [ + { + "title": "terms and conditions", + "content": "

Not Terms and Conditions or terms & conditions.

" + }, + { + "title": "text message alerts", + "content": "

Not SMS alerts.

" + }, + { + "title": "TfWM", + "content": "

See entry on Transport for West Midlands.

" + }, + { + "title": "Times", + "content": "

use 'to' in time ranges, not hyphens, en rules or em dashes: 10am to 11am (not 10-11am)
5:30pm (not 1730hrs)
midnight (not 00:00)
midday (not 12 noon, noon or 12pm)
6 hours 30 minutes
Midnight is the first minute of the day, not the last. You should consider using \"11:59pm\" to avoid confusion about a single, specific time.

For example, \"You must register by 11:59pm on Tuesday 14 June.\" can only be read one way, but \"You must register by midnight on Tuesday 14 June\" can be read in two ways (the end of Monday 13, or end of Tuesday 14).

Timetables and printed passenger information use the 24-hour clock in HHMM format.

" + }, + { + "title": "tram", + "content": "

Not Metro.

" + }, + { + "title": "tram stop", + "content": "

Not station.

" + }, + { + "title": "Transport for West Midlands", + "content": "

Avoid referring to Transport for West Midlands (TfWM). Users don't need to know about it while getting travel advice.

Explaining the relationship between West Midlands Combined Authority, TfWM and West Midlands Combined Authority (WMCA) is complicated. Use \"we\" instead. For example, \"we manage the Key Route Network (KRN)\" with a link to the TfWM policy page.

" + } + ] + }, + { + "letter": "U", + "styles": [ + { + "title": "under-16s", + "content": "

Requires a hyphen in all cases. This is true whenever referring to age groups: under-16s; under-18s; over-60s.

Avoid the common error of adding an apostrophe when making a word or abbreviation plural as this makes it possessive: under-16s not under-16's.

" + }, + { + "title": "URL", + "content": "

Upper case. No need to explain the acronym.

" + }, + { + "title": "username", + "content": "

Not \"user name\".

" + } + ] + }, + { + "letter": "W", + "styles": [ + { + "title": "web", + "content": "

Lower case.

" + }, + { + "title": "webpage", + "content": "

One word.

" + }, + { + "title": "website", + "content": "

Not web-site or web site.

" + }, + { + "title": "West Midlands Combined Authority", + "content": "

Avoid referring to West Midlands Combined Authority (WMCA). Users don't need to know about it while getting travel advice.

The exception is if you referring to a statutory responsibility or a contract. For example, concessionary passes or terms and conditions.

" + }, + { + "title": "wifi", + "content": "

Lower case, no hyphen.

" + }, + { + "title": "WMCA", + "content": "

See entry on West Midlands Combined Authority.

" + }, + { + "title": "wmca.org.uk", + "content": "

If you are linking to another page, you should use an in-text link rather than the full URL. See the entry on links for more information.

Sometimes it is better to show the full URL. For example, when telling users to click a link to verify something in an email.

It is important to use the right URL. Only use wmca.org.uk.

Do not prefix the URL with ‘www.’ as this makes our URL hard to read. The domain extension ‘.co.uk’ makes it obvious to users that it is a URL.

" + }, + { + "title": "www.", + "content": "

See entry on wmca.org.uk.

" + } + ] + }, + { + "letter": "Z", + "styles": [ + { + "title": "zero-hours contract", + "content": "

Not \"zero-hour contract\" or \"zero hours contract\"

" + } + ] + } + ] +} \ No newline at end of file