design documentation - april 2017 · design documentation | 11 design documentation | 12 images...
TRANSCRIPT
![Page 1: DESIGN DOCUMENTATION - APRIL 2017 · DESIGN DOCUMENTATION | 11 DESIGN DOCUMENTATION | 12 IMAGES Images not shown to scale CTA feature block image 1045 X 600 px Upload full-color versions](https://reader036.vdocument.in/reader036/viewer/2022071001/5fbe6d2576d0b14f2d4714c3/html5/thumbnails/1.jpg)
DESIGN DOCUMENTATION - APRIL 2017
![Page 2: DESIGN DOCUMENTATION - APRIL 2017 · DESIGN DOCUMENTATION | 11 DESIGN DOCUMENTATION | 12 IMAGES Images not shown to scale CTA feature block image 1045 X 600 px Upload full-color versions](https://reader036.vdocument.in/reader036/viewer/2022071001/5fbe6d2576d0b14f2d4714c3/html5/thumbnails/2.jpg)
TABLE OF CONTENTS
COLOR
TYPOGRAPHY & CTAs
ICONOGRAPHY
IMAGES
DESIGN DOCUMENTATION | 1
2-3
4-6
7-8
9-12
![Page 3: DESIGN DOCUMENTATION - APRIL 2017 · DESIGN DOCUMENTATION | 11 DESIGN DOCUMENTATION | 12 IMAGES Images not shown to scale CTA feature block image 1045 X 600 px Upload full-color versions](https://reader036.vdocument.in/reader036/viewer/2022071001/5fbe6d2576d0b14f2d4714c3/html5/thumbnails/3.jpg)
DESIGN DOCUMENTATION | 1 DESIGN DOCUMENTATION | 2
COLORSUNSHINE
IRON
#FFB819 #000000
#55565A
Usage
Section title dropdown button,
#FFFFFF
Usage
CTA text, Main Masthead back-ground,
Usage
Homepage Dicover section back-ground, large quotemarks, unique icons, Image caption background, Pull quote background
Usage
Sticky CTA bar, H1 - H2, standard body copy,
BLUEBONNET
#F5F5F5
Usage
Events background, Homepage “Changing Workplace” background, Accordian background,
#3D3C41
Usage
Footer background, Typical page page title background,
MASTHEAD GREY
#EDEDED
Usage
Ancillary backgroud, Breadcrumb background
#0075C9
Usage
CTA Button background, standard text links, Video play button, Menu background color
STRATUS
TUXEDO
LIGHT GREY
DARK GREY
![Page 4: DESIGN DOCUMENTATION - APRIL 2017 · DESIGN DOCUMENTATION | 11 DESIGN DOCUMENTATION | 12 IMAGES Images not shown to scale CTA feature block image 1045 X 600 px Upload full-color versions](https://reader036.vdocument.in/reader036/viewer/2022071001/5fbe6d2576d0b14f2d4714c3/html5/thumbnails/4.jpg)
DESIGN DOCUMENTATION | 3
COLOR
LIGHT BLUE MEDIUM GREY
#E5F1FA
Usage
Table row background,
#CACACA
Usage
Horizontal Rules,
ALERT RED
#D9272D
Usage
Alert background
![Page 5: DESIGN DOCUMENTATION - APRIL 2017 · DESIGN DOCUMENTATION | 11 DESIGN DOCUMENTATION | 12 IMAGES Images not shown to scale CTA feature block image 1045 X 600 px Upload full-color versions](https://reader036.vdocument.in/reader036/viewer/2022071001/5fbe6d2576d0b14f2d4714c3/html5/thumbnails/5.jpg)
DESIGN DOCUMENTATION | 3
DESIGN DOCUMENTATION | 4
TYPOGRAPHY
Heading 1
Heading 2
GothamA
Gotham Black 50px 30px 28px #000000
Gotham Black 58px 38px 32px #000000 STANDARD H1
Heading 3Gotham Black 34px 24px 22px #000000
Heading 4Gotham Medium 34px 24px 22px #000000
Heading 5Gotham Medium 28px 20px 20px #000000
Heading 6Gotham Medium 22px 18px 18px #000000
![Page 6: DESIGN DOCUMENTATION - APRIL 2017 · DESIGN DOCUMENTATION | 11 DESIGN DOCUMENTATION | 12 IMAGES Images not shown to scale CTA feature block image 1045 X 600 px Upload full-color versions](https://reader036.vdocument.in/reader036/viewer/2022071001/5fbe6d2576d0b14f2d4714c3/html5/thumbnails/6.jpg)
DESIGN DOCUMENTATION | 5
TYPOGRAPHY
Gotham Book 28px 22px 22px #000000
Large intro text lorem ipsum dolor sit Gotham Book 22px 18px 18px #000000
Pull quote text eget libero at ipsum ves-
Text link
Gotham Bold 18px 16px 16px #0075C9
Standard body copy text lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pretiumterdum
Gotham Book 18px 16px 16px #000000
Large image caption
Gotham Medium Italic 16px 16px 16px #000000
![Page 7: DESIGN DOCUMENTATION - APRIL 2017 · DESIGN DOCUMENTATION | 11 DESIGN DOCUMENTATION | 12 IMAGES Images not shown to scale CTA feature block image 1045 X 600 px Upload full-color versions](https://reader036.vdocument.in/reader036/viewer/2022071001/5fbe6d2576d0b14f2d4714c3/html5/thumbnails/7.jpg)
DESIGN DOCUMENTATION | 5 DESIGN DOCUMENTATION | 6
CTAS CTAS not shown to scale
LARGE CTA | Gotham Medium ALL CAPS
18px 14px 14px
#FFFFFF
SMALL CTA | Gotham Medium ALL CAPS
14px 12px 12px
#FFFFFF
LARGE CTA | Gotham Medium ALL CAPS
18px 14px 14px
#FFFFFF
SMALL CTA | Gotham Medium ALL CAPS
14px 12px 12px
#FFFFFF
![Page 8: DESIGN DOCUMENTATION - APRIL 2017 · DESIGN DOCUMENTATION | 11 DESIGN DOCUMENTATION | 12 IMAGES Images not shown to scale CTA feature block image 1045 X 600 px Upload full-color versions](https://reader036.vdocument.in/reader036/viewer/2022071001/5fbe6d2576d0b14f2d4714c3/html5/thumbnails/8.jpg)
DESIGN DOCUMENTATION | 7
ICONOGRAPHY Icons may appear in a variety of sizes and colors
CTA Icons
Masthead wordmark
Footer wordmark
Contact Icons
Search Menu Map Pin Checkmark Video Play
![Page 9: DESIGN DOCUMENTATION - APRIL 2017 · DESIGN DOCUMENTATION | 11 DESIGN DOCUMENTATION | 12 IMAGES Images not shown to scale CTA feature block image 1045 X 600 px Upload full-color versions](https://reader036.vdocument.in/reader036/viewer/2022071001/5fbe6d2576d0b14f2d4714c3/html5/thumbnails/9.jpg)
DESIGN DOCUMENTATION | 7 DESIGN DOCUMENTATION | 8
ICONOGRAPHY Icons may appear in a variety of sizes and colors
Too Busy Icon Need Help Icon
White Arrows Blue Arrow Blue Circle Arrows
Close Button Dropdown Icon
Social Icons
Expand Collapse
Video Play
Apply Icons
![Page 10: DESIGN DOCUMENTATION - APRIL 2017 · DESIGN DOCUMENTATION | 11 DESIGN DOCUMENTATION | 12 IMAGES Images not shown to scale CTA feature block image 1045 X 600 px Upload full-color versions](https://reader036.vdocument.in/reader036/viewer/2022071001/5fbe6d2576d0b14f2d4714c3/html5/thumbnails/10.jpg)
DESIGN DOCUMENTATION | 9
IMAGES Images not shown to scale
Home page hero image
1600 X 900 px OR 16:9
Standard hero image
1200 X 262 px
Homepage program images
275 X 275 px
![Page 11: DESIGN DOCUMENTATION - APRIL 2017 · DESIGN DOCUMENTATION | 11 DESIGN DOCUMENTATION | 12 IMAGES Images not shown to scale CTA feature block image 1045 X 600 px Upload full-color versions](https://reader036.vdocument.in/reader036/viewer/2022071001/5fbe6d2576d0b14f2d4714c3/html5/thumbnails/11.jpg)
DESIGN DOCUMENTATION | 9 DESIGN DOCUMENTATION | 10
IMAGES Images not shown to scale
Home page featureie: In your neighborhood
440 X 440 px
3 column news image
350 X 197 px
![Page 12: DESIGN DOCUMENTATION - APRIL 2017 · DESIGN DOCUMENTATION | 11 DESIGN DOCUMENTATION | 12 IMAGES Images not shown to scale CTA feature block image 1045 X 600 px Upload full-color versions](https://reader036.vdocument.in/reader036/viewer/2022071001/5fbe6d2576d0b14f2d4714c3/html5/thumbnails/12.jpg)
DESIGN DOCUMENTATION | 11
IMAGES Images not shown to scale
Let’s get started image
1200 X 250 px
Full-column wysiwyg image
1200 X any height
Ideal aspect ratio: very wide landscape images (16:9 or wider)
wysiwyg image floated withintext
400 X any height
![Page 13: DESIGN DOCUMENTATION - APRIL 2017 · DESIGN DOCUMENTATION | 11 DESIGN DOCUMENTATION | 12 IMAGES Images not shown to scale CTA feature block image 1045 X 600 px Upload full-color versions](https://reader036.vdocument.in/reader036/viewer/2022071001/5fbe6d2576d0b14f2d4714c3/html5/thumbnails/13.jpg)
DESIGN DOCUMENTATION | 11 DESIGN DOCUMENTATION | 12
IMAGES Images not shown to scale
CTA feature block image
1045 X 600 px
Upload full-color versions.The color effect will be added dynamically. Also note thatthe image should be com-posed with the focus in thecenter of the image as the default state is a cropped square.
Default state
Open state
![Page 14: DESIGN DOCUMENTATION - APRIL 2017 · DESIGN DOCUMENTATION | 11 DESIGN DOCUMENTATION | 12 IMAGES Images not shown to scale CTA feature block image 1045 X 600 px Upload full-color versions](https://reader036.vdocument.in/reader036/viewer/2022071001/5fbe6d2576d0b14f2d4714c3/html5/thumbnails/14.jpg)
THANK YOU