Style Guide (h1) (Playfair Display, Bold 700, 40px, #ffffff)

Image guidance

Tie Logo - 200px max-width when displayed with an association logo, 400px max-width when displayd alone
Association Logo - 300px width
Hero Image - 385px max-height, the width can vary as long as it doesn't disturb the legibility of the headline copy.

h2 Main Content Header text (Playfair Display, Bold 700, 32px, #333333)

h3 Main Content Header text (Roboto, Bold 700, 24px, #1d7e88)

h4 Main Content Header text (Roboto, Bold 700, 20px, #333333)

h5 Main Content Header text (Roboto, Bold 700, 16px, #333333)

p Main Content Paragraph text (Roboto, 18px, #585954)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla quis purus est. Integer eu consectetur velit. Quisque facilisis congue finibus. Pellentesque quis diam turpis. Aenean finibus metus est, eu volutpat nisi molestie vel. Donec auctor, tellus non placerat maximus, purus est sollicitudin nibh, et feugiat velit felis vitae urna. Aliquam sit amet tortor enim. Ut ullamcorper, nulla sit amet facilisis sollicitudin, erat elit posuere elit, ut dapibus mauris purus at ipsum. Aliquam fringilla enim eget nisl accumsan, nec porta arcu vehicula. Quisque rutrum lobortis tincidunt. This is a text link.

• This is an unordered list
• Lorem ipsum dolor sit amet, consectetur adipiscing elit.
• Nulla quis purus est. Integer eu consectetur velit. Quisque facilisis congue finibus.

1. This is an ordered list
2. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
3. Nulla quis purus est. Integer eu consectetur velit. Quisque facilisis congue finibus.

 

---

 

Colors

Burnt Orange is our primary CTA color. All landing pages have a Dark Teal banner. Deeper pages have an Burnt Orange banner. All links (other than buttons) are Dark Teal.

Primary colors

• dark-teal: #1d7e88;
• burnt-orange: #d85f27;
• dark-gray: #58595b;

Secondary colors

• light-teal: #10a8b1;
• peach: #fdc484;
• orange: #f47b39;
• light-teal: #cde3e5;
• light-blue: #e6f5fb;
• background-gray: #f1f1f1;

 

Table example

Acronym	Association name
AAACE	American Association for Adult & Continuing Education
AACC	American Association of Community Colleges
AACRAO	American Association of Collegiate Registrars & Admissions Officers
AAE	Association of American Educators
AAFCS	American Association of Family & Consumer Sciences
AAG	Association of American Geographers
AASA	American Association of School Administrators
AASLH	American Association for State and Local History
AASPA	American Association of School Personnel Administrators
AATG	American Association of Teachers of German
AAUA	American Association of University Administrators
ACEI	Childhood Education International