Colors

Refer to colors by slug. CSS variable is var(--wp--preset--color--<slug>). Tailwind-like utility classes also exist: .has-<slug>-background-color and .has-<slug>-color.

primary · #5B2D8E var(--wp--preset--color--primary)

Brand purple — headlines, primary buttons

primary-dark · #3F1F63 var(--wp--preset--color--primary-dark)

Hover / announcement bar / footer

primary-light · #F3EDF8 var(--wp--preset--color--primary-light)

Soft purple background

loans-green · #2E7D32 var(--wp--preset--color--loans-green)

Loan-themed pages

gold · #F2B705 var(--wp--preset--color--gold)

Eyebrow / accent

orange · #E8820C var(--wp--preset--color--orange)

Warmth accent

dark · #1A1A1A var(--wp--preset--color--dark)

Body headings

body-text · #444444 var(--wp--preset--color--body-text)

Default body copy

border · #E0E0E0 var(--wp--preset--color--border)

Card / table borders

white · #FFFFFF var(--wp--preset--color--white)

Backgrounds

Spacing

Use as var(--wp--preset--spacing--<slug>). Slugs are size-ordered.

10 4px

tight gap

20 8px

small gap

30 16px

standard inline padding

40 24px

section side padding

50 32px

section header bottom margin

60 48px

medium section vertical

70 64px

large section vertical

80 96px

extra-large section vertical

Typography

Display = DM Sans (variable, opsz 9-40). Body = Inter. Sizes available as var(--wp--preset--font-size--<slug>).

0.75rem · 12px

Eyebrow / disclaimer copy

0.875rem · 14px

Small body / nav links

1rem · 16px

Default body

1.125rem · 18px

Lede / card title

1.5rem · 24px

Section h3

1.75rem · 28px

Section h2

2.25rem · 36px

Page title

clamp(2.25rem, 4.2vw, 3.25rem) · responsive

Hero h1

Buttons

All buttons are pills (border-radius: 50px). The brand button is filled purple; secondaries are outlines.

DEMO · primary · outline · textthree variants

Become a Member

Apply Now

Learn More

// Primary (filled brand purple)
<div class="wp-block-button">
  <a class="wp-block-button__link has-primary-background-color has-background wp-element-button"
     style="border-radius:50px"
     href="…">Become a Member</a>
</div>

// Outline (transparent + 2px border)
<div class="wp-block-button is-style-outline">
  <a class="wp-block-button__link wp-element-button" …>Apply Now</a>
</div>

// Text link (underlined header style)
<a class="header-become-member" href="…">Learn More</a>

Page themes

Body class is set automatically from the page slug — see aofcu_classic_page_theme_body_class() in functions.php.

Each theme overrides the --wp--preset--color--primary / primary-dark / primary-light custom properties at the <body> level, so every component that uses those tokens picks up the theme automatically.

theme-banking

Blue — accounts

checking, savings, certificates, money market, web banking, zelle #2E5EA1

theme-loans

Green — borrowing

vehicle, personal, signature, share-secured, home-equity, credit cards #2E7D32

theme-info

Purple — info

membership, staff, board, locations, contact, forms (default) #5B2D8E

Section parts

Static patterns you compose into a page by writing HTML around the listed wrapper class. The class name is the part name.

hero-banner Homepage hero

Full-bleed cover image with a white card overlaying the right side. Mobile stacks the card on top of the image.

DEMOimage + right-aligned content card

<div class="wp-block-group scallop-top">
  <div class="wp-block-cover hero-banner has-primary-light-background-color has-background"
       style="min-height:360px;border-radius:12px">
    <img class="wp-block-cover__image-background" src="…hero.jpg"
         style="object-position:27% 12%" />
    <div class="wp-block-cover__inner-container">
      <div class="wp-block-columns are-vertically-aligned-center">
        <div class="wp-block-column" style="flex-basis:55%"></div>
        <div class="wp-block-column" style="flex-basis:45%">
          <div class="wp-block-group has-white-background-color">
            <h2>Headline</h2><p>…</p><a class="wp-block-button__link">CTA</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

product-hero Product / loan page hero

Top-of-page banded hero with eyebrow, title, intro, and a button pair. Full-bleed image as a background.

DEMOeyebrow + h1 + lede + 2 buttons

Loan Products

Vehicle Loans

Get behind the wheel with competitive rates on new and used vehicles, motorcycles, boats, and RVs. Flexible terms designed to fit your budget.

Apply Now

Calculate Payment

<div class="wp-block-group product-hero has-background"
     style="background-image:url('….jpg');background-size:cover;padding:var(--wp--preset--spacing--70) var(--wp--preset--spacing--40)">
  <p class="has-primary-color has-text-color"
     style="font-size:0.75rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase">Loan Products</p>
  <h1>Vehicle Loans</h1>
  <p class="product-hero__lede">Get behind the wheel…</p>
  <div class="wp-block-buttons">…</div>
</div>

page-header Compact info-page header

Small banded header with eyebrow + h1 + optional intro. Used on info pages (membership, staff, board, locations).

DEMOcentered, no image

<header class="page-header"
        style="background:var(--wp--preset--color--primary);padding:var(--wp--preset--spacing--70) var(--wp--preset--spacing--40)">
  <p>EYEBROW</p><h1>Meet Our Team</h1><p>Optional intro.</p>
</header>

product-cards Four-up linked cards

Available accents: .card-accent-purple, .card-accent-blue, .card-accent-teal.

DEMO4-column row

Share Checking

Free checking with no monthly fees.

Primary Savings

Start building your savings with dividends.

Certificates

Lock in great rates for a fixed term.

Money Market

Higher dividends with check-writing access.

features-grid 1 + 3 + 3 feature grid

One wide feature on top (image + copy, 55/45 columns), then two rows of three smaller cards. Used for Membership Benefits.

DEMOfull 1 + 3 + 3 layout

Membership Benefits

What you get the moment your name is on the share account.

People who know your name

We're not a call center. When you walk into a branch or pick up the phone, you're talking to people who live in town and remember the conversation you had last week. That's a different kind of banking — and it's the part you can't put on a rate sheet.

[ image ]

Share savings with dividends

Open with $25 to establish your membership. Every balance earns dividends, compounded monthly.

Free checking, no minimums

No monthly fee, no minimum balance, no hoops. Banking the way it should be.

Free Visa debit card

Tap, swipe, or dip anywhere Visa is accepted. Surcharge-free CO-OP ATMs nationwide.

Low-rate loans across the board

Vehicles, personal needs, home equity, share-secured — our member-owned model means rates that beat the typical bank.

Online & mobile banking + Bill Pay

Manage accounts from your phone or laptop. Schedule bill payments, deposit checks, monitor swipes — all free.

Federally insured to $250,000

Your deposits are insured by the NCUA — the same federal protection as a bank, with the credit-union perks layered on.

<div class="wp-block-group features-grid">
  <h2>Membership Benefits</h2>
  <p>Optional intro paragraph.</p>

  // Row 1 — large feature with image
  <div class="wp-block-group feature-card feature-card-large">
    <div class="wp-block-columns are-vertically-aligned-center">
      <div class="wp-block-column" style="flex-basis:55%">
        <h3>Headline</h3><p>…</p>
      </div>
      <div class="wp-block-column" style="flex-basis:45%">
        <figure class="wp-block-image"><img …></figure>
      </div>
    </div>
  </div>

  // Rows 2 + 3 — three feature cards each
  <div class="wp-block-columns">
    <div class="wp-block-column">
      <div class="wp-block-group feature-card is-vertical">
        <h3>…</h3><p>…</p>
      </div>
    </div>
    // …two more wp-block-column siblings…
  </div>
</div>

numbered-steps Numbered process

Three or four numbered steps with a dashed connector between. For onboarding flows.

DEMO3 steps

1

Open an account

A $25 deposit gets you membership.

2

Set up Web Banking

Manage everything online or in the app.

3

Take advantage

Lower-rate loans, free checking, and more.

cta-become-member Full-width close-out CTA

Use at the bottom of product / info pages.

DEMOfull-width band with single CTA

Ready to join?

Become a Member Today

Open an Account

framed-cta Mid-page emphasis card

Bordered light card on a soft background. CSS forces dark headline + grey body so colour overrides don't apply — pair it with light backgrounds.

DEMOcopy-only variant on light surface

Why a credit union?

Banking Is Broken. Affinity One Won't Leave You In Pieces.

As a member-owned cooperative, every decision we make puts your financial well-being first.

Join Affinity One

<div class="wp-block-group framed-cta"
     style="background:#fff;border:1px solid var(--wp--preset--color--border);border-radius:12px;padding:2.5rem">
  <p class="has-primary-color has-text-color"
     style="font-size:0.75rem;font-weight:700;letter-spacing:0.12em;text-transform:uppercase">Eyebrow</p>
  <h2>Headline copy here.</h2>     // CSS forces dark color + clamp(1.5rem, 3vw, 2rem)
  <p>Intro paragraph.</p>            // CSS forces body-text color + 1rem
  <div class="wp-block-buttons">…</div>
</div>

Dynamic sections

Each is loaded with get_template_part('template-parts/sections/<name>', null, [...]). In page content, write the equivalent [aofcu_<name>] marker — the the_content filter in inc/page-sections.php swaps it for the rendered output.

testimonials-slider Member quotes Swiper

Reads from the Testimonials CPT. Wrap in a purple group for the homepage treatment.

DEMO3-column slider on dark bg

I have been a member for 30 years and have taken many loans out through the credit union and also have a VISA through them. Have always had amazing service. Everyone is helpful. And I have always gotten very fast loans. I would not go anywhere else for a loan!
Matt Finnerty
Member for 30 years
I have been a customer of Affinity One FCU for about 15 years now and they have been fantastic with any transaction that I have had. I have recently applied for loans through them and the process was so quick and easy and their rates can not be beat. I highly recommend them for all of your banking needs.
Tina Best
Office Manager, I-86 Truck & Auto Service
Member for 15 years
My Husband and I have been members at the Credit Union for many years. Anytime I have to do any of my banking or an issue arises, I am treated with a smile and the upmost respect. They go out of their way to help me. We are treated like Family and that means a lot!
Maria C. Gullotti
Long-time member

// In page content:
[aofcu_testimonials_slider per_page="12"]

// In a PHP template:
get_template_part('template-parts/sections/testimonials-slider', null, [
  'per_page' => 12,  // default
]);

rates-slider Compact rate-tile Swiper

Use on the homepage to surface a few rates without a full table.

DEMO3 tiles, all rate types

3.99%
As low as
24 mo
New Vehicle
2.5%
6-11 mo
Certificate
0.125%
$0.01-$999.99 mo
Money Market

// In page content:
[aofcu_rates_slider type="" per_page="10"]

// In a PHP template:
get_template_part('template-parts/sections/rates-slider', null, [
  'type'     => '',        // rate_type slug, '' = all
  'per_page' => 10,
]);

rates-table Term / Rate (/ APY) table

Two variants — plain (Term / Rate) and with-APY (Term / Rate / APY).

DEMO · plainnew-vehicle rates

Term Rate as Low As

24 mo 3.99%

36 mo 3.99%

48 mo 3.99%

60 mo 4.75%

72 mo 4.75%

84 mo 5.25%

DEMO · with-apycertificate rates with APY column

Term Rate APY

6-11 mo 2.5% 2.5%

12-23 mo 2.5% 2.5%

24-35 mo 2.5% 2.5%

36-47 mo 2.5% 2.5%

48-59 mo 2.5% 2.5%

60 mo 2.5% 2.5%

12 mo (Promo only. $5,000 minimum deposit. Subject to end at any time without notice.) 3% 3%

// In page content:
[aofcu_rates_table type="new-vehicle"]
[aofcu_rates_table type="certificate" with_apy="true"]

// In a PHP template:
get_template_part('template-parts/sections/rates-table', null, [
  'type'      => 'new-vehicle',  // required, rate_type slug
  'first_col' => 'term',         // 'term' | 'type' | 'balance'
  'with_apy'  => false,          // adds APY column
  'per_page'  => -1,             // all matching rates
]);

staff-grid Team portraits

DEMO3-column grid, first 3 staff

Samantha Bergey

Chief Executive Officer
sbergey@affinityonefcu.org
Hunter Peterson

Chief Operations Officer
hpeterson@affinityonefcu.org
Bridgette Smith

Chief Financial Officer
bsmith@affinityonefcu.org

[aofcu_staff_grid columns="3" per_page="100" offset="0" feed="leadership"]

get_template_part('template-parts/sections/staff-grid', null, [
  'columns'  => 3,    // 1-4
  'per_page' => 100,
  'offset'   => 0,    // skip N — e.g. leadership=first 3, rest=offset 3
  'feed'     => 'leadership', // content_feed slug(s), comma-separated; blank = all
]);

board-grid Board members

DEMO3-column grid, first 3 members

Timothy Adam

President
Walter “Bob” Morris

Vice-President
John Manno

Secretary/Treasurer

[aofcu_board_grid columns="3"]

get_template_part('template-parts/sections/board-grid', null, [
  'columns'  => 3,
  'per_page' => 100,
  'offset'   => 0,
]);

locations-grid Branch cards

DEMO2-column branch grid

Jamestown Branch

545 E. Second St
Jamestown, NY 14701
Phone: (716) 483-2798
Fax: (716) 483-6136
Hours
- Monday: 8:30 AM – 4:00 PM
- Tuesday: 8:30 AM – 4:00 PM
- Wednesday: 8:30 AM – 4:00 PM
- Thursday: 8:30 AM – 5:00 PM
- Friday: 8:30 AM – 5:00 PM
- Saturday: Closed
- Sunday: Closed
Lakewood Branch

10 Sessions Ave
Lakewood, NY 14750
Phone: (716) 483-2265
Fax: (716) 483-2266
Hours
- Monday: 8:30 AM – 4:00 PM
- Tuesday: 8:30 AM – 4:00 PM
- Wednesday: 8:30 AM – 4:00 PM
- Thursday: 8:30 AM – 5:00 PM
- Friday: 8:30 AM – 5:00 PM
- Saturday: 9:00 AM – 12:00 PM (DRIVE THRU ONLY)
- Sunday: Closed
ATM Available 24/7 · Night Drop Access 24/7

[aofcu_locations_grid]

get_template_part('template-parts/sections/locations-grid', null, [
  'columns'  => 2,    // 1-4, default 2
  'per_page' => 100,
]);

latest-news Recent posts grid

DEMO3 most-recent posts

[aofcu_latest_news per_page="3" category=""]

get_template_part('template-parts/sections/latest-news', null, [
  'per_page' => 3,
  'category' => '',   // category slug to filter by
]);

Page recipes

Existing page templates you can reference as a starting point.

Template	File	Sections (in order)
Homepage	`front-page.php`	hero-banner → rates-slider → product-cards → features-grid (Membership Benefits) → testimonials-slider → framed-cta (Banking Is Broken) → digital-banking → latest-news → security
Product page	(page.php + post content)	product-hero → rates-table (one or more) → feature-cards → cta-become-member
Info page	(page.php + post content)	page-header → prose / numbered-steps / membership-eligibility → dynamic grid (staff-grid / board-grid / locations-grid) → cta-become-member
Single post	`single.php`	featured image (unless toggled off) → title + meta → the_content
Archive / Blog	`archive.php`, `index.php`	archive title → loop of post cards (thumb + title + excerpt) → pagination
Styleguide	`page-styleguide.php`	This page

Example asks

Phrasing that will get you exactly what you want.

"Build a /credit-cards/ page: product-hero titled 'Credit Cards', loans-green theme, eyebrow 'Loan Products', with this image and an Apply Now button — then a rates-table for credit-card with APY — then a 3-up feature-cards row about rewards / no annual fee / fraud protection — then a cta-become-member."

"Add a 'Holiday Hours' section to the homepage between the testimonials and the framed-cta: just a centered eyebrow + h2 + paragraph, no dynamic data."

"Make the board-of-directors page show officers (first 3) in a row, then a horizontal rule, then the rest of the directors. Use board-grid twice — first with per_page=3, second with offset=3."

"Branding tweak: make the announcement bar use gold background with primary-dark text instead of the current purple."

"Add a 'Newsletters' latest-news section to the homepage, filtered to the newsletters category, showing 4 posts."

AOFCU Classic Styleguide