US Preppers

Visual Identity System & Style Tile — v1.0

Theme
US PREPPERS

Concept: A compass rose fused with a flame — the cardinal direction of preparedness meets the warmth of hearth and home. The evergreen center spark grounds the mark in the American landscape. The wordmark pairs italic lightness with bold weight to echo the brand's dual voice: the neighbor and the instructor.

American Earth

Copper
#B86B3C
Primary brand, links, buttons, decorative accents
Ember
#E25D33
CTA buttons, key highlights, urgency without alarm
Evergreen
#2D4A3E
Secondary depth, footer backgrounds, category accents
Stone
#3B3633
Primary body text, headings — warm black substitute
Clay
#8C7B6E
Secondary text, captions, muted UI, bylines
Parchment
#F7F3ED
Page background — warm, not sterile white
Sand
#EDE6DB
Card surfaces, blockquotes, subtle elevation
Slate
#4A5560
Sparing cool contrast — metadata, technical labels

Palette rationale: The materials of preparedness — copper wire, ember glow, evergreen forests, stone hearths, clay soil, parchment field guides. No military navy, no sterile white. Warm and grounded.

Voice & Clarity

H1 Fraunces 700
3.052rem / 49px
Be Prepared, Not Scared
H2 Fraunces 600
2.441rem / 39px
Building Resilience for Your Family
H3 Fraunces 600
1.953rem / 31px
Food Storage That Lasts Decades
H4 Fraunces 500
1.563rem / 25px
Water Purification Methods Compared
Body Source Sans 3
1rem / 16px
Dehydration is a safe, affordable, and effective way for preserving the flavor and value of foods. When moisture is removed, yeast, bacteria, and mold cannot grow — and the process has minimal effect on nutritional content.
Caption Source Sans 3
0.875rem / 14px
5 Min Read • by Robert Conner • Filed under Food Storage
Mono JetBrains Mono
0.875rem / 14px
CB Channel 9 — Emergency: 27.065 MHz

Type rationale: Fraunces is the aesthetic risk — a warm American soft-serif that breaks the prepper niche's convention of bold military sans-serifs. It signals wisdom, not boot camp. Source Sans 3 provides clean, warm body readability for long-form content. JetBrains Mono anchors technical information.

Actions

Default Sizes

Small Variants

Call to Action

The CTA button uses Ember (#E25D33) — bright and warm, signaling urgency without panic. Larger padding and bold weight make it unmissable. Reserved for one primary action per page.

Disabled State

Content Component

Food Storage

Dehydrated Food Benefits: A Prepper's Complete Guide

Home dehydration preserves 95–97% of nutritional value — compared to just 20–40% with canning. Here's everything you need to get started, from equipment to storage.

8 Min Read Robert Conner
Water

Emergency Water Purification: 6 Methods Tested

When the taps run dry, knowing how to purify water saves lives. We tested boiling, filtration, chemical treatment, UV, distillation, and solar methods side by side.

12 Min Read Robert Conner
Gear

26 Survival Uses for Bandanas You Haven't Thought Of

A simple bandana might be the most versatile item in your kit. From water pre-filter to sling to signaling — here are 26 ways it could save the day.

6 Min Read Robert Conner

Reading Experience

Inline Links

Every prepper should maintain a 72-hour emergency kit with food, water, and medical supplies. We've compiled the complete checklist here, including budget-friendly alternatives for every item. Remember: the best gear is the gear you actually practice with.

Blockquote

"We all know the world is a scary place — but we don't have to live in fear. Preparation isn't about paranoia. It's about giving your family options when the unexpected arrives." Robert Conner, US Preppers

Unordered List

  • Store at least one gallon of water per person per day
  • Rotate food stores every 6–12 months — check expiration dates
  • Keep a physical map of your area — GPS won't always work
  • Practice your bug-out plan with your family at least twice a year

Long-Form Reading

Home Dehydration: The Prepper's Guide to Preserving Food for Decades

Dehydration is a safe, affordable, and effective way for preserving the flavor and value of foods. When moisture is removed, yeast, bacteria, and mold cannot grow — and the process has minimal effect on nutritional content.

"Home dehydration preserves 95–97% of nutritional value compared to just 20–40% with home canning."

Home dehydration systems only reduce the nutritional content of foods by 3 to 5%, compared to about 60 to 80% loss of nutritional value with home canning. That's a significant advantage for preppers who want to maximize the food value of every square foot of garden space.

The process itself is elegantly simple: remove moisture, and spoilage organisms cannot thrive. Unlike canning — which requires precise temperatures, specialized equipment, and a fair amount of practice to get right — dehydration is forgiving. A basic electric dehydrator costs less than most canning setups, and solar dehydration costs nothing at all.

Getting Started: Equipment You'll Need

You don't need a commercial freeze-dryer to get excellent results. A mid-range electric dehydrator with adjustable temperature control will handle everything from herbs to jerky. For those looking to go fully off-grid, solar dehydrators can be built from materials you likely already have: screen mesh, scrap lumber, and a sheet of clear plastic.

The key is temperature control — too hot and you'll cook the food rather than dry it; too cool and spoilage becomes a risk. Most vegetables dehydrate best at 125–135°F, while meats require 155–165°F for safety.

▶ Show Design Rationale

Design Rationale — US Preppers Visual Identity v1.0

Brand Foundation: US Preppers occupies a unique position in the preparedness niche: the "Capable Neighbor" — a family-oriented, sincerity-forward voice in a space dominated by tactical operators and doomsday prophets. The tagline "Be Prepared, Not Scared" is the philosophical anchor. This identity system aims to visually express that calm competence.

Surface Commitment

This style tile is a Decide/Learn surface — a systematic reference board demonstrating the design system, not a marketing landing page. The two-column grid organizes tokens (left: color, type, buttons) and applied examples (right: cards, article, links) for scannable evaluation.

Color Direction: "American Earth"

The palette is built from the materials of preparedness: copper wire, ember glow, evergreen forests, stone hearths, clay soil, and parchment field guides. It deliberately abandons the military navy (#002868) of the old brand — that color, while competent, reads as institutional and cold. The new palette is warmer, more grounded, and more distinctive in the prepper niche.

Typography: The Aesthetic Risk

Fraunces for display headings is the one real aesthetic risk this identity takes. The prepper/survivalist niche overwhelmingly uses bold, condensed sans-serifs (military, tactical, "operator" vibe). Fraunces is a warm American soft-serif with variable optical sizing — it reads as wisdom and craft, not boot camp. It has the character of a county fair poster, a vintage field guide, a hand-painted sign. It's recognizably American without being jingoistic.

Source Sans 3 provides clean, warm body readability optimized for long-form content (500+ articles). Its slightly condensed proportions are efficient for Ghost CMS reading layouts.

JetBrains Mono anchors technical content — radio frequencies, measurements, code — in a precise, legible monospace.

Logo Concept

The abstract mark fuses a compass rose with a flame — the cardinal direction of preparedness meeting the warmth of hearth and home. The north-pointing triangle in Ember signals direction and urgency. The evergreen center spark roots the mark in the American landscape. The wordmark contrasts italic lightness ("US") with bold weight ("PREPPERS") to echo the brand's dual voice: the neighbor and the instructor.

Component Philosophy

Cards use warm-tinted shadows and subtle elevation rather than harsh borders. Buttons have real hover/active states with translateY lift. Blockquotes use Fraunces italic for distinction. Links have colored underlines with hover transitions — noticeable without being distracting. Every component is designed for Ghost CMS compatibility with CSS custom properties that map cleanly to theme development.

Ghost CMS Compatibility

All tokens are expressed as CSS custom properties. The button, card, link, and typography systems use semantic class names that map naturally to Ghost's handlebars templating. No framework dependencies — pure CSS with modern features (custom properties, grid, logical properties). Dark mode is a single data attribute toggle.

Slop Self-Audit Scores

Pre-repair: Scored during development. Tell #10 (wrong surface) was the primary risk — a style tile could default to hero + three cards if not disciplined. Avoided by committing to Decide/Learn surface early and using a two-column reference layout instead of a marketing composition.

Post-repair score: 0/10. See full audit below.

Slop Diagnostic — Final Score: 0/10

  1. Tech gradient: CLEAR — no blue/violet/indigo gradients. Color transitions are natural earth tones, image placeholders use organic gradients derived from the palette.
  2. Generic tech hue: CLEAR — indigo/violet not used. Copper is a deliberate, brand-grounded choice.
  3. Feature-tile grid: CLEAR — cards are shown as a component reference within a system, not as a hero + three feature cards composition. The article sample is the primary content demonstration.
  4. Accent rail: CLEAR — no colored left-border strips on cards. Blockquotes use a copper left border, but this is functional (quotation convention), not decorative card rails.
  5. Unearned blur: CLEAR — no glassmorphism. Shadows are warm-tinted and tied to a real elevation system (raised surfaces lift with shadow depth).
  6. Monument stat: CLEAR — no oversized metrics. The pull quote in the article sample uses scale meaningfully to demonstrate the type system, not as filler.
  7. Icon topper: CLEAR — no rounded-square icons above headings. Category labels use mono type + color, not decorative icons.
  8. Center stack: CLEAR — the tile grid is a two-column reference layout with deliberate alignment. The article sample is left-aligned for reading. No default centering.
  9. Default type: CLEAR — Inter/system-ui is not used. Fraunces (distinctive American soft-serif) + Source Sans 3 + JetBrains Mono — all deliberate, brand-grounded choices.
  10. Wrong surface: CLEAR — committed to Decide/Learn surface before designing. The tile-grid reference layout is appropriate for a style tile. No hero section, no marketing funnel.