Scion.com Web Style Guidelines - 2012
Current version of this Styleguide: 3.0
Dated: 6/4/2012 10:30AM PST
Base Palette 2012
Global Usage
Model Specific
#f26300
#1c97c3
#9FA617
#9b0133
#d31245
Typography
Display Text - Headlines, Subheads
Headline 1
Headline 1: Din Medium 48px ALL CAPS
Headline 2
Headline 2: Din Regular 30px ALL CAPS
Headline 3
Headline 3: Din Regular 24px ALL CAPS
Subhead 1
Subhead 1: Din Regular 18px ALL CAPS
Body Text: Subhead Copy, Body Copy
Subhead Copy: Helvetica Neue, Helvetica, Arial, Sans 14px, Line Height: 20px
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tincidunt dignissim nulla, eget rutrum tellus auctor sit amet. Donec adipiscing semper justo. Sed hendrerit, eros eget dapibus ultrices, tortor dui egestas turpis, vel rutrum est justo in ante. Nunc vestibulum pharetra nulla sed hendrerit. Vivamus ullamcorper luctus diam volutpat placerat. Sed a lacus semper tortor imperdiet tempor. Proin eleifend fringilla tristique.
Body Copy: Helvetica Neue, Helvetica, Arial, Sans 12px, Line Height: 16px
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tincidunt dignissim nulla, eget rutrum tellus auctor sit amet. Donec adipiscing semper justo. Sed hendrerit, eros eget dapibus ultrices, tortor dui egestas turpis, vel rutrum est justo in ante. Nunc vestibulum pharetra nulla sed hendrerit. Vivamus ullamcorper luctus diam volutpat placerat. Sed a lacus semper tortor imperdiet tempor. Proin eleifend fringilla tristique. Nam libero leo, vehicula in pulvinar laoreet, pharetra eu mi. Donec placerat hendrerit eros, ut tincidunt magna varius vitae. Phasellus non felis magna, ut pulvinar nulla. Aliquam eget ante purus, et venenatis justo. Pellentesque condimentum volutpat nisi, ut vulputate libero placerat suscipit. Vestibulum magna felis, facilisis id dignissim id, convallis ac lorem. Vestibulum vel lacus ac odio imperdiet tincidunt eget ac est. Suspendisse nec massa enim, nec semper nunc. Integer at velit vitae neque varius cursus a at neque. Vestibulum sed leo diam. Sed tempus purus eu lorem lobortis sodales.
Example Usage: Headline 3 w/ Subhead Copy
Headline 3: Din Regular 24px ALL CAPS
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tincidunt dignissim nulla, eget rutrum tellus auctor sit amet. Donec adipiscing semper justo. Sed hendrerit, eros eget dapibus ultrices, tortor dui egestas turpis, vel rutrum est justo in ante. Nunc vestibulum pharetra nulla sed hendrerit. Vivamus ullamcorper luctus diam volutpat placerat. Sed a lacus semper tortor imperdiet tempor. Proin eleifend fringilla tristique. Nam libero leo, vehicula in pulvinar laoreet, pharetra eu mi.
Example Usage: Subhead w/ Body Copy
Subhead 1: Din Regular 18px ALL CAPS
Lorem ipsum dolor sit amet, consectetur adipi scing elit. Cras tincidunt dignissim nulla, eget rutrum tellus auctor sit amet. Donec adipiscing semper justo.
Marcostructure
Utility Navigation
Notes
Nav height: 25px; 5px gaps between elements. Fixed 10px from document right.
When nav drop down menu is displayed clicking anywhere in the document should hide the drop down.
Section Nav
2011 tC |
|
OVERVIEW |
Notes
Nav bar min-width: 830px; max-width: 1090px; height: 25px;
Bread crumbs should remain 53px from the top of the window. The Section Nav bar should remain 90px from the top of the window.
In prototyping the min-width actually worked out to 825px because of the typeface rendering and the programatic margin-right on each menu item.
Minimum margin-right: 2px; maximum margin-right: 60px;
After maximum width is reached the left position of the Overview Nav bar should move right to center the bar in the window accounting for the left nav column.
Global Navigation
CARS
tC
xB
xD
iQ
FR-S
CERTIFIED-USED
Notes
Cars, padding-left: 10px;
tC, xB, xD, iQ, FR-S, pre-owned padding-left: 20px;
font-family: DIN; font-weight: normal; font-size: 13px; color: #FFF;
mast image width: 150px; height: 90px;
section width: 150px; height: 29px; border-top: 1px solid #a8a8a8;
fill #542583. duration: 175ms; easing: easeoutquad. animation cancels and reverses on mouseout. 1.5x slower than fill.
flyout fadeIn begins on mouseenter. duration 35ms.
Flyout border FPO
Gallery Carousel
Notes
Gallery Carousel overall width 780px, height 130px. Font-family: DIN. Font-size: 12px. Color: #FFF. Hover state on top row buttons should match hover border.
Border is on top of image. When the border is added it does not add to the overall width of its image, nor does it shrink the image. If the number of images is divisible by 5 the carousel slide left and right 5 at a time. Otherwise it slide one image at a time. 5px gap between elements.
Modal Demo
Notes
Modal overlay background-image modalFill.png
Modal centered. Clicking on the overlay closing the modal. Clicking on the 'X' in the corner of the modal window will close the modal.
Sitemap
Notes
Subheading 1: font-family: 'DIN'; font-size 18px; color: #542583;
Unordered-list indent 10px.
margin-bottom: 10px;
Subheading 2: font-family: 'DIN'; font-size: 12px; color: #333; text-decoration: underline;
Hover, color to global purple. color: #542583:
Search
-
SCION tC OVERVIEW
An overview of the 2011 Scion tC that covers pros and cons, available options, powertrains and over driving performance.
-
2011 SCION tC - COMPARE
Compare Vehicle Changes Vehicle Please select a Vehicle to compare and click "Add" button. Compare to another SCION...
-
2011 SCION tC FEATURES
Model Highlights Overview Comfort & Convenience Entertainment Performance & Efficiency Safety & Security.
-
2011 SCION tC - SPECIFICATIONS
Feature and Specs Standard Features Packages & Options Specifications Packages. Learn more by clicking buttons...
CTA Rules and Violations
Rules
Select Menus
Select Menus should not be styled. They should render per browser defaults.
Button Width and Height
Width is determined by the button value plus padding.
Height is 25px
Button Text Treatment
Text is vertically aligned in div/button. Text is uppercase. Text is centered.
Left and right padding is 10px. Text-indent in button is 10px added to padding.
Button Typography
Font-family: DIN; Font-size: 12px; Color: #FFFFFF;
Interaction
Hover changes cursor to point (finger). Background color changes based on context.
App Store Buttons
Violations
Button Text Treatment
Overview CTA Buttons, Contact Dealer Form: text-align: left;
Button Sizing
Overview CTA buttons are all 165px wide. They otherwise observe the ruleset.
Pure Price button/img is 45px high.
Contact Dealer submit button is 120px wide.
Flyout buttons are 145px wide.
Grid View Details buttons are 150px wide.
Lifestyle App link CTAs. 115px wide; Content is left-aligned. 9px gap between icons and button text.
Apply for credit button
Model Overview CTA Demo
INTRODUCING THE NEW 2011 SCION iQ
$ XX,XXX
$ XX,XXX
Estimated MPG XX/XX
Scion's new, premium micro-subcompact iQ.
Sign up now to receive iQ news and updates.
Notes
The biggest test in CTA.
headline 1: din medium 48px all caps. margin-top: 20px; margin-left: 45px; color: #515051;
Price.
headline 2: din regular 30px all caps. color: #717174;
subhead 1: din regular 18px all caps. color: #717174;
Manaul, automatic, msrp, estimated mpg and copy below that.
subhead 2: din regular 12px all caps. color: #717174;
Pure Price border fpo. margin-top: 10px; 5px between each button.
Print Brochure--Additional iQ models gap 105px;
This item maintains the same margin-left until the nav bar is full stretched. Then it move right 1px for every 2px added to the window width. Maintaining its position in relation to the nav bar directly above.
CTA Additional Comments
To get the vertical spacing the same as it is to the left I set margin-top: 0px; and margin-bottom: 0px; this may not have the same effect in your code base. especially if you use some kind of reset.css or normalize.css
The vertical gaps between the lines of text are 10px. So between the headline and the price there should be 10px. between the price and the estimated MPG there should be 10px. between the Est. MPG and the copy there should be 10px. Between the copy and the pure price button there should be 10px.
Contact Dealer
CONTACT A DEALER
Donec ullamcorper nulla non metus auctor fringilla. Donec sed odio dui. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Donec sed odio dui. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Notes
Individual inputs are checked for errors only after gaining and then loosing focus. If an error is found the border of the respective input is changed to red till the error is corrected. Closing the Contact dealer modal resets the form.
Contact a dealer will only work for the US. Validation patterns (Regex or otherwise) do not need to account for international addresses.
Flyouts
THE 2012 SCION tC
STARTING AT
$18,995
- 5 X 10 FT
- SEATS FOUR
- 12.9 FT TURNING RADIUS
- 11 AIRBAGS
- 5 X 10 FT
- SEATS FOUR
Login Dialog
LOGIN
REGISTER
Keep up-to-date one the latest Scion news and special events. If you are a Scion owner, you can also register your VIN and get complimentary service reminders sent right to your email.
*REQUIRED
Table
AIR CONDITIONER
VIEW DETAIL
TACHOMETER & TRIP METER
VIEW DETAIL
POWER DOOR LOCKS
VIEW DETAIL
REMOTE KEYLESS ENTER SYSTEM
VIEW DETAIL
ENGINE IMMOBILIZER
VIEW DETAIL
REAR WINDOW DEFOGGER
VIEW DETAIL
Grid
EXTERIOR
GENUINE SCION PAINT PROTECTION FILM
$299.00
VIEW DETAILS
GENUINE SCION PAINT PROTECTION FILM
$299.00
VIEW DETAILS
GENUINE SCION PAINT PROTECTION FILM
$299.00
VIEW DETAILS
GENUINE SCION PAINT PROTECTION FILM
$299.00
VIEW DETAILS
GENUINE SCION PAINT PROTECTION FILM
$299.00
VIEW DETAILS
GENUINE SCION PAINT PROTECTION FILM
$299.00
VIEW DETAILS
Accessories Modal
XM® SATELLITE RADIO RECEIVER WITH TRAFFIC DISPLAY
Suggested Retail $599.00
Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cras mattis consectetur purus sit amet fermentum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras justo odio, dapibus ac facilisis in, egestas eget quam.Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cras mattis consectetur purus sit amet fermentum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras justo odio, dapibus ac facilisis in, egestas eget quam.
ADDITIONAL IMAGES
3 Col Sample Layout
VIDEOS AND DOWNLOADS
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tincidunt dignissim nulla, eget rutrum tellus auctor sit amet. Donec adipiscing semper justo. Sed hendrerit, eros eget dapibus ultrices, tortor dui egestas turpis, vel rutrum est justo in ante.
VIDEOS
Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
WALLPAPER
Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
RINGTONES
Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.