Visual Style Guide

GUIDE

This guide is for use on ocial Scribd.com sites. Do not use this for businesses, local groups and sites, which should have their own brand and identity. Questions & comments: design@scribd.c0m

The purpose of this document is to provide Scribd or associates with the design tools necessary to maintain the Scribd brand and any content online or offline associated with Scribd. As new content types are added or content is updated, thoughtful application of the details described here will help maintain a consistent look and feel for Scribd.

BRAND

Brand encompasses the values, culture, mission, personality, and image of Scribd; as well as the associations of our users, clients, employees, and their experience when interacting with Scribd products or services.

Brand expression (such as design elements, ui, identity, tone), and brand experience (the customers experiences when using our product) imprint the brand in the users mind. People walk away with an emotional sense of what Scribd is. As the content evolves, so does the Scribd brand. The Scribd mission is to create an experience that is a strong reflection of the brand (such as the culture, mission, and personality), and to effectively win over more potential users by ensuring that every point of contact between the user/visitor and Scribd reinforces Scribds brand.

DESIGN PRINCIPLES

Scribd design principles

Design should be unobtrusive. Connect our users with compelling content fast and easy by creating an experience that does not distract from the content. Try to avoid the overuse of graphics or visuals that make it difficult for a user to parse the information we want them to digest. User focus Every decision in the design process should be done with the users wants and what we believe a user needs in mind. We can do this by engaging new users and creating a compelling experience for existing users. It is the voice of the user and evolution of a design through testing that makes our design better and beneficial for our users. Be fast Time is valued to our users and the folks developing the site. Lets ensure our design is mindful of the content and platforms. We should make sacrifices such as light weight graphics with less visual noise making it harder for users to access content. Prioritize the information Prioritize and bring the most useful information to the visible space while narrowing down to the essentials that make the experience and product flow all the more seamless. Prioritize the component or feature that is best suited for the user or give them the ability to customize. The more its used, the better it is. The product itself cannot exist or thrive without an expanding active user base. Lets ensure our users are given the tools and means necessary to create and manage content as easily as possible.

Lets be vocal and passionate about the function of our design and ensure we are understanding the pulse of our users. Grammar schooled We should try to enhance the experience while sticking to what makes the written word powerful. Structure. Lets try to incorporate traditional grammatical values into our design such as punctuation, justification etc. This is especially key in our marketing collateral but can also be translated as a design element in our site design as well. Be human Design is human and so is Scribd. Be human in tone and conversational messaging. Be human in design and technology by responding to the direct needs of our users feedback and queries. Unexpected elements and humor such as easter eggs or conversational messaging will add to the human element of Scribd. Content is precious to our users Whether it be a college thesis, 16th century scroll or a 5th grade poetry project. Our content is precious to our users so lets take care of it by providing a framework that allows them to feel safe, secure and most of all important. One example is designing and using assets, fonts and graphics that enhance our users content and not drown it out. Evolve With the ever changing trends of web and mobile, good design doesnt have to last forever but it should be built to evolve with the addition of new content types and messaging.

We should be able to make design and visual sacrifices for a better overall site experience.

LOGO

The Scribd wordmark is a key building block of the visual identity, the primary visual element that identies Scribd.
The logo was derived from our orginal wordmark. The new variant is a solid color black or white with no additional secondary color elements. This allows the logo to be crisp and clear on various backgrounds as well as allowing the content to have visual prominence. The Scribd wordmark should never be embellished, outlined, or altered in any way. Always use an approved electronic version. It is important to keep corporate marks clear of any other graphic elements. To regulate this, an exclusion zone has been established around the wordmark. This exclusion zone indicates the closest any other graphic element or message can be positioned in relation to the mark. Usage examples are on the following page.

FAVICON

The favicon! Yay!

The favicon is designed to be simple and fun. It is a stylized version of the S in the Scribd logo that is meant to be somewhat abstract. The contrasting colors are intentional for it to stay visible at smaller sizes as well as several background colors.

COLORS

Colors are used to code sections, visual hierarcy, dene content and direct users to important content as well as visually convey the brand identity.
1 5

The colors were chosen as both evolutions from the previous Scribd pallette as well as through market analysis of our users and the sites they frequent. The colors are meant to feel modern, refined and unobtrusive while users are browsing or creating content on Scribd.

6 2

9 5

12 1

BRAND
4 2 3 7

UPLOAD
3 10 8

SHARE
4 13 11

DOWNLOAD
3 14

15 5 19

18

23 5 5

26 24

1. #022F40 2. #146C88 3. #8EB8C6 4. #67828C 5. #355966 6. #259FDB 7. #4CB4E8 8. #99D3F0 9. #7FB340 10. #8DC63F 11. #B2D18C 12. #F36F21 13. #F68620 14. #F8A97A

15. #CA7A0A 16. #DA9509 17. #E9BF6B 18. #350E00 19. #744B29 20. #8C6239 21. #EBEAE5 22. #C4BFB2 23. #D54147 24. #F14950 25. #F79296 26. #573855 27. #744A71 28. #AC92AA

COMMERCE
3 16 17 21 20

UI
3 24 22

ALERT
3 25 27

COMMUNICATE
25 28 8

Each color wheel represents a specific brand element that should always be associated with their associated colors. The primary colors are given larger portions of the wheel while complimentary colors are given the smaller portions.

BUTTONS

Button styling consists of a soft gradient to maintain the button feel but remain consistent with the simplied site UI.
Brand Publish Social Download

The Scribd button family are our main calls to action. Publish will appear on most Scribd pages. The download button will appear on most read pages. The colors are associated with specific brand elements and site actions so our users can begin to associate a certain color on our site with a specific action. For exampl, the green social buttons are for use to indicate sharing or following of a specific user, group, document or collection. Some common rules are to not go button crazy. Use a text link when the Upload and Download buttons appear on the same page but one requires prominence over the other. Use secondary palette colors to indicate inactive buttons. All buttons will share the same common size of 94x30 pixels and corner radius of 3px with the exception of places where more descriptive button wording is necessary which would extend the button length.

Learn more
#146C88 #02FF40 btn_buttonedge-db_28x28.png

Publish
#4CB4E8 #259FDB btn_buttonedge-lightblue_28x28.png

Follow
#8DC63F #7FB340 btn_edge-grn_28_x_28.png

Download
#F68620 #F36F21 btn_edge_ora_28_x_28.png

Learn more
#146C88 btn_buttonedge-db_28x28.png

Publish
#4CB4E8 btn_buttonedge-lightblue_28x28.png

Follow
#8DC63F btn_edge-grn_28_x_28.png

Download
#F68620 btn_edge-grn_28_x_28.png

Learn more
#02FF40 btn_buttonedge-db_28x28.png

Publish
#259FDB btn_buttonedge-lightblue_28x28.png

Follow
#7FB340 btn_edge-grn_28_x_28.png

Download
#F36F21 btn_edge-grn_28_x_28.png

Commerce

UI

Alert

Communication

Buy now
#DA9509 #CA7A0A btn_buttonedge-ora_28x28.png

Search
#8C6239 #744B29 btn_buttonedge-brn_28x28.png

Cancel
#F14950 #D54147 btn_edge-rd_28_x_28.png

Next
#744A71 #573855 btn_edge-pl_28_x_28.png

The numbers below each button specifies the color and edge overlay image that should be added to the top right corner of each button. The static button has a 2 color gradient where as the hover and click state only have one color.

Buy now
#DA9509 btn_buttonedge-ora_28x28.png

Search
#8C6239 btn_buttonedge-brn_28x28.png

Cancel
#F14950 btn_edge-rd_28_x_28.png

Next
#744A71 btn_edge-pl_28_x_28.png

Buy now
#CA7A0A btn_buttonedge-ora_28x28.png

Search
#744B29 btn_buttonedge-brn_28x28.png

Cancel
#D54147 btn_edge-rd_28_x_28.png

Next
#573855 btn_edge-pl_28_x_28.png

TYPOGRAPHY

Typography is important to the identity of a product as it conveys tone, design and should be exible across all products and platforms.

The font family for Scribd is Athelas. The font itself was chosen for its classic serif style and modern attributes. Its bridging the gap from the serif news fonts of old with a quality that lends itself to more modern applications. Much like the Scribd brand it pays homage to reading in the traditonal form. Usage for Athelas is limited to headers on the web and mobile. Exceptions can be made for reader application and print collateral on a case by case basis. Style examples are on the following page.

TYPOGRAPHY stylesheet

Stylesheet
Title font family: Athelas Regular font size: 30px leading: 30px color: #022F40 Header 1 font family: Athelas Regular font size: 21px leading: 28px color: #146C88 Header 2 font family: Athelas Regular font size: 21px leading: 23px color: #72A7B8 Header 3 font family: Athelas Regular font size: 18px leading: 20px color: #022F40 Body font family: Arial Regular font size: 12px leading: 15px color: #666666 Body 2 font family: Arial Regular font size: 12px leading: 15px color: #146C88

Body 3 font family: Arial Regular font size: 12px leading: 15px color: #8EB8C6 Active Link font family: Arial Regular font size: 12px leading: 15px color: #146C88 Body Small font family: Arial Regular font size: 11px leading: 14px color: #666666 Body 2 Small font family: Arial Regular font size: 11px leading: 14px color: #146C88 Body 3 Small font family: Arial Regular font size: 11px leading: 14px color: #8EB8C6 Active Link Small font family: Arial Regular font size: 11px leading: 14px color: #146C88 Microtext Body font family: Arial Regular font size: 10px leading: 13px color: #A3A3A3

Microtext Link font family: Arial Regular font size: 10px leading: 13px color: #A3A3A3

CONTENT GRID

The content grid ensures a consistent page layout throughout the site while also maintaining proper spacing for our content. This is an attribute reected in all Scribd collateral and platforms.

37px

996px

37px 48px 48px 48px 48px 48px 48px 48px

The width of the content area is 996px across. The top gutter is 37 pixels reserved for navigation and messaging elements. The combination of 1, 2, and 3 column layouts for the grid has been outlines with the blue box examples above. This combined with the 48px gutters will ensure layout consistency.

TYPOGRAPHY

The graphic style for Scribd is a visual interpretation of the Scribd design principles and site simplicity.

The graphic style is a combination of basic geometric shapes with a clever use of negative space to comprise the artwork. Only colors from the Scirbd color pallette should be used as well as the standard texture overlay. These graphics can either be full color or black and white dependent upon usage. Graphics should never overpower the message or the call to action on any visual asset. At most, the graphics should have equal or less weight than the call to action, tagline or support text.

TYPOGRAPHY

Dialog boxes are meant to be clean and simple containers meant to highlight the information and add clarity to the call to action.

The dialog boxes below use the site styles and should have clear editorial hierarchy. The Scribd logo is for use only on those dialog boxes that serve as entry points by either local to Scribd or directed from another site or link.

Log in
Use your Facebook login and see what your friends are reading and sharing.

Login with Facebook

I dont have a Facebook account Already have a Scribd account?

This is an example of a login dialog box that uses the Scribd logo and stylesheet as well as icons and assets unique to the Scribd brand such as the page corner and button styling.

ICONOGRAPHY

The icons, like the Scribd UI, are designed to be lightweight and utilitarian. Lines should be straight with hard edges. This will allow for a crisp and easy to parse icon.

Icons should be designed with common everyday objects or shapes in mind so they seem familliar to the user. They should be able to exist and stay legible on multi-colored background UI components and feel like their part of the existing family you see below.

The top group of icons serve as utility icons and should have sharp edges as well as exist in all three utility states. The colored icons below are infographic iconography used to help illustrate content. The palette is pulled from the communicate pallette specified in the style guide.

TEXTURES

Textures can be used to enhance content or messaging. The colors are meant to blend or contrast with the site UI depending on usage.
The hierarchy to of the images starts from site background meant to blend with the UI and not overpower the content. The high contrast dark blue is mean to call attention to content or messaging as a primary action or function.
All of these textures are currently in use on our site and can be found in the design box folder.

bg-header-dkbl-texture.gif

bg-header-db-texture.gif

bg-header-lb-texture.gif

bg-profile-texture.gif

bg-header-pb-texture-rpt

MESSAGING

Messaging and notication headers are for use in the site header to identify messaging or instruction for the content of the page.
You are auto-sharing to Scribd and other Social Networks.
Turn off auto sharing by adjusting the controls below.

The notification headers below represent a language hierarchy. The lighter color are for passive messages associated with the content or action of a page. The darker color is for use when a more defined call to action or user focus is neeed.

You are auto-sharing to Scribd and other Social Networks.

Turn off auto sharing by adjusting the controls below.
These are promotional and marketing message promo banners that extend the full width of the browser. The content should be left justified to the site content container.

Welcome back Bernice! Youve been logged out.

Warning: This page will self-destruct in 00:09:56
These messaging banners act as alerts or assistance dialog associated with an action or actions a user has taken. These can be dismissed or allowed to fade out after a period of time.