Colors

Logo Colors

Full Color Logo

Green Primary
HEX #87b940 RGB 135,185,64 CMYK 53,7,100,0
Grey Primary
HEX #bab7b1 RGB 186,183,177 CMYK 28,23,27,0
Brown Primary
HEX #9c947a RGB 156,148,122 CMYK 40,35,54,4

Single Color Logos

Green Primary
HEX #87b940 RGB 135,185,64 CMYK 53,7,100,0
Black
HEX #000000 RGB 0,0,0 CMYK 75,68,67,90
White
HEX #ffffff RGB 255,255,255 CMYK 0,0,0,0
Acceptable Use

The full 3-color logo is the primary logo and should be used in all instances when possible.

There may be some instances where a single color logo is appropriate, such as using the FamilySearch logo on photography, apparel, spiffs, etc.

Avoid

Do not use any other colors for the logo.

Accent Colors

Red Accent
HEX #f16458 RGB 241,100,88 CMYK 0,76,64,0
Blue Accent
HEX #27c4f4 RGB 39,196,244 CMYK 64,0,0,0
Orange Accent
HEX #fcb34b RGB 252,179,75 CMYK 0,34,80,0
Green Accent
HEX #bfd730 RGB 191,215,48 CMYK 30,0,100,0
Purple Accent
HEX #996799 RGB 153,103,153 CMYK 36,70,11,0
Brown Accent
HEX #9c947a RGB 156,148,122 CMYK 40,35,54,4

Adjusting the Value

100%
80%
60%
40%
Acceptable Use

Use accent colors to help draw attention and create visual interest within your designs.

You can lighten the value of the color by adjusting the amount of white added to it (use the Stylus function lighten(color, amount)) or by adjusting the opacity of the color (use the Stylus function rgba(hex, alpha)).

Avoid

Avoid using too many colors.

Avoid darkening the value of the color by adjusting the amount of black added to it.

Text Colors

Body Text
Grey Body
HEX #333331 RGB 51,51,49 CMYK 64,57,59,38
Headings
Grey
HEX #4d4d4a RGB 77,77,74
Sub-Headings, Labels, and Small Text
Grey Light
HEX #666662 RGB 102,102,98
Avoid

Do not use other colors for text.

Background Colors

Grey Body
HEX #333331 RGB 51,51,49 CMYK 64,57,59,38
Grey
HEX #4d4d4a RGB 77,77,74
Grey Light
HEX #666662 RGB 102,102,98
Grey Background
HEX #ecebea RGB 236,235,234
Grey Background Light
HEX #f4f4f4 RGB 244,244,244

Other Colors

Gender Colors

Male
Blue Gender
HEX #3d8ff7 RGB 601,143,247
Female
Pink Gender
HEX #e23f7b RGB 226,63,123
Unknown
Grey Light
HEX #666662 RGB 102,102,98

Light Gender Colors

Blue Gender Light
HEX #99c4fe RGB 153,196,254
Pink Gender Light
HEX #f48eb6 RGB 244,142,182

Border Color

Grey Border
HEX #cccccc RGB 204,204,204
Acceptable Use

The male and female gender colors should only be used to represent gender.

Use the Light Gender Colors when on dark backgrounds.

Break Points

Media Queries

Stylus Variable Mobile
< 768px
Tablet
>= 768px
Desktop
>= 992px
Desktop HD
>= 1200px
$break-mobile Visible Hidden Hidden Hidden
$break-tablet-below Visible Visible Hidden Hidden
$break-tablet Hidden Visible Hidden Hidden
$break-tablet-above Hidden Visible Visible Visible
$break-desktop-below Visible Visible Visible Hidden
$break-desktop Hidden Hidden Visible Hidden
$break-desktop-above Hidden Hidden Visible Visible
$break-desktop-hd Hidden Hidden Hidden Visible

For consistency, we match Bootstrap 3 break points.

Typography

Headings

Heading Level 1

Heading Level 2

Heading Level 3

Heading Level 4

Heading Level 5
Acceptable Use

Use headings in the correct hierarchical manner (<h1> followed by <h2>, and so on) as this improves readability and scannability for all users.

Avoid

Do not use headings to achieve visual results only (e.g. skipping heading levels because the lower degree heading matches the desired look).

Do not use text formatting, such as font size or bold, to give the visual appearance of a heading when it is not a heading.

Heading Classes

H1 styled as H5

H2 styled as H4

H3 styled as H3

H4 styled as H2

H5 styled as H1
Acceptable Use

You may style headings to look like other headings in order to achieve aesthetic visual design but keep correct hierarchical structure (e.g. style an <h1> to look like an <h3>).

Avoid

Do not apply the hading classes to elements that are not headings (e.g. <div>).

Paragraphs

A paragraph (from the Greek paragraphos, "to write beside" or "written beside") is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.

Acceptable Use

When possible, place the distinguishing information of a paragraph in the first sentence to help improve the scannability of content for all users.

Avoid

Do not use any font size smaller than the standard paragraph size for any text (other than captions and labels).

Inline Elements

Strong is used to indicate strong importance

Emphasized or italicized text

Superscript®

Subscript for things like H2O

This small text is small for fine print, etc.

Avoid

Do not use <small> as a stand alone element just for small text. It should only be used inline with other text.

Lists

Unordered Lists

  • This is a list item in an unordered list
  • An unordered list is a list in which the sequence of items is not important. Sometimes, an unordered list is a bulleted list. And this is a long list item in an unordered list that can wrap onto a new line.
  • Lists can be nested inside of each other
    • This is a nested list item
    • This is another nested list item in an unordered list
  • This is the last list item
Avoid

Do not use lists to merely indent or for other layout purposes.

Ordered Lists

  1. This is a list item in an ordered list
  2. An ordered list is a list in which the sequence of items is important. An ordered list does not necessarily contain sequence characters.
  3. Lists can be nested inside of each other
    1. This is a nested list item
    2. This is another nested list item in an ordered list
  4. This is the last list item
Avoid

Do not use lists to merely indent or for other layout purposes.

Forms

Text Field

Acceptable Use

All form fields should have an associated label for accessibility.

Select Menu

Acceptable Use

Use a select menu when the user needs to select from a list of six or more options.

Avoid

Avoid using select menus when there are five or less options.

Avoid multi select menus since not all browsers have keyboard support for them and not all users understand how to use them.

Checkbox

List of checkboxes
Acceptable Use

Each checkbox must have a label next to it.

Radio Buttons

List of radio buttons
Acceptable Use

Use radio buttons when the user needs to select from a list of less than five options.

Avoid

Avoid using radio buttons when there are more than five options. Those options would be better displayed as a select menu.

Field Validation

Please save changes below.

Please enter an email address.

Please enter a valid email.

Please save changes below.

Please enter an email address.

Please enter a valid email.

Please save changes below.

Please enter an email address.

Please enter a valid email.

Please save changes below.

Please enter an email address.

Please enter a valid email.

Field Groups

This is an example of inline help text that could be helpful. It will wrap when there is more text.

Buttons

Types

Options

Sizes

Elements Anchor

Disabled

Acceptable Use

By default, buttons are left aligned to the content. In most cases, the recommended button is the leftmost button.

The fs-button should be used for most buttons.

The fs-button--recommended should be used to recommend an action to the user.

The fs-button--minor should be used for actions that you wish to de-emphasize.

The fs-button--destructive should be used to confirm actions that will cause the user to permanently lose data (e.g. deleting a photo).

Avoid

Do not use the fs-button--recommended for any actions that would cause the use to lose data (such as deleting a message).

Do not use the fs-button--large for anything other than landing pages and marketing campaign pages.

Animations

Loading - fs-button--loading

The fs-button--loading class will only work for buttons and anchor tags. Input tags will not work.

Acceptable Use

Disable the button while the fs-button--loading class is active.

Icons

Usage

fs-icon
fs-icon-check
fs-icon-before
fs-icon-check
fs-icon-after
fs-icon-check
Acceptable Use

Use icons almost anywhere using the class fs-icon and the icon's name.

Icons can also be placed :before and :after the element using fs-icon-before and fs-icon-after.

Available Icons

fs-icon-check
fs-icon-close
fs-icon-exclamation
fs-icon-info
fs-icon-spinner
fs-icon-spinner-light
fs-icon-warning
fs-icon-small-female
fs-icon-medium-female
fs-icon-large-female
fs-icon-large-grey-female
fs-icon-small-male
fs-icon-medium-male
fs-icon-large-male
fs-icon-large-grey-male
fs-icon-small-unknown
fs-icon-medium-unknown
fs-icon-large-unknown

Tooltips

Types

Default tooltip position is above. You can also position the tooltip to the right. Or even below the element. And lets not forget to the left.
Acceptable Use

In most cases, the title attribute is good enough to use as tooltip. If you need something that appears immediately on hover, you can use a tooltip.

The contents of the element that has the class fs-tootip__body will be shown when the element with the class fs-tooltip__trigger is hovered or selected. The tooltip will be centered around the element that has the class fs-tooltip.

Badges

Types

Memories7

Memories7

Alerts

Types

Success

Item deleted successfully. Undo.

Info

Upcoming change to temple policy. Read More.

Warning

This batch contains data inconsistencies.

Error

Unable to delete note.

Acceptable Use

Place alerts in close proximity to the object or section that they are related to. The width of the alert should be determined by the width of its context. If an alert deals with the context of the entire website, such as a system alert, it should be the full width of the page. Otherwise the width and placement of the alert should help communicate the context of what it relates to.

Always keep alert messages brief and concise. When an alert is not the users fault, use terms like "System Error" instead of simply "Error" to avoid making them feel like they did something wrong.

Avoid

Do not use an alert when you need more actions than a simple link (please refer to the Links section for information about how to use a link). Use a modal or popover instead.

Alerts with a Close Icon

Account saved successfully.

Acceptable Use

In most cases there is no need to close or dismiss an alert. Only provide a close icon when absolutely necessary.

Alerts with a Title

Heading title

Private Person

Living and confidential people are managed in a private space. Only you will be able to see and modify this person. However, anyone could potentially see the photos, documents, and stories that are attached to this person.

Bold title

Opportunities: We're sorry, but an error occurred while looking for temple opportunities.

Acceptable Use

Long and verbose alerts are discouraged, but in some cases a detailed explanation is needed, like the Private Person alert shown here. In this case a title provides a quick glance of what the alert is about.

Cards

Cards

Card Title

This is a card. It has a slight border radius and box shadow to make it stand out from the content.

Modals

Static Example

Modal

This is a modal. It really stands out from the content and forces the user to perform an action before they can continue.

Acceptable Use

Use a modal when the user is required to explicitly accept or reject an action or information and cannot proceed without doing so. They can also be used to lead the user through steps in a linear flow.

Modals can also be used to view additional information without navigating away from the current page. This can be especially useful when used in a list of search results and you wish to display the contents of an item without losing your place in the list of results.

By default, modals should close when clicking outside the modal. In cases such as modal flows or where the user has to enter lots of information, you may wish to prevent clicking outside the modal from closing it.

Avoid

Do not use a modal if the user needs information or context that would be hidden by the modal or modal overlay.

Modal with a Bottom Bar

Modal with a Bottom Bar

This modal has a bottom bar that allows users to prevent the modal from displaying again.

Acceptable Use

In most cases there is no need to display the "Don't show this again" message and the bottom bar.

Animations

Open - fs-modal--show

Modal Title

This is a modal. It really stands out from the content and forces the user to perform an action before they can continue.

Acceptable Use

To open a modal, add the class fs-modal--show to the fs-modal__overlay div.

You should also add the CSS property overflow: hidden to the body tag to prevent the body from scrolling while a modal is open.

Persons

Person Vitals

John Henry Doe
1900-1960  •  5XG4-L2Y
Acceptable Use

Use a person to display the name, lifespan, and id of a person.

Avoid

Avoid letting the persons lifespan and id line wrap.

Person with Gender Icon

John Henry Doe
1900-1960  •  5XG4-L2Y

Jane Allison Doe
1920-1980  •  8BA2-AL2

Alex Doe
1900-1960  •  5XG4-L2Y
Acceptable Use

Use the person gender to indicate the gender of the person, especially if the name of the person could be ambiguous.

Person with Portrait

John Henry Doe
1900-1960  •  5XG4-L2Y

Jane Allison Doe
1920-1980  •  8BA2-AL2

Alex Doe
1898-1921  •  3Gl9-B43
Acceptable Use

Use a person portrait to show an image of the person. If no image is available, a large gender icon will be used as a placeholder.

Couple Relationship

John Henry Doe
1900-1960  •  5XG4-L2Y
Jane Allison Doe
1920-1980  •  8BA2-AL2
Acceptable Use

Use a couple relationship to indicate a marriage between two persons.

Display Variations

fs-person--light
John Henry Doe
1900-1960  •  5XG4-L2Y
Dark Theme - fs-person--dark
John Henry Doe
1900-1960  •  5XG4-L2Y
Inline - fs-person--inline
John Henry Doe
1900-1960  •  5XG4-L2Y
Stacked - fs-person--stacked
John Henry
Doe
John Henry Doe
1900-1960  •  5XG4-L2Y