Style Guide

h2 - 2.25rem

H2s are the primary heading in the body. They denote a new section on the page. They are the only element with 60px of margin above them and automatically propagate to the right side page navigation if there is more than one h2 on the page. *I have intentionally removed the link from this h2.

H3s are the secondary header in the body of the page. They do not propagate to the sidebar and have 20px of margin below them like all other elements.

H4s and H5s are the same at this time. H5s are not typically used. H4s are preferred.

Paragraph - 1rem - This is just a normal paragraph of text. This is a link inside a paragraph of text.` It is the default link style for the body of the site.

--step and --rpx

We use a 4px grid system. There are two special variables that you can use in our css: --step and --rpx you don’t use these as you would normal variables. Instead you can simply write something like margin: 2--step or border-width: 1--rpx and the site will compile it for you.

• New sections are defined by H2s they have 60px of space above them.
• Within a section, each element should have 20px of space between it and the next element.
• Check out this Figma for specifics. (Must be logged in to figma)

TODO: we are currently using these colors directly. If we want a design system thinking these should be used in terms of other variables.

At Emily’s request, I’ve pulled ALL colors that are solely in use on the home page and placed them down here. This includes Reference colors (we can put them back under reference later.)

There are several sizes of images on the site but they all follow the same general pattern. The aspect ratio for images is around 16 x 9 but the height of the image can vary based on need.

Typically used for do/don’t images.

These images match the width of the text content.

These images match the width of tables

These images are the full width of tthe content area.

We have two different types of columns for use on the site. 2-column width and 3-column width. These both automatically shift at various breakpoints for responsiveness.

This is the standard table design. There are a couple of variations on pages but those typically just adjust the max width of one of the rows so that the table doesn’t distort on mobile.

Many component pages have specific do/don’t images. These are usually side by side in a two column layout.

This is a <code> block for html

<div>
	<ul>
		<li>List Item</li>
		<li>List Item</li>
		<li>List Item</li>
	</ul>
</div>

This is a <code> block for javascript

window.addEventListener('click', (event) => {
	// if the click is not on the key make sure it closes
	if (event.target.closest('.-toggle') === null) {
		eventElement.classList.remove('--open')
		eventElement.classList.add('--closed')
		return
	}
})