Design with clarity. Build with confidence.

Logo downloads

Dark wordmark

Light backgrounds · PDF, SVG & EPS

Download

White wordmark

Dark backgrounds · PDF, SVG & EPS

Download

Color symbol

Compact use · SVG & EPS

Download

White symbol

Dark backgrounds · PDF, SVG & EPS

Download

Dark circle

Light backgrounds · PDF, SVG & EPS

Download

White circle

Dark backgrounds · PDF, SVG & EPS

Download

AIA CES logo

Course pages & materials · PDF, SVG & EPS

Download

Favicon & touch icons

Use the transparent PNG favicon for modern browsers and the 180×180 touch icon for Apple home-screen and progressive-web-app contexts.

Favicon PNG

favicon.png · 32×32 · Transparent

Download PNG

Favicon fallback

favicon.jpg · 32×32 · JPEG

Download JPG

Apple touch icon

splash/touch.png · 180×180

Download PNG

Legacy touch icon

icons/touch.png · 180×180

Download PNG

Usage rules

• Use charcoal or very dark gray for body copy.
• Reserve green for actions, progress, and emphasis.
• Check text and UI contrast before shipping.
• Never communicate status through color alone.

Audience & training icons

Learning

learning.svg

General education, courses, and learning paths.

Download SVG

Drafting

icon-drafting.svg

Drafting, design, and technical-document content.

Download SVG

Project manager

icon-pm-1.svg

Project-management audience and responsibility content.

Download SVG

Project manager alternate

icon-pm-2.svg

Alternate PM illustration for campaign compositions.

Download SVG

Glass contractor

icon-contractor.svg

Contractor and company-growth audience content.

Download SVG

Contractor alternate

icon-contractor-2.svg

Alternate contractor illustration for campaign compositions.

Download SVG

Tools

icon-tools.svg

Resources, practical skills, and additional training.

Download SVG

Architectural icons

Architectural education

architectural-icon-01.svg

Architect-focused education and learning resources.

Download SVG

Technical planning

architectural-icon-02.svg

Measurement, planning, and technical design.

Download SVG

Specification tools

architectural-icon-03.svg

Tools, specifications, and architectural workflow.

Download SVG

Interface icons

Search

search.svg

Search fields and search-opening controls.

Download SVG

Check

check.svg

Completed or confirmed states with supporting text.

Download SVG

Chevron right

chevronRight.svg

Forward navigation and compact directional affordances.

Download SVG

Close

close.svg

Dismissal controls on light surfaces.

Download SVG

Close inverse

icon-close-white.svg

Dismissal controls on charcoal or image surfaces.

Download SVG

Resource link

link.svg

Thinkific resource-library link treatment.

Download SVG

Heading hierarchy

Use headings semantically and in order. Their visual size may change by context, but an H3 must not replace an H2 merely because it looks smaller.

Body and interface styles

Lists and quotations

Production variants

These variants intentionally override the base heading scale. Use the named production selector rather than recreating the treatment locally.

Platform usage

Hierarchy rules

• Use one descriptive H1 for each page or learning view.
• Do not skip heading levels to achieve a visual size.
• Keep heading text in sentence case unless a production component specifies uppercase.
• Keep long-form body copy near 65–75 characters per line.
• Use a minimum 1.5 line-height for paragraphs and list content.
• Never place essential information in all caps or low-contrast helper text.
• Links must remain identifiable without relying on color alone.
• Test headings with long course names and at 200% browser zoom.

:root {
  --font-heading: "Montserrat", sans-serif;
  --font-body: "Open Sans", sans-serif;
  --type-h1: 3rem;
  --type-h2: 2rem;
  --type-h3: 1.75rem;
  --type-h4: 1.5rem;
  --type-h5: 1.25rem;
  --type-h6: 1.125rem;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading);
  font-weight: 300;
  line-height: 1.15;
}

body {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.5;
}

h1 { font-size: var(--type-h1); }
h2 { font-size: var(--type-h2); }
h3 { font-size: var(--type-h3); }
h4 { font-size: var(--type-h4); }
h5 { font-size: var(--type-h5); }
h6 { font-size: var(--type-h6); }

article.single p {
  line-height: 1.75;
}

Layout rules

Component backgrounds

The default green images are shared production assets, not generic placeholders. They create continuity across WordPress and Thinkific components and should be paired with an overlay whenever text sits above them.

Default green

default-green.jpg · 1280×800

Download JPG

Default green blur

default-green-blur.jpg · 1280×800

Download JPG

Photography guidance

Hero image library

The theme includes 54 architectural hero images. Select imagery for relevance and composition, then use a dark overlay to protect text contrast. Select any image to open the original.

View

Hero 1

hero-1.jpg

Download JPG

View

Hero 2

hero-2.jpg

Download JPG

View

Hero 3

hero-3.jpg

Download JPG

View

Hero 4

hero-4.jpg

Download JPG

View

Hero 5

hero-5.jpg

Download JPG

View

Hero 6

hero-6.jpg

Download JPG

View

Hero 7

hero-7.jpg

Download JPG

View

Hero 8

hero-8.jpg

Download JPG

View

Hero 9

hero-9.jpg

Download JPG

View

Hero 10

hero-10.jpg

Download JPG

View

Hero 11

hero-11.jpg

Download JPG

View

Hero 12

hero-12.jpg

Download JPG

View

Hero 13

hero-13.jpg

Download JPG

View

Hero 14

hero-14.jpg

Download JPG

View

Hero 15

hero-15.jpg

Download JPG

View

Hero 16

hero-16.jpg

Download JPG

View

Hero 17

hero-17.jpg

Download JPG

View

Hero 18

hero-18.jpg

Download JPG

Thumbnail standards

Source images should be 1440×840 pixels with a 12:7 aspect ratio. Keep course names and status labels in HTML rather than embedding new text in the artwork.

Breadcrumbs

Pagination

Core visual patterns

h2.main-heading · partials/home-*.php

Section heading

Uppercase Montserrat with a centered yellow-green rule. Use once at the start of major home-page sections.

.lg-card · library/scss/components/_home.scss

Flexible content card

The general white surface used for training benefits, evaluations, support panels, and Mailchimp signup content.

Card action

.lg-faq-item · partials/lg-faq-item.php

How is training organized?

Use the tile pattern for short, featured FAQ answers. Alternate light-green and green overlays across the grid.

.exp.multi-toggle · components/lg-faqs.php

Expandable long-form answer

Use the expander when answers are longer or when several related sections need to share a compact page.

Additional information

Keep the entire trigger keyboard operable and expose expanded state.

.tab · partials/home-training.php

• New hires
• Teams
• Evaluations

Training the new hire

Horizontal tabs organize equivalent views within one subject. Keep labels short and retain a meaningful reading order without JavaScript.

.lg-pricing-card · components/lg-pricing-card.php

Team training

Course-library access, progress tracking, and flexible team seats.

$49per month

.lg-reserve / .sponsorship-cta

Ready to bring training to your team?

Use a strong, contained callout near the end of a journey.

Request information

.lg-training-guide · partials/home-training-guide.php

Download callout

Training implementation guide

Pair a document preview, concise description, file type, and descriptive download action.

View training guide

Homepage sections

These larger production patterns establish rhythm and proof across the homepage. Preserve their existing selectors and partial boundaries when updating content or layout.

Component reference

The status describes how each pattern should be treated in new work. “Core” components are preferred, “specialized” patterns belong to a specific journey, and “legacy” patterns should be maintained but not duplicated without review.

Composition rules

• Use row and column for the established 12-column page grid.
• Use .overlay only with a positioned parent and readable foreground contrast.
• Pair .main-heading with one section topic, not every nested heading.
• Choose FAQ tiles for featured answers and disclosure rows for long answer sets.
• Use .lg-card as a neutral container; use named cards for domain-specific data.
• Preserve real links inside clickable LG Files cards for keyboard and assistive technology support.
• Do not combine pricing, signup, and promotional actions into the same card hierarchy.
• Mark specialized campaign components before copying them into a general-purpose page.

Responsive behavior

• Design the small-screen reading order first.
• Keep touch targets at least 44×44 CSS pixels.
• Avoid horizontal scrolling at 320px width.
• Do not hide important content only to simplify mobile.

Theme package

Liquid template quick reference

Start with these files when changing LearnGlazing-specific Thinkific markup. The .lg-* classes are the stable bridge between the Liquid templates and the compiled Thinkific stylesheet.

<div class="lg-course-card {{ course.status }}">
  <div class="lg-course-card-inner">
    <a href="{{ course.links.landing_page_url }}" class="lg-course-card-img">
      <img src="{{ product_image }}" alt="" class="lg-course-img" loading="lazy">
    </a>

    <div class="lg-course-card-body">
      <ul class="lg-course-card-cat-container">
        {% for collection in course.collections %}
          <li class="lg-course-card-cat" data-id="{{ collection.slug }}">
            {{ collection.name }}
          </li>
        {% endfor %}
      </ul>
      <h3><a href="{{ course.links.landing_page_url }}">{{ course.name }}</a></h3>
    </div>
  </div>
</div>

Cross-platform rules

Collection filters

The Thinkific collection navigation is sticky below the 80px platform header. Filters use compact green-outlined pills on charcoal, with a filled gradient for the active category.

<div class="lg-collection-sticky">
  <nav class="lg-collection-nav" aria-label="Course categories">
    <ul class="lg-collection-list">
      <li class="lg-collection-list-item active" data-id="courses">
        <span>All courses</span>
      </li>
      {% for collection in site.collections %}
        <li class="lg-collection-list-item" data-id="{{ collection.slug }}">
          <span>{{ collection.name }}</span>
        </li>
      {% endfor %}
    </ul>
  </nav>
</div>

Course cards and progress

Glazing systems

Introduction to curtain wall

Learn the terminology, components, and installation sequence used in common curtain wall systems.

View course

Approved for 1 LU/HSW through AIA CES.

In progress

Storefront installation

Continue from Unit 4: Perimeter conditions.

68% complete

Continue course

<article class="lg-course-card student-card">
  <div class="course-card__body">
    <h3 class="course-card__header-title">{{ card.name }}</h3>

    <div
      class="course-card__progress--bar"
      role="progressbar"
      aria-label="Course progress"
      aria-valuenow="{{ card.progress_percentage }}"
      aria-valuemin="0"
      aria-valuemax="100"
    >
      <span
        class="progress__bar"
        style="width: {{ card.progress_percentage }}%"
      ></span>
    </div>

    <p>{{ card.progress_percentage }}% complete</p>
  </div>

  {% if card.collection_slugs contains "aia-credit-for-architects" %}
    <div class="lg-course-card-aia">
      <div>
        <span class="icon-aia-cont-education" aria-hidden="true"></span>
        <p>Approved for 1 LU/HSW through AIA CES.</p>
      </div>
    </div>
  {% endif %}
</article>

Course overview and curriculum

Dashboard, account, and checkout

Thinkific front-end boundaries

• Author structural changes in Thinkific sections and snippets, not generated browser markup.
• Keep Thinkific selectors scoped to stable platform or lg- classes.
• Do not remove Liquid attributes or data hooks required by platform scripts.
• Test signed-out, enrolled, partially complete, complete, and administrator states.
• Compile thinkific.scss independently from the WordPress stylesheet.
• Verify catalog filters and course cards with long titles and zero-result states.
• Check checkout and account pages after every platform theme update.
• Keep platform-specific JavaScript progressive and guard every selector.

.lg-course-card {
  .course-card__progress--bar {
    width: 100%;
    overflow: hidden;
    border-radius: 15px;
    background: $grey-light;
  }

  .progress__bar {
    display: block;
    height: 15px;
    background: linear-gradient(
      144deg,
      $light-green 0%,
      $green 100%
    );
  }
}

Approved and prohibited language

Credit terminology

AIA CES credits must always be written in one of these two formats. Do not substitute "CEU," "PDH," or any other designation. If a course also carries GBCI, RIBA, or other credit, list those separately rather than combining them with LU notation.

Required disclosures on approved courses

Every AIA CES-approved course must prominently display all of the following.

• The AIA CES logo (sourced from the Brandfolder — see Logo below).
• LearnGlazing's assigned AIA CES Provider number.
• The Learning Units and type awarded (e.g. "1 LU|HSW").
• LearnGlazing's contact information as the CES Provider.

For any course sold or offered externally, also disclose in advance:

• Learning objectives
• Delivery method
• Approved LUs and type
• CES approval expiration date
• Prerequisites
• Program level and description
• Registration, refund, cancellation, and complaint policies

Official provider statement

Use this statement verbatim on every approved course page. Fill in LearnGlazing's assigned AIA CES Provider number where indicated.

LearnGlazing is a registered provider of AIA-approved continuing
education under Provider Number [AIA CES PROVIDER NUMBER]. All
registered AIA CES Providers must comply with the AIA Standards for
Continuing Education Programs. Any questions or concerns about this
provider or this learning program may be sent to AIA CES
(cessupport@aia.org or (800) AIA 3837, Option 3).

This learning program is registered with AIA CES for continuing
professional education. As such, it does not include content that
may be deemed or construed to be an approval or endorsement by the
AIA of any material of construction or any method or manner of
handling, using, distributing, or dealing in any material or product.

AIA continuing education credit has been reviewed and approved by
AIA CES. Learners must complete the entire learning program to
receive continuing education credit.

AIA CES logo

AIA CES logo

Course pages & materials · PDF, SVG & EPS

Download

AIA CES approved

Introduction to curtain wall

Learn the components and installation sequence used in common curtain wall systems.

View course

Approved for 1 LU|HSW through AIA CES.

• Use semantic HTML before adding ARIA.
• Provide a visible keyboard focus indicator.
• Maintain 4.5:1 contrast for normal text.
• Associate every input with a persistent label.
• Give images appropriate alternative text.
• Respect reduced-motion preferences.
• Provide captions and transcripts for media.
• Test at 200% zoom and with keyboard only.

<a class="skip-link" href="#main-content">Skip to content</a>

<header>...</header>
<nav aria-label="Primary">...</nav>
<main id="main-content">
  <h1>One page-level heading</h1>
  <section aria-labelledby="courses-heading">
    <h2 id="courses-heading">Featured courses</h2>
  </section>
</main>
<footer>...</footer>

CSS tokens

Component structure

<?php
$title = get_the_title();
$url   = get_permalink();
?>

<article class="course-card">
  <h3 class="course-card__title">
    <a href="<?php echo esc_url( $url ); ?>">
      <?php echo esc_html( $title ); ?>
    </a>
  </h3>
</article>

.course-card {
  padding: size(medium);
  border: 1px solid color(grey-light);
  border-radius: $border-radius;
  background: color(white);

  &__title {
    margin-bottom: size(small);
    font-family: $font-heading;
  }
}

const disclosure = document.querySelector("[data-disclosure]");

if (disclosure) {
  disclosure.addEventListener("click", () => {
    const expanded = disclosure.getAttribute("aria-expanded") === "true";
    disclosure.setAttribute("aria-expanded", String(!expanded));
  });
}

Implementation rules

• Escape dynamic output with the appropriate WordPress function.
• Use BEM-style component classes for new isolated UI.
• Keep selectors shallow and avoid IDs for styling.
• Load page-specific assets conditionally.
• Use native controls and elements wherever possible.
• Test without JavaScript before adding enhancement.
• Optimize and size images to prevent layout shift.
• Do not place secrets or personal data in client code.