Style Guide_ Final Version.pdf

Spartan | UI & UX Style Guide

S h a p i n g t h e F u t u r e o f A T F

Bureau of Alcohol, Tobacco, Firearms and Explosives

THROUGH INNOVATION

UI & UX STYLE GUIDE

P 04.

THE SEAL

. Seal Symbolism

. Spartan Mission Statement

P 08.

COLORS

. Primary Colors . Secondary Colors

. Banner Colors . Forms State Colors . Background Colors

P 10.

TYPOGRAPHY

. Fonts . Description . Link Style

. Body . Informational Text

. Headings Style

P13.

UI ELEMENTS

. Buttons Style . Buttons Size

. Buttons State . Sidebar Content

. Global Navigation Menu . Checkboxes

. Radio Buttons . Form Elements

. Work Product Template . Rich Text Editor

. Text Box . Date Format

. Tool Tip . Pagination

02 03 0401

P26.

IMAGERY

. Homepage . Alternate Backgrounds

P29.

APPLICATION HEADER

. Header . Search Bar . Sub Header

. Contact Card . Tabs

. Favicon . Banners Style . Placement of Notifications

. Banner Verbiage . Email Body Content

P 42.

ICONOGRAPHY

. Records . Processes . Licenses

. General System

P 22.

SCREEN STRUCTURE

. 12 Colum Grid . Resolution

. Progress Bar

. MessageBox . Lists Style

05 06 07 08

01| THE SEAL

Seal Symbolism The seal was carefully designed to represent core ATF values—dedication to and accomplishments in achieving patient victory in defense of justice—as well as the interrelationship among ATF, DOJ, and the U.S. Department of the Treasury (Treasury).

The Seal is drawn from the tradition of heraldry. The escutcheon (shield) rep-resents a defender. On the escutcheon (shield)—the sign of a defender—is a chief of sanguine (deep red), which indicates that ATF, the bearer of the shield, through its achievements, has authority and wisdom. The sanguine color of the chief represents a patient victor, one not hasty in battle. Also represented in the middle of the shield is an azure chevron.

This chevron denotes protection and service, and the azure color represents strength and loyalty; combined, they indicate ATF’s strength, loyalty, service and protection of justice, depicted by the scales of justice below the chevron.

The azure chevron also represents the past relationship between ATF and Trea-sury. The escutcheon stands on a field of deeper blue representing vigilance, perseverance, and justice, and is surrounded by a laurel of (gold), symbolic of victory, and crowned by three mullets, or stars.

Around the seal is the name of the Bureau, and at the base, the year 1972, when ATF became a bureau. The seal is contained within a corded edge.

The mullets and the corded edge encasing the full seal are elements drawn from the DOJ seal and represent the inclusion of ATF within DOJ.

The seal, as described above, was carefully designed to represent the Bureau’s dedication to and accomplishments in achieving patient victory in defense of justice, as well as the interrelationship among ATF, DOJ, and Treasury.

WELCOME

The Spartan Program Management Division (SPMD) mission is to complete a business process re-engineering effort that will update how ATF carries out the criminal enforcement, Indus-try operations, and intelligence missions.

The effort will more effectively bring together ATF compo-nents for carrying out the mission, and will result in changes to policy and procedure, training, and the development of a new case management system.

The case management system to be developed, Spartan, will be a single solution designed to replace the current legacy systems with state–of–the–art capabilities.

S H A P I N G T H E F U T U R E O F AT F T H R O U G H I N N O V AT I O N

SPARTAN MISSION STATEMENT

02 | COLORS

These are the possible colors for the Spartan Application. The inspiration for the colors came from the Spartan Logo and the ATF Seal.

Primary colors are usually associated with trust and confidence, and can be used to represent calmness and accuracy. The light grey color is used as a supporting color.

Secondary colors serve as accent colors, used to draw the user’s eye to certain high-lighted fields or areas. Additionally, they are used in the application to highlight im-portant features on a page, such as type or visual style elements (i.e. illustrations).

# 1D3260

# 7D311C

# 005294

# AB8D4F

# 55BCEB

# EFB750

# 000000 # FFFFFF

Primary Colors

Secondary Colors

# CDCED0

# F4E2CF

Banners are used to display messages across the top of a given screen. The color of the banner indicates its purpose: Orange - warning message; Red - error message; Blue -general information; Green - success message.

Background colors are used for the background block and side bars areas.

# EF721A

# 1D3260

# C5311C

# CDCED0

# 55BCEB

# FFFFFF

Banner Colors

Background Colors

# 3FAC49

Form state colors allow users to know the state of each form element.

# 005294

ErrorDisabled InactiveActive

L. Sidebar Background R.Sidebar

Warning Error Help Success

# CDCED0 # 000000 # C5311C

Form State Colors

03 | TYPOGRAPHY

Aa Extralight

Light

Semibold Italic

Italic

Italic

Extralight Italic

Regular

Regular Italic

Light Italic

Bold

Semibold

Black Italic

Open Sans font is used for the Spartan Application. Shown below is the entire Open Sans family with a variety of weights that may be applied throughout the application.

Font

Description

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z a b c d e f g h i j k l m n o p q r s t u v w x y z

0 1 2 3 4 5 6 7 8 9

Open Sans is an open-source sans serif typeface created for legibility in UI design. With a variety of weights that read easily at all sizes, Source Sans Pro provides clear headers as well as highly readable body text.

Inspired by twentieth-century American gothic typeface design; its slender, yet open letters offer a clean and friendly simplicity. Advanced hinting allows Source Sans Pro to render well on Windows systems, which run Cleartype, across browsers and devices.

Moreover, it supports a variety of languages and alphabets, including: Western and European language, Vietnamese, pinyin Romanization of Chinese, and Navajo.

Link Style

Lorem ipsum dolor sit amet

Links are presented in the light blue color, as displayed below, and are underlined when hovered over.

Body

Information/Instructional Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sapien mag-na, eleifend sit amet dui at, lacinia tincidunt nisi. Nullam eu condimentum nisl.

Pellentesque vel scelerisque diam, fermentum lacinia sem. Morbi condimen-tum dignissim ante, non volutpat lorem aliquam scelerisque. Ut pellentesque ullamcorper est sed vulputate. Morbi eget arcu porta, iaculis libero eget, biben-dum diam. Duis tincidunt nisi a lacus lobortis, at ultrices risus tincidunt. Etiam tortor tortor, porttitor vitae est a, molestie aliquam quam. Pellentesque a lacus nec massa suscipit mattis.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sapien magna, eleifend sit amet dui at, lacinia tincidunt nisi. Nullam eu condimentum nisl.

Pellentesque vel scelerisque diam, fermentum lacinia sem.

Open Sans Bold

Open Sans Bold

Open Sans Bold

Open Sans

Open Sans Bold

Open Sans Bold

Open Sans Bold ex: TabHeadings | 10 pt ex: Field Label | 11 pt ex: Property | 12 pt

Heading 1

Heading 3

Heading 5

Label Formats

Heading 2

Heading 4

Heading 6 ex: Home Page Title ex: Subheader Title ex: Accordion Header ex: Work Area “Header Label” ex: Field Labels ex: Table Column Heading

24pt | Black

18pt | Black

13pt | Black

Black

20pt | Black

14pt | Black

12pt | Black

The following headings may be used accordingly throughout the Spartan application.

Headings Style

04 | UI ELEMENTS

A button indicates an action upon click and is typically labeled using text, an icon, or both. Below are some examples of button styles that can be used in the application.

Buttons can be created using sharp or round corners. Below are some examples of the button sizes that can be used in the application.

Large: Large:

Medium:

Medium SizeMedium Size

Corner Radius: 3px Corner Radius: 3pxCorner Radius: 3px

Small Size

Medium:

Small: Small:

180px X 30px 180px X 30px

150px X 30px

150px X 30px150px X 30px100px X 30px

150px X 30px

100px X 30px 100px X 30px

Buttons Size

Buttons Style

Cancel ContinueSave

01. Sharp Corners 02. Round Corners

The examples below demonstrate how buttons appear in the system given its state (Static, Hover, Clicked, Disabled).

HEX: # F0721A

HEX: # E23427

HEX: # FC2B27

HEX: # 8D9799

HEX: # 005295

HEX: # 026BB2

HEX: # 0586CE

HEX: # 8D9799

HEX: #4DA23E

HEX: # 5BB548

HEX: # 6AC953

HEX: # 8D9799

Buttons State

StaticStatic Static

HoverHover Hover

DisabledDisabled

ClickedClicked Clicked

Disabled

The Spartan application incorporates both the left and right sidebars. Hover function-ality subtly informs users of where they are on the menu and informs them what they are about to select. English sentence case (capitalization of first letter of the first word only) should be used for the sidebar content.

Note: The sidebar size should be designed accordingly to the screen content.

Sidebar Content

(1) Left sidebar (2) Right sidebar

Title

Title

026BB2

Menu 1

Menu 3

Menu 5

Menu 2

Menu 4

Menu 6

Menu 7

200 px wide

200 px wide

Dy na m ic

200 px wide

Global Navigation Menu

Bulk actionsSpartan DIO

Notifications Spartan Supervisor

System info

Spartan Investigator

Log off

Spartan Division Counsel

The Global Navigation Menu allows the user to select one item at a time while saving space by being so compact. The menu consists of a button that, when clicked, displays a dropdown list of mutually exclusive items.

English sentence case (capitalization of first letter of the first word only) should be used for the Global Navigation Menu.

Profile

Spartan Agent

LB

Switch portal

Spartan Area Supervisor

Radio Buttons

Checkboxes

Uncheck Box Label Hover Checkbox Label

Disabled Unchecked Box Label Disabled Checked Box Label

Checkbox Label

Radio Label is off

Radio Label Hover

Disabled Radio Label is off

Radio Label

Disabled Radio Label is on

Checkboxes allow the user to select one or more options from a set. It is usually best to present checkboxes in a vertical list.

Radio buttons allow users to select one item at a time, and can be presented either in a vertical or horizontal format.

Form Elements

MM/DD/YYYY

Select...

Enter your name

#-AA-###-##-#A-##### Enter trade name

Applicant received*

Applicant Information

What is the proposed business activity?*

Have they applied for the correct license/permit?*

Do they need additional license/permit?*

The proposed business activity is...

No

John Smith

Yes

Who are their primary suppliers?*

Business type*

Applicant name*

License/Permit number* Trade name*

DBA*

Below are some examples of Form Elements that are used across the Spartan application.

English sentence case (capitalization of first letter of the first word only) should be used for all Form Elements.

Questions and Answers

Work Product Template

A template is used for the header on work product documents generated in Spartan. The parameters of the template can be found below:

U.S. Department of Justice

2px 10px 5px Separation between borders

Bureau of Alcohol, Tobacco, Firearms and Explosives <Title of Document>

Times New Roman � Bold | 10pt | Black

Times New Roman � Bold | 14pt | Black

Times New Roman � Regular | 10pt | Black

Rich Text Editor

Text Box

Rich text editors are used sparingly in Spartan for text that require stylized formatting.

The standard text box is used throughout the Spartan application.

enter your text here...

enter your text here...

Description

Description

Date Format

The date format shown below is used throughout the Spartan application. English sentence case (capitalization of first letter of the first word only) should be used for the label of date elements.

MM/DD/YYYY

Pagination divides content into multiple pages, and allows users to navigate through the content in order or skip between pages.

A tooltip allows a user to see hints when they hover on an item indicating the name or pupose of the item (i.e. “Click the Button to Continue”).

Pagination

Tool Tips

Previous 1 2 3 4 5 6 > >> Next

# CDCED0 for the background

# 1D3260 for background

Click the Button to Continue

05 | SCREEN STRUCTURE

960 Grid System is an effort to streamline the design process by defining exact measurements.

The advantages of using 960 System Grid helps developers to communicate better, smoothing out the process of moving from design to web development.

The 12-column grid, divided into portions that are 60px wide, is used throughout the Spartan application.

The minimum target resolution is 1280 x 800 pixels.

12 Column Grid

Resolution

460460

Progress Bar

Message Box

Application Intake Pre-Inspection

Applicant Overview Bussiness Calendar Storage FacilitiesContact Information License Responsible Persons Instructions

Inspection Post-Inspection Final Recommendation

A Progress bar indicates where a user is as they advance through a series of steps in a process. The example below demonstrates the style of the Progress Bar being used across the Spartan application.

A message box is a small window that provides information to users and requires them to take an action before they can move to the next step.

1 2 3 4 5 6 7

Cae el eostis molut ut et om-modis di untiorum que repedic imuscilit magnatem recto qua-ture voluptat fugitatur sitiati-nus eum facessim nam, optiae aut voles aut voluptam debit mos aut quost, volupta temqui aut lia alitatio...

Message

Read more

01. Inspection Process Stages/Steps

02. Application Walkthrough

There are two styles of tables used throughout the Spartan application. The repeat grid zebra list is used on portal screens of Spartan where as the repeat grid standard list is used in the rest of the screens in Spartan.

Lists Style

Name

ID Last Viewed

01. Repeat Grid Zebra List

Name ID Status

02. Repeat Grid Standard List

06 | IMAGERY

Below are the possible background images that could be used across the Spartan application:

Homepage

In case of any technical issues with the Spartan application while in use, and the default background is not able to be displayed, then one of the two options below should appear as the background image.

Alternate Backgrounds

Option 2

Option 1

Example of the Spartan application as it would appear in real life

CREATE AN ITEM

SHAPING THE FUTURE OF ATF

THROUGH INNOVATION

John Smith JSHome | Open Work | My Team | Calendar | Reports SearchATF

VIEW MY TASKSRECENT ITEMS

Below is the measurement for the search bar in the main header.

The magnifying glass icon is shown in the far right which identifies it as a search bar.

To launch the search, the user may either click the magnifying glass, or press the Enter/Return key on their keyboard.

The main header size must be at least 1080 x 60 pixels, however the height of the header can be increased to a maximum of 90 pixels.

Search bar

Header

14px 14px7px 7px7pxCenter

100%

7px

7px

60 px

07 | APPLICATION HEADER

Home | Open Work | My Team | Calendar | Reports | Feedback LBSearch

15px

15px

7px White: #FFFFFF

Open Sans: 14px Search

4px

4px

7px

200px px

The sub header is 65px tall and its width spans 100% across the application when viewed on a desktop. Any text on the sub header should follow the point size require-ments shown in the example below.

English sentence case (capitalization of first letter of the first word only) should be used for the following elements:

Sub Header

65 px

Subheader Title:

Field Label:

Property:

Heading 4 11pt 12pt

Background: White #FFFFFF Dropshadow: 1px 1px 3px 1px �| #c3c3c3

100% across the screen

Background: White #FFFFFF

Dy na m ic

200px

The contact card is used when a Spartan user wants to look for another Spartan user’s information. Below is the detailed style requirements for the contact card.

Contact Card

Lisa Reiys Investigator

(C) 301-223-6755

(D) 301-584-2938

Washington Field Office Washington Field Division

Investigative Participant Card

Open Sans �| Bold | 12pt | Black Open Sans� | Italic | 10pt | Black

Open Sans | Regular | 10pt | Black

Photo of the Investigator (24px x 24px)

Open Sans� | Regular | 10pt | Black� | Link(s)

Dropshadow: 1px 1px 3px 1px �| #dbdbdb

A Favicon, short for “favorite icon”, is a file containing one or more small icons, associ-ated with a particular website or web page. Favicon is also known as a shortcut icon, website icon, tab icon, URL icon, or bookmark icon.

Tabs are used to enhance the user experience when navigating through the Spartan application.

Note: The active tab needs to be a different color (White) and it has to physically connect with the space below it. This is what makes the active tab “pop” to the front.

Favicon

Tabs

Spartan

Home

Size is variable based on the name of the tab px

Open Sans Regular | 10pt | Black

ATF Logo

Open Sans Regular | 10pt | Black

Icon: 16px 16px Tab corners: 10px radius

Below are the banner styles that will be used throughout the Spartan application.

Banner notifications should be used within an action area container. Warnings, errors, information and success messages should appear directly above the action area with no spacing between.

Note: All notifications should stretch 100% across the space of the container and 60px tall.

Banners Style

Placement of Notifications

Warning: You must complete the Inspection within 5 days.

Information: A withdrawal is in-progress for the License or Permit.

Success: Your referral was sent to AS Montgomery for review.

i

Error: You must enter a date for the Inspection.

# F0721A

# C6311C

# 55BCEB

# 3FAC49

100% across the screen

100% across the screen

100% across the screen

100% across the screen px

7px

7px

7px

7px

7px

7px

7px

7px

7px

7px

7px

7px

7px

7px

7px

7px px px px

Open Sans Bold | 11pt | White Open Sans Regular | 10pt | White

Open Sans Regular | 10pt | White

Open Sans Regular | 10pt | White

Open Sans Regular | 10pt | White

Open Sans Bold | 11pt | White

Open Sans Bold | 11pt | White

Open Sans Bold | 11pt | White

Banner Verbiage

01. Success Confirmation

Success: Your referral was sent to AS Montgomery for review.

02. Error

Error: You must enter a date for the Inspection.

03. Warning

Warning: You must complete the Inspection within 5 days.!

• Business Activities not matching License Type:

i

04. Information

Information: A withdrawal is in-progress for the License or Permit.i

Outside Communications: Email Body Content

Referral Process Email Body Content Subject: “ATTENTION: <recipient title><recipient first name><recipient last name>”

“(Recipient/Agency), This communication is a courtesy notification from the Bureau of Alcohol, Tobacco, Firearms and Explosives. The attached information is being referred to you for consideration as potential criminal or civil violations coming under your jurisdiction. If you have any additional questions, please contact:

< Title> <Name> < Phone Number> < Email Address>

Sincerely yours, <Name> < Title> United States Department of Justice Bureau of Alcohol, Tobacco, Firearms and Explosives <Field Office>

Notice:

This e-mail message and any attached files are intended solely for the use of the ad-dressee(s) named above in connection with official business. This communication may contain sensitive but unclassified information that may be statutorily or otherwise prohibited from being further released without appropriate approval by the Bureau of Alcohol, Tobacco, Firearms & Explosives or the Department of Justice.”

Required Actions Email Body Content

Subject: "Action required concerning your Federal <insert Firearms or Explo-sives License/permit>"

"(Licensee/Applicant name), This communication is in connection with your current <application or com-pliance> inspection with the Bureau of Alcohol, Tobacco, Firearms and Ex-plosives. Please note that specific action items require your timely response.

Failure on your part to complete these actions listed on the attached docu-ment may delay the issuance or renewal of your license. Please complete the attached document and return using the instructions provided.

If you have any additional questions, please contact:

< Title> <Name> < Phone Number> < Email Address>

Sincerely yours, <Name> < Title> United States Department of Justice Bureau of Alcohol, Tobacco, Firearms and Explosives <Field Office>

Legal Disclaimer:

This e-mail is intended only for the person to whom it is addressed and may contain information that is privileged, confidential, or otherwise protected from disclosure.

Dissemination, distribution, or copying of this e-mail or the information herein by any-one other than the intended recipient is prohibited. If you have received this e-mail in error, please notify by reply e-mail and destroy the original message and all copies.”

Informational Message Email Body Content

Subject:”Information concerning your Federal <insert Firearms or Explo-sives License/permit>.”

“Do not reply directly to this email.

(Licensee/Applicant name), This communication is in connection to your current <application or compli-ance> inspection with the Bureau of Alcohol, Tobacco, Firearms and Explo-sives. No action or response is required on your part. The attached documen-tation is provided for your records only.

If you have any additional questions, please contact:

< Title> <Name> < Phone Number> < Email Address>

Sincerely yours, <Name> < Title> United States Department of Justice Bureau of Alcohol, Tobacco, Firearms and Explosives <Field Office>

Legal Disclaimer:

This e-mail is intended only for the person to whom it is addressed and may contain information that is privileged, confidential, or otherwise protected from disclosure.

Dissemination, distribution, or copying of this e-mail or the information herein by anyone other than the intended recipient is prohibited. If you have received this e-mail in error, please notify by reply e-mail and destroy the original message and all copies.”

Withdrawal Email Body Content

Subject: ”Action required concerning your Federal <insert Firearms or Explosives License/permit>”

“(Licensee/Applicant name), This communication is in connection with your current <application or com-pliance> inspection with the Bureau of Alcohol, Tobacco, Firearms and Ex-plosives. Please note that specific action items require your timely response.

Please complete the attached document and return using the instructions provided.

If you have any additional questions, please contact:

< Title> <Name> < Phone Number> < Email Address>

Sincerely yours, <Name> < Title> United States Department of Justice Bureau of Alcohol, Tobacco, Firearms and Explosives <Field Office>

Legal Disclaimer:

This e-mail is intended only for the person to whom it is addressed and may contain information that is privileged, confidential, or otherwise protected from disclosure. Dissemination, distribution, or copying of this e-mail or the in-formation herein by anyone other than the intended recipient is prohibited. If you have received this e-mail in error, please notify by reply e-mail and destroy the original message and all copies.”

ATF Correspondence Styling Format For Letters

Use the ATF Correspondence manual styling format for all generated docu-ments that are letters, as letters are official ATF documents (I.e. Withdrawal Letter, Referral Letter).

08 | ICONOGRAPHY

An icon is a simplified image serving as an intuitive symbol that is used to help users navigate the Spartan application. Below are some of the custom icons currently used in Spartan:

Person

Location

Business Entity

Magazine

Records

Federal Firearm License

Federal Explovise License/Permit

Firearms Application Inspection

Explosives Application Inspection

Processes

Licenses

FEL/PFFL

This is the “Create an Item” icon

This is the “Forward” icon

This is the “Recent Items” icon

This is the “Attach” icon

This is the “Warning” icon

This is the’”Email” icon

This is the “View my Tasks” icon

This is the “Cancel” icon

This is the “Backward” icon

This is the “General info / Help” icon

Icons Description i

General System

This is the “Print” icon

This is the “Message” icon

This is the “Setting” icon

This is the “Timeline” icon

This is the “Delete” icon

This is the “Edit” icon

This is the “Overview” icon

This is the “Links” icon

This is the “Link Chart” icon

This is the “Under Construction” icon

Instructions in the section header of the work area of the screen for the user. The pur-pose is to provide a user with information on how to complete a screen in Spartan.

Screen Instructions

Click on the buttons below to review each section of the snapshot report before submitting the inspection to your Area Supervisor.

i

Eligibility Verification Premises

Site InspectionResponsible Person Closing Conference

Questionnaire

Example

You have reached the <Title>

To start the Audit, click Continue.

Next Steps:

You work to this point will be reviewed for completeness. The following information will be reviewed:

Background Check: All responsible persons must complete and pass background checks.

Government Issued ID: All responsible persons must provide at least one government ID.

Hidden Owenrship: All suspected hidden owners must be reported to your Area Supervisor and resolved.

Example

Is to provide a user with information about an action previously taken or which is about to happen in Spartan.

Milestone Transition Screens

Is to provide a specialized transition for the user when they are blocked from moving forward with their work by outside action.

Stage Coach

This inspection has (8) unresolved Applicant Actions Items that need to be completed before you can move forward.

i

Example

To start the Audit, click Continue.

<Verbiage>

Select from the actions below:

Update (8) Applicant Items Contact Responsible Persons Withdraw Application

Instructions in the section header of the work area of the screen for the user. The purpose is to provide a user with information on how to complete a screen in Spartan.

Receiving New Assignnent

You have received a new Explosive Application Inspection assignment.

Assigned by: Area Supervisor John Smith Due Date: Thursday, August 31st.

To start the Audit, click Continue.

Review the following sections before starting your Inspection.

Example

Select from the actions below:

Paper Application Application Information Special Instructions Hidden Ownership Guidelines (Optional)