Durham FM Association

Design System & Style Guide — dfma-master.css

Design Tokens

Color Palette

Navy

#0d1b35

–navy

Navy Mid

#162344

–navy-mid

Navy Light

#1e3a6e

–navy-light

Gold Warm

#e8c87a

–gold-warm

Gold Bright

#f0d080

–gold-bright

Gold

#C8961A

–gold

Blue Muted

#7a9cc4

–blue-muted

Text Body

#445566

–text-body

Text Muted

#7a8fa8

–text-muted

Border

#e4e8ef

–border

Surface

#f7f9fb

–surface

White

#ffffff

page bg

CSS Variables

/* :root in dfma-master.css */
–gold: #C8961A;
–gold-warm: #e8c87a;
–gold-bright: #f0d080;
–navy: #0d1b35;
–navy-mid: #162344;
–navy-light: #1e3a6e;
–blue-muted: #7a9cc4;
–text-body: #445566;
–text-muted: #7a8fa8;
–border: #e4e8ef;
–surface: #f7f9fb;
–font-display: ‘Inter’, Helvetica, sans-serif;
–font-body: ‘Inter’, Helvetica, sans-serif;
–font-mono: ‘Source Code Pro’, ‘Courier New’, monospace;

Typography

Inter / 28px / 800

Page Title — Durham FM Association

Inter / 38px / 800 / gold on navy

Hero Title

Inter / 16px / 700

Section Title — Meetings & Events

Inter / 13px / body

Body text — The Durham FM Association (DFMA) is an amateur radio club centered in Durham, NC, with members from all over the Raleigh–Durham Triangle.

Inter / 12px / muted

Supporting text — Est. 1971 · ARRL Affiliated · Durham, NC

Source Code Pro / 13px / navy

145.450– · PL 82.5 · W4FK · NC4CD

9px / 700 / uppercase label

Section Label

10px / 700 / eyebrow

About the Club

Label Pill

Used as section headers throughout all pages. .section-label, .col-label, .col-heading all share the same styles.

About the club
Get involved
Repeaters
Emergency communications
Encouraged
Unacceptable

<span class=“section-label”>About the club</span>
<span class=“section-label label-green”>Encouraged</span>
<span class=“section-label label-red”>Unacceptable</span>

Buttons

Primary — .btn-gold

<button class=“btn-gold”>Join the Club</button>
<a class=“btn-gold” href=“…”>Learn More →</a>

Ghost — .btn-outline (dark bg)

<button class=“btn-outline”>Contact Us</button>

Download — .dl-btn

Membership Form

<a class=“dl-btn” href=“…”>
<svg …></svg> Membership Form
</a>

Callout Boxes

.callout (amber — default)

July note: Bullock’s closes two weeks in July — alternate arrangements are made that month.

.callout.safety / .note.warn (red)

Report any injury immediately. Band Captains keep a fire extinguisher at each position.

.highlight-box

Newly licensed hams get their first year free — sign up at any meeting.

.mail-alert + .no-cash

Our mailing address has changed

Durham FM Association
P.O. Box 2494
Durham, NC 27715

DO NOT SEND CASH

<div class=“callout”>Amber callout</div>
<div class=“callout safety”>Red / safety callout</div>
<div class=“highlight-box”>Gold highlight</div>
<div class=“mail-alert”>…</div>
<div class=“no-cash”><p>DO NOT SEND CASH</p></div>

Tags & Monospace Pills

Tag variants

General
IRLP 4441
DMR
UNC-TV Tower
Skywarn

Frequency & command pills

145.450–
PL 82.5

* 919 555-1234
#

W4FK
NC4CD
KD4YJZ

<span class=“tag”>General</span>
<span class=“tag tag-link”>IRLP 4441</span>
<span class=“tag tag-dmr”>DMR</span>
<span class=“tag tag-sky”>Skywarn</span>
<span class=“freq-pill”>145.450–</span>
<span class=“pl-pill”>PL 82.5</span>
<span class=“cmd”>* 911</span>
<span class=“o-call”>W4FK</span>

Layout Grids

.two-col

Left column

Content goes here.

Right column

Content goes here.

.three-col

One

Content.

Two

Content.

Three

Content.

.stat-row (4 columns)

1971

Founded

$12

Annual dues

Repeater sites

Free

New ham · 1st year

<div class=“stat-row”>
<div class=“stat”><div class=“stat-val”>1971</div><div class=“stat-label”>Founded</div></div>
</div>

Tables

Frequency	Offset	PL	Features
▸Durham — TV Hill
145.450	−	82.5	IRLP 4441 EchoLink
444.100	+	82.5	—

<table class=“dfma-table”>
<thead><tr><th>Frequency</th>…</tr></thead>
<tbody>
<tr class=“loc-row”><td colspan=”4″><span>▸</span>Location</td></tr>
<tr><td class=“freq”>145.450</td><td class=“offset-minus”>−</td>…</tr>
</tbody>
</table>

Components

Page Hero

About the club

Introduction to the DFMA

Amateur radio club serving Durham & the Triangle since 1971. ARRL affiliated.

<div class=“page-hero”>
<div class=“hero-eyebrow”>Section name</div>
<div class=“hero-title”>Page Title</div>
<div class=“hero-body”>Optional subtitle.</div>
</div>

Freq Bar

Listen on

224.260 MHz

Negative offset

Transmit on

222.660 MHz

No PL tone

Network

AllStarLink

Node 46870

Numbered Steps

1

ID with your callsign.
2

Press PTT and dial * 919 XXX-XXXX without releasing PTT mid-sequence.
3

To disconnect: press #, then ID.

CTA Strip / Footer Band

Ready to join? Membership is open to all license classes — newly licensed hams get their first year free.

<div class=“cta-strip”>
<div class=“cta-text”><strong>Ready to join?</strong> …</div>
<button class=“btn-gold”>Join / Renew</button>
<button class=“btn-outline”>Contact Us</button>
</div>

Accordion

10/2024 – 7/2025 President: Bob Cook W4FK

Expanded content goes here.

8/2023 – 7/2024 President: Bob Cook

This one is open by default.

Net Item Card

Thursdays — 8 PM

DFMA Thursday Net

145.450–
PL 82.5
WR4AGC

<div class=“net-item”>
<div class=“net-item-day”>Thursdays — 8 PM</div>
<div class=“net-item-title”>DFMA Thursday Net</div>
<div class=“net-item-freq”>
<span class=“freq-pill”>145.450–</span>
<span class=“pl-pill”>PL 82.5</span>
</div>
</div>

Officer Row

PresidentBob CookW4FK

Vice PresidentMatthew StaffordKQ4ZYW

AuxComm ECvacant

<div class=“officer-row”>
<span class=“o-role”>President</span>
<span class=“o-name”>Bob Cook</span>
<span class=“o-call”>W4FK</span>
</div>

Pricing Cards

Individual

$12

per year

That’s $1/month

+ 1 family

$18

per year

Same address

+ 2 family

$24

per year

+ 3 family

$30

per year

Check List (Code of Conduct)

Using welcoming and inclusive language
Trolling, insults, or personal attacks

New Ham Band

New hams — free!

Just got your license? Your first year with the DFMA is on us. Fill out the membership form and show up to a meeting.

Term Banner + Past Presidents

2020–present

Bob Cook

W4FK

2021–2023

Lenore Hill

KF4PAB

2016–2019

Dee Ramm

KU4GC

Page Patterns

Every content page follows the same structural pattern. Mix and match sections as needed.

Standard page structure

<!– 1. Always starts with hero –>
<div class=“page-hero”>
<div class=“hero-eyebrow”>Section name</div>
<div class=“hero-title”>Page Title</div>
<div class=“hero-body”>Optional subtitle.</div>
</div>

<!– 2. Optional stat row –>
<div class=“stat-row”>…</div>

<!– 3. Content sections –>
<div class=“section”>
<div class=“section-label”>Label</div>
<div class=“section-title”>Title</div>
<div class=“section-body”>Content.</div>
</div>

<!– 4. Two or three column grids –>
<div class=“two-col”>
<div class=“col”>…</div>
<div class=“col”>…</div>
</div>

<!– 5. Always ends with CTA strip –>
<div class=“cta-strip”>
<div class=“cta-text”>…</div>
<button class=“btn-gold”>Action</button>
</div>

Known theme conflicts & fixes

/* Theme injects svg { max-width: 100% } — constrain all custom SVGs */
.cc-icon svg, .icon-dot svg, .perk-icon svg,
.dl-btn svg, .script-btn svg {
width: 16px !important; height: 16px !important;
max-width: 16px !important; max-height: 16px !important;
}

/* Theme nukes display:flex — restore for grid/flex containers */
.check-list li { display: flex !important; flex-direction: row !important; }
.freq-bar { display: flex !important; flex-direction: row !important; }

WordPress implementation notes

All CSS lives in Appearance → Customize → Additional CSS
Page content is pasted into Custom HTML blocks — no page builder needed
This styleguide page requires the Full Width page template (Page Attributes → Template)
Tribe Events calendar overrides are in Section 6 of the master CSS
Header image: 1260×240px — upload via Appearance → Customize → Header Image
PayPal form: action and name="os0" values must not be modified
The * { box-sizing } reset appears once at the top of the master CSS only

Durham FM Association — The Bull City Repeater — Durham, NC — Est. 1971

145.450– · PL 82.5 · WR4AGC

Durham FM Association

DFMA Styleguide

Durham FM Association

Durham's Ham Radio Club