GET INVOLVED
Be on the ground floor of innovation and discovery
Members can leave comments on posts, submit new ideas for content, and join our Slack channel for a front row seat to the conversation
Already have an account? Login here
Page Title is H1, with No Margin, black
Page subtitle is H3, 10pts margin top, 20pts margin bottom, gray
Page paragraph is in large paragraph, with 5pt top margin, 5pt bottom margin, gray
Section Title is H2, no margin, black
Section Subtitle is H5, 10pts margin top, 15pts margin bottom, gray
Section paragraph should be Medium Paragraph, 5pt top margin, 5pt bottom, gray
Subsection title is H4, no margin, black
Subsection Subtitle is Subtitle, 10pt top, 5pt bottom, gray
If there are multiple rows of boxes, there should be 20 pts padding top and 10 pt padding bottom around the row. If there are multiple columns in a row, Individual boxes should have 20pts margin on the right side.
The subsection paragraph is Paragraph, 10pt margin top, 0pt margin bottom, black. The line going across the width of the box is 1pts gray with 0pts margin. If there is a button attached to the box, the button should have 20pt margin top, 0 pt margin bottom.
Subsection title is H4, no margin, black
Subsection Subtitle is Subtitle, 10pt top, 5pt bottom, gray
If there are multiple rows of boxes, there should be 20 pts padding top and 10 pt padding bottom around the row. If there are multiple columns in a row, Individual boxes should have 20pts margin on the right side.
The subsection paragraph is Paragraph, 10pt margin top, 0pt margin bottom, black. The line going across the width of the box is 1pts gray with 0pts margin. If there is a button attached to the box, the button should have 20pt margin top, 0 pt margin bottom.
Subsection title is H4, no margin, black
Subsection Subtitle is Subtitle, 10pt top, 5pt bottom, gray
If there are multiple rows of boxes, there should be 20 pts padding top and 10 pt padding bottom around the row. If there are multiple columns in a row, Individual boxes should have 20pts margin on the right side.
The subsection paragraph is Paragraph, 10pt margin top, 0pt margin bottom, black. The line going across the width of the box is 1pts gray with 0pts margin. If there is a button attached to the box, the button should have 20pt margin top, 0 pt margin bottom.
Option 1
Same effect on all colors
Same box and drop shadows on all button colors
The box shadow and drop shadow RGBA values are the same for each button. CUSIA Red buttons roll over to Crimson, Earth Blue buttons roll over to a darker shade of Earth Blue (not ultramarine – that’s too saturated).
Option 2
Same effect, different colors
Different box shadow colors for each button color
The box shadow and drop shadow RGBA values are different for color each button. CUSIA Red buttons roll over to Crimson, Earth Blue buttons roll over to darker shade of Earth Blue (not ultramarine – that’s too saturated). CUSIA Red buttons have a Coral box shadow, and a CUSIA Red box shadow on roll over for Crimson buttons. Earth Blue buttons have a Sky Blue box shadow, Darker shade of Earth Blue rollover effect has an Earth Blue box shadow.
Option 3
Lose box shadows entirely
Box shadows only on white, drop shadows on all.
White buttons are exact same as before. Red and blue buttons have drop shadows but no box shadows.
Option 4
Make everything flat
Flat with only a color change animation on roll over. Not both.
With the exception of the white button, this is how red and blue buttons are already set up on the site. Red rolls over to blue, blue rolls over to black. Everything is flat, there are no drop shadows or box shadows.
Side by side comparison
Here’s what each type looks like. I vote for Option 2.
Smallest Title Tier of Information is H6, no margins
The description is in small sans, 10pt margin top, 0pt margin bottom, gray. Can be used for label descriptions!
Smallest Title Tier of Information is H6, no margins
The description is in small sans, 10pt margin top, 0pt margin bottom, gray. Can be used for label descriptions!
Smallest Title Tier of Information is H6, no margins
The description is in small sans, 10pt margin top, 0pt margin bottom, gray. Can be used for label descriptions!
Smallest Title Tier of Information is H6, no margins
The description is in small sans, 10pt margin top, 0pt margin bottom, gray. Can be used for label descriptions!
Smallest Title Tier of Information is H6, no margins
The description is in small sans, 10pt margin top, 0pt margin bottom, gray. Can be used for label descriptions!
Smallest Title Tier of Information is H6, no margins
The description is in small sans, 10pt margin top, 0pt margin bottom, gray. Can be used for label descriptions!
Page Title is H1
Section Title is H2
Page Subtitle is H3
Subsection title is H4
Section Subtitle is H5
Smallest Title Tier is H6
Subsection Subtitle is Subtitle
Smallest Subtitle is Small Sans
Page Paragraph is Large Paragraph
Section Paragraph is Medium Paragraph
Subsection Paragraph or Post Paragraph is Paragraph
Post Types
Post type titles are H6, blue, variable margin, with the time stamp stuff in small sans
