Colors

Below you can find the different color palettes we used on the site for the background, text, and accent colors, buttons, etc.

---

Web Colors

• Blue#0f5788
• Green#58b535
• Orange#F58220

Logo Colors

• Pantone 7460U#008cc1 RGB: 0, 140, 193
• Pantone 368U#65b144 RGB: 101, 177, 68

Typography

We use Open Sans and Letter Gothic.

---

When to Open Sans

Open Sans is used for all headings and paragraph text.

Headings

Headings are used to denote different sections of content, usually consisting of related paragraphs and other HTML elements. They range from h1 to h6 and should be styled in a clear hierarchy (i.e., largest to smallest)

Paragraph

Paragraphs are groups of sentences, each with a lead (first sentence) and transition (last sentence). They are block level elements, meaning they stack vertically when repeated. Use them as such.

---

When to use Letter Gothic

Letter Gothic is used for code samples and code snippets to provide a clear distinction between code and paragraph text.

---

Editing the CSS

CSS for headings and paragraph styles can be found in app.css.

---

h1. Heading 1

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

h2. Heading 2

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Duis mollis, est non commodo

h3. Heading 3

Dmedium-1c sed odio dui. Vestibulum id ligula porta felis euismod semper. Maecenas sed diam eget risus varius blandit sit amet non magna. Etiam porta sem malesuada magna mollis euismod. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

h4. Heading 4

Vestibulum id ligula porta felis euismod semper. Maecenas sed diam eget risus varius blandit sit amet non magna. Etiam porta sem malesuada magna mollis euismod. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

h5. Heading 5

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

h6. Heading 6

Vestibulum id ligula porta felis euismod semper. Maecenas sed diam eget risus varius blandit sit amet non magna.