Above: Allow 50px above and below the logo text (not including descenders). Align bottom of navigation with bottom of logo text. Right-justify the navigation sections. The logo above is 65px high; the text portion is 35 px, excluding descenders

Hero text should be 3 lines, max. Center vertically, 80px from left.

This text box is on an off-white (#FAFAFA) strip. Keeping content on strips "packages" it so it's easy to move sections, without having to move every element. When a strip is resized, the other strips automatically move up or down.

 

ABOVE: Video strip, homepage only. 420px high x full (bleed) width. Only use as the top hero image. Position at 135 px from top (full height of header).

BELOW: Parallax strip, other pages. 420px high x full (bleed) width. Only use as the top hero image. 

Position at 135 px from top (full height of header).

Allow 50 px of space between visible elements, as seen with these ruler guides.

DSC_0354_edited_edited.jpg

Heading 1 (Montserrat, bold, 40, purple)
Page heads

Heading 2 (Montserrat, bold, 30, black)
Section heads or subsection heads on 980px light gray.

Heading 3 (Montserrat, bold, 30, white)
Section heads or callouts on color strips (30px space above & below)

Heading 4 (Avenir, bold, 20, aqua)
Linked subheads/paragraph heads, e.g. press releases

Heading 5 (Avenir, 18, black)
Paragraph heads (Only use on normal paragraphs)
Heading 6 (Montserrat, bold, 60, white) - Hero image

Paragraph 1 (Avenir Light, 22, black)

Intro paragraphs

Paragraph 2 (Avenir Light, 18, black)

Normal paragraphs

Paragraph 3 (Avenir, 15, black)

Navigation, footer text

Color strips can be used for call-outs or section headings when the new section is not related to the content above.

Colors: 100% purple, aqua, or gray; centered text

Allow 30 pixels of space above and below the text, and 50 pixels between colored strips or sections. (There are two off-white strips between the purple, aqua, and this strip.)

eyecelerator-header-image1900.jpg
eyecelerator-header-image1900.jpg

Above: The connections graphic can be used as a decorative element at 20px high, either with no spacing before/after a color strip, or with 50px spacing before/after another element.

It can also be used for call-outs or section headings. (It is harder to read, though.)

Alternate subsection heading, 50% black - one line

The alternate subsection headline can be used when, without the gray background, the text would be lost among other elements. Example: Sponsor levels. Center the text.

The strip for this section should be white; otherwise, the white logo backgrounds will show.

In the below sponsor logo grids, the maximum squares per row is 5. Therefore, palladium and platinum sponsor grids should be 3 wide, gold and silver should be 4 wide, and bronze should be 5 wide.

Bump the grid up with the gray bar. If there's a vertical logo, or logo that stretches to the height of the grid box, make sure there are at least 30 pixels between the gray bar and logo. If there aren't, move the grid down a bit.

Palladium & Platinum Sponsors (3 wide)

Gold & Silver Sponsors (4 wide)

Bronze Sponsors (5 wide)

New Section Topic, half-width

Paragraph 2 (normal).

Middle dividing gutter is 50 pixels. 

Text box width is 465.

Photo width is 465. Height can vary. 

You can also use two 465-width photos instead of text and photo.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 

DSC_0354_edited.jpg

Batman and Superman discuss the Joker's plan to replace corneas with AI hamburgers.

Caption style: Paragraph 2

New Section Topic, vertical photo (2/3, 1/3)

Paragraph 2 (normal).

Dividing gutter is 50 pixels. 

Text box is 620 px wide.

Photo width is 310. Height can vary. 

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

novasight-presenting.jpg

New Section Topic, headshots (1/4, 3/4)

Garg-Sumit.jpg
Yeu Headshot.jpg

Align headshot with top of text.

 

Paragraph 2 (normal).

Dividing gutter is 50 pixels. 

Text box is 698px wide.

Photo width is 232. Height can vary but 232 is best.. 

Allow at least 30 pixels between photos; more if the subsequent headshot does not relate to preceding text.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Links & Buttons

Links in text are aqua. Aqua can be challenging to read, so make the links bold like this

Buttons are purple, 250x50px, with 60pt curved corners. Font is Avenir 18, white, all caps.