1st Money brand book

Hello ... welcome to 1st Money!

Nice of you to stop by...

We hope you enjoy this short collection of tips on how to present the 1st Money brand.

1     Colors

1st Money loves colour. Where possible stick to the middle row below (the row with the dark borders).

Lighter and darker shades are fine too.

1st Money isn't too fond of pure black, so try to avoid it wherever possible (dark shades of grey make a nice alternative).

See the full size version

2     Dates and time

• Good "am", "pm"
• Avoid "AM", "PM", "a.m.", "p.m."

Combine "am" or "pm" with a space between the time. For "noon", and "midnight", also have a space.

• Good 7-8 pm.
• Good 7:30 am to 8:00 pm (separate "am" and "pm" times with the word "to").
• Good 7:30-8 pm.
• Good 7 am to 8 pm.
• Good 7 am-8 pm.
• Good 12 noon to 8 pm.
• Avoid 7:00 pm - 8:00 pm (no spaces around dash).
• Avoid 7:00 pm-8:00 pm (if both are "pm" then leave the first off).
• Avoid 7:00-8:00 pm (if times are ":00" then leave it off).
• Avoid 7–8 pm (we don't use –).
• Avoid 7—8 pm (we don't use —).
• Avoid 2noon to 8pm (have a space before "noon" and "pm").
• Avoid noon (don't write "noon", put "12 noon").
• Avoid 12 pm ("12 am" or "12 pm" is confusing, put "12 midnight" or "12 noon").

For day ranges:

• Good Mon-Fri.
• Avoid Monday to Friday (too verbose).

List the time zone at the end:

• Good Mon-Fri, 8 am to 4 pm, UK time.
• Avoid Mon-Fri, PT 9 am to 5 pm.
• Avoid "EST", "EDT" (ET is fine in most cases).

3     Font

1st Money is big on keeping things visual.

1st Money uses the same plain sans-serif fonts for all online and print publications.

Also, avoid bold whenever possible.

color:          rgb(var(--h1Rgb));
font-weight:    600;
font-size:      111%;
font-family:    Gilroy, Microsoft YaHei New, Microsoft Yahei, Open Sans, Arial, Helvetica, sans-serif, Open Sans, Microsoft YaHei New, Microsoft Yahei, Open Sans, Arial, Helvetica, sans-serif;
line-height:    1.12;
letter-spacing: calc(-1.11rem / 80);
word-spacing:   calc(1.11rem / 16);

color:          rgb(var(--h1Rgb));
font-weight:    600;
font-size:      111%;
font-family:    Open Sans, Microsoft YaHei New, Microsoft Yahei, Open Sans, Arial, Helvetica, sans-serif;
line-height:    1.12;
letter-spacing: calc(-1.11rem / 80);
word-spacing:   calc(1.11rem / 16);

color:          rgb(var(--h2Rgb));
font-weight:    400;
font-size:      111%;
font-family:    Roboto, Microsoft YaHei New, Microsoft Yahei, Open Sans, Arial, Helvetica, sans-serif;
line-height:    1.6;
letter-spacing: calc(-1.11rem / 200);
word-spacing:   calc(1.11rem / 40);

color:          rgb(var(--h3Rgb));
font-weight:    500;
font-size:      111%;
font-family:    Roboto, Microsoft YaHei New, Microsoft Yahei, Open Sans, Arial, Helvetica, sans-serif;
line-height:    1.6;
letter-spacing: calc(-1.11rem / 200);
word-spacing:   calc(1.11rem / 40);

font-weight:    400;
font-size:      111%;
font-family:    Roboto, Microsoft YaHei New, Microsoft Yahei, Open Sans, Arial, Helvetica, sans-serif;
line-height:    1.6;

color:          rgb(var(--paragraphPortalRgb));
font-weight:    400;
font-size:      111%;
font-family:    Open Sans, Microsoft YaHei New, Microsoft Yahei, Open Sans, Arial, Helvetica, sans-serif;
line-height:    1.6;

4     Icons

Feel free to use any of 1st Money's extensive selection of vector icons. Most are from iconoir.com.

See the full size version

4.1     Examples

Here's two different ways to put an icon onto a page.

Example 1:

<span class="msk_iconoir_settings"></span>

Example 2:

<span class="msk_iconoir_settings red50" style="font-size: 90%; vertical-align: 0;"></span>

Example 3:

<img src="< ?=$Z->HTTPS_APPS_HOST?>/msk/versioned/msk_iconoir_settings/lgt/red50/24" style="vertical-align: 0; width: 0.9rem; height: 0.9rem;">

Example 4:

<img src="< ?=$Z->HTTPS_APPS_HOST?>/s.png" class="svg_overlay_SIGNED" style="vertical-align: 0; width: 1.5rem; height: 1.5rem;" />

5     Illustrations

1st Money has commissioned our own set of product illustrations. Feel free to use them in 1st Money products or promotional materials as much as you like. If adding to the illustrations library, please follow these guidelines.

5.1     Feeling

1. People: show lots of people.
2. Happy: smiling, laughing, talking.
3. Movement: walking, jumping, working.
4. Everyday objects: letter, dog, smartphone, laptop.
5. Engaged in what they're doing. No awkward smiling at the audience.
6. Streamlined:
   • Keep lines and objects to a minimum.
   • Use lines for people's arms and legs (animals can have full shapes).
   • Use very standard shapes for clothing.
   • Minimal facial features (mouth only).

5.2     Lines

1. Avoid straight lines.
2. Line style:
   1. Thickness: 6pt (for all lines)
   2. Line shape: Illustrator width profile 1 (pointed oval shape).
   3. Colour: pud20, rgb(190, 161, 241), #BEA1F1
3. Add lines to indicate motion.

5.3     Shadows

1. Only have shadows on the ground (not on clothing or objects).
2. Shadows: fill="#18277B" fill-opacity="0.09"

5.4     Skin

1. Colour: pud03, rgb(244, 240, 254), #F4F0FE

5.5     Colours

1. Offset to the bottom right.
2. Hair: pnk50, rgb(233, 30, 99), #E91E63
3. Colours from 10% range (below):

5.6     Saving

1. Select all, then: Object > Path > Simplify
   • Set to: "95%"
2. .svg file.
3. Saved to: ..\Dropbox\login_images\finals\

5.7     Examples

Click to enlarge.

6     Logo

1st Money's logo is one of our most valuable assets. Give it the space it deserves. Invite it along to all your masterpieces. It could be the start of a beautiful friendship.

On a white or light background, use the dark square logo.

On a black or dark background, use the light square logo.

Please note:

• Avoid Don't put the logo over a noisy background image.
• Avoid Don't put one colour on top of another.
• Avoid Don't use black as a background (avoid if possible).
• Avoid Don't put on an angle.
• Avoid Don't add embellishments like shadows, embossing, etc.

7     Positioning statement

1st Money's "Positioning statement":

Learn more about Positioning statements.

8     Punctuation

8.1     Ellipsis

If there are words on both sides of the ellipsis, add a space on both sides. Otherwise, no space is needed. Don't put a 4th dot at the end of sentences.

• Good "Well, you know ... it's kind of complicated..."
• Good "...I guess that's all."
• Avoid "No, no way...Not at all." (have a space either side of the ellipsis)
• Avoid "Nah, that's not right...." (no 4th dot needed)
• Avoid "Nah, that's not right.."

8.2     Key terms

Specialist terms that are unique to a subject are enclosed in single quotation marks. In such cases, periods and commas go outside the single-quote marks.

However, we often also enclose terms in double quotes (due to complications with our punctuation parser):

• Good Sartre's treatment of 'being' is described in his book.
• Good Sartre's treatment of "being" is described in his book.

8.3     Scare quotes

Quite often scare quotes are used to express irony or sarcasm:

• Good The Serbs are closing in on the "safe haven" of Goražde.

9     Scenarios

In some parts of our products or handbooks we put the names of imaginary people to help the sentence flow. Here's our standard list:

• Carol Customer.
• Selwyn Self.
• Tony Transfer.
• Alex Applicant.
• Emma Employee.
• Mandy Manager.
• Ryan Rule-breaker.
• Alan Alternative.

10     TM symbol

Legal symbols can be a distraction and breaks the flow of the 1st Money message.

The TM symbol shouldn't appear in the 1st Money logo, or any of the copy. All the legal stuff's covered at the bottom of 1st Money's webpages in the fineprint. E.g.:

• Good "1st FREE+ Payroll & HR"
• Avoid "1st Money™ FREE+ Payroll"
• Avoid "1st Money FREE+ Payroll™"

11     To cap or not to cap

11.1     Object names

Try to not capitalise object types like: org, person, pay batch, project, etc.

11.2     Headings

When writing headings, avoid a capital letter at the front of each word. It seems overkill. Proper nouns deserve a capital though.

Wikipedia's got you covered on this: en.wikipedia.org/wiki/Capitalization_in_English. E.g.:

• Good "This heading is much nicer"
• Avoid "This Heading Has Too Many Capitals"

Also, headings shouldn't have a period (full stop) at the end.

And headings are the only place that an ampersand (&) should be used:

• Good "This heading & that heading"
• Avoid "This heading and that heading"

11.3     Other

If you're doing art work and want to do "ALL CAPITALS" or "all lower case" for effect ... that's great. GO FOR IT!

11.4     Use of word free

The word "FREE" should always be written in full caps if it's mentioned as part of the name of a product. E.g.:

• Good "1st FREE+ Payroll & HR"
• Avoid "1st free+ Payroll & HR"

11.5     Following numbers

For headings or sentences that start with a number, the word following should be capitalised. E.g.:

• Good "100 Ways to solve a problem."
• Avoid "100 ways to solve a problem."

For headings or sentences that start with a money amount, the word following SHOULDN'T be capitalised. E.g.:

• Good "$100 is the cost."
• Avoid "$100 Is the cost."

If it's not a full sentence, the word following SHOULDN'T be capitalised. E.g.:

• Good "100 hours"
• Avoid "100 Hours"

11.6     Following acronyms

For headings or sentences that start with an acronym, the word following shouldn't be capitalised. E.g.:

• Good "FBI open up!"
• Avoid "FBI Open up!"

12     Wording

12.1     Use clear writing

• Limit:
  • Sentences to 25 words, or less.
  • Summaries to 160 characters (including spaces), or less.
  • Titles to 65 characters (including spaces), or less.
• Read:
  • Writing for GOV.UK
  • A to Z
  • Words to avoid

12.2     Gender neutrality

Keep text gender neutral, where possible:

• Good "them", "their", "they"
• Avoid "he", "she", "him", "her", "his"

12.3     Don't prefix product names with: "the"

Try to avoid prefixing product names with the word "the". E.g.:

• Good "Next download 1st Money for Windows and..."
• Avoid "Next download the 1st Money for Windows and..."

12.4     Contractions

Use contractions whenever possible. Be informal. Where possible, use: I'm, they're, it'll, we're, you'll, you're, they'll, etc.

• Good "OK"
• Avoid "Okay"
• Avoid "ok"

12.5     Don't say it's simple

If something's actually simple, you don't need to say it.

Chances are, however, that whatever you're writing isn't simple ... in which case it's better explained without all the "just"s and "simply"s.

• Avoid "All you've got to do is..."
• Avoid "...and then simply click..."
• Avoid "...to see it, just open..."
• Avoid "When you see this, it basically means that..."
• Avoid "...here you can easily see..."
• Avoid "...it's easy to fix."

Read more at: justsimply.dev

12.6     Hyphens in compound adjectives with numbers

If the word after the number is plural, don't put a dash.

• Good "15-year-old teenager"
• Good "He's 15 years old"
• Avoid "He's 15-years old"
• Good "She's on a five-day working week"
• Avoid "She's working 5-days a week"

12.7     Abbreviations

Because will be used by speakers of a variety of languages, only use the most frequent abbreviations.

Don't put a period (full stop) after unit abbreviations:

• Good "Tue, Feb, am, pm"
• Good "avg"
• Avoid "avg."
• Good "Wed, Jan 24"
• Avoid "Wed. Jan. 24 th."

Here's some other abbreviations to avoid (although sometimes it's unavoidable due to lack of space):

• Avoid "1 yr"
• Avoid "3 mths"
• Avoid "1 wk"
• Avoid "5 hrs"
• Avoid "12 mins"
• Avoid "1 sec"

Do put periods on latin abbreviations:

• Good "i.e.", "e.g.", "etc."
• Avoid "ie", "eg", "etc"

Ordinal suffixes have no dot, and no space, and are generally only used on dates:

• Good "2nd of May", "3rd quarter", "first try", "third day"
• Avoid "2nd place", "third of May", "2 nd."

12.8     Numbers

Numbers below 11 should be written as a word, if in a sentence. E.g.:

• Good "ten"
• Avoid "10"

12.9     Showing keyboard shortcuts

Keyboard shortcuts should be written with:

• No spaces.
• Use the reference to: $Z->ctrlKey

E.g.:

Ctrl+Alt+L

[_<?=$Z->ctrlKey?>_]+[_Alt_]+[_L_]

12.10     Force keywords and description meta tags

$SharedPage->metaDescriptionText = "Your description here";
$SharedPage->metaKeywordsText = "your, keywords, here";

12.11     Linking to 1st Money features

Linking directly to 1st Money features helps the customer follow the documentation. E.g.:

• Good "Go to: ProjectPeopleAdd reviewers "
• Avoid "Go to a project then Members menu, then Reviewers."

Code:

<?=\Func\InterfaceLink::build('project', 'reviewers')?>

• The first parameter must be the object type (found in the first part of the URL), e.g.: location, bookmark, project, org, person, etc.
• The second parameter can be found from the last part of the URL or by clicking the three dots beside the form.

12.12     List items end with a period

All numbered and bullet lists should start with a capital letter, and end with a period (full stop).

• Why? ... When the text from lists gets pushed into 1st Money's support tools, the line breaks and other formatting gets lost.
• By starting each line with a capital, and ending with a period, it helps distinguish each as a distinct item.

12.13     FAQ names can't include some special characters

The following CAN'T be used in FAQ headings or help file names:

• / or \ (forward slash or backslash).
• $ (dollar).
• £ (pound).
• # (hash).
• ? (question).
• " (double quote).
• & (ampersand).
• * (asterisk).
• {} (curly brackets).
• <> (angle brackets).
• -- (double dash).
• _ (underscore).
• : (colon).
• ^ (caret).
• + (plus).
• | (pipe).
• % (percent).

The following CAN be used:

• ! (exclamation).
• ' (single quote).
• () (normal brackets).
• [] (square brackets).
• - (single dash).
• ; (semicolon).
• @ (at sign).
• ~ (tilde).

12.14     Other good references

• material.io/design/communication/writing.html

13     Z. Conclusion

We hope you found these brand guidelines useful.

Thanks again to all our developers, artists, and partners for all your hard work.

For suggestions or clarifications, reach out through your regular 1st Money contact or email us at: hello@1st.money  

Was this page helpful?