Rural AM/FM Style Guide¶

Brand styling derived from ruralamfm.com - a professional radio advertising platform focused on political campaigns.

Brand Essence¶

Tagline: "Deeper Message Penetration"

Brand Personality: - Professional and corporate - Clean and modern - Content-focused, minimal decoration - Trustworthy and authoritative - Radio/broadcasting heritage

Target Audience: Political campaigns, media buyers, advertisers

Color Palette¶

Primary Colors¶

Name	Hex	Tailwind	Usage
Charcoal	`#32373c`	`gray-800`	Primary text, headers, nav
White	`#ffffff`	`white`	Backgrounds, cards
Black	`#000000`	`black`	Strong emphasis

Accent Colors¶

Name	Hex	Tailwind	Usage
Radio Blue	`#0693e3`	`blue-500`	Links, buttons, CTAs
Sky Blue	`#38bdf8`	`sky-400`	Hover states, highlights
Slate	`#64748b`	`slate-500`	Secondary text, icons

Semantic Colors¶

Name	Hex	Tailwind	Usage
Success	`#22c55e`	`green-500`	Confirmations, positive
Warning	`#f59e0b`	`amber-500`	Alerts, cautions
Error	`#ef4444`	`red-500`	Errors, destructive
Info	`#3b82f6`	`blue-500`	Information

CSS Variables¶

:root {
    --primary-color: #32373c;      /* Charcoal - main brand color */
    --secondary-color: #0693e3;    /* Radio Blue - accent */
    --accent-color: #38bdf8;       /* Sky Blue - highlights */
    --text-color: #374151;         /* Gray 700 - body text */
    --text-muted: #6b7280;         /* Gray 500 - secondary text */
    --background: #ffffff;         /* White - main background */
    --surface: #f8fafc;            /* Slate 50 - cards, panels */
    --border: #e5e7eb;             /* Gray 200 - borders */
}

Typography¶

Font Stack¶

Primary (Headings):

font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
             "Helvetica Neue", Arial, sans-serif;

Body Text:

font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
             Roboto, sans-serif;

Type Scale¶

Element	Size	Weight	Line Height	Tailwind
H1	2.25rem (36px)	700	1.2	`text-4xl font-bold`
H2	1.875rem (30px)	600	1.25	`text-3xl font-semibold`
H3	1.5rem (24px)	600	1.3	`text-2xl font-semibold`
H4	1.25rem (20px)	500	1.4	`text-xl font-medium`
Body	1rem (16px)	400	1.5	`text-base`
Small	0.875rem (14px)	400	1.5	`text-sm`
Caption	0.75rem (12px)	400	1.4	`text-xs`

Components¶

Buttons¶

Primary Button:

<button class="bg-blue-500 hover:bg-blue-600 text-white font-medium
               px-4 py-2 rounded-md transition-colors">
    Primary Action
</button>

Secondary Button:

<button class="bg-white hover:bg-gray-50 text-gray-700 font-medium
               px-4 py-2 rounded-md border border-gray-300 transition-colors">
    Secondary Action
</button>

Danger Button:

<button class="bg-red-500 hover:bg-red-600 text-white font-medium
               px-4 py-2 rounded-md transition-colors">
    Delete
</button>

Cards¶

<div class="bg-white rounded-lg border border-gray-200 shadow-sm p-6">
    <h3 class="text-lg font-semibold text-gray-800 mb-2">Card Title</h3>
    <p class="text-gray-600">Card content goes here.</p>
</div>

Top Navigation:

<nav class="bg-gray-800 text-white px-4 py-3">
    <div class="flex items-center justify-between">
        <span class="font-bold text-xl">Rural AM/FM</span>
        <div class="flex space-x-4">
            <a href="#" class="text-gray-300 hover:text-white">Dashboard</a>
        </div>
    </div>
</nav>

Forms¶

Input Field:

<input type="text"
       class="w-full px-3 py-2 border border-gray-300 rounded-md
              focus:outline-none focus:ring-2 focus:ring-blue-500
              focus:border-transparent">

Label:

<label class="block text-sm font-medium text-gray-700 mb-1">
    Field Label
</label>

Spacing¶

Use Tailwind's default spacing scale:

Name	Size	Usage
xs	0.25rem (4px)	Tight spacing, icons
sm	0.5rem (8px)	Compact elements
md	1rem (16px)	Default spacing
lg	1.5rem (24px)	Section spacing
xl	2rem (32px)	Large gaps
2xl	3rem (48px)	Page sections

Icons¶

Use Lucide Icons for consistency:

<script src="https://unpkg.com/lucide@latest"></script>

Common Icons: - radio - Broadcasting/stations - mic - Audio/recording - users - Audience/contacts - bar-chart-2 - Reports/analytics - settings - Configuration - log-out - Logout - search - Search - plus - Add/create

Logo Usage¶

Text Logo:

Rural AM.FM.

Use charcoal (#32373c) on light backgrounds
Use white on dark backgrounds
The period after "AM" and "FM" is part of the brand
Keep horizontal orientation

Minimum Sizes: - Desktop: 140px wide - Mobile: 100px wide

Imagery¶

Photo Style: - Professional, corporate settings - Radio/broadcasting equipment - Clean, well-lit environments - People: professional attire, confident poses

Illustrations: - Minimal, line-based - Single accent color (Radio Blue) - Simple geometric shapes

Do's and Don'ts¶

Do:¶

✅ Use plenty of white space
✅ Keep text readable (high contrast)
✅ Use consistent spacing
✅ Emphasize content over decoration
✅ Use blue for interactive elements

Don't:¶

❌ Use busy backgrounds
❌ Overuse accent colors
❌ Mix multiple font families
❌ Use low-contrast text
❌ Add unnecessary decorative elements

Dark Mode (Future)¶

When implementing dark mode, swap:

Light	Dark
`#ffffff` (bg)	`#1f2937` (gray-800)
`#f8fafc` (surface)	`#374151` (gray-700)
`#374151` (text)	`#f3f4f6` (gray-100)
`#e5e7eb` (border)	`#4b5563` (gray-600)

Keep accent colors the same for brand consistency.