June 2013 Digital Style Guide

INTRODUCTION

What is the Solesta Digital Style Guide and why do we need it?
Good question.
Salix has established a distinct set of standards to ensure the stories of its various brands are communicated in a highly effective and engaging wayboth verbally and visually. Adherence to this digital guide will ensure that the integrity of the Solesta brand is maintained throughout all digital communications, creating a standard user experience across all Solesta digital properties. The purpose of this digital style guide is to serve as a guidebook for this process. This guide is for use for the following: Internal development and design teams should refer to it as the single source of digital brand guidelines Solesta brand team members should use it as a tool for understanding various digital design elements and for ensuring the consistency of digital projects All agencies of record (AORs) should access it in order to fully grasp the specific parameters and direction of digital deliverables The Guide is used in conjunction with the Solesta Editorial Style Guide and all existing brand guidelines to create and maintain brand consistency among all Solesta digital communications. The Solesta Digital Style Guide is written to provide clear, straightforward, and easy-to-follow direction so that all digital guidelines are simple to implement. It should be consulted throughout the design, development, and review process for all Solesta digital projects and whenever new content is introduced.

TABLE OF CONTENTS
1.0 A Strong Digital Foundation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3 1.1 Solesta and the Salix Vision . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4 Salix digital standards. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4 Tone. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4 2.0 Basic Design Elements. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5 Color palette. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6 Typography. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6-7 Icons . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7 Linking conventions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7 3.0 The Digital Blueprint . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8 3.1 Site Structure. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9 3.2 Basic Layout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9 Home pagepatient. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9 Interior pagepatient. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9 Home pageHCP. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10 Interior pageHCP. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10 User interface (UI) elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11 Header. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11 Navigation. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11 Creative marquee. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12 Calls to action. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13 Forms. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14 Video . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15 Modal windows. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15 Indication and Important Safety Information . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16 Footer and sign-off information. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16 404 Error . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17 Emails. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18 Banner ads. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19 3.3 Best Practices for the Web. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20 3.4 Best Practices for Other Digital Deliverables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22 4.0 Contact Us . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24 2

1.0 A Strong Digital Foundation

1.0 A Strong Digital Foundation

1.1 Solesta and the Salix Vision

The Salix digital team has established key priorities for the companys current digital presenceas well as its digital future. For all of its brands (including Solesta), these priorities include the following: Salix digital standards In order to maintain the brand equity of each Salix brand and to ensure all regulatory requirements are strictly adhered to, all Salix brand standards are executed digitally. This includes direction regarding where the indication and Important Safety Information (ISI) are located, how sign-off is to be managed, how to address navigation, and how to apply logo lockups
Note: Salix standards are denoted with a green marker.

Tone Just as a consistent tone is used throughout all printed brand publications, consistency of brand voice and tone is applied within all digital properties

The Solesta branded Web properties have been adapted to include the Salix standards. Key priorities for the Solesta digital presence include bringing the technology of the current Web properties up to the current technological level.

2.0 Basic Design Elements

2.0 Basic Design Elements

Basic Design Elements

To ensure brand consistency across all patient and healthcare professional (HCP) digital properties, the following visual guidelines for color, typography, linking, and iconography conventions are provided as reference:

Color palette Primary brand colors

RED RGB: 179, 9, 62 Web-safe: #B3093E LIGHT GREEN RGB: 149, 200, 87 Web-safe: #95C857

Secondary color
COOL GREY RGB: 63, 69, 79 Web-safe: #3F454F GREY RGB: 102, 102, 102 Web-safe: #666666 DARK GREEN RGB: 67, 96, 38 Web-safe: #436026 BRIGHT GREEN RGB: 87, 184, 85 Web-safe: #57B855

Typography
Brand fonts with Web-safe versions are more likely to reflect the intended vision of the brand. Typically, brand fonts are not well represented by Web-safe versions and either have to be replaced by a similar font or converted to an image. The Solesta brand fonts do not have Web-safe options. The replacement fonts for Solesta are Arial, Arial Italic, and Arial Bold. Printed graphics, such as charts, are typically built at a higher resolution (300dpi or higher), and most monitors can display only 72dpi. Adjustments are made to accommodate the difference in resolution. Font weight and size, line weights, and other elements should display with enough contrast to be differentiated from the background. Anti-aliased content at small sizes, light fonts, or condensed fonts at medium to small sizes do not display well on the Web. Consider using regular or medium, noncondensed fonts.

2.0 Basic Design Elements

Patient and HCP typography

Heading h1Arial, normal, 24px, normal. The color value is #B3093E.

Heading h2Arial, normal, 16px, normal. The color value is #B3093E.
Body copy p, ul, olArial, normal, 14px. Arial is the font family at 14px, to be used for all copy. This is the base font size. The color value is #666666. The line height is 20px.
Linking conventions

This is an example of a hyperlink within the copy. This is a hyperlink on hover. The font weight is bold.
Patient linking conventions HCP linking conventions

This is an end-of-page link This is an end-of-page link on hover Icons

Favicon Content Social media

This is an end-of-page link This is an end-of-page link on hover

Patient call to action

HCP call to action

3.0 The Digital Blueprint

3.0 The Digital Blueprint

3.1 Site Structure

Before beginning any digital project for Solesta, it is necessary to establish a blueprint to guide the way. The Solesta branded websites have been built with older coding conventions. Key priorities for the Solesta digital presence include bringing the technology of these Home page websites up to the current technological level.

Interior page
1000px

3.2 Basic layout Home pagepatient

The patient home page features graphics and content that resonate with the intended audience. Additionally, it offers a user experience that facilitates ease of access.
A

B C D

1000px

291px

658px B

Interior pagepatient
The patient interior page uses white space and other graphic devices, such as bullets, to make the content easy to read and accessible to patients.
E F

Specifications
A B C D E F G H I Logo Global links Main navigation Creative marquee Calls to action Main content Indication and Important Safety Information Footer Sign-off information
Note: Salix standards are denoted with a green marker. H I G H I

3.0 The Digital Blueprint

Home pageHCP
The HCP home page features the dramatic visual imagery of the brand campaign, which depicts individuals with fecal incontinence interacting in normal lifestyle situations. As with the patient home page, it offers a user experience that facilitates ease of access.

Home page
1000px

Interior page
B C D
1000px

A 291px

658px B

Interior pageHCP
The HCP interior page builds on the brand colors to create a sharp, clean presentation of the brands most relevant and groundbreaking scientific information.

E G

E H F

Specifications
A B C D E F G H I J Logo Global links Main navigation Creative marquee Calls to action Main content End of page links Indication and Important Safety Information Footer Sign-off information
Note: Salix standards are denoted with a green marker.

I J

H I

10

3.0 The Digital Blueprint

User Interface (UI) elements

User interface elements are stylized with brand colors and other brand hallmarks which are consistent throughout the site.
1000px

Header
The header appears on all pages and is where the Solesta logo, top links, and main navigation are located. The logo appears in the header of every page at the top left corner to reinforce the brand and is clickable to return the user to the home page. Global links are positioned at the top and are right justified for ease of readability.
163px

42px 55px

274px 1000px

Navigation
Navigation consists of primary and secondary navigation elements. Primary navigation links appear in the header 163px and footer. Secondary navigation elements appear when a user hovers over a primary navigation link, and in the left column of interior pages. Main navigation employs advance cascading style sheet (CSS) techniques and does not require images for size, shape, or positioning. Techniques include linear gradient and box shadow. On interior pages the subnavigation is displayed on the left side of the page and is persistent.
274px

42px 55px

11

3.0 The Digital Blueprint

Creative marquee
The header, logo, and navigation remain consistent throughout, and the creative marquee area of the page (shown in context on page 10) is where the Solesta brand shows its individuality. This area appears on the home page only and is used to highlight specific Solesta marketing messages and product attributes with links to specific areas within the site.

Patient
Slide #1

Slide #2

Slide #3

HCP
Slide #1

Slide #2

Slide #3

12

3.0 The Digital Blueprint

Calls to action
The calls to action (CTAs) for Solesta appear under the creative marquee on the home page and in the left column on interior pages. CTAs featured on the home pages of patient and HCP websites include buttons with hover states that are image based. The CTAs on interior pages of both websites do not have hover states. Salix standards require that all CTAs appear above the fold.

Patient

157px

393px 15px

218px 15px

231px

HCP

157px

211px

251px

393px

13

3.0 The Digital Blueprint

Forms
The Salix Data Capture Form Guidelines document should be used as a reference for form construction. Along with standard form elements, forms can contain specific elements that dynamically change a users options All fields denoted with an asterisk (*) are required fields. Submit buttons have hover states that are image based
185px

580px 260px

32px

Forms can contain additional fields outside of the standards when required for a program (ie, ME number, fax number, etc)

Normal state

Validated state

Expanded state

Error state

Input styles The format of form elements have limits to CSS styling and are largely controlled by the browser that they are rendered in.

Error styles Errors are displayed in red to alert users that they have an incorrect input.

Dynamic input As part of the Salix digital standards, drop-down list format has limited CSS styling and is largely controlled by the browser that it is rendered in.
14

3.0 The Digital Blueprint

Video
The video player appears in the main content section. The recommended video player for Solesta digital properties is Flowplayer. All videos include the indication and ISI. The transcript is accessible beneath the picture of the first slide. The button to access the transcript is located below the video and remains accessible throughout the video. All videos require scrolling ISI at the end and a unique part number.

291px

734px

Modal windows
Modal windows are used for images, videos, and other content elementsenhancing usability by focusing the user on specific content without having to continuously load new pages to view key information. Modals are created with advanced CSS techniques and do not require images for size, shape, or positioning. Techniques include border radius, linear gradient, and box shadow.

modal window 432px

equal

equal

equal

equal

15

3.0 The Digital Blueprint

Indication and Important Safety Information (ISI)

The indication and Important Safety Information are required on all pages. They are provided by Salix and cannot be changed in any way. They immediately follow the content and cannot be separated visually from the content. Additionally, they must be in the same size type font as the body copy (not smaller). Text links follow main linking convention.

Footer and sign-off information

The footer appears on all pages and is where top-tier navigation, site links, and Salix sign-off information are located. This is a standard Salix-approved sign-off, which appears on all Salix brand properties and includes the following: Salix logo (linked to www.salix.com) Facebook and Twitter icons (linked to Salix social media) Contact information Copyright Links to Terms of Use and Privacy Policy that follow main linking convention Part number On hover, navigation link displays with an underline.
41px 41px

Patient

HCP

16

3.0 The Digital Blueprint

404 Error
A page not found error message appears when an incorrect URL is entered in the address bar. Site maps for both patient and HCP sites are included. Links follow the main linking convention. Template and styling of the error page follow the Solesta patientfacing design.

17

3.0 The Digital Blueprint

Emails
All Solesta emails are structured within a templated layout to promote consistency of messaging and familiarity, a necessary component for good user experience. Templates are built with HTML tables (the current standard) and have limited CSS styling options to be readable across all email clients. Designed templates are accompanied by text-only versions. Subject lines should be limited to 50 characters including spaces, if possible, for best practices. The preheader is the text in an email that appears above the HTMLthe first line of preheader copy should drive or link recipients to the main message of the email. This text is displayed even if someone has images disabled upon receipt, so it is a prime location for key messaging. Note: Salix has approved the second and third lines of text, and those can not be changed. The first line should be unique for each email The creative header area can be customized to best fit the brand and includes the brand logo Headline text is HTML and not an image The body copy content is prioritized so the most important messaging is at the top At least 1 CTA is required for every email. Additional CTAs can be added if there are more actions for the user to take and space allows The indication follows the body copy and precedes the ISI The ISI is included in all branded communications The footer is a standard Salix-approved footer that includes Salix logo (linked to www.salix.com) Facebook and Twitter icons (linked to Salix social media) Copyright, contact information, and physical address Part number Footer links end all emails. Internal emails contain View email in browser Forward to a friend/colleaguedepending on the targeted users, this changes. If for HCPs, colleague is used, and for patients, friend is used Update your profile Privacy Policy Unsubscribe For external emails, the footer varies according to vendor specifications. At a minimum, an unsubscribe link is present.
18 600px max

3.0 The Digital Blueprint

Banners
Ad structure and size formatsfollow these guidelines for structuring all Solesta rich media banner ads. Ad structure options include Unbranded flashads not requiring ISI do not have to be rich media Branded nonexpandable rich mediaads requiring ISI in a scrollable format Branded expandable rich mediaads including user interactive elements, requiring scrollable ISI The 3 most prevalent size formats are Leaderboard, 728x90 (expanding to 315x90) Big box (medium rectangle), 300x250 (expanding to 500x250)
600px 160px 300px

Large skyscraper, 160x600 (expanding to 300x600) Basic layoutalthough opportunity-specific elements are added to customize Solesta rich media banner ads, every branded banner ad includes these elements Logo (with or without tag) Key messaging CTAs Indication ISI PI link Border

19

3.0 The Digital Blueprint

3.3 Best Practices for the Web Best practices for websites
ConsistencyTo create a cohesive experience with the brand, the tone of voice and visual language are used consistently across channels. Design follows a brands desired associations and principles Error preventionVisual cues and a clear layout help prevent errors. When a user mistakenly clicks somewhere incorrectly or forgets something, it should be easy to recognize, diagnose, and recover from an error FeedbackA timely manner of response with a users interaction vastly enhances a sites usability. Users need to be assured that actions they have taken are understandable and can be undone

Best practices for navigation

Navigation is clear and communicates to users in a direct, efficient, and adequate way Labels and iconography are consistent. It is more efficient for users to recognize information rather than needing to interpret information that is unfamiliar to them Section and page names are kept simple and short, 1 or 2 words Every page has a way (breadcrumb trails, dynamic menus) for a visitor to get back to the previous page, section page, and home page The logo is clickable and takes a user back to the home page. This is a common convention, and many visitors will expect it to be the case Site links are added to the footer of the website for additional navigational links. This helps to keep the main navigation bar uncluttered

20

3.0 The Digital Blueprint

Best practices for CTAs

Call-to-action buttons are placed strategically on the Web page, as placement is critical to drawing the eyes of visitors. Placement in prominent locations, such as the top section of a Web page, can lead to higher landing page conversions because users will likely notice the CTA button and take action White space is used around a CTA button as an effective way of making it stand out in areas where there are many elements Bold, confident, and commanding words are utilized in the CTA to convince users that they should not wait any longer to take action and that waiting to take action would result in a penalty or a missed opportunity

Best practices for forms

For more complex forms, the form is broken up in to bite-size chunks with sections clearly labeled and related information captured together Form labels are short, clear, and descriptive. If extra information, clarification, or context is required, help text is used to do this rather than long rambling labels Required fields are distinguished with an asterisk (*) Error messages are clear and actionable. It is important that users not only know why an error has been reported, but also how they can fix it

21

3.0 The Digital Blueprint

3.4 Best Practices for Other Digital Deliverables Best practices for email
Keep key messaging and CTAs above the fold. It is a best practice to have the main CTA visible in the first screen that the recipient sees (above the scroll, or fold) Provide inline link styling to override email client styling Do not set heights and widths to images. Do not use background images or borders See Salix email standards for more information

Best practices for Flashrich media banner ads

Include the PI link in both the initial, nonexpanded ad size and at the end of the ISI container Keep copy clear and concise and animation under 15 secondsless is more Entire ad unit should be clickable (ISI excluded). Do not limit interactivity to button states

22

4.0 CONTACT US

4.0 Contact Us

Contact Us
The Solesta Brand Digital Style Guide has been developed in a way to make digital guidelines easy to follow and implement. However, if you have questions regarding information within this guide or about an issue that has not been addressed, please contact us.

Salix Pharmaceuticals, Inc 8510 Colonnade Center Drive Raleigh, NC 27615 USA T: 919.862.1000, F: 919.862.1095 www.salix.com

MedThink Communications, Inc 3301 Benson Drive, Fourth Floor Raleigh, NC 27545 T: 919.786.4918 F: 919.786.4926 www.medthink.com

24