Skip to main content

Brand Guidelines

Why is Brand Important?

A consistent brand builds recognition, trust, and credibility. It shapes perceptions, influences how the district is viewed in terms of academic excellence, inclusivity, and innovation, and can even impact student enrollment, partnerships, and funding opportunities.

When a brand is consistent in its messaging, visual identity, and tone, it becomes easily recognizable, allowing audiences to form clear associations with its values and offerings. For organizations like school districts, it ensures that every communication, from websites to newsletters, reinforces the district’s mission, culture, and commitment to excellence.

How to Use the Brand Guide

Our district has developed brand guidelines as a strategic step to ensure brand uniformity. When creating print or online marketing materials, please refer to these guidelines, so that together, we can continue to build a stronger, consistent brand presence.

Colors

These are our approved brand colors. Please do not deviate from this color palette.
 

 

      #6D2A29

Maroon

  • Primary
  • Pairs with white text (#FFFFFF)

 

      #F2F3F3

Light Grey

  • Accent
  • Pairs with black text (#000000)

      #4B1010

Dark Maroon

  • Secondary
  • Pairs with white text (#FFFFFF)

 

      #999999

Medium Grey

  • Accent
  • Pairs with black text (#000000)

      #D0CABF

Khaki

  • Accent
  • Pairs with black text (#000000)

 

      #000000

Black

  • Accent
  • Pairs with white text (#FFFFFF)

Custom Web Components & Code Patterns

Card Component

Use the card component to group related information, links, or calls to action. Card styles are controlled through a base class and optional modifier classes.

CSS Location

The card CSS is currently contained in the shared component titled Safety Hub custom CSS. The component is located on the Campus Safety Hub page .

Basic Structure

Place cards inside an otc-card-grid. Add a column modifier to create a two- or three-column layout. 

<div class="otc-card-grid otc-card-grid--3">
  <section class="otc-card">
    <h3 class="otc-card__title">Card heading</h3>

    <p>Card content goes here.</p>
  </section>
</div>

Grid Classes

Class Purpose
otc-card-grid Required grid wrapper for one or more cards.
otc-card-grid--2 Displays cards in two columns on larger screens.
otc-card-grid--3 Displays cards in three columns on larger screens.
otc-card-grid--aligned Aligns the title, body, and link rows across neighboring cards. Cards using this option must follow the aligned-card structure shown below.

Two- and three-column grids automatically become one column on smaller screens.

Card Classes

Class Purpose
otc-card Required base card class. Provides padding, a gray border, and rounded corners.
otc-card--surface Adds a light-gray background.
otc-card--top-accent Adds the navy accent bar across the top of the card.
otc-card--full Makes a card span every column in a multi-column grid.

Modifier classes may be combined:

<section class="otc-card otc-card--surface otc-card--top-accent">
  ...
</section>

Content Classes

Class Purpose
otc-card__title Styles the card heading.
otc-card__icon Styles an optional Font Awesome icon above the heading.
otc-card__body Identifies the card description when using aligned cards.
otc-card__links Creates a list of full-width link rows with separators and chevrons.

Live Examples

Default Cards

These cards use only the base card class. They have gray borders, transparent backgrounds, and no top accent.

First Card

This is basic placeholder text for a default card.

Second Card

Cards in the same grid may contain different amounts of text.

Third Card

The grid automatically changes to one column on smaller screens.

Cards with Surface and Top Accent

These cards combine the light-gray surface and navy top-accent modifiers.

Example Category

Another Category

Reports and Policies

Aligned Cards

These cards use matching title, body, and link rows. The rows align across the grid even when the headings or descriptions have different lengths.

A Longer Example Card Heading

This description contains a little more placeholder text than the descriptions in the other cards.

Example Support Resource

Use this area for a brief explanation of the linked resource.

Default Card

The default card has a gray border, a transparent background, and no navy top accent. 

<div class="otc-card-grid otc-card-grid--3">
  <section class="otc-card">
    <h3 class="otc-card__title">Bring Photo Identification</h3>

    <p>
      Bring a valid government-issued photo ID to present during check-in.
    </p>
  </section>
</div>

Card with a Light Background

<section class="otc-card otc-card--surface">
  <h3 class="otc-card__title">Card heading</h3>

  <p>Card content goes here.</p>
</section>

Card with a Navy Top Accent

<section class="otc-card otc-card--top-accent">
  <h3 class="otc-card__title">Card heading</h3>

  <p>Card content goes here.</p>
</section>

Card with an Icon

Add the shared icon class to a Font Awesome icon. Decorative icons should include aria-hidden="true".

Example Icon Card

This is a live example of a card with a decorative Font Awesome icon. 

<section class="otc-card">
  <i
    class="fas fa-id-card otc-card__icon"
    aria-hidden="true"
  ></i>

  <h3 class="otc-card__title">Bring Photo Identification</h3>

  <p>
    Bring a valid government-issued photo ID to present during check-in.
  </p>
</section>

Card with Link Rows

Use an unordered list with the otc-card__links class. Each link becomes a full-width row with a separator and right-facing chevron. 

<section class="otc-card otc-card--top-accent">
  <h3 class="otc-card__title">Reporting &amp; Support</h3>

  <ul class="otc-card__links">
    <li>
      <a href="/campus-safety-reporting">
        Reporting a Concern
      </a>
    </li>
    <li>
      <a href="/safety-contacts">
        Safety Contacts
      </a>
    </li>
  </ul>
</section>

Aligned Cards

Use aligned cards when neighboring cards have a heading, description, and link list that should begin at matching vertical positions.

Add otc-card-grid--aligned to the grid. Each card must contain these three direct children in this order:

  1. A heading with otc-card__title.
  2. A description with otc-card__body.
  3. A list with otc-card__links.
<div class="otc-card-grid otc-card-grid--3 otc-card-grid--aligned">
  <article class="otc-card otc-card--top-accent">
    <h3 class="otc-card__title">
      Mental health and referral support
    </h3>

    <p class="otc-card__body">
      Find mental-health information, referral assistance, and support
      services.
    </p>

    <ul class="otc-card__links">
      <li>
        <a href="#">Mental Health Resources</a>
      </li>
    </ul>
  </article>

  <article class="otc-card otc-card--top-accent">
    <h3 class="otc-card__title">
      Campus contacts
    </h3>

    <p class="otc-card__body">
      Connect with a campus contact who can help identify the appropriate
      resource.
    </p>

    <ul class="otc-card__links">
      <li>
        <a href="#">View Safety Contacts</a>
      </li>
    </ul>
  </article>
</div>

Full-Width Card

Add otc-card--full when a card should span both columns of a two-column grid or all three columns of a three-column grid. 

<div class="otc-card-grid otc-card-grid--2">
  <article class="otc-card otc-card--top-accent otc-card--full">
    <h3 class="otc-card__title">Not sure where to start?</h3>

    <p>
      These contacts can help you identify the appropriate resource.
    </p>
  </article>
</div>

Usage Notes

  • Use the heading level appropriate to the page structure. The heading does not have to be an h3; the otc-card__title class controls its visual style.
  • Omit otc-card--surface when the card should have a transparent background.
  • Omit otc-card--top-accent when the card should have only the standard gray border.
  • Use otc-card-grid--aligned only when cards follow the required title, body, and links structure.