Delta Airlines Style Guide 2009

Style Guide v2.0 revision date July, 2007 Delta Air Lines Inc. Proprietary & Confidential

2.3 DELTA.COM STYLE GUIDE J U L Y 2 0 0 9

INTRODUCTION ..............................................2

DESIGN OVERVIEW .........................................3 Personas ....................................................................................... 4 Design Concept .......................................................................... 5 Design & Construction Platform............................................ 6 Layout Grid .................................................................................. 7

BRANDING ELEMENTS .....................................12 Typography.................................................................................. 13 Color Palette................................................................................ 14 Delta Logo Types ....................................................................... 15 Imagery ......................................................................................... 17

COPY DIRECTION ............................................22 Copy Tone.................................................................................... 23 Copy Rules ................................................................................... 24

SITE ELEMENTS ...............................................37 Masthead ..................................................................................... 38 Log In Application ...................................................................... 41 Navigation .................................................................................... 43 Buttons .......................................................................................... 49 Buttons - CSS Style .................................................................... 50 Buttons - Graphic/flash style ................................................. 53 Tabs ............................................................................................... 54 Type Styles................................................................................... 56 Links ............................................................................................... 59 Call-outs ....................................................................................... 63 Tables & Charts .......................................................................... 74

Application Boxes .......................................................................78 Forms..............................................................................................79 Tool tips .........................................................................................80 Alert & Error Messaging ...........................................................81 Pop-ups & Daughter Windows...............................................87 Modal Overlays ...........................................................................88 Icons & Indicators .......................................................................89 Lower Page-level Imagery ........................................................94 Interstitials ....................................................................................95 Interstitials, cont’d ......................................................................96 Footer .............................................................................................97

HOMEPAGE MESSAGING ELEMENTS .............. 98 Home Page Messaging Structure...........................................99 Messaging Component – Placement Measurements ......100 Messaging Component – Primary Placement ....................101 Messaging Component – Tertiary Placement ....................104 Advisory Bar .................................................................................105 Destination Content...................................................................107 Shopping........................................................................................109 Pay with Miles..............................................................................111

CODE SPECS .................................................... 112

PAGE SAMPLES ............................................... 114

REVISIONS LIST............................................... 121

INDEX .............................................................. 125

Style Guide v2.3 (revision date: July 2009) Delta Air Lines Inc. Proprietary & Confidential 2

INTRODUCTIONThis document provides guidelines on the user interface (UI) design and construction for delta.com, its 3rd party extensions, and partners. It addresses the typography, color palette, design specifications, copy direction, and other page elements that come together to produce this user experience. The elements described here are developed and managed by a Style Guide team led by delta.com & self-service Customer Experience. The Style Guide is a living document. As such, new sections and unique elements will be added as the site develops. New versions will be released throughout the year (target of 2-3 releases). All maintenance and new development activities on the site should comply with the Style Guide. Formal Delta Technology (DT) application projects are responsible for following the rules published at the time of Project Charter sign-off.

If a site activity generates a need/interest to introduce a new style element, the content and/or project UI lead is responsible for gaining approval from the Style Guide Committee and ensuring that the approved style rules are documented. If you cannot find guidelines for an element, wish to question a style rule, or need design approval, please complete the Style Guide Issue Submission Form (located at delta.com/styleguide) for review by the Style Guide Committee. Note: You may be asked to attend the scheduled meeting when your issue is up for review. The current version of this document may be accessed online at www.delta.com/styleguide.

Style Guide Committee: Victoria Sylvain (mtg chair) Delta – Self-service User Experience Design Prachi Hivale Delta – Self-service Applications Development Jen Miller Delta – Interactive Marketing & Content

Jonathan Doss Delta – Marketing Communications Danny Lewandowski Digitas Lisa Mezoff Digitas


D E L T A . C O M S T Y L E G U I D E

DESIGN OVERVIEW Delta Air Lines is the global airline that respects you and your time and acknowledges the challenges of travel today. With more personal choice, smart technology and thoughtful service amenities, Delta graciously saves and enhances your time. Delta flies the best routes and has the most dedicated, impassioned employees. Delta is redesigning the air travel experience with you in mind. Design objectives include building customer loyalty for Delta and encourage evangelism about Delta by both customers and employees. Ultimately achievement of these objectives should support increased transaction conversion rates and greater migration away from higher cost channels to Delta.com.


P E R S O N A S The Audience

To get a grip on the tone of the site, it’s helpful to know for whom you’re designing. The target audience for the design of the new Delta site is the Value Seeker. Value seekers – discerning consumers who are looking for something of value – aren’t just bargain hunters. They’re looking for a quality experience that’s worth their hard-earned money. Value seekers are not primarily interested in “cheap,” although price is among their choice determinants. Equally important to these folks is a genuinely unique experience. They are looking for a little personality, a sense of style, and an inviting experience that makes them feel special. Functionally the site must also meet the needs of the frequent business traveler who is driven by the desire to control as much of his travel experience as possible.


D E S I G N C O N C E P T “Perspectives” Product Guiding Principles (CASSI)

Comfortable: a streamlined, simpler navigation with drop-down menus Affordable: a renewed focus toward communicating value Simple: a disciplined approach that reduces elements on the home page and throughout the site so that a customer’s core needs are met quickly Stylish: a contemporary look, rich in beautiful photography Inviting: a task-oriented design that is also warm and welcoming

Base Design Concept – “Perspectives”

Digitas (DG) developed the concept around travel destination-based imagery as seen from far away, as if looking out an airplane window.

Page Structure

Pages should be highly readable so that users can scan the page and easily find what they need. Consistency of the style throughout the site, as well as within sections and pages, is a major priority. The same styles must be applied everywhere.

D E S I G N & C O N S T R U C T I O N P L A T F O R M Screen Resolution Delta.com is designed for viewing at an 1024x768 resolution. Thus, the most important aspects of a page should be visible above the 650-pixel scroll line with items of secondary importance shown above the 650-pixel scroll line. If there is more to see below the scroll line, the visual break should infer to the customer that there is ‘more.’ The Home Page should present the round-trip reservations box (RTR) fully above the scroll line. Page Weight Home page should not exceed 100KB. All other pages should not exceed 35-45KB (exceptions must be approved) Download Times All pages should load by 8-10 seconds or less. Browser/Platform Compatibility Delta.com is viewed best using Internet Explorer 6.0 (and above) and Netscape 7.2 (and above). Our formal list of supported browsers is currently: • Microsoft Internet Explorer 6.0 or higher • Firefox 2 or higher for Windows and Mac • Safari 2 or higher for Mac • Safari 3 Public Beta or higher for Windows Preferences Enabled Cookies, JavaScript, and Java. JavaScript Use sparingly. When a user has JavaScript turned off, use the <NO SCRIPT> tag.

Primary Interface Technologies Delta.com is built using SiteMesh and a decorator concept to control the brand and navigation “wrappers.” The content look and feel is controlled by CSS and XML. See CSS Guidelines under delta.com/styleguide. Supporting Interface Technologies Other supporting technologies include limited use of Acrobat Reader (version 5.0) and Flash 7.0. PDFs should be used only for content-heavy documents that customers will very likely want to print. Flash should be used sparingly. While Marketing pieces may benefit from visually appealing movement, site content should consider a “flash-type” medium only when it supports a more “usable” end user experience. It should not be used on the Home Page. Note: Flash has not been hosted within the delta.com infrastructure. iFrames IFrames are used when displaying dynamic information from a backend system, an outside source, or when a significant amount of information is presented that requires a lot of scrolling. Due to usability and technical challenges, IFrames usage should be limited. Currently it is used on delta.com to show the boarding pass image within the Check-in application.


L A Y O U T G R I D Primary Foundation The layout grid is used to create a consistent and manageable layout across delta.com. It alleviates varying sizes and spacings for a variety of elements and standardizes code requirements throughout. The grid also increases the flexibility

of marketing pages and creative options when creating unique pages. The following grid structure is the core foundation of delta.com and should be followed for all projects.

Grid Specifications • 970 px wide • 24 columns, each 30px wide • 10px gutters • Outer margins 10 px • Fold at 650 from top


L A Y O U T G R I D Home Page The graphic below roughly illustrates the grid structure of the delta.com home page and how those parts fit together. Standards for each element are described in more detail throughout the guide. See Home Page Messaging Elements.


L A Y O U T G R I D D E T A I L S 2/3 – 1/3 Split Content Well The majority of content pages follow this grid template. It allows for right rail content to be “on” or “off” depending on page needs. The right rail spans 5 columns and is also able to contain an IAB standard ad size of 180x150 if desired.

Example page:

IAB ad option: *Note: IAB ad size is 10px narrower than, and left-aligned within, the right rail area.


L A Y O U T G R I D D E T A I L S Center Split Content Well The overall foundation of delta.com follows a simple 1/3- to 2/3-grid structure. Within the content well of the page, the space can be broken up into 2 columns to accommodate content; however, it strictly follows the width and placement set below.

Example page:


L A Y O U T G R I D D E T A I L S No left navigation This layout style is used when no left navigation is required and the full width of the page for header/footer graphics is to be used. Some examples include the Travel Destinations pages (Ski, Golf, Gay Travel) and Travel Getaways page.

Example page:



BRANDING ELEMENTS Consistent use of Delta branding elements is critical to the overall experience customers have with Delta and helps to reinforce core company values as expressed through CASSI (Comfortable, Affordable, Simple, Stylish, Inviting). Refer to this section for any questions regarding typography, colors, or logo usage.


T Y P O G R A P H Y The fonts were selected because they are distinctive and highly readable and compliment fonts used offline. These fonts are to be used throughout the delta.com online experience. The primary font for graphical text treatments is Whitney. Use graphic text when it is critical to maintain a consistent display of text across all browsers and when you need to control text elements, such as spacing, to not compromise the page design. Specific site areas include: • Primary Navigation • Primary Messaging Component • Buttons For HTML copy, the system fonts are Verdana and Tahoma. Due to its broader, easy to read nature, Verdana is used for copy-dense areas: • Text on content pages - paragraphs of text, bulleted lists, and layout styles that

include primarily text. • Paragraphs of small text – Terms & Conditions.

When a narrower font is needed, or to compliment Whitney when a strong weight is needed, use Tahoma. Specific areas include: • Page headings - h1, h2, h3, h4, etc. • Applications and application components - search box in the masthead, the

home page RTR, all of booking, data fields, etc. • Navigation – drop-down menu items, left nav items • Tables Tahoma is also the default font for any other text displayed on the page that doesn't fall in any of the categories above. When defining font-family in the css, sans serif is included as the backup font after both Verdana and Tahoma. (Example: font-family: Verdana, sans-serif; font-family: Tahoma, sans-serif) See Italics and Bold under Copy Rules.

Whitney Whitney is the typeface used for all graphical text needs. Whitney Light AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz 1234567890! @#$%^&*()

Whitney Book AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz 1234567890! @#$%^&*()

Whitney Medium AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz 1234567890! @#$%^&*()

Whitney Semibold AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz 1234567890! @#$%^&*(

Two typeface versions are used most frequently: Book (most common) and Semibold.


C O L O R P A L E T T E For online experiences, an expanded color palette is used to cover many needs and usability concerns. These include items such as tables, forms, links, errors, etc. The primary colors are used for most basic online needs and items that are most important on screen. Delta Medium Blue is used for links only. Dark Gray is for all

body copy. White, although not listed, is also a major color to consider when designing for screen to keep layouts open, clean and fresh. Secondary colors are used in supporting areas such as tables and table headings. Tertiary colors are used sparingly when accents are needed or unique elements need to be seen more readily.

PRIMARY SECONDARY TERTIARY

Delta Blue r0, g51, b102 #003366

Delta Light Blue 2 r230, g235, b239 #E6EBEF

Delta Orange r234, g138, b26 #EA8A1A

Delta Medium Blue (Used for links only) r0, g102, b153 #006699

Delta Light Blue 1 r119, g153, b204 #7799CC

Delta Yellow r255, g222, b0 #FFDE00

Delta Dark Gray r51, g51, b51 #333333

Delta Dark Blue r0, g42, b80 #002A50

Delta Light Yellow r255, g255, b153 #FFFF99

Delta Red r192, g25, b51 #C01933

Delta Light Red r224, g25, b51 #E01933

Delta Green r51, g153, b51 #339933

Delta Dark Red r153, g25, b51 #991933

Delta Light Green r235, g245, b235 #EBF5EB

Delta Gray 1 r249, g249, b249 #F9F9F9

Delta Purple r176, g144, b176 #B090B0

Delta Gray 2 r234, g234, b234 #EAEAEA

Alert Red r255, g0, b0 #FF0000

Delta Gray 3 r226, g226, b226 #E2E2E2

Delta Gray 4 r204, g204, b204 #CCCCCC


D E L T A L O G O T Y P E S Consistent use of the Delta signature will help build visibility and recognition for the airline and will set Delta apart from competitors. The integrity of the Delta signature must be respected at all times. Don’t stretch, condense or otherwise abstract it. Any modification of the Delta signature confuses its meaning and diminishes its impact. Master artwork must be used and must not be manipulated. Do not alter the arrangement, spacing, or proportions of the Delta corporate logo signature elements. Each individual signature may be proportionately enlarged or reduced. The Delta corporate signature contains a non-standard, custom font. It may not be approximated or replaced by a “similar” font and must be reproduced from master artwork. Note: There is no reversed color signature. Always reverse to white Strong color contrast between the logo and the background color is imperative.

The Delta corporate logo device (i.e., widget symbol) may never be:

• Altered or distorted, split, slanted, or have designs or type super-imposed • Turned sideways or upside-down or used as a directional element • Used alone or as a design element (must ALWAYS be part of a

masterbrand or derivative signature) The SkyTeam™ “logo lock-up” must be used on external customer-facing products. Exceptions include Delta Cargo, which does not require the SkyTeam logo when used on delta.com. All trademark designators (® or ™) must be included as they appear on the logo signatures. See Trademarks under Copy Rules. The recommended minimum size for the SkyTeam logotype is 6 mm in height.

Logo Type Versions Usage/Spec Examples

Full Color (Used on delta.com)

The full color (red and blue) Delta logo is the master treatment, and is, therefore, used most corporately; it must appear on a white background or when the background color value is between 0% and 30% after converted to grayscale.

Reversed Signature

A single color version of the Delta logo may appear in white only. Use the reversed signature when the background color value is between 50% and 100% after converted to grayscale.


D E L T A L O G O T Y P E S : C L E A R S P A C E A N D M I N I M U M S I Z E

The Delta signature is one of the company’s most precious assets. Always position it for maximum impact and give it plenty of room to “breathe.” This will ensure the signature’s presence and legibility. Clearspace frames the signature, separating it from other elements such as headlines, text, imagery, and the outside edges of printed materials.

Clearspace A minimum amount of clearspace must surround the signature at all times. This space is equal to the cap-height of the Delta logotype (e.g. the “l” in Delta). In general, a larger amount of visually uninterrupted space should be kept clear for optimal visibility. Minimum Size When reproducing the signature, be conscious of its size and legibility. to ensure quality reproduction in print, the signature must appear no smaller than 8p in width.

Signature Clearspace

Signature Minimum Size


I M A G E R Y Imagery is a universal medium used to tell stories and make human connections. In our new brand expression, we use imagery to communicate our offer in a compelling and immediate way to make a meaningful connection with all of our audiences. Our imagery can be categorized into three subject areas: people, product and destination. To further support our unique visual approach, imagery should use cropping, scale and select focus to portray subjects in an imaginative and dynamic way that will trigger a response, an emotion or a call to action. All imagery should be surprisingly straightforward and communicate one or more of our image attributes. We encourage the use of imagery that shows how our customers benefit from our service and commitment, and that acknowledges the teamwork, achievement and professional nature of our employees. Visuals should be full color, in sharp focus, and have a central subject without any unusual effects. Their brightness and contrast should be ample enough to provide vivid colors. The composition should be interesting and unique in terms of elements and angles. Style is paramount. The delta.com Home Page has unique image guidelines. See Home Page Background Imagery. Throughout the site, imagery is used to bring visual interest and convey additional meaning to marketing and static product content. For marketing placements, landscapes and destinations are the primary subject matter recommended. They should also contain enough negative space in an appropriate color value (dark or light) to allow for messages to be easily read when placed on top of them. For static site content call-outs, other items may be used as accents on certain areas of a page (i.e., Baggage) or specifically to illustrate a particular piece of text (i.e., Kiosk Check-in).

Regarding aircraft and environmental imagery, aircraft images should never be: • Depicted in angles or positions that may give off a negative safety

impression. • Surrounded by dangerous elements: fireworks, lightning, storm clouds. • Touching anything adjacent to it or in it’s flight path. • With characters or designs added to the standard aircraft image

See Call-outs & Lower-level Imagery under Global Site Elements.


I M A G E R Y : S T Y L E

Crop Scale Selected Focus

Cropping the subject in a compelling way that creates visual interest, expresses something greater beyond the boundaries of the piece. • Unexpected viewpoint • Sense of discovery

Using scale infuses dynamism and brings an unexpected quality to everyday objects or people. It simplifies the composition, adds impact and directly relates to the straightforward quality of our visual system. • Bold and confident • Simple and clean aesthetic

Using selected focus imagery provides the viewer an intelligent nuance; it gives relevance to detail and a sense of depth and discovery by not revealing the obvious. • Warm and authentic • Sense of depth


I M A G E R Y : S T Y L E

People Product Destination

People imagery includes our customers and our employees. We encourage the use of imagery that shows our customers benefiting from our service and commitment. It should also acknowledge the teamwork, achievement and professional nature of our employees. Our people imagery should be real and honest, not posed or contrived. • Confident and straightforward • Speak as a peer

Delta products and services are designed to enhance and save our customers time. Products should not be presented in an overly literal manner; rather they should be illustrated in an inviting, easy to use and fresh manner. • Innovative and relevant • Crisp, simple and clean

As a global airline, destination imagery also plays an important part in communicating our offering. Destination imagery should be presented as an unexpected glimpse and not a literal “postcard.” These images should demonstrate a unique and knowledgeable understanding of these destinations. • In the know • Sense of discovery


I M A G E R Y : D O N O T S Here are examples of images that do not represent the Delta brand. Our images should never be artificial, stereotypical, decorative, literal or unnatural. Photos should not be cluttered with unnecessary props that distract from the story. Avoid using images with content that is irrelevant to our business and customers. 1. DO NOT use clichéd metaphors to represent our product benefits. 2. DO NOT use images that are exaggerated. 3. DO NOT use images portraying clichéd business gestures. 4. DO NOT use staged images. 5. DO NOT use images with artificial settings or staged environments. 6. DO NOT use images that have been digitally enhance or composed of two photos. 7. DO NOT use generic images with color filters. 8. DO NOT use with clichéd destination topics. 9. DO NOT use images with cluttered and distracting environments.


I M A G E R Y : C R O P P I N G We use the cropping technique illustrated on this page to achieve the dynamic photo treatments that have been discussed on the previous pages. Cropping enables you to create a unique composition from ordinary imagery in order to bring it more in align with our brand attributes and help differentiate our photography from competitors.

Note: When you are cropping and enlarging a small section of a photograph, make sure the photo has a high enough resolution to maintain its quality.

Original Cropped



COPY DIRECTION In an online environment where a customer is not interacting with a human, copy becomes the substitute and is critical to the overall experience customers have with Delta. While all of the CASSI attributes are important, ‘Simple’ has the greatest weight. A challenge then becomes how to balance warmth with brevity.


C O P Y T O N E

Be Brief Straight-to-the-point copy will guide the eye, keeping the brand — and the traveler — on target.

When possible and appropriate, favor short “sound bites” of information over lengthier prose. “Relax. Unwind. Uncork.” – NOT – “Enjoy a fine wine from the comfort of your seat, courtesy of ABC Vineyard—just one of many exciting day trips Delta recommends from San Francisco.”

Speak in a clear, active voice—avoid technical or overly formal language. “Check in ahead” – NOT – “Please proceed to the check-in counter. Be prepared with your boarding pass and identification.”

Be Relevant Copy should highlight the insightful ways Delta is working to simplify and enhance the travel experience.

Project a frequent traveler’s mindset – acknowledge the good and the bad. “Delays courtesy of mother nature. Hot chocolate courtesy of Delta.” – NOT – “Delta is not responsible for delays due to inclement weather in the city of departure or arrival.”

Provide helpful “tips” that anticipate traveler needs throughout the journey. “Now would be a good time to check any toiletries too big to carry on-board”. – NOT – “You may NOT carry on the following items...”

Be Provocative Copy should engage attention with a touch of intelligent wit that underscores Delta’s unique point of view.

Humor should be rooted in a shared understanding of what travel is like today and what travel should be. “Chatty neighbor?” (Packaging on headsets)

Humor should be daring enough to surprise. “Direct flights to New York City. Or to the USA.”

Be Real Copy should demonstrate a spirit of like-minded understanding that reflects Delta’s respect for frequent travelers and their time.

Be human but avoid over-using “you” or being too familiar. “Welcome to NYC. Have a great stay.” – NOT – “Delta welcomes you to New York City. We hope you have a wonderful journey, whatever your ultimate destination.”

Emphasize substance over style — avoid being clever for its own sake. “JFK to LAX – 10X a DAY” (Conveys useful information) – NOT – “JFK to LAX is AOK.” (Conveys no useful information)

C O P Y R U L E S Overall Copy Guidelines (supports brevity and simplicity)

Page Length Body text areas should be no longer than 600-700 words; 1,000 words maximum. This equates to approximately 3 screen scrolls at a 800x600 resolution setting. Paragraph Length Paragraphs should remain short. Optimally, paragraphs on delta.com should be less than 7 lines long. Less than 50 words is a good paragraph length.

Word Choice & Length Simpler, smaller words should be chosen over longer, more complex words. Obtain specific term direction under the header Word Choice in the following table.

English Standards For specific writing insights not found in the list below, refer to The Chicago Manual of Style, 15th Edition. Language Translation For translating to languages other than English, allow 25-30% word growth minimum.

Term (in alphabetical order) Usage/Spec Examples (as needed)

Acronyms If you establish an acronym, spell out the first usage and continue to use it for the rest of the page.

Addresses Left align. Blockquote. Use the specific 9-digit zip code when available. <blockquote>

Delta Air Lines, Inc. 

Dept. 745 

SkyMiles Service Center 

P.O. Box 20532 

Atlanta, GA 30320-2532 

</blockquote>

Aircraft Names Use a hyphen when changing from letters to numbers with the exception of Airbus aircraft. Do not use a hyphen when adding a letter after a number.

For aircraft such as the Boeing 727, spell out Boeing 727 on the first reference in a paragraph, then use the aircraft numerals only such as 727, 737 on subsequent references.

Avoid using aircraft plurals. Typically state it as the number of aircraft without the “s” (e.g., 10 Boeing 727). If a plural is needed, use “s” without the apostrophe.

L-1011, MD-88, A310

C O P Y R U L E S ( C O N T . )



Capitalize and italicize the names of individual planes, such as Spirit of Delta.

When referring to specific ship numbers, capitalize the word ship (e.g., Ship 107)

Airports Spell out the airport name whenever possible. LaGuardia Airport or New York-LaGuardia

Washington-Dulles International Airport or Washington-Dulles

Alerts/Error Messages Provide a brief description of the problem/error with clear instructions on how to fix it.

See the Alert & Error Messaging section for specifications.

Alt/Title Text/Tool Tips

Image Alt/Title Tags

All images require alt text. The alt text should be relevant to the image, and for search engine optimization purposes should describe what is shown in the image in a branded way.

If there is any graphical text in the image, these words must be included in the alt text. This lets the visually impaired know important information.

The words should be written in sentence case. If the graphic contains text, the alt text should mimic the case of the graphical text.

Hyperlink Tool Tips

Add a tool tip to help customers save time and avoid a wasted click. Specifically:

• If customers may need more help understanding what is behind the link.

• When there are space constraints on a data item that forces the use of an abbreviation. The roll-over can display the full name. (i.e., airport names).

Keep it as brief and efficient as possible. Use sentence case.

See Tool Tips.

Bad alt text: Woman with computer

Good alt text: Delta business traveler working on computer

Used when you roll-over ‘Contact Us’ and ‘Need Help?’ in the Global Header.

Used in Shopping when you roll-over the city code or flight number table items.

Bold If a word or phrase needs to be called out in body copy, use the W3C approved tag. Do not bold full sentences or paragraphs.




Buttons

Buttons should be 1-3 words in length. Word choice is action-oriented and should set expectations for what the customer will see next.

Generally buttons should be reserved for use within functions or on image backgrounds; otherwise use hyperlinked copy (See xxx).

Avoid using the word “button” when writing instructions.

Use the exact case and wording of the button label.

See Links under Copy Rules. See Buttons under Site Elements for specifications.

Use “Click Go” not “Click the Go button.”

Title Case (from Chicago Manual of Style rules for "Headline Style" capitalization p.8.167) Where the first letter of each word is capitalized. Exceptions for lowercase:

• Conjunctions, articles, and the words “to” and “as”, regardless of grammatical function.

• Prepositions, regardless of length, except when they are: o Used adverbially or adjectively (up in Look Up, or on in The

On Button) o Stressed (as through in A River Runs Through It) o Used as conjunctions (before in Look Before You Leap)

Use for:

• Buttons • Headers (i.e., Page Titles, App Boxes) • Navigation Elements

Capitalization: Case Rules

Sentence Case Sentence case is where the first letter of the sentence is capitalized. Use for: • Alert teasers • Application field labels • Taglines

Capitalization: Other Rules

All Capital Letters (ALL CAPS) Primary information such as headlines or callouts should be set in all uppercase with 80 tracking to establish a direct and bold tonality. Legal requires some phrases and paragraphs to use ALL CAPS in Terms & Conditions copy.

ASA




All Lowercase Letters We use all lowercase in the specific instance when a particular marketing campaign’s branding calls for all lowercase.

good goes around

Links Use title case for hyperlinks that reference page titles.

See Links under Copy Rules.

Lists Always capitalize the first word of the list item.

delta.com Within copy, delta.com should begin with a lowercase “d.” If delta.com absolutely must be used at the beginning of a sentence, you should capitalize the “d” but try to avoid using delta.com at the beginning of a sentence.

Hyphenated Words Capitalize the word before the hyphen, but not the word after the hyphen. The exception is an instance in which the second word is a proper noun that would be capitalized if it stood on its own.

Departments

When referring to a department it is always capitalized. Treat these as proper nouns/names and capitalize appropriately (Title case); if it's an adjective, then no capitalization

Cabin-seat First-class Round-trip African-American

In-Flight HR Career section (Flight Attendant Training)

Currency Currency on delta.com is assumed to be USD unless otherwise specified. If there is a currency symbol available, the format is currency symbol, amount, space, and the three-letter currency code inside parentheses. If there is no currency symbol, the amount will be followed by a space and the three-letter currency code without parentheses. If the whole site, subsite, or page is in one currency, a footnote is all that is required. In application tables where cents are present, they should be used consistently for all values so amounts are aligned to the decimal point. If cents are not/will not be present for any amount, then no decimal point or zeroes should be used. Amounts should typically be right-aligned in either case.

$.75

$75

$7.5 billion

$75 (CAD)




Dates & Times Dates: In tables, use an abbreviated date format. Leave off the period to conserve screen space. In body copy, spell out the month. Date ranges should use a hyphen, not “to.”

Times:

In data/table situations, use the four-character time format but drop the leading zero. In body copy, drop the leading zero and the trailing zeros.

Jul 13 (Deals & Offers)

13 Jul 2001

Tue, Jul 13 2001

January 1, 2001

Mon-Fri; January 9-15, 2004

9:00am 9am

Italics Do not italicize multiple sentences or whole paragraphs within body copy. Italicize the names of specific planes.

Spirit of Delta

Links (Hyperlinks) In Body Copy Links should be 1-4 words in length. Choose the main words that tell what the customer will see next. Include key words that will appear in the title on the subsequent page to help with the visual connection. If the entire Page Title is used, title case the link as a proper noun.

Try to keep links made from multiple words from wrapping to another line. See Capitalization: Other Rules under Copy Rules. As a Button Substitute or Equal

Use Title Case. Links should be 1-3 words in length. Word choice is action-oriented and should set expectations for what the customer will see next. See Links under Site Elements.

See Bulleted Lists under Body Copy – System Fonts

Colon Use Use a colon to introduce a bulleted list, whether it is preceded by a complete sentence or not.

Parallelism Among List Items Start with either all verbs or all nouns. Use either all sentences or all phrases.

Lists/Bulleted Lists

Capitalization of Bullet Points Bullet points should begin with the first word capitalized.




Punctuation

Use sentence punctuation when a list item is a complete sentence. Do not punctuate phrases.

Lists/Bulleted Lists (cont.) List Item Length and Order (if applicable)

Phrases/Sentences: Keep the number of bullets to no more than 7. Try to keep the list item text brief. If you have more than a few lines of text in each item, consider using subheads and paragraphs instead.

Single items: Continue to approximately three inches in length before wrapping to a secondary column. Alphabetize down the first row then continue with the second column, etc.

Notes/Footnotes contain supplemental material to the main text as well as indicate external sources or definitions.

Notes within body copy

A note may be placed below text to callout exceptions. Try to avoid using the “Note:” header. Simply break up the copy into a separate paragraph or standalone sentence.

Avoid placing a note in between sections of a form the user is filling out. Instead use the appropriate footnote style.

When needed, use “Note” alone and in bold, followed by a colon.

Note : Lorem ipsum dorem…..

Footnotes It’s best to take advantage of available technology by avoiding footnotes to redundant information (when the content lives elsewhere on the site). Instead, create a hyperlink that takes you to the information you would put in a footnote. However, in certain instances, legal copy and flight information do require footnotes.

Notes/Footnotes

Footnotes with numbers

Footnotes using superscript numbers are the default style for delta.com. While footnotes are discouraged, some legal text requires these numbered footnotes. In these instances, the numbers should be hyperlinked, so users can easily click on the number to go to its corresponding footnote.




Footnotes with asterisks (*)

The DOT requires an asterisk for references under the booking tables. Display an ‘*’ to indicate a footnote when following a number or a flight number rather than a numbered footnote. This will remove the possibility of a user misinterpreting the footnote number as part of the flight number.

Delta 8218*

Person Use when Referring to Delta

Always refer to Delta in the first person plural (“we”).

The exceptions are:

• When the “we” could be misconstrued as someone other than Delta.

• In the corporate sections of the site, such as “About Delta.” Then use Delta Air Lines.

See “Delta” vs “Delta Air Lines” within Word Choice.

Person Use (Voice)

Person Use when Referring to Passengers, Customers, or Site Users

Refer to passengers, customers, or site users in the second person (“you”).

The exception is when you are referring to SkyMiles members. Non-logged in users might not be SkyMiles members, and so third person use in this instance is acceptable for clarity’s sake.

Phone Numbers Do not include the “1” unless a branded vanity number. Include HTML code in phone numbers to keep it together on one line versus wrapping or breaking between lines.

1-800-FLYSONG

800-323-2323

Exclamation Point Use Avoid exclamation points! Find other ways to communicate emphasis, such as enthusiastic language.

Links (Hyperlinks) Do not hyperlink end punctuation marks.

….visit Special Baggage.

Hyphen, Em Dash, and En Dash Remember that when you are using the hyphen, the en dash, or the em dash, you should put no space either before or after them.

See Coding Specs Section.

Punctuation

Hyphen Use the hyphen to combine words and to separate numbers that are not inclusive.

Compounds such as “well-being” and “advanced-level”

Phone numbers and Social Security numbers




En Dash

The en dash means “through.” Use it to indicate inclusive dates and numbers.

July 9–August 17

Children 5–14 years of age

Em Dash Use the em dash to create a strong break in the structure of a sentence. Em dashes can be used in pairs like parentheses—that is, to enclose a word, or phrase, or a clause—or they can be used alone to set off one end of a sentence from the main body.

Index Link Descriptions Traffic pages on delta.com contain numerous index links with descriptions. Among these, consistency within the page trumps grammatical correctness. If an index link description is a sentence fragment, but it appears on a page with other content links that are sentences, then that sentence fragment should end with a period.

Serial Commas In a sentence that lists several items, a comma must appear before the conjunction in the sentence.

Find the gate, the hotel, the ground transportation, or the ticket counter before you even leave home.

Ampersands For page titles and subheads, an ampersand (&) should be used in place of the word “and.”


Special Characters

Registered Trademarks Careful attention should be paid to the correct use of registered trademarks. Validate the trademark of any product name using the Trademark Registration document accessible from the delta.com/styleguide web page. The registered mark, ®, or trademark, ™, should appear next to the first reference within the content well of a page. Subsequent mentions do not need the mark.

If placed at the end of a sentence, put the trademark outside the period.

Exceptions

Since the word SkyMiles appears with its registered trademark in the top navigation of the site, it never requires a registered trademark in the site copy with the exception of any pages where the top navigation of the site does not appear.

If a trademarked product name appears in the left navigation, consider that notation the first reference and do not add the symbol in the content well.

Special Characters (cont.) Superscripting When a registered trademark, , is used in a graphic, superscript the mark. Do not superscript , in HTML copy (i.e., Left Nav, Body copy) as it alters the line height. Trademarks, TM, are always superscripted, but do not need the additional superscript tag as it is included in the code.


Use noon vs. 12 noon or 12pm. Use midnight vs. 12 midnight or 12am.

Use lower case am and pm. Do not put periods in the abbreviation.

Use an en dash instead of “to”.

Use the time zone abbreviation (e.g., EST).

Time & Time Zones

Timestamp

Use a timestamp for areas of the site that related to irregular operations (IROP) or privacy policy issues.

Updated: Wednesday, January 15, 2004 1:30pm EST




URLs Folder URLs The URL should include no more than 4 words from the page title separated by underscores; best practices suggest that using even fewer words is preferable. Search engine optimization (SEO) guidelines recommend using appropriate and relevant words in URLs. Exceptions to the word limit can be made for cities with more than 3 words in their name.

Marketing Redirects Published URLs are a representation of our brand. Our URL strategy is to reference targeted content after the delta.com domain. Keep references short and memorable. When selecting URLs, do not include special characters such as underscores, dashes, numbers, etc. Follow convention and only use lower case. When referring to a URL in body copy, use the simplest form of the URL that would activate the site if a user typed it in the browser. Only include the http or www if absolutely needed.

Underlining Due to the nature of the web, do not underline copy for emphasis as it infers hyperlinked text.

See Bold and Italics in this same section.

“Air Lines” and “Airlines” Capitalize “Airlines”, “Air Lines”, and “Airways” when used as part of a proper airline name. Use “airlines” when referring to more than one line. See “Delta” within Word Choice.

“Cancellation” versus “Cancelation” “Cancellation” with 2 “l’s”.

“Carry-on” versus “Carry on” “Carry-on” is the noun/adjective. “Carry on” is the verb.

Word Choice

“Check-in” versus “Check In” “Check-in” is the noun/adjective. “Check in” is the verb.

You can check your bags at our Curbside Check-in.

Check in online by following these simple steps.




Class of Service: “First”, Business Class”, Economy” and/or “Coach” If using the more formal class reference (e.g, “Economy Class”, capitalize both words. Do not hyphenate.

Economy/Coach Coach is used in cases where it is clearly all U.S. domestic (e.g., Delta Shuttle). Economy is used in cases where it is clearly all international (e.g., international Codeshare partners). Economy/Coach is used when it could be either. Do not use Tourist. Use main cabin (not capitalized) to refer to food service or any other amenities aboard the aircraft. Do not use Economy when referring to food service or other amenities served in the main cabin.

First Class

“Delta” versus “Delta Air Lines®” Delta Air Lines should only be used when referring to the corporation. Use Delta Air Lines on the first reference; after than, use Delta. Air Lines is always two words in Delta’s proper name. Delta Air Lines has a registered trademark. If talking to the customer use Delta. If writing about a Delta product or service, we should use Delta. For example, Delta’s Crown Room Club®. Use first person references in body copy. For example, “We appreciate your business.”

See “Person Use” within Copy Rules.

“Depart” versus “Leaves” “Leaves”

“e>ticket” and “Electronic Ticket” Discontinue the use of “e>ticket” when referring to a Delta electronic ticket. “eTicket” or “electronic ticket” (spelled out) are the only approved usages.

“Email” versus “E-mail” “Email”

“Enroll” Customers enroll in the SkyMiles program.




“Flight”, “Leg”, and “Segment” Lower case. Flight refers to an entire trip taken by a customer, including any connections. The use of leg should be avoided, as this is more of an industry term. Segment is a pair of points served or scheduled to be served by a single stage of at least one flight at any given time.

As in flight 1088

“In-flight” versus “In flight” “In flight” is the noun. “In-flight” is the adjective.

“In-seat” “In-seat” is the adjective.

“Just” and “Simply” Avoid use of “just” or “simply”. They can sound patronizing to users.

“Log-in” versus “Log in” “Log-in” is the noun. “Log in” is the verb.

“Nonstop” “Nonstop” with no hyphen.

“On delta.com” versus “At delta.com” “On delta.com” describes something as if it’s informational. “At delta.com” describes something as if it’s transactional.

Here on delta.com, you can find the best fares we have to offer.

You can purchase your ticket at delta.com.

“One-way” versus “One way” “One-way” is the adjective. “One way” is the adverb.

“Online” versus “On/At delta.com” Say “at delta.com” or “on delta.com” instead of “online” whenever you refer to something users can do on the site, except when we’re talking about something users can do online that’s not specific to delta.com (e.g., reserving a flight on Travelocity or Expedia).

“Please” Restrict your use of the word “please”. Overuse results in a patronizing tone. An appropriate use is a situation in which Delta has inconvenienced the customer, such as a flight cancellation.

“Register” Customers “register” for a promotion.




“Round-trip” versus “Round trip” “Round-trip” is the adjective. “Round trip” is the noun.

“Sign up” Customers “sign up” for email. “Sign up” is the verb. “Sign-up” is the noun/adjective.

“SkyMiles” and “Miles” “SkyMiles” is an adjective. Do not use when discussing earning or redeeming. “Miles” is the noun.

“Takeoff” “Takeoff” is the noun (one word).

“Traveled”, “Traveling” and “Traveler” Correct spelling with one ‘l’.

“U.S.” and “United States” “U.S.” is the adjective and abbreviation. “United States” is the noun. Apply the same rule to for U.K./United Kingdom.

“website” or “web site” Use the one word “website”.



SITE ELEMENTS Throughout delta.com, certain elements will remain constant. This section covers those elements and the rules around them. As the basis for all pages within the umbrella of delta.com, these elements set the stage for the entire user experience.


M A S T H E A D Branding The masthead contains branding visuals, global navigation and the global navigation for the site. Background Color On the outer edges, a light gray gradient is used to help visually contain the site. The background of the interior portion of the site is white.

Identity (Logo) The Delta mark is 225x30 pixels. It contains two image map links: 1) to the delta.com’s Home Page with an alt tag “Go to delta.com Home”), 2) for the SkyTeam “bug” with an alt tag “Visit skyteam.com.” The mark is 10 pixels from the left side of the page and sits 20 pixels down from the top. The space between the mark and the Log In is also 20 pixels. For the masthead options that do not have the Log In, the space is xx pixels. See Masthead Log In under Global Site Elements.

Primary Masthead

Ancillary Masthead (for use of non-core site sections e.g., About Delta)


M A S T H E A D Navigation Elements For all pages that target the primary traveling customer, the masthead should include Global and Primary Navigation elements. Pages/sections that target secondary customer segments or those ancillary to our core business, utilize the Global Navigation, but use a solid blue bar in place of the Primary Navigation. See Business Programs & Services, which targets various corporate customers.

The Home Page has a different Global Navigation bar replacing Home with Site Map for SEO purposes. Marketing pages and 3rd party hosted sites have the standard links but do not have the Search box because they are not searchable by our internal Google engine.

Global Navigation The top global utility navigation bar should be 13 pixels from the top of the page with the search located directly below. Each navigational item is 5 pixels away from a 1-pixel divider in between.

Links are not bold and underline upon rollover.

Navigation items Font: Tahoma Regular, Title Case Size: 11px Medium Blue: RGB 0, 102, 153; HEX #006699

Vertical divider (created from keyboard character ‘|’) Delta Red: RGB 192, 25, 51; HEX # C01933

Primary Navigation The Primary Navigation for delta.com is built around the 2 main parts of the “Travel Ribbon:” “need a ticket?” (Planning & Reservations) and “got a ticket?” (Traveling & Check-In) as well as the customer relationship management aspect of the business, SkyMiles.

The navigation bar sits 82 pixels from the top of the page and is 31 pixels high and 970 pixels in width. Each navigational item is 9 pixels from the top of the bar and 8 pixels from the bottom.

Navigational Text Font: Whitney Semibold, Title Case Size: 15px White: RGB 255, 255, 255; HEX #FFFFFF

Arrows Font: Webdings Size: 15px Closed: RGB 204, 51, 0; HEX #CC3300 Open: RGB 255, 255, 255; HEX #FFFFFF

Navigation Buttons Top Bevel: RGB 26, 72, 118; HEX #1a4876 Height: 15 pixels Width: 199 pixels Bottom Bevel: Delta blue: RGB 0, 51, 102; HEX #003366 Height: 16 pixels Width: 199 pixels

Navigation Divider Rules Left: RGB 130, 153, 176; HEX #8299b0 Height: 31 pixels Width: 1 pixel Right: RGB 13, 36, 59; HEX #0d243b Height: 31 pixels Width: 1 pixel


M A S T H E A D Primary Navigation Menus: Rollover & Active State Primary Navigation Active Menus After clicking on a global navigation item, it becomes “active.” To indicate this, a color similar to the application header bar colors the item; it also drops down slightly to further emphasize its state.

Highlighted navigation background Medium Blue: RGB 0, 102, 153; HEX #006699 Height: 37 pixels Width: 199 pixels

Primary Navigation Drop-down Menus On rollover of each category, the background changes from dark blue to a medium blue and the indicator arrow next to the title turns downward to indicate that the section is being “opened” and becomes white. Navigation items should be limited to a single line (180px) or a character count limit of approximately 25 characters. Links to 3rd parties and wrapping should be

the rare exceptions and only due to a legal or business compelling need. External links should be identified by adding the host name (i.e., by WWTE). Link order is defined within the Navigation section, starting on page xx.

Drop down menu items Font: Tahoma Regular, Title Case Size: 11px Medium Blue: RGB 0, 102, 153; HEX #006699 Highlighted navigation background Top Bevel: Medium Blue: RGB 0, 102, 153; HEX #006699 Height: 15 pixels Width: 199 pixels Bottom Bevel: RGB 0, 92, 143; HEX #005c8f Height: 16 pixels Width: 199 pixels

Drop down menu items rollover Font: Tahoma Regular, Title Case Size: 11px Leading: 18px Medium blue: RGB 0, 102, 153; HEX #006699


L O G I N A P P L I C A T I O N The Log In follows the design specs of Application Boxes. The header is a 21px tall blue bar surrounded by a thick white stroke. A light gray body area follows this area. The height is variable to accommodate content. The content in the application boxes should be restricted to the most essential inputs necessary to start the function, supporting the ‘Simple’ in CASSI. Specifically, the Log In box is considered a global asset and has 2 presentation states: Fixed Open (e.g., Home Page) and Expandable and 3 functional states (see Log In Application – User States on the next page).

Entry areas into the site (e.g., the Home Page, 2nd Level, Cargo) and applications that benefit from pre-population of customer data should use the Fixed Open version. Static content pages (2nd level and below) should use the Expandable state. For some of the footer sections (e.g., Business Programs & Services), the Log In box may be excluded. See Application Box for complete specifications.

Fixed Open Log In Application

Expandable Log In Application On 2nd level and below pages, the Log In application may have the ability to be collapsed. To expand and collapse the box, users need to click only once on the “Open” and “Close” links added to the bottom of the app box. These links appear only at this level and never on the fixed, open state. Closed Application This state is the default 3rd level application state.

Open Application This state follows the standard application design rules, with the addition of the “Close” link at the bottom.


L O G I N A P P L I C A T I O N User States The Log In has 3 functional states: State 1: Anonymous User

State 2: Recognized, Not Logged In User

State 3a: Logged In User (Medallion)

State 3b: Logged In User (Non-Medallion)


N A V I G A T I O N Index Links (1st Level and Other Trafficking Pages) Index links are used on 1st level and some sub-site landing pages to show users the “child” pages they may visit within the main section. The link name is the page title of the destination page. Each is followed by a short 1-2 line (max.) description of the area to which it leads. There is an arrow (large) by the link name, which behaves as a bullet and is active but not underlined.

On 1st level landing pages, navigation links are shown on the left and should be ordered by business needs and/or follow a logical customer sequence. The Primary Navigation drop-downs should duplicate the link order. If used on 2nd level pages and below, it may be used in the content well of the page to act as a trafficking link to highlight child content pages. See Icons & Indicators and Body Copy Links.

Heading Font: Tahoma Bold, Title Case Size: 11px Static:

Medium blue: RGB 0,102, 153; HEX #006699 Rollover: Underline

Medium blue: RGB 0,102, 153; HEX #006699

4 pixels separate arrow from Heading. See Link Arrows under Icons.

Copy Font: Tahoma Regular, Title Case Size: 11px Dark gray: RGB 51, 51, 51; HEX #333333


N A V I G A T I O N Secondary Left-rail Left-rail navigation appears on 2nd level pages and below, and can accommodate down to the 5th level of content. This system becomes a pseudo “bread crumb” so users may see their path and reference to their current section/selection. Behavior & Design All text is HTML with rollovers created using CSS classes and all items are linked. Starting below the section heading, as users roll over each item, the page title highlights blue, underlines, and a blue arrow appears next to it. The arrow appears only on the 3rd level. The arrow is neither active nor underlined upon rollover. On click, the arrow points down and the section expands to reveal its “children.” If there are no children, the arrow remains facing the page title. Within 4th level subsections, each item highlights blue and underlines on rollover. On click, each item becomes bold as its subsection opens.

A small round-cornered notch follows along with the base of each group of links, indicating a distinct end to the section. This process is repeated until the final level of content is reached. Link Number & Order There should be no more than 9 links in a level. The recommended number of links is 7 for optimal scanability. Link order is defined by business, natural customer sequence, and/or alphabetical if all topics are of same weight through the 3rd level. The 4th and 5th levels should default to alphabetical. Left Nav Exceptions Frequently Asked Questions, Aircraft Types, and Benefits at a Glance

State 1: Static w/rollover state

State 2: Active w/rollover state


N A V I G A T I O N Secondary Left-rail (cont.) State 3: 2 level active

State 4: 3 levels active

Background Colors Section heading bar

Delta blue: RGB 0, 51, 102; HEX #003366

Primary sections background Gray 2: RGB 234, 234, 234; HEX #EAEAEA

Secondary sections background Gray 3: RGB 249, 249, 249; HEX #F9F9F9

Bottom column area Gray 1: RGB 226, 226, 226; HEX #E2E2E2

Divider lines (only appear between top level items)

Border-top: 1px solid Gray 4: RGB 204, 204, 204; HEX #CCCCCC


N A V I G A T I O N Secondary Left-rail (cont.) System Font, Colors, & Link Styles Left Navigation Styles Use Example

Left Navigation Heading (div#genLeftNav h1) Font: Tahoma Bold, Title Case Size: 13px Line height: 33px White: RGB 255, 255, 255; HEX #FFFFFF

At the top of the left-hand navigation, the heading appears in a medium blue bar with white text. This shows where users are and helps them navigate back to the primary 3rd Level page of that section.

Left Navigation Link Static (div#genLeftNav h2)

Font: Tahoma Bold, Title Case Size: 11px Line height: 18px Divider line: Border-top: 1px solid #CCCCCC Dark gray: RGB 51, 51, 51; HEX #333333

Each section link within the left navigation appears in bold and dark gray.

Left Navigation Link Rollover (div#genLeftNav h2.navHover) Active (div#genLeftNav h2.navHot)

Font: Tahoma Bold, Title Case Size: 11px Rollover: Underline + Arrow Line height: 18px Medium blue: RGB 0, 102, 153; HEX #006699

On rollover, the text turns blue and is underlined. A small right-pointing arrow to indicate user selection precedes the link. The arrow is neither underlined, nor active. On click, the section expands to show sub areas. The link remains blue, but also becomes bold. The arrow to the left now points down indicating the section is now “open.” If there are no children, the arrow remains pointing to the right.

Rollover

Active

Left Navigation Sub-link Static (div#genLeftNav h3)

Font: Tahoma Regular, Title Case Size: 11px Line height: 18px Dark gray: RGB 51, 51, 51; HEX #333333

Links with this style appear in sub areas of the left navigation. On rollover, they highlight and underline blue, and on click, remain blue and become bold.

Left Navigation Sub-link Rollover (div#genLeftNav h3 a:hover) Active (CSS code)

Font: Tahoma Regular, Title Case Size: 11px Rollover: Underline Line height: 18px Medium blue: RGB 0, 102, 153; HEX #006699

This is the rollover state of the sub areas.


N A V I G A T I O N Secondary Left-rail (cont.) System Font, Colors, & Link Styles (cont.) Left Navigation Styles Use Example

Left Navigation Sub-link (5th level) Static (css class name)

Font: Tahoma Regular, Title Case Size: 11px Line height: 18px Dark gray: RGB 51, 51, 51; HEX #333333

Links with this style appear below the sub areas of the left navigation. On rollover, they highlight and underline blue, and on click, remain blue and become bold.

Left Navigation Sub-link (5th level) Rollover (css class name) Active (CSS class name)

Font: Tahoma Regular, Title Case Size: 11px Rollover: Underline Line height: 18px Medium blue: RGB 0, 102, 153; HEX #006699

This is the rollover state of the area.

Left Navigation Sub-link (5th level) Selected (css class name) Active (CSS class name)

Font: Tahoma Bold, Title Case Size: 11px Line height: 18px Medium blue: RGB 0, 102, 153; HEX #006699

This is the selected state of the area.


N A V I G A T I O N Related Links Left-rail Related links are available for use on 1st level pages and below to help give users more options to explore Delta products and services that appear in different sections of the site. These links are considered supplemental in nature. If directly related to the page’s content, it should be embedded within the body copy. Do not include links to content located as a child or sibling within the section because they are handled within the left navigation.

Related links should be limited to no more than four and be ordered by business need. Sections that should always include Related Links are FAQs and Contact pages that live in a separate place in the information architecture; therefore, will need a link back to referring policy/product content. ***Note: This s tyle is being phase d out. Ple ase ref er to the new ri ght rai l section on page XX.

Background Color Variable. Related links live in the left rail, whose color will change depending on the level viewed (i.e., color background on landing page, white, or gray from left navigation).

Link Styles Use Example

Related Links Heading (add class) Font: Tahoma Bold, Title Case Size: 13px Delta blue: RGB 0, 51, 102; HEX #003366 Divider link: border-bottom 1px solid; Delta light red: RGB 224, 25, 51; HEX #E01933

Are contextual to the content of the web page. Should only take you to areas outside the section where the page lives. Background color depends on which template chosen.

Related Links Static (add class)

Font: Tahoma Regular, Title Case Size: 11px Dark gray: RGB 51, 51, 51; HEX #333333

Related Links Rollover (add class)

Font: Tahoma Regular, Title Case Size: 11px Medium blue: RGB 0, 102, 153; HEX #006699

On rollover, they highlight and underline blue.


B U T T O N S

Buttons should be used primarily to indicate an input or movement to “the next action” within a function. They are also used to draw attention and “command a click” within marketing messages/call-outs. The new CSS-style button is a highly flexible solution and is easily translated into multiple languages. It is designed in 3 variations: blue, white and disabled. Button Placement A button can be placed on the same line as the last line of copy as long as it is at least 25px away to the right of any copy or body page elements on the same line. Buttons must be at least 5px below any character, form field, or table on the line above the button. There must be exactly 5px between the button and any border to the right (if right-aligned) or below the button. Buttons that keep you on the same page (e.g., reset) or take you forward in a process should align to the right of the page. Buttons that take you back in the process should align to the left of the page. If multiple buttons on the same line (same side), consider the business/process hierarchy to determine the order.

Button Storage & Creation Request Existing buttons are stored under this filepath: http://images.delta.com/delta/buttons/ Naming Convention The filename is equal to the button label text/functionality with the addition of the color specification and the file extension. “S” is used for blue buttons (ex: booknow_S.gif) “G” is used for grey buttons (ex: booknow_G.gif) “W” is used for white buttons (ex: booknow_W.gif) Should a new button be required, please contact [email protected] Note: If you are unsure which button to use, please refer to your project manager. See Buttons under Copy Rules for text guidelines.


B U T T O N S - C S S S T Y L E Blue Button (shown 200% scale)

Static State Font: Tahoma, Bold, Title Case Size: 11px Text: HEX #ffffff; RGB 255, 255, 255 Background color: HEX #003366; RGB 0, 51, 102

Hover State Bevel Color Top: HEX #3385ad Bevel Color Bottom: HEX # 006699

Active State Bevel Color Top: HEX #006699 Bevel Color Bottom: HEX # 3385ad Text shift: -1px


B U T T O N S - C S S S T Y L E White Button (shown 200% scale)

Static State Font: Tahoma, Bold, Title Case Size: 11px Text: HEX #003366; RGB 0, 51, 102 Background color: HEX #ffffff; RGB 255, 255, 255

Hover State Bevel Color Top: HEX #3385ad Bevel Color Bottom: HEX # 006699

Active State Bevel Color Top: HEX #006699 Bevel Color Bottom: HEX # 3385ad Text shift: -1px


B U T T O N S - C S S S T Y L E Disabled Button (shown 200% scale)

Static State Font: Tahoma, Bold, Title Case Size: 11px Text: HEX #ffffff; RGB 255, 255, 255 Background color: HEX #cccccc; RGB 204, 204, 204

Button icon (shown 200% scale) NOTE: The button’s icon should only be changed if it is highly needed. The arrow or square is the primary icon to be used. Button Icon Blue Icon: HEX #ffffff; RGB 255, 255, 255 Bevel Color Top: HEX #3385ad Bevel Color Bottom: HEX #006699

Button Icon Gray Icon: HEX #ffffff; RGB 255, 255, 255 Background Color: HEX #ebebeb


B U T T O N S - G R A P H I C / F L A S H S T Y L E To complement the new CSS-style buttons, a graphic variation may be used in instances where a CSS button cannot. These instances will happen mostly on banner ads, either external or internal to delta.com. CSS buttons should be used primarily when possible.

The specs are also valid for Flash use. Note: If you are unsure which button to use, please refer to your project manager. See Buttons under Copy Rules for text guidelines.

Blue button (shown 200% scale) Font: Whitney, Semibold, Rendered Crisp, Title Case, Spacing +10 Size: 12px Text: HEX #ffffff; RGB 255, 255, 255 Background: HEX #003366; RGB 0, 51, 102 Flash: Anti-alias for Readability

White button (shown 200% scale) Font: Whitney, Semibold, Rendered Crisp, Title Case, Spacing +10 Size: 12px Text: HEX #003366; RGB 0, 51, 102 Background: HEX #ffffff; RGB 255, 255, 255

Disabled button (shown 200% scale) Font: Whitney, Semibold, Rendered Crisp, Title Case, Spacing +10 Size: 12px Text: HEX #ffffff; RGB 255, 255, 255 Background: HEX #cccccc; RGB 204, 204, 204


T A B S Tabs are used in a limited numbers of areas, but can be of value when presenting large amounts of parallel information on a single page. This style is used with an application and when changing functions or actions within that application.

Typically only 4 tabs appear at one time. When more are needed, arrow tabs appear when there are more tabs to indicate navigation to more information.

Style A- Application level tabs

Active tab Text Font: Tahoma Bold, Title Case Size: 11px White: RGB 255, 255, 255; HEX #FFFFFF

Background Delta Blue: RGB 0, 51, 102; HEX #003366

Static tab Text Font: Tahoma Bold, Title Case Size: 11px White: RGB 255, 255, 255; HEX #FFFFFF

Background Light Blue 1: RGB 119, 153, 204; HEX #6699CC


T A B S Tabs are used in a limited numbers of areas, but can be of value when presenting large amounts of parallel information on a single page. This style is used to condense large amounts of page-level content.

Style B- Page content level tabs

Active tab Text Font: Tahoma Bold, Title Case Size: 11px Dark gray: RGB 51, 51, 51; HEX #333333

Background White: RGB 255, 255, 255; HEX #FFFFFF Border Light gray: RGB 204, 204, 204; HEX #CCCCCC Bottom border is removed so tab color matches page color.

Static tab Text Font: Tahoma Bold, Title Case Size: 11px Medium blue: RGB 0, 102, 153; HEX #006699

Background Light gray: RGB 238, 238, 238; HEX #EEEEEE Border Light gray: RGB 204, 204, 204; HEX #CCCCCC

Inactive tab Text Font: Tahoma Regular, Title Case Size: 11px Gray: RGB 153, 153, 153; HEX #999999

Background Color name: RGB 216, 216, 216; HEX #D8D8D8


T Y P E S T Y L E S System Font Styles When setting blocks of copy, certain type styles apply to headings, subheads, copy, and links.

T Y P E S T Y L E S

Header System Font Styles Readability of content is top priority when setting styles for fonts. The system fonts used throughout delta.com are Tahoma and Verdana within a Sans Serif font family. See Typography under Branding Elements.

For specific detail on how these styles are created, see the CSS Guidelines located under delta.com/styleguide. See Special Characters under Copy Rules.

Header Styles Use Example

Page Title (H1) Font: Tahoma Regular, Title Case Size: 21px Line height: 15px Delta blue: RGB 0, 51, 102; HEX #003366

Page titles, or H1’s, are used at the top of each page and are also referred to as “Page Titles.” They use the largest type style, and should not be used in any other instance.

Section Heading (H2) Font: Tahoma Bold, Title Case Size: 13px Line height: 15px Delta blue: RGB 0, 51, 102; HEX #003366

H2’s are used as section headings and appear in several areas throughout the site. They can be used as the questions in FAQ areas, headings for blocks of copy, or in table headings. They are occasionally followed by a Tagline, in which case the bottom padding is removed with the “.formatNoPadding” class.

Tagline (.tagline) Font: Verdana MS Bold, Sentence case Size: 11px Line height: 15px Dark gray: RGB 51, 51, 51; HEX #333333

Taglines are used following an H2 header to add more descriptive copy to the section.

Section Subhead (H3) Font: Tahoma Bold, Title Case Size: 11px Line height: 15px Dark gray: RGB 51, 51, 51; HEX #333333

H3’s are used for grouping content under Section Heading H2.

Caption (.caption) Font: Tahoma Bold, Title Case Size: 13px Line height: 5px Dark gray: RGB 51, 51, 51; HEX #333333 Top & left padding: 5px

Captions are used for any table and are located 5 pixels above the table. They are created using the standard <caption> tag.


T Y P E S T Y L E S

System Font Styles Body Copy Styles Use Example

Body Copy (p) Font: Verdana MS Regular, Sentence case Size: 11px Line height: 14px Dark gray: RGB 51, 51, 51; HEX #333333 Max width: 470px

Overall body styles need to remain consistent and readable. This style applies to all standard body copy throughout the site. Paragraphs should be restricted to 750px maximum width (19 columns) to maintain comfortable line lengths.

Small Body Copy (.smallText) Font: Verdana MS Regular, Sentence case Size: 9px Medium blue: RGB 0, 102, 153; HEX #006699

Copy at this size is generally tertiary information like Terms & Conditions at the bottom of a page.

Bullet lists- Primary (ul, list-style:disc) Font: Verdana MS Regular, Sentence case Size: Inherited from Body Copy style Padding: 30px Bullet style: Disc

When bulleting copy, the default style is square with an indent of 30 pixels. See Bulleted List under Copy Rules.

Bullet lists- Secondary (ul, list-style:circle) Font: Verdana MS Regular, Sentence case Size: Inherited from Body Copy style Padding: 30px Bullet style: Circle

If a bullet within a bullet is needed, use the circle style and increase the indent to show hierarchy. See Bulleted List under Copy Rules.


L I N K SHyperlinked text should be a maximum of 4 words with the exception of links in a list. Select words for links that best convey the linked page’s content. Key words from the link should match the title of those in the title of the linked page so that a customer feels comfortable they’ve been taken to the right spot. When linking to a specific page, and using that page’s name, link should be Title Case.

Do not hyperlink end punctuation marks though include them in the color wrapper. Links to external websites must open another browser window. Use Target=”_blank” in the href tag. Be sure to add the Web Analytics tool (Visual Sciences) redirect tag.

See Buttons, Application Boxes, Anchor links and Return to top links, Related links.

Link Type Style Example

Links in Body Copy (Paragraphs)

Any link within a body copy paragraph (at least 11 points or greater) should be blue, bold, and underlined on rollover only. For footer-type body copy that is 10 points or less, the link should be blue, of regular weight, and underlined (no rollover). Visited body links remain their original color. This helps users to relocate links quickly while not cluttering the page with a variety of colors. Body Links (a:link, a:visited, a:hover, a:active) Font: Verdana MS Bold, Case – see Copy Rules Static: No underline Rollover: Underline Size: 11px Medium blue: RGB 0, 102, 153; HEX #006699 Small Body Links (.smallText a:link, a:visited, a:hover, a:active) Font: Verdana MS Regular, Sentence case Underlined Size: 9px Medium blue: RGB 0, 102, 153; HEX #006699

Static State

Rollover State

Small Body Links

Links as Button Equivalents

Typically used in applications or “partitioned” content/messaging areas where there are already primary functional buttons.

All arrows preceding a link are created graphically with a .gif file and spaced accordingly with CSS. All arrows are also clickable.


L I N K S ( C O N T . )


Links as Button Equivalents (cont.)

Not Bold/Small Arrow (optional) Used in application boxes (i.e., Round-trip reservations), application definition features, and right-rail call-outs. It may be treated with a small arrow, particularly if needed to distinguish between 2 or more links stacked vertically, and regular blue text. The application links are underlined (no rollover). Font: Tahoma Regular, Title Case – see Copy Rules Static: No underline Rollover: Underline Size: 11px Medium blue: RGB 0, 102, 153; HEX #006699 Small Body Links (.smallText a:link, a:visited, a:hover, a:active) Font: Verdana MS Regular, Sentence case Underlined Size: 9px Medium blue: RGB 0, 102, 153; HEX #006699

Bold/Large Arrow Used within functions to highlight ancillary functions within an application. It is also used in Marketing components when the punch of a button is needed but copy space is limited. It is treated with a large arrow, bold blue text, and underlines on rollover. Font: Tahoma Bold, Title Case – see Copy Rules Static: No underline Rollover: Underline Size: 11px Medium blue: RGB 0, 102, 153; HEX #006699

See Icons & Indicators for arrows. See Home Page Messaging for button/link usage.


L I N K S ( C O N T . )


Links in a List

Not Bold/Small Arrow Used as a list of body copy links (not primary navigation elements). Includes the Specials and News areas on the Home Page. To aid readability, it should be treated with the small blue arrow before each link. The text is regular body style and blue and underlines on rollover because of their longer text length. Font: Tahoma Regular or Bold, Sentence or Title Case – see Copy Rules Static: No underline Rollover: Underline Size: 11px Medium blue: RGB 0, 102, 153; HEX #006699 See Home Page Messaging.

Links to a Help Box

Not Bold Used to highlight ancillary copy that is displayed in a pop-up. The link should be blue (no bold) and underlined (no rollover). Font: Tahoma Regular, Title Case – see Copy Rules Static: Underline Rollover: Underline Size: 10px Medium blue: RGB 0, 102, 153; HEX #006699


L I N K S ( C O N T . ) Anchor Links & Return to topOn certain pages that are lengthy, due to a large number of related subsections (e.g., FAQs, Fragile & Bulky Items), anchor links are used to assist users to quickly find a topic. When there are more than five items, use the drop-down anchor link style. FAQs are the exception. The entire list should be displayed in the order set by customer frequency if known and written in the customer’s voice. A “Return to top” link is used with anchor link behavior to allow users to get back to the top of the page for quick reference and navigation. However, to further aid

navigation, “return” links can also be used by themselves on long pages that do not have anchor links. To show direction, arrow symbols are added to the beginning of the link. See Content Icons. Anchor and Return to top links follow standard capitalization rules. See Capitalization under Copy Rules.

Anchor Links (Static List)

Anchor Links (FAQs)

Anchor Links (Drop-down)

Return to top Link

Anchor Links Background Color Light blue: RGB 230, 235, 239; HEX #E6EBEF Links Font: Tahoma Bold Size: 11px Medium blue: RGB 0,102, 153; HEX #006699 Red Rule Height: 1px Color: Delta Light Red: RGB 224, 25, 51; HEX E01933


C A L L - O U T S Static Content Several layout styles that help add visual interest and create a clear page hierarchy should be used to highlight copy within the content well. The following styles are

used and may be used in combination on a page. Always follow the defined layout grid.

Blue & Gray

Solid Light (right rail only)

Solid Dark (right rail only)

Gray

Light Blue & White

Light Blue

Related Info

Use these styles when: 1. Graphics are being used (i.e., Limited Time Offers). 2. There are similar types of content on the page, but it needs to be

separated into individual sections (i.e., Movies). 3. The content is primarily Marketing-focused (i.e., Limited-time offers,

Partner Offers).

Use these styles when: 1. Calling out certain types of information or links. 2. Items that need emphasis on the page. 3. Separating sub-topics from the main topic.


C A L L - O U T S Style – Blue & GrayThis layout style is used primarily to house similar groups of content or unique content (such as Limited-time Mileage Offers). In large groups, a “Return to top” link is used underneath each section. In some cases, a link to see more items (as in the example below) is also used. The blue header is created with a graphic, while all other copy is HTML, following all type

styles. This style is mainly used when graphics are needed and for marketing promotions. See Small Arrow Link.

Header Bar Delta blue: RGB 0, 51, 102; HEX #003366

Title Font: Tahoma Bold, Title Case Size: 13px White: RGB 255, 255, 255; HEX #FFFFFF

Bubble Copy Font: Tahoma Regular, Sentence case Size: 11px Dark gray: RGB 51, 51, 51; HEX #333333

Body Background Delta Gray 1: RGB 249, 249, 249; HEX #F9F9F9 Photoshop layer style: Stroke

Size: 1px Position: Inside Blend Mode: Normal Opacity: 100%

Color: RGB 204, 204, 204; HEX #CCCCCC

See Anchor Links for “Return to top” asset and Navigation Index Links for “See more Delta Limited-time Offers.”


C A L L - O U T S Style – Solid Light & Solid Dark In 2nd and 3rd level pages, imagery may be used to accentuate content or to promote a partner. Logo graphics must be restricted to an 80x40 pixel area and must be placed in the upper left corner regardless of its height or width.

Solid Light

Partner logo production

Solid Dark

Operational: Dark blue

Marketing: Medium blue

Background Photoshop layer style: Stroke Size: 1px Position: Inside Blend Mode: Normal Opacity: 100% Color: RGB 204, 204, 204; HEX #CCCCCC

Copy Font: Tahoma, Sentence Case Size: 11px Dark gray: RGB 51, 51, 51; HEX #333333

Background Transparent Size: 80x40 Border: None

Background Width: 190px Medium blue: RGB 0, 102, 153; HEX #006699 - OR - Delta blue: RGB 0, 51, 102; HEX #003366 Copy Font: Whitney Book, Sentence Case Size: 17px headline, 12px body copy White: RGB 255, 255, 255; HEX #FFFFFF


C A L L - O U T S Style – Solid Dark: DetailsThere are 2 message types for right-rail call outs: Operational and Marketing. When placing messages on a page, take into consideration the type of message(s) and how they are arranged and listed. Preferably, all messages on a page will be of the same type. Operational messages are those that affect a user’s travel such as passport requirements, security alerts, etc. Promotional messages are those are promoting a new feature or area of the site. Icons are used only on these messages.

Operational messages should be placed first in the stack and colored Delta Blue, followed by Promotional/Marketing messages colored Delta Medium Blue. Primary variations should always be used first when developing new messages. Copy and icon usage should be tailored to these variations. Secondary variations should only be used in extreme cases where icon or longer copy length is absolutely required.

PRIMARY (190 x 90) SECONDARY (190 x 90)

No icon With icon (Marketing only) Long text, no icon Long text, with icon

Headline: Whitney Medium, 17px/17px, Sharp, All caps, White Copy, 1st line: Whitney Medium, 12px/18px, Sharp, White Copy, 2nd line: Whitney Medium, 12px/14px, Sharp, White

Headline: Whitney Semibold, 12px/14px, Sharp, All caps, White 2 lines maximum *Note: when headline is 2 lines, body copy is restricted to 1 line. Copy, 1st line: Whitney Medium, 12px/20px, Sharp, White Copy, 2nd line: Whitney Medium, 12px/14px, Sharp, White Icon size: Fit within 25-30px, align with headline.

Headline: Whitney Semibold, 12px/14px, Sharp, All caps, White Copy, 1st line: Whitney Medium, 12px/20px, Sharp, White Copy, 2nd line: Whitney Medium, 12px/14px, Sharp, White

Headline: Whitney Semibold, 12px/14px, Sharp, All caps, White Copy, 1st line: Whitney Medium, 12px/20px, Sharp, White Copy, 2nd line: Whitney Medium, 12px/14px, Sharp, White Icon size: Fit within 25-30px, align with body copy.


C A L L - O U T S Style – Gray As a complement to the primary Gray table style, this layout style is used in various areas throughout delta.com and should be employed sparingly.

Heading Font: Tahoma Bold, Title Case Size: 11px

Medium blue: RGB 0, 102, 153; HEX #006699

Heading Bar Delta Gray 4: RGB 204, 204, 204; HEX #CCCCCC

Background Delta Gray 1: RGB 249, 249, 249; HEX #F9F9F9

Copy Font: Tahoma Regular, Sentence case Size: 11px Dark gray: RGB 51, 51, 51; HEX #333333 See Small Application & Call-out Box Links

Small Arrow The arrow is a gif image and should be active. See Icons & Indicators.


C A L L - O U T S Style – Light Blue & White This style is used to feature alert content and may extend to areas where sub-topic copy needs to be wrapped by a caption. See delta.com/news for an example.

Heading (no alert) Font: Tahoma Bold, Title Case Size: 13px Delta blue: RGB 0, 51, 102; HEX #003366 Heading (alert) Font: Tahoma Bold, Title Case Size: 13px White: RGB 255, 255, 255; HEX #FFFFFF

Blue background Light blue: RGB 230, 235, 239; HEX: #E6EBEF Orange background Orange: RGB 234, 138, 26; HEX: #EA8A1A

Copy (no alert) Font: Verdana MS Regular, Title Case Size: 11px Dark gray: RGB 51, 51, 51; HEX #333333

Advisory Text Font: Verdana MS Regular, Title Case Size: 11px Red: RGB 203, 0, 0; HEX #CB0000


C A L L - O U T S Style – Light Blue Used primarily on landing pages to separate content from the background image, this style may also be used on a white background and filled with light blue.

Box Color (On Color Background) White: RGB 255, 255, 255; HEX #FFFFFF Opacity: 60% Box Color (On White Background) Light blue: RGB 230, 235, 239; HEX #E6EBEF

Heading Font: Tahoma Bold, Title Case Size: 11px Static:


Rollover: Underline Medium blue: RGB 0,102, 153; HEX #006699

Copy Font: Verdana MS Regular, Sentence case Size: 11px Dark gray: RGB 51, 51, 51; HEX #333333

Links Font: Tahoma Regular, Title Case Size: 11px Static:


Rollover: Underline Medium blue: RGB 0,102, 153; HEX #006699


C A L L - O U T S Related Information The call outs serve as links to related information or actions. There are 3 different types, similar to the “Solid Dark” style: Marketing, Operational and Branding. These links are based on either cross-sell/up-sell, provide more information, or call out specific branding points afforded by the content page. All three are to replace Related Links in the left nav.

As with current right rail callouts Operational messages should not be combined with Marketing messages. A Branding message (Did You Know?) can be combined with either or stand on its own. If combined, the right rail should not extend past the copy on the page (ie: the page should not lengthen due solely to right rail callouts).

Examples:

Operational Use to provide related info that helps with general visitor knowledge (as an index of related items). They cannot be combined with Marketing messages, but may be combined with Branding messages.

Marketing Use to increase enrollment in offers, upsell additional products such as Wi-Fi, or close the sale. They cannot be combined with Operational messages, but may be combined with Branding messages.

Branding These messages are used as expanded information or “quick glance” notes related to the page content. The text is static content, links are not used. They can be combined with either Operational or Branding messages.

Heading Bar Delta Blue: RGB 0, 51, 102; HEX #003366 Heading Font: Tahoma Bold, Title Case Size: 11px, White Background Delta Gray 1: RGB 249, 249, 249; HEX #F9F9F9 Outline Delta Gray 3: RGB 226, 226, 226; HEX #:E2E2E2

Heading Bar Delta Light Blue 1: RGB 119, 153, 204; HEX #7799CC

Heading Bar Delta Gray 4: RGB 204, 204, 204; HEX #CCCCCC


C A L L - O U T S Marketing/Promotional On 2nd and 3rd level (and below) pages, a marketing call-out may be used to promote an offer, product/feature, or partner. Since these assets are served by DART, they are ordinarily full graphics with a transparent border and not CSS driven. Generally speaking, all text within the

message is set in Whitney Book with a small button style for the call to action. Depending on the placement of the call-out and the usage, though, HTML/system text may be used instead of graphic text. Exceptions include the secondary-level

Placement of the text and button is subjective, but should be positioned in a pleasing position to enhance the message and promote readability. 2nd Level Landing Pages Only The assets below appear on the bottom of the 2nd Level landing pages (i.e., Planning & Reservations, Traveling & Check-in, SkyMiles). The “weight/content” of the message, should determine the presentation style. Naturally if the message supports the smaller box style, two messages are needed.

The color scheme should compliment the delta.com site while maintaining brand integrity with the featured product. It should not be so visually overwhelming that a user would struggle to focus on the core page content.

Contained style

The contained style of marketing is the most widely used and can contain any type of marketing message that is relevant to the content page/section topic.

Both the full-image and copy heavy styles are appropriate for these spaces. Width: 230px Height: 90px


C A L L - O U T S Marketing/Promotional (cont.) 2nd Level Landing Pages and Below The asset style below appears on the bottom of key landing pages (i.e., Ski Getaways, Golf Getaways). The “weight/content” of the message, should determine whether this presentation style is used.

Like the other marketing placements, the color scheme should compliment the delta.com site while maintaining brand integrity with the featured product. It should not be so visually overwhelming that a user would struggle to focus on the core page content.

Top Destination visual This visual is used in unique areas as strong visual support for the page content and located at the top of the page.

Text: Font: Headline: Whitney Semibold, 30px Copy: Whitney Book, 16px Color: White

Bottom

Destination visual This visual is used in unique areas as strong visual support for the page content. This visual always sits at the bottom of the page and is labeled with a location specific tag in the bottom right-hand corner.

Label: Font: First line: Whitney Semibold Second line: Whitney Book Size: 11px Color: Delta blue: RGB 0, 51, 102; HEX #003366


C A L L - O U T S Marketing/Promotional (cont.) 3rd Level Pages and Below (should be same width) The asset styles below are available to present marketing/promotional content relevant to the page content/topic. See Buttons.

White Call-out Style (Right rail only)

Full Image Call-out Style (Content Well only)

All right rail call-outs should move to a 190px or 230px width standard. Call-outs at 190px are used in the right rail. Call-outs at 230px are used in the content well. Call-outs with a full image background should include a button (15px) call to action.


T A B L E S & C H A R T S Static Content Because there are so many types of information found on delta.com, a set of table and chart styles was developed. These aid in organization and hierarchy of information, and contribute to page aesthetics.

Overall to avoid clutter and confusion, page production must take into account all types of content on the page when choosing table styles.

Gray & Blue (Standard)

Gray (no columns)

Stripes only (no border)

Use this style when: You need to manage data intensive tables. Between sections that are divided by a row header, a pixel divider is used, as well as between columns. The divider extends through the header area into the column subheaders as well. Row headers and column subheaders are colored with light blue. Table captions are located outside of the table and follow their own CSS class style. See the CSS Appendix for more information.

Use this style when: • There are few graphics (i.e., “New” icon)

or none. • Certain blocks of information need to be

emphasized (i.e., Fares’ “How it Works”).

Use this style when: In the case of multiple single-line items, such as the Web Offers pages, a striped table style is used because of the length of content, and to keep the page readable without overloading it with visuals. This style may also be used when each line item has an associated action, as in Web Fares example. While a Gray table style may have been used here, this content was followed by a “How it Works” rules table already in the Gray style. Having the same two styles on the page immediately together would have caused visual confusion and clutter, which should be avoided.


T A B L E S & C H A R T S Static Content (cont.) Variation - Gray with single data row Use when a block of content is mostly informational and technical, rather than marketing or promotional.

Divider (used in data heavy tables) Size: 1px Dark gray: RGB 175, 175, 175; HEX #AFAFAF

Column headers Font: Tahoma Bold, Title Case Size: 13px Dark gray: RGB 51, 51, 51; HEX #333333

Row Colors Outer frame of table Delta Gray 4: RGB 204, 204, 204; HEX #CCCCCC Column & Row Subheaders Light blue: RGB 230, 235, 239; HEX #E6EBEF

First Data Row Delta Gray 1: RGB 249, 249, 249; HEX #F9F9F9

Second Data Row Delta Gray 2: RGB 234, 234, 234; HEX #EAEAEA

Table Caption Font: Tahoma Bold, Title Case Size: 13px Dark gray: RGB 51, 51, 51; HEX #333333

Text Font: Tahoma Regular, Sentence case Size: 11px Dark gray: RGB 51, 51, 51; HEX #333333 Valign: top

Links Font: Tahoma Bold, Sentence case Size: 13px Rollover: Underline Medium blue: RGB 0,102, 153; HEX #006699


T A B L E S & C H A R T S Applications

Row Colors Outer frame of table Delta Gray 4: RGB 204, 204, 204; HEX #CCCCCC Column & Row Subheaders Medium blue 4: RGB 51, 153, 204; HEX #3399CC

First Data Row White: RGB 255, 255, 255; HEX #FFFFFF


Divider (used in data heavy tables) Size: 1px Dark gray: RGB 216, 216, 216; HEX #D8D8D8 Column headers Font: Tahoma Bold, Title Case Size: 11px Dark gray: RGB 51, 51, 51; HEX #333333



T A B L E S & C H A R T S Applications (cont.) The itinerary selection displays the desired application table look implemented with the May ’06 Shopping Initiative release. See Links. Column Sorting

Row Colors Outer frame of table Delta Gray 4: RGB 204, 204, 204; HEX #CCCCCC Column & Row Subheaders Medium blue 4: RGB 51, 153, 204; HEX #3399CC

First Data Row White: RGB 255, 255, 255; HEX #FFFFFF


Divider (used in data heavy tables) Size: 1px Dark gray: RGB 216, 216, 216; HEX #D8D8D8 Column headers Font: Tahoma Bold, Title Case Size: 11px Medium blue: RGB 0,102, 153; HEX #006699 Selected column header Font: Tahoma Bold, Title Case Size: 11px Dark gray: RGB 51, 51, 51; HEX #333333 Background: White: RGB 255, 255, 255; HEX #FFFFFF Gold: RGB 217, 142, 1; HEX #D98E01



A P P L I C A T I O N B O X E S Application boxes are used to introduce larger functional processes. The header is 21-pixels tall blue bar surrounded by a thick white stroke. This is followed by a light gray body area that is variable based on the content of the application. The height is expandable to accommodate content. The content in the application boxes should be restricted to the most essential inputs.

All text is Tahoma. Some applications may also include a “Help” icon or “Detachable” icon in the upper right section of the gray body. If so, all content moves down to accommodate this inclusion. Text that is located on the same line as the action button should be kept within a 20-pixel margin to ensure clear visibility of the button and clarity of text. See Icons and Indicators.

Fixed Open Application

Header Background Color Delta blue: RGB 0, 51, 102; HEX #003366

Header Copy Font: Tahoma Regular, Sentence case Size: 11px White: RGB 255,255, 255; HEX #FFFFFF

Box Stroke Delta gray 4: RGB 204, 204, 204; HEX #CCCCCC

Body Background Delta Gray 1: RGB 249, 249, 249; HEX #F9F9F9 See Header Font See Body Font See Icons & Indicators

Application Field Label (form) Font: Tahoma Regular, Sentence case Size: 9px Dark gray: RGB 51, 51, 51; HEX #333333 Application Field Text (pre-filled ‘select’ copy) Font: Tahoma Regular, Sentence case Size: 11px Dark gray: RGB 51, 51, 51; HEX #333333

Application Links (#div.formContainer a) Font: Tahoma Regular, Sentence case Underline Size: 9px Medium blue: RGB 0, 102, 153; HEX #006699


F O R M S Because forms contain several levels of information, they must be clear and easy to use. The buttons that submit are located at the end of the form and right aligned to the right most field. Avoid the use of a “Clear” or “Reset” button to clear the contents of a form, as it creates unnecessary clutter. If there are footnotes, add them to the bottom of the page below a light blue divider line. All text within a form is sentence case. See Capitalization: Case Rules under Copy Rules.

Required fields Use * to denote a required field. Do not use notations for optional fields. Use the * notation even if all form fields are required. The exception is a single-field data input. Place the “*Required” at the top of the form with an * to the left of the form field label. See Buttons and Icons & Indicators.

2 pixel divider Color name: RGB 0, 102, 153; HEX #006699 Add button reference and divider reference. See Icons & Indicators for Steps.


T O O L T I P S

ALT tags ALT tags are useful in the event that a user has their images turned off, or they hover over an area looking for more details or helpful information. ALT tags should be included in all links and be contextually relevant to the task at hand. ALT tags are created by the browser with default styling.

Hover captions Hover captions give users more detail about a certain item when hovering over it. Examples include full airport name & flight details. The caption appears just to the side of their mouse indicator and follows it as they move across the link. It disappears immediately as they move off of the link. Size is determined by the amount of content within.

Background RGB 255, 255, 255; HEX #FFFFFF

Border 2px, Delta Medium Blue RGB 0, 102, 153; HEX #006699;

Text Font: Tahoma regular Size: 11px Dark gray: RGB 51, 51, 51; HEX #333333

See Copy Rules.


A L E R T & E R R O R M E S S A G I N G Alert and Error Messaging assist users of an application in three main scenarios: Alert, Confirmation, and Error. The Message Center is located after the row of tabs and before the page sub-header.

Error and Alert messages can appear simultaneously. See figures 3 and 4.

If a message spans more than 1 line, do not let the text wrap below the image. Add 5 pixels of space between the image and the beginning of the text. Vertical image alignment should be set to top.

Note: In some instances an Alert message is displayed with an option for the user to enter data in text fields. An Error message might be triggered by the system in reaction to missing or inaccurate data. In this case, when the in-page message is built, the Error message will appear above the page header

and the Alert information will appear below the page header. Figure 3 illustrates simultaneous Error and Alert messages where the Alert message is informational in nature hence the blue text and Figure 4 illustrates simultaneous Error and Alert messages where the Alert message required more emphasis hence the red text.

Icons In-page messages require icon images.

Images are optional for off-page messages.

If the images are used in other capacities throughout delta.com, they should be used in a manner consistent with these guidelines, e.g. using the confirmation image within a confirmation page to emphasize copy. See Icons & Indicators for list of Alert & Error Messaging icons.


A L E R T & E R R O R M E S S A G I N G ( C O N T . )

Alert Messages The Alert icon and message is used to request user's resolution of a critical dependency (e.g. required data being modified/deleted, permission to save).

Alert messages do not reflect a user error but a system obstacle that a user must overcome before continuing their interaction.

There are levels of alerting:

1. Dependency alerts - alerts the user when an Edit or Delete action triggers a Dependency rule(as shown in Figure 1) and

2. Consent alert - an Update or Add action triggers a Consent rule (as shown in Figure 2).

3. Required information alert

Dependency alert The dependency rule will be triggered if the user wishes to delete an item that is associated with other activities or requirements other than the activity or requirement the user is trying to modify. For example, if a user wishes to delete the billing address for her American Express credit card, but the same address is being used as the billing address for her Visa card (also in her profile), the system will alert the user of this dependency and give options to choose another address from her profile, type a new one, or opt out (cancel).

Required information alert The dependency rule will be triggered if the user wishes to delete the only occurrence of a required item, e.g., users have only one address in their profile (required by SkyMiles membership) and wish to delete it, will receive a message that will alert the user to designate another address before deleting the existing one. This also appears where a required checkbox is mandatory to be checked in order to store a user’s information.

Both icon and explanation message are displayed directly under the page title (or tab group) after the user’s actions trigger the Alert.

Below the explanation message, users will find instructional copy that will walk them through fixing the problem.

The orange arrow icon is meant to be a gentler approach to the red “X” in error handling.

The alert message appears below the page title.

Image name error_arrow.gif

Location //images.delta.com/images/icons/error_arrow.gif

Image size 19x19

Alt/Title Text Alert

Copy class=”cpyError”

OR

class=”cpyAdvisory” depending on level of emphasis desired for the Alert.

Figure 1. Alert message requiring emphasis -OR-

Figure 2. Alert message that is more informational in nature.



Confirmation Messages The confirmation message is displayed if a user action is completed successfully.

The confirmation image and message is displayed after the user updates, adds or deletes information.

The image and message appears above the page header and directly under the tab group.

Image name confirmation_check.gif

Location //images.delta.com/images/icons/confirmation_check.gif

Image size 19x19

Alt/Title Text Confirmed

Copy class=”cpyAdvisory”

Place the image/icon on the same horizontal line as the field label.



Error Messages The Error icon and message is used throughout to indicate in-page error messages and highlight the error.

The error message appears above the page title.

Error messages are shown with an “X” image followed by error message appearing above the page title. Then the impacted fields have an “X” image preceding them with the label turned red. There is no additional error messaging associated with the field.

Error messaging for fields located above the control

• From an implementation perspective, option 1 is the easiest, especially if considering retrofitting the design into existing forms.

• From a real estate perspective, option 1 conserves the most horizontal space and if we ever start incorporating in page error messaging in booking this will be an issue.

• From an aesthetic perspective, option 2 or 3 may be more desirable with a preference to option 2.

When the user updates, edits, adds, or deletes, the system will run audits. If the information fails the audits, it will display an in-page error message that informs the user that a problem has occurred. The icon and error message are displayed directly under the tab group and above the page header after the user updates, adds or deletes information in their profile and a user error occurs. On the line next to the image, a message is displayed that explains the nature of the error.

In addition, to help support colorblind individuals, a small image that indicates “error” is displayed to the left of the label.

Image name error_x.gif

Location //images.delta.com/images/icons/error_x.gif

Image size 19x19

Alt/Title Text Error

Copy class=”cpyError”

Place the image/icon on the same horizontal line as the field label.



Error Messages (cont.) Small Accents

Figure 3. Simultaneous Error and Alert messages - Alert message informational

Figure 4. Simultaneous Error and Alert messages - Alert message emphasized.

FPO



Error Messages (cont.)

IROP and high priority messaging These messages are used during an IROP (Irregular Operations) situation, or when an error has occurred that needs attention by the user. It appears at the top of the page in Delta Light Yellow with the triangle alert icon and copy explaining the

error. Possible solutions may be included, as well as links to aid in fixing them. If a button is required, it is placed in the lower right corner of the box.

Font: Verdana regular, 11px Delta Dark Gray #333333 R: 51, G: 51, B: 51

Color: Delta Light Yellow #ffff99 R: 255, G: 255, B: 153

Icon: Triangle Alert 18x18 pixels


P O P - U P S & D A U G H T E R W I N D O W S Pop-ups & Daughter Windows are reduced to a size smaller than the full open window. They are used to present definitions and other “help” information that may be needed by a small customer group. We also use Pop-ups to present needed support information in a way that would keep the customer from having to navigate back from another screen (e.g., fare rules available in booking). For Terms & Conditions, unless Legal requires them to be on the same web page, they should be presented in a Pop-up. A Pop-up window must be smaller than the background window and not exceed the size of a standard 800x600 monitor. Elements such as browser buttons, status bar, toolbar, and address bar should be hidden.

In order for users to clearly identify delta.com Pop-ups, a simple header graphic is placed in the top of the window along with a “Close Window” link. All other content within the pop-up follows the type, table, chart, and layout styles

previously defined. Ideally, the window should be large enough to display all the contents. Regardless of width of the window, Delta logo remains in the upper left corner, while the Close Window link remains in the upper right corner.

Header Font: Tahoma Bold, Title Case Size: 17px Delta Blue: RGB 0, 51, 102; HEX #003366

Subheader Font: Tahoma Bold, Title Case Size: 13px Delta Blue: RGB 0, 51, 102; HEX #003366

Copy Font: Tahoma Bold, Sentence case Size: 11px Dark gray: RGB 51, 51, 51; HEX #333333


M O D A L O V E R L A Y S Modal overlays are dialogs that pop up and disable the background behind them. Users can click anywhere inside modal overlays, but you can’t click anything in background until clicking a either a button to continue or “X”. Overlays are used when an action is needed, but the page should not be refreshed. Sizes are determined based on the amount of content contained, and should be centered and fit to the users’ screen resolution.

Flow Modals When a process requires action, a Flow Modal is used. This variation does not have a ‘close’ function and the user is required to take a specified action. Examples include correcting an error, confirming selections, etc.

Form Modals This variation does include a ‘close’ function in the upper right corner and the user is not required to take a specific action. Examples include updating preferences, updating address, etc.

Background White: RGB 255, 255, 255; HEX #FFFFFF Opacity: 60% Overlay Background White: RGB 255, 255, 255; HEX #FFFFFF Opacity: 100% Overlay Border 2px, Delta Blue RGB 0, 51, 102; HEX #003366 Overlay Header Bar 20px, Delta Blue RGB 0, 51, 102; HEX #003366 All other content styled according to defined styles.

Other potential uses of modal overlays can include photo slideshows and video presentations.


I C O N S & I N D I C A T O R S Icons and indicators are a very useful tool to help readability, navigation, and way finding. They help direct users’ attention to important information or useful tools. The icons and indicators on delta.com are subtle and unobtrusive, but add a great deal to the overall experience. All icons are clickable relative to their function (i.e., the Help icon causes the help window to pop up, while an arrow links with its corresponding header). Icons are

created on a pixel-by-pixel basis in Photoshop. They should be clear and distinct while remaining as small as possible. See Alert & Error Messaging section and Links.

Content/Navigation Icons These icons are located within the body of the page or the left navigation area.

Icon Styles Use Example

Arrows

Used in Left Navigation Upon rollover, these blue arrows appear to the left of their associated link.

Used with Anchor Links

These icons appear next to items that anchor to lower portions of a page and next to “Return to top” links.

Used with Body Copy and Application Links

Certain types of links require the use of an arrow. Index links, links within a list, and alerts all follow this style. Each arrow is created as a gif file and placed with 4 pixels of space between it and its associated link. These arrows are also clickable. There are 3 arrow styles used on delta.com. Large blue: This arrow is the primary style used. It indicates linked items and is associated with bold, blue header style text. It is used in the left rail index link as well as the body of the page to indicate primary areas of content. Small blue: Used to indicate less prominent links, links not within any body copy and lists of links. The arrow is a gif image. Small red: Used only in the Home Page advisory bar to separate items when there are two.

Used with Log In Application Used to open and close expandable applications.

Open Close


I C O N S & I N D I C A T O R S ( C O N T . )


Error & Alert Icons Consideration Alerts Alert (triangle) icon: highest level of alert. Essential info that must be considered. Occurs at the top of the page. “I” icon: medium alert. Appears at the beginning of a process. It’s used to call a user’s attention to relevant information such as legal disclaimers, additional information not included on a page. Action Alerts “X” icon: high alert. This should be used when the user has done something incorrectly and must fix the problem. Reverse arrow icon: medium alert. User must deal with the issue, but no error has occurred. Check mark icon: Low alert. User has succeeded in the task.

14px by 14px

Help Icons

These icons appear primarily within application boxes, but may be used elsewhere when needed. There are 2 options available: single color and multiple colors. When using multiple colors, limit your palette to 2-3 colors. Single colors should be directly from the color palette or within an acceptable tonal range deviance. Avoid bright or vibrant colors. See Color Palette under Branding Elements. 1. Help icon: gives users extra context to the current application being used. 2. City codes: Users click this to get the airport code of their arrival or departure.

3. Calendar: This icon brings up a small calendar for easy date finding during the reservation process.


I C O N S & I N D I C A T O R S ( C O N T . )


Move Up and Down Currently only used within the Vouchers application to reorder the credits a customer wishes to apply to the cost of a ticket.

New

This icon appears on new items such as Fare Sales, Packages & Promotions, and new delta.com features, such as Pay with Miles. When using this icon, do not leave it on the site for longer than five business days for special offers or 6 months for a new product/feature release. Text should align to its top edge. When only one line of text is present, the next line breaks beneath the icon to allow sufficient space between it and the icon.


I C O N S & I N D I C A T O R S ( C O N T . ) Downloadable files Delta.com offers some files in downloadable formats, such as Word, PDF and Excel. The files’ links are displayed accompanied by a small “favicon” icon representing the different file types. The file size is also displayed in parentheses. There are 3 display variations for the icon. They are:

1. When a files’ link appears in body copy, the icon is shown at the end of the link. (Ex: Link to file [icon] (XYZ, 123k) ) 2. When a files’ link appears in a list, the icon is shown at the beginning of the lnk. (Ex: [icon] Link to file (XYZ, 123k) ) 3. When a files’ link appears in a table, only the icon is shown and a rollover triggers a pop-up layer indicating the file size

Icon size: 12x14 pixels. File type/size indicator: Tahoma regular, 11px, Delta Medium Light Blue 1 (RGB 102, 153, 204; HEX #6699CC) Icons: Word (enabled and disabled)

Excel (enabled and disabled)

PDF (enabled and disabled)

Examples:

Icons in body copy

Icons in list

Icons in table

Acrobat Reader download note Along with the icon, a note placed at the bottom of the page accompanies all pages where a downloadable PDF file is present.


I C O N S & I N D I C A T O R S ( C O N T . ) Step Indicator/Application Progress Bar During booking, and other step-by-step processes, users are reminded of the progress through the progress bar. This helps to illustrate where in the process the user is. As each step is performed, the corresponding stage is highlighted in the bar with a title and blue surrounding “bubble.”

The indicator should be left aligned. Each step should appear in title case. Incorporate an alt/title tag.

Active Step Medium blue: RGB 0,102, 153; HEX #006699

Number Text White: RGB 255, 255, 255; HEX #FFFFFF Bar & Unactive Steps Grey 3: RGB 226, 226, 226; HEX #E2E2E2

Content Dividers When space is needed between items (such as steps in a form or to separate terms & conditions), a 1-pixel divider line may be used, created with CSS using the “hr” tag. Dividers span with width of the content well and have a 15-pixel top and

bottom padding. The left navigation also uses a divider line by default between all level 2 items.

Color Delta Light Red: RGB 224, 25, 51; HEX E01933

Gray lines Gray lines are used when a divider is needed on gray backgrounds. Primary use is in left navigation and to separate steps in a form, as needed.

Color Gray 4: RGB 204, 204, 204; HEX #CCCCCC


L O W E R P A G E - L E V E L I M A G E R Y In 2nd- and 3rd-level pages, imagery may be used to accentuate or illustrate the content.

Always provide ALT and TITLE tag information. Make the tag descriptive enough for people navigating the web with images turned off or using screen readers. Use sentence case without end punctuation unless a proper sentence. See Imagery. See Call-outs.

Small Accents Illustrative of entire page When used only as an accent to the page, place in the right-rail content area. Illustrative of a section within a page When used to illustrate a portion of the content, place it in the content well and wrap the copy around the image.

Large Accents Created to be a special page header. Used on special pages where strong “merchandising” is needed (e.g, destination landing page). Image should be illustrative of entire page topic. Square corners are used for this type of image because it is not interactive or clickable.


I N T E R S T I T I A L S “Please Wait Screens” Currently used during the Shopping process. The primary purpose is to inform the customer that the site is working behind the scenes. The spinner is layered on top of the visuals as a separate animated gif.

The secondary message under the “Searching” message should promote a benefit of the site or new feature. Graphics should support the message conceptually and does not have to explicitly depict the feature.

Searching message, line 1 Font: Whitney Book, Sentence case Size: 18px / 18px White: RGB 255, 255, 255; HEX #FFFFFF


Feature message, line 1 Font: Whitney Book, Sentence case Size: 21px Medium blue: RGB 0, 102, 153; HEX #006699

Feature message, line 2 (URL) Font: Whitney Book, Sentence case Size: 14px Medium blue: RGB 0, 102, 153; HEX #006699


I N T E R S T I T I A L S , C O N T ’ D “Please Wait Screens” Interstitial Alternate This style is used for other actions on the site that cause a delay in presentation. Specific areas of use are itinerary retrieval and when users are transferred to other sites.



Flight Retrieval Message This style is used when retrieving flight information on results tables.

Background color RGB 217, 142, 1; HEX #D98E01

Border 2px RGB 128, 86, 2; HEX #805602

Message, line 1 Font: Tahoma bold Size: 13px White: RGB 255, 255, 255; HEX #FFFFFF

Message, line 2 Font: Tahoma regular Size: 11px White: RGB 255, 255, 255; HEX #FFFFFF


F O O T E R The footer contains navigation to Legal policies and Delta corporate information and contains access to sitelets that serve the needs of customer segments outside of the primary target traveler (i.e., Cargo, Travel Agents).

The footer navigational items are right justified and 10 pixels from the end of the footer bar (right side). The navigation items sit 11 pixels from the top of the bar and 11 pixels from the bottom of the bar. Each navigational item is 6 pixels away from the 1 pixel divider in between. The top margin for the footer is 30 pixels to avoid any page item from being too close.

Footer navigation Font: Tahoma Regular, Title Case Size: 11px Medium blue: RGB 0, 102, 153; HEX #006699

Footer navigation bar Gray 2: RGB 234, 234, 234; HEX #EAEAEA Height: 29 pixels Width: 750 pixels

Vertical divider Created using the “pipe” keyboard character. Delta Red: RGB 195, 25, 51; HEX #C01933



HOMEPAGE MESSAGING ELEMENTS Elements described in this section guide the delta.com Home Page message creation. Since these placements received the highest visibility by the value seeker customer, the messages should have broad audience appeal and relevance.


H O M E P A G E M E S S A G I N G S T R U C T U R E

The new home page is divided into 3 main areas: 1. Primary: This space is located at the

top of the page and sets the stage for the site. It houses the featured destination image and associated marketing message.

2. Secondary: This space holds up to 3

banner-type placements and is positioned directly below the primary.

3. Tertiary: This space is used for other

marketing promotions, news, fare sales, etc. It is the most simple in design, utilizing only text links.


M E S S A G I N G C O M P O N E N T – P L A C E M E N T M E A S U R E M E N T S The overall page grid is divided into 4 columns, with 3 equal-width columns. The left-most column is devoted to applications, while the remaining three columns define the space of the new banner placements in the secondary and tertiary areas. Primary area: 710x250 pixels

Message area: 300x135 pixels Secondary area: 710x110 pixels

Column width: 190/150 pixels Gutter btwn. columns: 50 pixels left Overall left margin: 40 pixels Overall right margin: 40 pixels Ad live area: 190x90 pixels

150x90 pixels Tertiary area: 710xFlexible

Left column width: 190 pixels Left column, left margin: 40 pixels Right column width: 310 pixels Right column, left margin: 50 pixels


M E S S A G I N G C O M P O N E N T – P R I M A R Y P L A C E M E N TFor visual impact and to reinforce the simple and stylish attributes of the Delta brand, a large, half-screen background image is used on the Home Page of delta.com. Business Objectives: • Primary: Convey the places Delta can take you in a stylish and appealing way,

which "inspires" people to travel; encouraging repeat visits. Over time should communicate the breadth of our network as being local to global.

• Stimulate awareness and provide promotion to new, highly competitive or attractive markets (e.g. RIO, TXL, others to be named).

• Enhance channel shift opportunities in new & weak markets.

• Gain incremental revenue and/or off-set operational costs through partnerships (e.g., Tourism Boards).

• Increase ticket purchase - Target the destination for publication on delta.com during the primary booking window (not necessarily the same as the peak travel period). Timing should attempt to be one step ahead of a customer's vacation calendar.

Like a wall calendar, a new background will be rotated monthly to communicate a significant value proposition. See Home Page Messaging Component-Primary Placement. Image Selection Boundaries: • Customer target – Should appeal to the Experience Seeker

Image Illustrations:

• Locale - an "enticing" destination; primarily leisure-focused. May encompass a “drive to” location within 1-2 hours of airport. Should not be a “typical” shot.

• Rhythm – Should vary the style and content from month to month so that it is noticeable that the image has changed. For example, one month architectural feature, next month natural foliage.

• Stability & Cost Effectiveness - due to operational needs, will need to "commit" to selections more than a quarter out. A single destination needs to be confirmed at least 6 weeks out due to landing page development constraints.

• Composition - The image must contain adequate “negative” space to contain a marketing message and retain its simplicity. Complex images with varying elements should be avoided. Maintain the visual interest area to the right edge, moving up toward the nav bar (γκ).

Also be aware that the area around the masthead navigation must be solid-colored with the appropriate color contrast (i.e., an image with clouds at the top must have clear area around the navigation) to ensure that the links are clearly visible. A size limit of under 50k should be maintained for the overall Home Page size limit of 100k. Final image production size: 710x250 pixels, compressed 45-50% See Layout Grid – Home Page and Home Page Primary Messaging under Home Page Messaging Elements.


M E S S A G I N G C O M P O N E N T – P R I M A R Y P L A C E M E N T This main message area is used to convey a “significant” customer value proposition (e.g., large offer/promotion, product offering, ‘special’ new route/destination – see Imagery – Home Page Background). The message offering should be broad in audience relevance, generate leads, and support our corporate goals. The copy should work in conjunction with (refer to) the home page background image destination. Thus, the message should have a lifespan of at most one month. Due to ad blocking and home page weight limitations, this copy is a part of the background image and production should be coordinated within the monthly image rotation process (to be defined).

The “call to action” should take you to a landing page that elaborates on the home page messaging promise. It could point to an appropriate special offer, marketing promotion, destination content, etc. within the site design experience. It should not link to a 3rd party site. It is not recommended to remove the call to action, as it is contrary to the nature of the interactive medium. The message itself should be succinct and direct. Wrapping should keep the right rag, clean and sensible, and should not allow for any “widows” (single words on a line). Language Translation For translating to languages other than English, allow 25-30% word growth minimum.

Message Title Font: Whitney Medium, All caps Size: 25px Text tracking: 80 (Photoshop) White: RGB 255, 255, 255; HEX #FFFFFF 17-21 characters max, 1 line max

Message Sub-Text Font: Whitney Medium, Sentence case Size: 14px Leading: 1st line- 26px, all others- Auto (Photoshop) White: RGB 255, 255, 255; HEX #FFFFFF 125 characters max, 3 lines max w/o T&C, 2 lines max w/T&C

Message Button Graphical button 12 characters max See Buttons.


M E S S A G I N G C O M P O N E N T – S E C O N D A R Y P L A C E M E N TSecondary banners compliment the overall marketing direction of the home page and allow Delta to highlight other high-priority Delta-specific offers in a more visual way. There are 3 approved styles: text with horizontal image, text only, and graphic “pill”.

The full image bleed version must use a button for the call to action to stand out on top of the image. For the other styles, the buttons and Arrow/Text links are interchangeable pending copy length and/or message strength hierarchy. Buttons should try to align to the same position. See Buttons, In Copy & Equivalent Links.

Text with Horizontal Image (190x90) Text Only (150x90) Graphic “Pill” (190x90)


M E S S A G I N G C O M P O N E N T – T E R T I A R Y P L A C E M E N TThe tertiary area of the home page is a flexible space for marketing messages which allows Delta to feature many different items that may interest users. The area is divided into 2 columns. The left column is used for Delta product proof-points and data capture opportunities like email. sign up. These have a long shelf life.

The right column is divided into two rows with the top featuring high priority fare sales, and the bottom featuring current Delta News & Promotions. Messaging in the left-rail should focus on attention-getting specifics such as prices, bonus miles, or new routes. Most delta.com visitors come weekly. Therefore messages should keep to a lifespan of 1-2 weeks. See Links.

Left column Width: 190 pixels Top margin: 10 pixels Left margin: 40 pixels Paragraph margin: 10 pixels

Copy Specifications Headline: Tahoma Bold, 11px 12 characters max 1 line max Copy: Tahoma Regular, 11px 45 characters max 3 lines max (including CTA) Button: Tahoma Regular, 11px 12 characters max Colors Gray: #333333 / RGB: 51, 51, 51 Blue: #006699 / RGB: 0, 102, 153

Right column Width: 310 pixels Top margin: 10 pixels Left margin: 50 pixels Paragraph margin: 10 pixels Divider: 1 pixel (With top/bottom margin of 15 pixels) Copy Specifications Headline: Tahoma Bold, 11px 25 characters max 1 line max Copy: Tahoma Regular, 11px 45 characters max 1 line max Colors Gray: #333333 / RGB: 51, 51, 51 Blue: #006699 / RGB: 0, 102, 153 Divider: #C6C6C6 / RGB: 198, 198, 198


A D V I S O R Y B A RIn certain instances, a company-wide advisory may be posted on the home page. This element is not constant and will appear only when a significant newsworthy event happens (i.e., major weather problem, security alert) and will not contain any type of promotional content. The Advisory Bar is located 328 pixels from the top of the screen and can scale in width to accommodate up to 2 messages at any given time. A red arrow divides each message with 7 pixels space on its left and 3 pixels space on its right.

The overall box is allowed to expand horizontally up to a maximum of approximately 465 pixels (typically 4-5 words an alert) The text is positioned absolutely using CSS to achieve proper spacing within the white box. Guidelines are available on the Delta common drive at: O:\MKT_OnLineSales\Content\websitemtc_content\Emergency and IROP Publishing

Advisory title Font: Verdana MS Bold, Title Case Size: 11px Alert red: RGB 204, 0, 0; HEX #CC0000

Message Font: Verdana MS Regular, Sentence case Size: 11px Color name: RGB 102, 102, 102; HEX #666666



UNIQUE SITE SECTION/PAGES The following describes the guidelines and styles for differentiated sections of delta.com, such as when special procedures or build instructions are needed.


D E S T I N A T I O N C O N T E N T Travel Getaways URL: http://www.delta.com/planning_reservations/plan_flight/destinations/travel_getaways/index.jsp Redirect: http://www.delta.com/travelgetaways This destination product is a continuation of the Primary Home Page image/message area. The cities should be large or significant in nature. Customers should really aspire to want to fly there to see one or more of the great places the world has to offer. Business Objectives: • Primary: Convey the places Delta can take you in a stylish and appealing way

which "inspires" people to travel.

• Stimulate awareness and provide promotion to new, highly competitive or attractive markets (e.g. RIO, TXL, others to be named).

• Enhance channel shift opportunities in new & weak markets.

• Gain incremental revenue and/or off-set operational costs through partnerships (e.g., Tourism Boards).

• Increase ticket purchase – A fare and/or promotional offer may be added to further stimulate travel.

Image Selection Boundaries:

• Customer target – Should appeal to the Experience Seeker

• Locale - an "enticing" image. Should align with the destination copy.

• Rhythm – The postcards are displayed together in a rolling bar. So be conscious to add variety in the horizontal plane, background color, and right rail point of interest.

• Composition – Should have the inspirational feel of an actual postcard one would purchase on vacation and send to a friend. Be aware that when a destination is on sale a postage mark is placed in the upper right hand corner of the postcard image.

• Size limit – 275k, then optimized thru Flash.

See Image Component – Primary Message within Home Page Elements Section.

High-level page layout, body copy and button/link styles should follow rules maintained in this guide. For physical construction and specific content management guidelines, see Travel Getaways Dynamic Data Specifications document stored within delta.com/styleguide.

Landing Page City Page w/ Fare City Page w/ No fare

SAMPLE SCREENS TO BE UPDATED TO 10x7

FPO


D E S T I N A T I O N C O N T E N T Destination Landing Page This destination product provides details around a city, region, or theme.

Rainbow Getaways Destination Landing Page Ski Getaways Golf Getaways


FPO FPO FPO


S H O P P I N G Lowest Fare of the Day The “Lowest” badge is used to indicate the lowest fare of the day as found in flight search results. It is also used in some cases within the SkyMiles Award ticket search flow to indicate SkyChoice tickets, as they are the value ticket option. Lowest Fare Badge


S H O P P I N G Flexible Search Flexible Search gives users a matrix of Leave and Return days so they can make a more informed decision about how different days are priced.

Leave column header Font: Tahoma Bold, Title Case Size: 12px Background: RGB 56, 158, 209; HEX #389ED1 Leave column Font: Tahoma regular, Title Case Size: 11px Background: RGB 217, 230, 244; HEX #D9E6F4 Return row header Font: Tahoma Bold, Title Case Size: 12px Medium Blue: RGB 0, 102, 156; HEX #006699 Return row Font: Tahoma regular, Title Case Size: 11px Background: RGB 216, 216, 216; HEX #D8D8D8 Cell text Font: Tahoma regular, Title Case Size: 11px Background: RGB 255, 255, 255; HEX #FFFFFF Cell highlight Background: RGB 255, 204, 51; HEX #FFCC33



P A Y W I T H M I L E S Delta and American Express have partnered to create a program called “Pay with Miles”, giving users the opportunity to purchase tickets with a mix of money and miles.

Pay with Miles indicator The program is highlighted throughout the site with a green, bold text. The “new” icon only appears for the first 6 months of introduction.

Log-in Box The log-in box displays the Pay with Miles green text. On rollover, a layer with a brief description of the program appears.

Flight table indicator If a flight is eligible for the Pay with Miles program, a small indicator in the price cell will appear.

Mileage Balance and Selector This tool appears on the Trip Summary page and allows the user to select their miles and money combination. A mileage balance indicator reminds users of their available miles to use. A restrictions message reminds users of certain limitations of the program.

Passenger Information Reminder If a user logs in on the Passenger Information step, a reminder message appears at the top about using Pay with Miles.




CODE SPECS The following are guidelines for special characters: Hyphen is inserted using the keyboard character (-) En-dash (–) is coded as – Em-dash (—) is coded as — Ampersand (&) is coded as &amp, except in XML files which use the keyboard stroke. Registered Trademarks ® is: ® Trademarks, TM, is: ™



PAGE SAMPLES The following are fully designed page comps for the new delta.com. They represent a selection of unique areas discussed in this guide and act as a reference point for further site development.


P A G E S A M P L E S

Home Page

Planning & Reservations Landing Page

Traveling & Check-in Landing Page

SkyMiles Landing Page


P A G E S A M P L E S ( C O N T . )

Deals & Offers

Web Fare Offer Detail

Ways to Get Miles


FPO FPO FPO



Featured Limited-time Offers

Hotel Limited-time Offers

Baggage


FPO FPO FPO



Special Baggage

Fragile & Bulky Items

Christmas Trees


FPO FPO FPO



Baggage FAQ

Getaway Ideas- Ski

Your Profile


FPO FPO FPO


P A G E S A M P L E S

Flight Status- No Alerts

Flight Status

Flight Notifications


FPO FPO FPO



About Delta

Destination Landing Page

Business Programs & Services

Newsroom


FPO FPO

FPO


R E V I S I O N S L I S T

Topic Name Description of Change Date

Buttons Replaced with updated size specs. 10/05/05

Special Characters Added topic to Copy Rules and moved Ampersands into the category. 10/14/05

Special Characters Added topic to Copy Rules and moved Registered Trademarks into the category. 11/11/05

Coding Specs Added new section to include items such as Special Character code. 11/14/05

Buttons Added Placement guidelines. 11/17/05

Log In Application Added page on Functional User States 11/17/05

Alert & Error Messaging Added new section to include specifications from old site. 03/13/06

Alt/Title Text/Tool Tips (w/in Copy Rules) Added Tool Tip guidelines 05/12/06

Lists Added list order. 5/12/06

Copy Rules Added Links. Update Word Choice with business terms. 6/9/06

Color Palette Updated with Gold 6/9/06

Layout Grid – Home Page Updated with April 06 Home Page 6/9/06

Home Page Messaging Update with April 06 Messaging Specs 6/9/06

Links Merged all link specs into one section. Added Links equivalents to Buttons. 6/9/06

Call-outs – Marketing Placements Silhouettes – expanded to 2nd level and below. 6/9/06

Icons & Indicators Added “move up/down” indicators in Vouchers app. 6/9/06

Lower Page-level Imagery Added large accent header option. 6/9/06

Font Replaced all references of Tahoma MS to Tahoma. 6/12/06

Home Page Imagery Updated copy and image illustrations to reflect April ’06 Home Page change. 6/12/06

Layout Grid Added right margin notes to 2nd and 3rd level pages. 6/22/06


Word Choice: Delta vs. Delta Air Lines Add usage guidelines under Copy Rules. 6/22/06

Notes/Footnotes Added notes, combined with Footnotes within Copy Rules. 6/29/06

Imagery Updated specs with current styles; moved Home Page Imagery to Home Page elements.

6/29/06

Call-outs Added Dark Solid Call-outs. 6/29/06

Layout Grid – Primary Navigation Landing Page (delta.com 2nd Level)

Replaced image with current screen shot/design. 12/07/06

Throughout document Multiple typos, grammatical issues, etc. 12/07/06

Log In Application Updated specs with necessary heights, added updated graphic. 12/07/06

Call-out Style – Light Blue & White Updated specs for advisory text. 12/07/06

Application Boxes Removed awkward text explaining light stroke around outer box. 12/07/06

Buttons – Naming Convention Added copy explaining naming convention for buttons. 12/07/06

Tool tips Added direction to Copy Rules. 12/07/06

Masthead – Branding Updated masthead graphics. 12/07/06

Navigation – Secondary Left-rail Updated graphics with alphabetical listings. 12/07/06

Call-out Style – Blue & White Updated graphic with limited-time offer corrections. 12/07/06

Tool Tips Deleted page since there was no content here. 12/07/06

Help Icons Clarified palette usage guidelines. 12/07/06

Footer Replaced graphic with current footer; updated specs. 12/07/06

Advisory Bar Updated with IROP guidelines location (on common drive). 12/07/06

Destination Content: Travel Getaways Added image selection size limit guidelines. 12/07/06

Shopping: Lowest Fare of the Day Added explanatory copy. 12/07/06


Copy Rules: e>ticket Updated copy to reflect discontinued use of “e>ticket”. 2/01/07

Copy Rules: URLs Raised limit on title word length from 3 to 4 words; added SEO guidelines. 2/01/07

Delta Logo Types Added official SkyTeam logo guidelines. 2/01/07

Copy Rules: Word Choice Added explanation of flight vs. segment vs. leg. 2/01/07

Masthead – Branding Added location of masthead graphic file. 2/01/07

Buttons: Button Placement Added location of button files. 2/01/07

Copy Rules: Dates Changed section to “Dates & Times”; added specs for time formatting. 2/02/07

Branding Elements: Color Palette Updated with new medium blue color and adjusted layout 2/05/07

Site Elements: Primary nav drop down Updated graphic to reflect current list order 2/05/07

Tables & Charts: Applications Added specs for spacing, font and color 2/05/07

Icons & Indicators: Content Dividers Added gray line spec and usage 2/05/07

Page Samples Added “Ski” page 2/05/07

Index Converted to dynamic updating 2/8/07

Table of contents Converted to dynamic updating 2/8/07

Copy Rules: Word Choice Revised usage of “e>ticket” to include “eTicket” 3/28/07

OVERALL UPDATE to version 2.0 Revised all visuals to reflect new brand. Revised outdated copy, style descriptions, and colors to reflect new brand. Added new pages that were not included. Updated Branding Elements section to reflect new brand. Expanded Imagery section to include specific style and cropping requirements.

7/1/07

General clean-up Made various edits for readability and to remove typos and other errors. 10/10/07

Capitalization: Other Rules Added rule around capitalization of page titles. Added links between Capitalization and Links sections.

10/10/07

Misc updates Added Delta Light Green (from Pay with Miles) to Color Palette; added specs for new HTML button style

11/27/07


Misc updates Updated browser compatibility list; added new icons for up/down arrows and alert triangle; general presentation clean-up of document.

12/05/07

Misc. updates Added downloadable files icons/types. Added Pay with Miles section. Updated spacing of various sections. Updated Home page specs and visuals for placement measurements.

12/20/07

Misc. updates Various clean-up. Addition of rule around “clear”/”reset” button on forms. Published new version (2.1).

03/12/08

Icons & Indicators: Step Indicator/Application Progress Bar

Added clarification around use of gray horizontal rule. 03/20/08

Overall graphics, general clean up Updated most graphics to reflect square cornered design. Added expanded detail for right-rail call out styles. Cleaned up document overall for consistency in some areas.

08/18/08

Modal overlays, interstitials, tool tips Updated and added information regarding modal overlays, interstitial alternatives, and tool tips

08/21/08

1024x768 updates Updated the relevant and affected sections by the change in resolution. Areas included: home page specs, grid details, call-outs, advisory bar, masthead, and others. Also updated Pay with Miles and Lowest Fare of the Day presentations. Moved tabs and buttons to navigation area, changed “Body Copy” heading to “Type Styles”.

03/19/09-03/25/09

Alert and p aragraph width Added the yellow priority alert (IROP) to alerts section. Added recommended paragraph width to type styles (470px/12 columns)

04/09/09

Updated yellow alert, paragraph width and header image sizes

Corrected yellow alert, paragraph max width to 750px, and header image width to 750px

04/16/09

Updated several screen shots to 10x7 examples, adde new grid layout for no left navigation use.

Updated several screen shot examples with 10x7 resolution. Added a “no left navigation” grid style (used on Ski, Golf, etc.). Added ‘FPO’ markers over screens that need updating to new resolution.

04/22/09


I N D E X

1 1st Level..............................................................................43

2 2nd Level.......................................................41, 71, 72, 122

3 3rd Level .....................................................................46, 73

A Acronyms ..........................................................................24 Action Alerts ....................................................................90 Active Step........................................................................ 93 Active tab ...................................................................54, 55 Addresses..........................................................................24 Advisory Bar .......................................................... 105, 122 Advisory title .................................................................. 105 Aircraft Names ................................................................24 Airports .............................................................................. 25 Alert & Error Messaging25, 81, 82, 83, 84, 85, 86,

89, 121 Alert Messages................................................................82 Alerts/Error Messages.................................................. 25 Alt/Title Text/Tool Tips ....................................... 25, 121 Ampersands .............................................................. 31, 121 Anonymous User ............................................................42 Application Box.................................................................41 Application Boxes .....................................41, 59, 78, 122 Application level tabs.....................................................54 Application Progress Bar...................................... 93, 124 Applications............................................2, 13, 76, 77, 123 Applications (current look)..........................................76 Arrow.........................................................................46, 103 Arrows..................................................................39, 43, 89

B Background Color............................................. 38, 48, 62 Blue & White .................................................................... 63 Body Copy .....................................28, 43, 56, 58, 59, 89

Bold13, 25, 33, 43, 46, 47, 48, 54, 55, 57, 59, 60, 61, 62, 64, 67, 68, 69, 70, 75, 76, 77, 87, 104, 105, 110

Branding .............................................38, 57, 90, 122, 123 Branding Elements ..........................................57, 90, 123 Bulleted Lists............................................................. 28, 29 Business Objectives ..............................................101, 107 Button Placement ...................................................49, 123 Button Storage & Creation Request .......................... 49 Buttons13, 26, 49, 50, 53, 59, 73, 79, 102, 103, 121,

122, 123

C Call-outs17, 63, 64, 65, 66, 70, 71, 72, 73, 94, 121,

122 Capitalization......................................26, 28, 62, 79, 123 Case Rules ..................................................................26, 79 Charts ...................................................74, 75, 76, 77, 123 Class of Service ................................................................34 Colon Use ..........................................................................28 Color Palette ............................................. 14, 90, 121, 123 Column headers.................................................75, 76, 77 Column Sorting ................................................................77 Compatibility ...................................................................... 6 Confirmation Messages ................................................83 Consideration Alerts ..................................................... 90 Contained style .................................................................71 Content Dividers..................................................... 93, 123 Copy Guidelines...............................................................24 Copy Rules13, 15, 24, 26, 27, 34, 49, 53, 57, 58, 59,

60, 61, 62, 79, 80, 121, 122, 123 Copy Tone .........................................................................23 Currency.............................................................................27

D Dates & Times......................................................... 28, 123 Daughter Windows.........................................................87 Delta Logo Types...............................................15, 16, 123 Dependency alert ............................................................82 Design & Construction Platform ................................... 6 Design Concept.................................................................. 5 Design objectives .............................................................. 3

Design Overview............3, 12, 22, 37, 98, 106, 112, 113 Destination Content....................................107, 108, 122 Digitas ...................................................................................5 DIN Mittelschrift ..........................13, 39, 71, 95, 96, 102 Disabled tab ..................................................................... 55 Divider...................................45, 46, 48, 75, 76, 77, 104 Download Times ................................................................6 Downloadable files ......................................................... 92 Drop down menu ............................................................40 Drop-down Menus .........................................................40

E Em Dash ......................................................................30, 31 En Dash........................................................................30, 31 English Standards ........................................................... 24 Error Messages..................................................84, 85, 86 Excel.................................................................................... 92 Exclamation Point Use................................................... 30 Expandable ........................................................................41

F First Data Row ................................................... 75, 76, 77 Flash..............................................................................6, 107 Flexible Search................................................................ 110 Flow Modals ..................................................................... 88 Folder URLs........................................................................33 Footer .........................................................................97, 122 Footnotes .......................................................... 29, 30, 122 Form Modals .................................................................... 88 Forms.................................................................................. 79 Full Image Call-out Style................................................73

G Gray ......................... 45, 55, 63, 67, 74, 75, 93, 97, 104 Gray & Blue....................................................................... 74 Gray (no columns) ......................................................... 74

H Headers ............................................................................. 26 Heading .......................... 43, 46, 48, 57, 67, 68, 69, 70 Help Icons .........................................................................90


Home Page6, 8, 17, 38, 39, 41, 60, 61, 89, 99, 101, 102, 107, 114, 121, 122

Home Page Messaging Elements ......................... 8, 101 Home Page Messaging Grid ......................................100 Home Page Primary6, 13, 38, 39, 40, 43, 45, 58, 93,

99, 100, 101, 102, 107, 122, 123 Home Page Secondary44, 45, 46, 47, 58, 99, 100,

103, 122 Home Page Tertiary ............................................. 99, 100 Hyperlink ........................................................................... 25 Hyphen...............................................................................30 Hyphenated Words ........................................................ 27

I Icon

Alert (triangle) ...........................................................90 Calendar .......................................................................90 Check mark .................................................................90 City codes ....................................................................90 Help ....................................................................... 89, 90 I 90 New ................................................................................91 Reverse arrow.............................................................90 X 90

Icons43, 60, 62, 67, 78, 79, 81, 89, 90, 91, 92, 93, 121, 122, 123, 124

Identity ...............................................................................38 iFrames................................................................................. 6 Image Alt/Title Tags...................................................... 25 Image Selection Boundaries............................... 101, 107 Imagery ....................17, 18, 19, 20, 21, 94, 102, 121, 122 Index Link ...........................................................................31 Index Link Descriptions ..................................................31 Interstitials .................................................................95, 96 INTRODUCTION................................................................2 Italics...................................................................... 13, 28, 33

J JavaScript ............................................................................ 6

L Landing Page ............................... 107, 108, 114, 120, 122 Large Accents ..................................................................94

Large Arrow ..................................................................... 60 Layout Grid................................................. 8, 101, 121, 122 Light Blue ............................................63, 68, 69, 70, 122 Light Blue & White ..........................................63, 68, 122 Link Number & Order .................................................... 44 Links26, 27, 28, 30, 39, 40, 43, 46, 47, 48, 59, 60,

61, 62, 64, 69, 75, 76, 77, 78, 89, 103, 104, 121 Links as Button Equivalents .................................. 59, 60 Lists ...............................................................27, 28, 29, 121 Log In Application .................................................... 41, 42 Logged In User .................................................................42 Logo...............................................................15, 65, 87, 123 Lower Page-level Imagery............................................ 94 Lowest Fare of the Day ....................................... 109, 122

M Marketing Redirects .......................................................33 Marketing/Promotional....................................71, 72, 73 Master artwork .................................................................15 Masthead...........................................38, 39, 40, 122, 123 Modal Overlays............................................................... 88 Move Up and Down Icons ............................................ 91

N Naming Convention...............................................49, 122 Navigation13, 26, 39, 40, 43, 44, 45, 46, 47, 48, 64,

89, 122 Notes..........................................................................29, 122

P Page content level tabs..................................................55 Page headings....................................................................13 Page Length.......................................................................24 Page Samples..........114, 115, 116, 117, 118, 119, 120, 123 Page Structure .................................................................... 5 Page Weight ....................................................................... 6 Paragraph Length ............................................................24 Partner logo.......................................................................65 PDF ......................................................................................92 Person Use................................................................. 30, 34 Personas...............................................................................4 Phone Numbers ...............................................................30 Pop-ups ..............................................................................87

Preferences..........................................................................6 Primary Interface Technologies.....................................6 Primary Navigation............................13, 39, 40, 43, 122 Product Guiding Principles..............................................5 Punctuation ...............................................................29, 30

R Registered Trademarks ...........................................31, 121 Related Information ....................................................... 70 Required information alert ........................................... 82 resolution .............................................................. 6, 24, 82 Return to top .............................................. 59, 62, 64, 89 Right Rail ............................................................................73 Row Colors.......................................................... 75, 76, 77 RTR...................................................................................6, 13

S Screen Resolution ..............................................................6 Second Data Row.............................................. 75, 76, 77 Secondary Left-rail .......................... 44, 45, 46, 47, 122 Selected column header ............................................... 77 Sentence Case .......................................................... 26, 65 Serial Commas.................................................................. 31 Shopping.................................... 25, 77, 95, 109, 110, 122 Signature ............................................................................ 15 Silhouetted style.............................................................. 72 Site Elements....................................... 17, 26, 28, 38, 123 SkyMiles ..........24, 30, 32, 34, 36, 39, 71, 82, 109, 114 SkyTeam..............................................................15, 38, 123 Small Accents ...........................................................85, 94 Small Arrow.................................................60, 61, 64, 67 Solid Dark................................................................... 63, 65 Solid White ................................................................65, 66 Special Characters......................................31, 32, 57, 121 Static Content .................................................... 63, 74, 75 Static tab .................................................................... 54, 55 Step Indicator.......................................................... 93, 124 Stripes only ....................................................................... 74 Stroke ................................................................................. 78 Subheader ......................................................................... 87 Superscripting...................................................................32 Supporting Interface Technologies...............................6 System Font Styles ........................................... 56, 57, 58


T Tables ............................................. 13, 74, 75, 76, 77, 123 Tabs .............................................................................54, 55 Tahoma13, 39, 40, 43, 46, 47, 48, 54, 55, 57, 62,

64, 65, 67, 68, 69, 70, 75, 76, 77, 78, 87, 97, 104, 121

Time & Time Zones ........................................................ 32 Timestamp ........................................................................ 32 Title Case26, 28, 39, 40, 43, 46, 47, 48, 54, 55, 57,

59, 64, 67, 68, 69, 70, 75, 76, 77, 87, 97, 105, 110 Tool tips ....................................................................80, 122

Trademark Designators ..................................................15 Traffic pages ......................................................................31 Travel Getaways................................................... 107, 122 Typography .................................................................13, 57

U Underlining ........................................................................33 User States ......................................................... 41, 42, 121

V Verdana ..........................13, 57, 58, 59, 60, 68, 69, 105 Vertical divider ......................................................... 39, 97

W White Call-out Style .......................................................73 WORD .................. 24, 26, 28, 30, 33, 92, 121, 122, 123 Word Choice.............................24, 30, 33, 121, 122, 123

Delta Airlines Style Guide 2009

Documents

Transcript of Delta Airlines Style Guide 2009