AOS Approved Style Reference

This page documents every approved, WCAG-compliant class available for use on AOS pages. Use the class names shown in monospace exactly as written.

Content owner guidance: Only use the styles shown on this page. All color utilities listed here have been verified to meet WCAG AA contrast requirements (4.5:1 minimum for text).

Typography

Headings use Century Gothic, body copy uses the Bootstrap default stack. Default heading color is --faber-green-dark. Use any approved .text-* class to override.

h1 .text-green-dark — Page Title

h1 .text-blue-dark — Page Title

h2 .text-green-dark — Major Section

h2 .text-camel — Major Section

h3 .text-slate — Subdiv

h4 .text-gray — Minor Heading

h4 .text-azure — Minor Heading

Standard body paragraph. Line-height 1.6.

Bold / strong text — uses font-weight: 600.

.firebrick — bold firebrick, reserved for critical warnings only.

Links

Default link — styled with --faber-link-default, underline on hover/focus

.disabled link — prevents clicks, renders muted

Buttons — Solid

btn-green-dark btn-green-mid btn-green-light btn-blue-dark btn-blue-mid btn-blue-light btn-firebrick

Buttons — Outline

btn-outline-green-dark btn-outline-blue-dark btn-outline-firebrick

Button Sizes

btn-lg Default btn-sm

Disabled Buttons

Callout Utilities

Use .aos-callout with a variant modifier. Use sparingly — one or two per page maximum.

.aos-callout-green — Success / Confirmation: Use for positive outcomes or completed actions.

.aos-callout-steel — Informational: Use for general guidance or helpful context.

.aos-callout-azure — Important: Use to draw attention to key information.

.aos-callout-warning — Warning: Use when action may be required before proceeding.

.aos-callout-firebrick — Critical: Use for errors, deadlines, or data-loss risks only.

.aos-callout-slate — Neutral: Use for muted or secondary notices.

.aos-callout-purple — Accent: Use for supplementary or highlighted info.

Bootstrap Alerts

Standard Bootstrap alerts. Use .alert + .alert-* variant. Add .alert-link for styled links inside alerts.

.alert-success — A simple success alert with an example link.

.alert-info — A simple info alert with an example link.

.alert-warning — A simple warning alert with an example link.

.alert-danger — A simple danger alert with an example link.

.alert-primary — A simple primary alert with an example link.

.alert-secondary — A simple secondary alert with an example link.

Resource List Component

Use .resource-list + .resource-item + .resource-link for downloadable files or external links.

Ordered (numbered) Resource List

Background Utilities — Brand Colors

.bg-faber (#1F4423)

.bg-firebrick (#B22222)

.bg-black (#000000)

.bg-blue (#B4C8DF)

.bg-hover (#E2E8F0)

.bg-striped (#FAFAFA)

Background Utilities — Bootstrap

A simple primary alert with an example link. Give it a click if you like.

A simple secondary alert with an example link. Give it a click if you like.

A simple success alert with an example link. Give it a click if you like.

A simple danger alert with an example link. Give it a click if you like.

A simple warning alert with an example link. Give it a click if you like.

A simple info alert with an example link. Give it a click if you like.

A simple light alert with an example link. Give it a click if you like.

A simple dark alert with an example link. Give it a click if you like.

See themes page

Border-Top Accent Utilities

Use .aos-border-top-* on cards or containers for a colored top accent.

.aos-border-top-green

Faber green dark accent.

.aos-border-top-steel

Steel blue accent.

.aos-border-top-azure

Azure blue accent.

.aos-border-top-firebrick

Firebrick red accent.

.aos-border-top-slate

Slate gray accent.

.aos-border-top-purple

Purple accent.

Border-Left Accent Utilities

Use .aos-border-left-* on cards or containers for a colored left accent.

.aos-border-left-green

Faber green dark accent.

.aos-border-left-steel

Steel blue accent.

.aos-border-left-azure

Azure blue accent.

.aos-border-left-firebrick

Firebrick red accent.

.aos-border-left-slate

Slate gray accent.

.aos-border-left-purple

Purple accent.

Card Header Variants

Use .card-header-green, .card-header-blue, or .card-header-subtle rounded.

.card-header-green

Green dark header card.

.card-header-blue

Blue mid header card.

.card-header-subtle rounded

Neutral muted header card.

Sidebar Example .card-header bg-faber bg-opacity-10

Dividers

hr.sidebar-divider — subtle 1px div separator:

.menu-divider — thick decorative divider used before the footer:

Icon Samples

Email icon
Bootstrap.icons Envelope-at
Tags: Contact us, email

Subscription icon
Bootstrap.icons Envelope-check
Tags: Sign up, Subscription, Join

Unsubscribe icon
Bootstrap.icons Envelope-x
Tags: Unsubscribe, remove from list

FIA Icon — Custom Pro (cash-stack-check)
Tags: Fiscal Integrity Act, FIA, money, payment

24 × 24

40 × 40

icon-xl circle — bg-body-tertiary

Text Colors

All pass WCAG AA (4.5:1) on white unless noted.

.text-green-dark — #1F4423

.text-green-mid — #3D4A3D

.text-green-light — #5C715C

.text-blue-dark — #203D64

.text-azure — #0171AB

.text-steel — #2B6AA0

.text-slate — #384452

.text-firebrick — #B22222

.text-dark-red — #780000

.text-camel — #8A6535

.text-gray — #5D5D5D

.text-gray-disabled — #6C7480

.text-gray-inactive — #767676

.text-link — #0259D3

.text-link-hover — #0654C3

Badges

AOS custom training badges:

bg-inperson bg-hybrid bg-onDemand

Bootstrap .badge + text-bg-* variant:

text-bg-primary text-bg-secondary text-bg-success text-bg-danger text-bg-warning text-bg-info text-bg-light text-bg-dark

Icon Colors

Use .icon-* or .text-icon-* classes.

.icon-firebrick — #B22222

.icon-dark-orange — #C46A00

.icon-amber — #7A5800

.icon-amber-earth — #8A6200

.icon-bright-green — #28A745

.icon-pacific-blue — #0D7A8A

.icon-purple-rain — #6F42C1

.icon-camel — #8A6535

.icon-piggy-bank — #9E4A26

Icons

Font Awesome Pro v6 + Bootstrap Icons reference.

Font Awesome

Sizing Reference

Relative:
fa-xs, fa-sm, fa-lg, fa-xl, fa-2xl

Scaling:
fa-2x → fa-10x

🔎 Search Icons 📘 Size Docs

Bootstrap Icons