Visual Stylesheet

Some lead-in copy about making classes for some elements and which ones don't need classes etccccc

Typography

You'll see that several of these typography elements don't have classes. That's because on this page, we want to edit the styles after selecting "All H1 Headings" for example, so that it will effect all the elements on the site. More information on how this works

  • Establish the global body font(s)

    Add any fonts you plan on using. Click "Body" under the Navigator, click where it says "Select a Class or Tag" and select "Body (All Pages)". From there, simply set the font that you are using. The default sizing should be well optimized, so other values should only need changes in special cases. Hold off on changing colors for now.

  • Style headlines

    We can explore font sizing here, but ideally try to work with REMs instead of PX to keep responsive scaling working.

    If you edit styles here, they will change across the site.

    All H1 Headings

    Lorem ipsum dolor sit amet.

    All H2 Headings

    Lorem ipsum dolor sit amet

    All H3 Headings

    Lorem ipsum dolor sit amet

    All H4 Headings

    Lorem ipsum dolor sit amet

    All H5 Headings

    Lorem ipsum dolor sit amet

    All H6 Headings

  • Style paragraph

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.

    All Paragraphs

  • Style additional elements

    These are less important and can be skipped. But again, don't worry about the colors on these elements yet. We will get to those in a second.

    Block Quote
    Block Quote Footer

    All Block Quotes

    Text Link

    All Links

    (Make sure this still looks like a text link, if nothing comes to mind, blue is tried and true, nothing wrong with the default.)

    Button PrimaryButton PrimaryButton Secondary

    button

    Button Outline PrimaryButton Outline Secondary

    button

    Display classes can be used on paragraph or headline copy. Used for large, punchy copy

    Lorem ipsum

    display-1

    Lorem ipsum

    display-2

    Lorem ipsum

    display-3

    Lorem ipsum

    display-4

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

    lead

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

    caption

    View additional text styles

Color

These colors have been created using Global Swatches. If you edit the Global Swatch color, it will change every element that uses that color swatch. More colors can be added to the collection, but overrides will have to be added manually. For help establishing dark version of colors, use the material design color picker.

Primary

Applied commonly throughout as an accent. If you see elements adopting your updated color, you're doing it right.

Primary-600

Slightly darker version of primary color, used for default hover state on buttons.

Secondary

Secondary color, used for default hover state on buttons.

Secondary-600

Slightly darker version of secondary-600, used for default hover state on buttons.

Dark

Applied to all text by default, unless overridden.

Gray

Applied to all captions, disabled states etc.

Light

Lorem Ipsum Placeholder Copy

Body BG Color

Body background color