Agence WagnerAgence Wagner
FRENDEELS
Back to designs
RétroTextureIndustrielOrganique
Preview

Western Frontier Design Reference

Overview

Western Frontier is a rugged, evocative design aesthetic rooted in the visual culture of the 19th-century American Old West -- the era of dusty frontier towns, cattle drives, saloons, wanted posters, and wide-open desert landscapes. Its visual language draws directly from the wood-type display faces, hand-painted signage, and broadsheet printing traditions that defined communication on the frontier. Bold slab-serif typography, weathered leather textures, branded iron motifs, and a palette of sunbaked earth tones, deep saddle browns, and dusty reds form its unmistakable identity.

In web and UI design, the Western Frontier aesthetic translates into heavy slab-serif and fat-face display type, parchment and aged-paper background textures, rope and branded-iron border treatments, sepia-toned photography, and layouts inspired by wanted posters, saloon signage, and frontier newspaper broadsides. Desert landscapes, cacti, horseshoes, sheriff stars, and revolver silhouettes serve as recurring iconographic motifs. The palette stays grounded in warm, dusty earth tones -- sandy tans, burnt sienna, raw umber, and oxblood red -- punctuated by turquoise accents that reference Native American jewelry and the copper-rich mineral deposits of the Southwest.

Unlike nostalgic or kitschy cowboy themes, a well-executed Western Frontier design emphasizes authenticity, craft, and weight. Typography should feel carved, stamped, or printed with real physical pressure. Surfaces should feel tactile -- sun-cracked leather, weathered barn wood, hammered metal, rough cotton canvas. The emotional register balances rugged self-reliance and quiet solitude with the boisterous energy of saloon culture. It channels the romance of the frontier: endless horizons, the golden hour light of the high desert, and the mythic individualism of the cowboy archetype. When applied with restraint and attention to material authenticity, Western Frontier design creates experiences that feel handcrafted, substantial, and timeless rather than costume-like or cartoonish.

Visual Characteristics

Core Design Traits

  • Heavy slab-serif and wood-type display faces: Bold, blocky letterforms with thick serifs and high visual weight dominate headlines and titles, recalling 19th-century broadsheet printing, circus posters, and frontier signage
  • Aged parchment and paper textures: Backgrounds mimic sun-yellowed paper, cracked vellum, coffee-stained broadsheets, and weathered cardstock, grounding designs in a tactile, analog authenticity
  • Leather and rawhide surface treatments: Tooled leather textures, saddle-stitching details, and burnished hide gradients appear on cards, headers, and decorative panels
  • Weathered wood grain elements: Barn-board, plank, and driftwood textures used for backgrounds, borders, and decorative frames reference frontier architecture and saloon interiors
  • Rope, brand, and iron motifs: Lasso rope borders, cattle-brand symbols, horseshoe shapes, wrought-iron scrollwork, and sheriff-star badges serve as recurring decorative elements
  • Sepia and duotone photography: Images processed with warm sepia toning, high contrast, faded edges, and grain overlays evoke daguerreotype and tintype portraiture
  • Wanted-poster composition: Centered, symmetrical layouts with bold headlines, decorative rule lines, and stacked typographic hierarchies reference the iconic reward broadside format
  • Desert landscape imagery: Mesas, saguaro cacti, tumbleweeds, canyon formations, and vast sunset-lit horizons establish setting and atmosphere
  • Branded and stamped type treatments: Text appears pressed, burned, or stamped into surfaces with embossed and debossed effects simulating hot-iron brands
  • Turquoise and silver accent details: Jewelry-inspired accents referencing Southwest Native American silversmithing add contrast to the warm, earthy base palette

Design Principles

  • Weight and substance over delicacy: Every element should feel heavy, solid, and physically present; thin lines and airy whitespace are replaced by thick borders, dense fills, and material textures
  • Crafted authenticity over digital polish: Design should evoke hand-lettering, letterpress printing, and physical craftsmanship rather than smooth digital perfection
  • Warm earth grounding: The palette anchors in the natural desert and prairie environment; even accent colors should feel sun-warmed and dust-touched
  • Typographic hierarchy is king: The wanted-poster tradition demands clear, dramatic size contrasts between headlines, subheads, and body text with decorative rules separating sections
  • Symmetry and centered composition: Frontier printing favored centered layouts with balanced, formal arrangements that project authority and importance
  • Texture as narrative: Every surface texture -- leather, wood, metal, paper -- tells a story of use, age, and the frontier environment
  • Restraint prevents costume: The line between evocative design and theme-park kitsch requires discipline; use Western elements as accent, not costume
  • Horizontal rule as structure: Thick and thin decorative lines, double-rule borders, and ornamental dividers organize information in the broadsheet tradition

Color Palette

The Western Frontier palette draws from the natural materials and landscapes of the American Southwest and Great Plains: sun-baked earth, desert sand, weathered leather, oxidized metal, and the dramatic skies of the high desert. Warm browns, dusty reds, and sandy neutrals dominate, with turquoise providing the signature cool-tone accent.

Swatch Hex Role/Usage
Saddle Leather #8B4513 Primary brown, headers, nav backgrounds, key surfaces
Rawhide Tan #D2B48C Secondary surface, card backgrounds, parchment base
Desert Sand #EDC9AF Light background, page base, content area fills
Parchment #F5E6D0 Lightest neutral, paper texture base, body backgrounds
Burnt Sienna #A0522D Warm accent, borders, decorative rules, link color
Oxblood Red #800020 Deep accent, call-to-action elements, wanted-poster headlines
Dusty Red #B5403D Secondary red, hover states, alert elements, star badges
Raw Umber #704214 Dark brown, text color on light surfaces, shadow tones
Dark Sienna #3A160E Deepest dark, primary text, dark-mode backgrounds
Frontier Turquoise #40E0D0 Cool accent, jewelry-inspired details, highlight elements
Tarnished Turquoise #5F9EA0 Muted cool accent, secondary links, subtle highlights
Rust Orange #C1440E Warm bright accent, sunset tones, button highlights
Prairie Gold #DAA520 Metallic accent, star badges, premium details, divider ornaments
Bone White #F9F6F0 Lightest value, text on dark, high-contrast elements
Charcoal Smoke #2C2C2C Near-black, dark text, footer backgrounds, deep contrast

CSS Custom Properties

:root {
  /* Primary browns */
  --western-saddle: #8b4513;
  --western-saddle-light: #a0602e;
  --western-saddle-dark: #6b3410;
  --western-rawhide: #d2b48c;
  --western-raw-umber: #704214;

  /* Sand and parchment */
  --western-desert-sand: #edc9af;
  --western-parchment: #f5e6d0;
  --western-bone: #f9f6f0;

  /* Reds */
  --western-oxblood: #800020;
  --western-dusty-red: #b5403d;
  --western-burnt-sienna: #a0522d;
  --western-rust: #c1440e;

  /* Dark tones */
  --western-dark-sienna: #3a160e;
  --western-charcoal: #2c2c2c;

  /* Accent cool tones */
  --western-turquoise: #40e0d0;
  --western-turquoise-muted: #5f9ea0;

  /* Metallics */
  --western-gold: #daa520;
  --western-gold-light: #e8c24a;
  --western-brass: #b5a642;
  --western-iron: #48453e;

  /* Effects and transparencies */
  --western-leather-shadow: rgba(58, 22, 14, 0.5);
  --western-dust: rgba(210, 180, 140, 0.15);
  --western-parchment-overlay: rgba(245, 230, 208, 0.85);
  --western-smoke: rgba(44, 44, 44, 0.6);
  --western-brand-glow: rgba(193, 68, 14, 0.35);

  /* Functional mappings */
  --western-bg-primary: var(--western-parchment);
  --western-bg-secondary: var(--western-desert-sand);
  --western-bg-surface: var(--western-rawhide);
  --western-bg-dark: var(--western-dark-sienna);
  --western-text-primary: var(--western-dark-sienna);
  --western-text-secondary: var(--western-raw-umber);
  --western-text-on-dark: var(--western-bone);
  --western-accent: var(--western-oxblood);
  --western-accent-warm: var(--western-rust);
  --western-accent-cool: var(--western-turquoise-muted);
  --western-border: var(--western-saddle);
}

Typography

The Western Frontier aesthetic relies on bold, high-impact display typefaces descended from 19th-century American wood type. Slab serifs with heavy, blocky serifs dominate headlines, while sturdy, readable serif or sans-serif faces handle body text. The overall typographic impression should feel hand-set, physically printed, and commanding -- as if each letter were carved from a wooden block and pressed into paper with force.

Font Weight(s) Style Usage
Rye 400 Decorative Western display slab with saloon character Hero headlines, poster titles, section headers
Smokum 400 Bold, condensed Western wood-type display face Display headlines, wanted-poster titles, banners
Sancreek 400 Old-style frontier display with strong personality Section headings, decorative titles, badges
Ewert 400 Stylized, ornate Western display with carved quality Feature headlines, special callouts, decorative type
Playfair Display 400, 700, 900 High-contrast Didone serif with editorial authority Subheadings, pull quotes, formal text
Alfa Slab One 400 Heavy, modern slab serif with tremendous visual weight Display headlines, banners, bold statements
Crete Round 400 Warm slab serif with rounded edges and friendly presence Body headings, navigation labels, UI elements
Lora 400, 500, 700 Well-balanced transitional serif for extended reading Body text, long-form content, descriptions
Source Serif 4 300, 400, 600, 700 Versatile workhorse serif with excellent readability Body text, captions, metadata, secondary content
Wellfleet 400 Geometric slab serif with rounded corners and frontier feel Labels, badges, navigation, mid-weight headings

Font Pairing Suggestions

Heading Body Mood
Rye 400 Lora 400 Classic saloon signage with readable, warm body text
Alfa Slab One 400 Source Serif 4 400 Bold wanted-poster headlines with clean, professional body
Smokum 400 Crete Round 400 Dramatic frontier display with friendly, approachable body
Sancreek 400 Lora 400 Ornate Old West display with elegant, traditional body text
Playfair Display 900 Source Serif 4 400 Editorial authority meets frontier storytelling

CSS Example

@import url('https://fonts.googleapis.com/css2?family=Rye&family=Alfa+Slab+One&family=Lora:ital,wght@0,400;0,500;0,700;1,400&family=Source+Serif+4:wght@300;400;600;700&family=Crete+Round&family=Playfair+Display:wght@400;700;900&display=swap');

body {
  font-family: 'Lora', 'Source Serif 4', Georgia, serif;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.75;
  letter-spacing: 0.01em;
  color: var(--western-text-primary);
  -webkit-font-smoothing: antialiased;
}

h1, h2 {
  font-family: 'Rye', 'Alfa Slab One', serif;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--western-dark-sienna);
}

h3, h4 {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--western-raw-umber);
}

/* Wanted poster display text */
.western-display {
  font-family: 'Rye', serif;
  font-size: clamp(2.5rem, 8vw, 6rem);
  line-height: 1.0;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--western-oxblood);
  text-shadow: 2px 2px 0 rgba(58, 22, 14, 0.3);
}

/* Stamped brand text effect */
.western-brand {
  font-family: 'Alfa Slab One', serif;
  font-size: 1.2rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--western-saddle);
  text-shadow:
    1px 1px 0 rgba(245, 230, 208, 0.6),
    -1px -1px 0 rgba(58, 22, 14, 0.15);
}

/* Frontier label text */
.western-label {
  font-family: 'Crete Round', 'Wellfleet', serif;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--western-burnt-sienna);
}

Layout Principles

  • Centered, poster-inspired compositions: Content is centered and stacked vertically following the wanted-poster and broadsheet tradition, with clear visual hierarchy and formal, symmetrical balance
  • Bold horizontal rules as structural dividers: Thick single, double, and ornamental rule lines separate sections, replacing modern card-based or floating layouts with the structured formality of 19th-century print
  • Generous vertical spacing between sections: Ample breathing room between content blocks allows each section to command attention, mimicking the spacious layouts of frontier signage and print broadsides
  • Constrained content widths for readability: Body text columns stay narrow (600-800px) within wider decorative frames, echoing newspaper column formatting and ensuring comfortable reading
  • Full-width textured backgrounds: Parchment, leather, and wood-grain textures span the full viewport while content sits in contained, bordered frames atop them
  • Stacked typographic hierarchy: Large display type at top, followed by decorative rules, then progressively smaller subheads and body text -- the information architecture of a reward poster
  • Card layouts as framed notices: Content cards are styled as posted notices, wanted flyers, or framed documents pinned to a surface, with visible borders, aged paper backgrounds, and subtle shadow
  • Fixed or sticky saloon-bar navigation: Top navigation bars styled as weathered wooden planks or leather straps with branded-type links
  • Grid of three for feature sections: Three-column layouts for feature cards reference the arrangement of posted notices on a town bulletin board
  • Footer as frontier horizon: Page footers use dark earth tones, landscape silhouettes, or sunset gradients to ground the composition and provide a sense of vista and ending
  • Mobile stacking with maintained texture: On small screens, columns collapse to single-column stacks but retain parchment textures, decorative rules, and typographic scale relationships

CSS / Design Techniques

Western Card Component

.western-card {
  background:
    linear-gradient(
      135deg,
      rgba(245, 230, 208, 0.95) 0%,
      rgba(237, 201, 175, 0.9) 100%
    );
  border: 3px solid var(--western-saddle);
  border-radius: 2px;
  padding: 2rem 2.5rem;
  position: relative;
  box-shadow:
    4px 4px 0 var(--western-raw-umber),
    0 8px 24px rgba(58, 22, 14, 0.25);
  max-width: 480px;
}

/* Aged corner pins */
.western-card::before,
.western-card::after {
  content: '';
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    var(--western-gold) 30%,
    var(--western-saddle) 60%,
    transparent 70%
  );
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.western-card::before {
  top: 10px;
  left: 10px;
}

.western-card::after {
  top: 10px;
  right: 10px;
}

/* Double-rule top border */
.western-card-header {
  text-align: center;
  padding-bottom: 1rem;
  margin-bottom: 1.5rem;
  border-bottom: 3px double var(--western-saddle);
}

.western-card-header h3 {
  font-family: 'Rye', serif;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--western-oxblood);
  margin: 0;
}

.western-card:hover {
  box-shadow:
    4px 4px 0 var(--western-raw-umber),
    0 12px 32px rgba(58, 22, 14, 0.35);
  transform: translateY(-2px);
  transition: all 0.3s ease;
}

Western Button Component

/* Primary slab button */
.western-button {
  display: inline-block;
  padding: 0.8rem 2.2rem;
  border: 2px solid var(--western-saddle);
  border-radius: 2px;
  background: linear-gradient(
    180deg,
    #a0602e 0%,
    #8b4513 40%,
    #6b3410 100%
  );
  color: var(--western-bone);
  font-family: 'Crete Round', 'Alfa Slab One', serif;
  font-size: 0.85rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.15),
    inset 0 -2px 0 rgba(0, 0, 0, 0.2),
    0 3px 6px rgba(58, 22, 14, 0.35);
  transition: all 0.25s ease;
}

.western-button:hover {
  background: linear-gradient(
    180deg,
    #b57040 0%,
    #a0602e 40%,
    #8b4513 100%
  );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 -2px 0 rgba(0, 0, 0, 0.2),
    0 5px 12px rgba(58, 22, 14, 0.45);
  transform: translateY(-1px);
}

.western-button:active {
  transform: translateY(1px);
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.3),
    0 1px 2px rgba(58, 22, 14, 0.3);
}

/* Oxblood danger/wanted variant */
.western-button--wanted {
  background: linear-gradient(
    180deg,
    #9a1030 0%,
    #800020 40%,
    #600018 100%
  );
  border-color: var(--western-oxblood);
}

.western-button--wanted:hover {
  background: linear-gradient(
    180deg,
    #b01840 0%,
    #9a1030 40%,
    #800020 100%
  );
}

/* Parchment outline variant */
.western-button--outline {
  background: transparent;
  color: var(--western-saddle);
  border: 2px solid var(--western-saddle);
  box-shadow: none;
}

.western-button--outline:hover {
  background: var(--western-saddle);
  color: var(--western-bone);
}

Western Navigation

.western-nav {
  background:
    linear-gradient(
      180deg,
      #5a3a1e 0%,
      #4a2e14 50%,
      #3a200a 100%
    );
  border-bottom: 4px solid var(--western-saddle-dark);
  padding: 0.75rem 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 4px 12px rgba(0, 0, 0, 0.5);
}

/* Branded nail heads on nav bar */
.western-nav::before,
.western-nav::after {
  content: '';
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: radial-gradient(
    circle at 35% 35%,
    #b5a642 0%,
    #8a7a30 50%,
    #6a5a20 100%
  );
  box-shadow:
    inset 0 -1px 2px rgba(0, 0, 0, 0.4),
    0 1px 2px rgba(0, 0, 0, 0.3);
  flex-shrink: 0;
}

.western-nav a {
  color: var(--western-rawhide);
  font-family: 'Crete Round', serif;
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.4rem 1rem;
  transition: color 0.3s ease, text-shadow 0.3s ease;
}

.western-nav a:hover {
  color: var(--western-gold-light);
  text-shadow: 0 0 8px rgba(218, 165, 32, 0.3);
}

/* Bullet separator between nav items */
.western-nav a + a::before {
  content: '\2726';
  margin-right: 1rem;
  color: var(--western-gold);
  font-size: 0.5rem;
  vertical-align: middle;
  opacity: 0.6;
}

Western Hero Section

.western-hero {
  min-height: 90vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 4rem 2rem;
  position: relative;
  background:
    linear-gradient(
      180deg,
      rgba(58, 22, 14, 0.7) 0%,
      rgba(58, 22, 14, 0.4) 40%,
      rgba(139, 69, 19, 0.3) 70%,
      rgba(218, 165, 32, 0.15) 100%
    );
  overflow: hidden;
}

/* Desert sunset gradient behind content */
.western-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      180deg,
      #1a0a04 0%,
      #3a160e 15%,
      #8b4513 45%,
      #c1440e 65%,
      #daa520 80%,
      #edc9af 95%
    );
  z-index: -1;
  opacity: 0.6;
}

.western-hero h1 {
  font-family: 'Rye', serif;
  font-size: clamp(3rem, 10vw, 7rem);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--western-bone);
  text-shadow:
    3px 3px 0 rgba(58, 22, 14, 0.6),
    0 0 40px rgba(218, 165, 32, 0.2);
  line-height: 1.0;
  margin-bottom: 1rem;
}

.western-hero .subtitle {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1rem, 2.5vw, 1.4rem);
  font-style: italic;
  color: var(--western-rawhide);
  letter-spacing: 0.12em;
  margin-bottom: 2rem;
}

/* Decorative double-rule divider */
.western-hero .rule {
  width: min(300px, 80%);
  height: 6px;
  background:
    linear-gradient(
      180deg,
      var(--western-gold) 0%,
      var(--western-gold) 25%,
      transparent 25%,
      transparent 50%,
      var(--western-gold) 50%,
      var(--western-gold) 75%,
      transparent 75%
    );
  border: none;
  margin: 1.5rem auto;
  opacity: 0.6;
}

Parchment Texture Background

/* Parchment / aged paper effect using pure CSS */
.western-parchment {
  background-color: var(--western-parchment);
  background-image:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 2px,
      rgba(139, 69, 19, 0.02) 2px,
      rgba(139, 69, 19, 0.02) 4px
    ),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 3px,
      rgba(112, 66, 20, 0.015) 3px,
      rgba(112, 66, 20, 0.015) 6px
    ),
    radial-gradient(
      ellipse at 20% 50%,
      rgba(160, 82, 45, 0.08) 0%,
      transparent 60%
    ),
    radial-gradient(
      ellipse at 80% 30%,
      rgba(139, 69, 19, 0.06) 0%,
      transparent 50%
    );
  position: relative;
}

/* Burned / darkened edges */
.western-parchment::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow:
    inset 0 0 60px rgba(112, 66, 20, 0.2),
    inset 0 0 120px rgba(58, 22, 14, 0.1);
}

Wanted Poster Frame

.western-wanted {
  background: var(--western-parchment);
  border: 4px solid var(--western-dark-sienna);
  outline: 2px solid var(--western-saddle);
  outline-offset: 4px;
  padding: 2.5rem 2rem;
  max-width: 520px;
  margin: 2rem auto;
  text-align: center;
  position: relative;
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.35),
    inset 0 0 40px rgba(112, 66, 20, 0.12);
}

.western-wanted h2 {
  font-family: 'Rye', serif;
  font-size: 3rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--western-oxblood);
  margin-bottom: 0.25rem;
}

.western-wanted .reward {
  font-family: 'Alfa Slab One', serif;
  font-size: 1.2rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--western-dark-sienna);
  border-top: 3px double var(--western-dark-sienna);
  border-bottom: 3px double var(--western-dark-sienna);
  padding: 0.5rem 0;
  margin: 1rem auto;
  display: inline-block;
}

/* Curled corner effect */
.western-wanted::before {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 30px;
  height: 30px;
  background: linear-gradient(
    225deg,
    var(--western-desert-sand) 50%,
    rgba(112, 66, 20, 0.3) 50%
  );
}

Rope Border Decoration

/* Rope / lasso border using repeating gradients */
.western-rope-border {
  position: relative;
  padding: 2rem;
  border: 6px solid transparent;
  border-image: repeating-linear-gradient(
    90deg,
    #b5903a 0px,
    #d2b48c 4px,
    #a07828 8px,
    #c4a060 12px,
    #b5903a 16px
  ) 6;
}

/* Alternative: twisted rope top/bottom borders */
.western-rope-divider {
  height: 8px;
  background: repeating-linear-gradient(
    120deg,
    #b5903a 0px,
    #d2b48c 5px,
    #a07828 10px,
    #c4a060 15px,
    #b5903a 20px
  );
  border-radius: 4px;
  margin: 2rem auto;
  max-width: 400px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

Sheriff Star Badge

/* CSS-only sheriff star badge */
.western-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  background: var(--western-gold);
  clip-path: polygon(
    50% 0%, 63% 25%, 93% 25%,
    72% 45%, 80% 75%, 50% 58%,
    20% 75%, 28% 45%, 7% 25%,
    37% 25%
  );
  color: var(--western-dark-sienna);
  font-family: 'Crete Round', serif;
  font-size: 0.55rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Inner circle of badge */
.western-badge::after {
  content: '';
  position: absolute;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid var(--western-dark-sienna);
}

Design Do's and Don'ts

Do

  • Use heavy slab-serif display fonts at large sizes for headlines to create the bold, commanding presence of frontier signage
  • Apply parchment and aged-paper textures to backgrounds and card surfaces for authentic, tactile warmth
  • Employ thick decorative rules (single, double, ornamental) to separate sections and establish typographic hierarchy
  • Keep the palette grounded in warm earth tones with turquoise and gold as deliberate accent punctuation
  • Create centered, symmetrical layouts that reference the formal balance of wanted posters and broadsides
  • Add branded-iron or stamped text effects through text-shadow and subtle emboss treatments
  • Use sepia or warm duotone filters on photography to maintain visual cohesion with the palette
  • Include rope, horseshoe, star-badge, and brand-mark motifs as authentic decorative accents

Don't

  • Use thin, lightweight sans-serif fonts that lack the visual weight and substance the aesthetic demands
  • Apply neon, pastel, or cool-toned color palettes that contradict the warm, sun-baked desert environment
  • Over-decorate with every Western motif at once (cacti, horses, revolvers, lassos); pick a few and repeat them with intention
  • Use rounded corners, soft gradients, and glossy surfaces that belong to modern tech aesthetics rather than frontier craft
  • Forget the texture; flat, solid-color fills without any grain, noise, or material texture will feel lifeless and digital
  • Mix in futuristic, cyberpunk, or high-tech elements that break the period authenticity
  • Set body text in decorative display fonts; reserve Rye, Smokum, and Sancreek for headlines and use readable serifs for body
  • Create busy, cluttered layouts that sacrifice the clear hierarchical structure of traditional broadsheet printing
Aesthetic Relationship to Western Frontier
Vintage Americana Shares patriotic nostalgia and Americana visual motifs; Vintage Americana is broader in era and scope while Western Frontier is specifically 19th-century frontier-focused
Rustic / Cottagecore Overlaps in natural material textures (wood, leather, linen) and earth-tone palettes; Rustic leans pastoral-domestic while Western Frontier is arid, expansive, and rugged
Steampunk Shares the 19th-century time period and industrial craft sensibility; Steampunk adds Victorian-era machinery and brass clockwork elements that Western Frontier does not
Grunge Both use distressed, weathered, rough textures; Grunge is urban, rebellious, and 1990s-coded while Western Frontier is rural, historical, and romantically mythic
Art Deco Southwest Shares Southwest color palettes and geometric pattern influences; Art Deco Southwest fuses Native American motifs with Jazz-Age glamour, while Western Frontier stays closer to frontier settler culture
Dark Academia Both value warmth, aged textures, and traditional typographic structures; Dark Academia is literary and European-institutional while Western Frontier is American-frontier and action-oriented
Frontier Gothic A darker, moodier offshoot that merges Western Frontier with Gothic atmosphere; deep charcoals, stormy skies, and haunted-prairie imagery replace the warmer, sunlit tones
Retro / Mid-Century Both draw from specific periods of American culture; Mid-Century is post-war urban optimism while Western Frontier is pre-industrial frontier grit

Quick-Start HTML Template

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Western Frontier</title>
  <link href="https://fonts.googleapis.com/css2?family=Rye&family=Alfa+Slab+One&family=Lora:ital,wght@0,400;0,500;0,700;1,400&family=Source+Serif+4:wght@300;400;600;700&family=Crete+Round&family=Playfair+Display:wght@400;700;900&display=swap" rel="stylesheet">
  <style>
    :root {
      --western-saddle: #8b4513;
      --western-saddle-light: #a0602e;
      --western-saddle-dark: #6b3410;
      --western-rawhide: #d2b48c;
      --western-raw-umber: #704214;
      --western-desert-sand: #edc9af;
      --western-parchment: #f5e6d0;
      --western-bone: #f9f6f0;
      --western-oxblood: #800020;
      --western-dusty-red: #b5403d;
      --western-burnt-sienna: #a0522d;
      --western-rust: #c1440e;
      --western-dark-sienna: #3a160e;
      --western-charcoal: #2c2c2c;
      --western-turquoise: #40e0d0;
      --western-turquoise-muted: #5f9ea0;
      --western-gold: #daa520;
      --western-gold-light: #e8c24a;
      --western-iron: #48453e;
    }

    *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

    body {
      background-color: var(--western-parchment);
      background-image:
        repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(139,69,19,0.02) 2px, rgba(139,69,19,0.02) 4px),
        repeating-linear-gradient(90deg, transparent, transparent 3px, rgba(112,66,20,0.015) 3px, rgba(112,66,20,0.015) 6px),
        radial-gradient(ellipse at 20% 50%, rgba(160,82,45,0.08) 0%, transparent 60%),
        radial-gradient(ellipse at 80% 30%, rgba(139,69,19,0.06) 0%, transparent 50%);
      color: var(--western-dark-sienna);
      font-family: 'Lora', Georgia, serif;
      font-size: 1rem;
      line-height: 1.75;
      min-height: 100vh;
      overflow-x: hidden;
    }

    h1, h2 { font-family: 'Rye', serif; font-weight: 400; text-transform: uppercase; letter-spacing: 0.06em; }
    h3, h4 { font-family: 'Playfair Display', Georgia, serif; font-weight: 700; }
    a { color: var(--western-burnt-sienna); text-decoration: none; transition: color 0.3s ease; }
    a:hover { color: var(--western-oxblood); }

    /* Navigation */
    nav {
      background: linear-gradient(180deg, #5a3a1e 0%, #4a2e14 50%, #3a200a 100%);
      border-bottom: 4px solid var(--western-saddle-dark);
      padding: 0.75rem 2rem;
      display: flex; align-items: center; justify-content: center; gap: 0.5rem;
      position: sticky; top: 0; z-index: 100;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 4px 12px rgba(0,0,0,0.5);
    }
    nav::before, nav::after {
      content: ''; width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
      background: radial-gradient(circle at 35% 35%, #b5a642 0%, #8a7a30 50%, #6a5a20 100%);
      box-shadow: inset 0 -1px 2px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3);
    }
    nav a { color: var(--western-rawhide); font-family: 'Crete Round', serif; font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; padding: 0.4rem 1rem; }
    nav a:hover { color: var(--western-gold-light); text-shadow: 0 0 8px rgba(218,165,32,0.3); }
    .nav-sep { color: var(--western-gold); font-size: 0.5rem; opacity: 0.5; }

    /* Hero */
    .hero {
      min-height: 90vh; display: flex; flex-direction: column; align-items: center;
      justify-content: center; text-align: center; padding: 4rem 2rem; position: relative; overflow: hidden;
    }
    .hero::before {
      content: ''; position: absolute; inset: 0; z-index: -1; opacity: 0.55;
      background: linear-gradient(180deg, #1a0a04 0%, #3a160e 15%, #8b4513 45%, #c1440e 65%, #daa520 80%, #edc9af 95%);
    }
    .hero::after {
      content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 120px; z-index: 1;
      background: linear-gradient(to top, var(--western-parchment), transparent);
    }
    .hero h1 {
      font-size: clamp(3rem, 10vw, 7rem); color: var(--western-bone); line-height: 1.0;
      text-shadow: 3px 3px 0 rgba(58,22,14,0.6), 0 0 40px rgba(218,165,32,0.2);
      margin-bottom: 0.5rem; position: relative; z-index: 2;
    }
    .hero .tagline {
      font-family: 'Playfair Display', serif; font-size: clamp(1rem, 2.5vw, 1.4rem);
      font-style: italic; color: var(--western-rawhide); letter-spacing: 0.12em;
      margin-bottom: 2rem; position: relative; z-index: 2;
    }
    .hero-rule {
      width: min(300px, 80%); height: 6px; border: none; margin: 1rem auto 2rem;
      opacity: 0.6; position: relative; z-index: 2;
      background: linear-gradient(180deg, var(--western-gold) 0%, var(--western-gold) 25%, transparent 25%, transparent 50%, var(--western-gold) 50%, var(--western-gold) 75%, transparent 75%);
    }
    .hero .cta { position: relative; z-index: 2; }

    /* Buttons */
    .btn {
      display: inline-block; padding: 0.8rem 2.2rem; border: 2px solid var(--western-saddle);
      border-radius: 2px; color: var(--western-bone); font-family: 'Crete Round', serif;
      font-size: 0.85rem; letter-spacing: 0.14em; text-transform: uppercase;
      text-decoration: none; cursor: pointer; transition: all 0.25s ease;
      background: linear-gradient(180deg, #a0602e 0%, #8b4513 40%, #6b3410 100%);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.15), inset 0 -2px 0 rgba(0,0,0,0.2), 0 3px 6px rgba(58,22,14,0.35);
    }
    .btn:hover {
      background: linear-gradient(180deg, #b57040 0%, #a0602e 40%, #8b4513 100%);
      color: var(--western-bone); transform: translateY(-1px);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), inset 0 -2px 0 rgba(0,0,0,0.2), 0 5px 12px rgba(58,22,14,0.45);
    }
    .btn--wanted { background: linear-gradient(180deg, #9a1030 0%, #800020 40%, #600018 100%); border-color: var(--western-oxblood); }
    .btn--wanted:hover { background: linear-gradient(180deg, #b01840 0%, #9a1030 40%, #800020 100%); }
    .btn--outline { background: transparent; color: var(--western-saddle); border: 2px solid var(--western-saddle); box-shadow: none; }
    .btn--outline:hover { background: var(--western-saddle); color: var(--western-bone); }

    /* Layout */
    .container { max-width: 1100px; margin: 0 auto; padding: 0 2rem; }
    section { padding: 4rem 0; }
    .section-header { text-align: center; margin-bottom: 3rem; }
    .section-header h2 { font-size: clamp(1.8rem, 4vw, 2.8rem); color: var(--western-oxblood); margin-bottom: 0.5rem; }
    .section-header p { font-family: 'Playfair Display', serif; font-style: italic; color: var(--western-raw-umber); font-size: 1.05rem; }
    .double-rule {
      width: min(200px, 60%); height: 6px; border: none; margin: 1rem auto; opacity: 0.4;
      background: linear-gradient(180deg, var(--western-saddle) 0%, var(--western-saddle) 30%, transparent 30%, transparent 55%, var(--western-saddle) 55%, var(--western-saddle) 100%);
    }

    /* Cards */
    .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; }
    .card {
      background: linear-gradient(135deg, rgba(245,230,208,0.95) 0%, rgba(237,201,175,0.9) 100%);
      border: 3px solid var(--western-saddle); border-radius: 2px; padding: 2rem 1.5rem; position: relative;
      box-shadow: 4px 4px 0 var(--western-raw-umber), 0 8px 24px rgba(58,22,14,0.2);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    .card::before, .card::after {
      content: ''; position: absolute; width: 10px; height: 10px; border-radius: 50%;
      background: radial-gradient(circle, var(--western-gold) 30%, var(--western-saddle) 60%, transparent 70%);
      box-shadow: 0 1px 3px rgba(0,0,0,0.3);
    }
    .card::before { top: 8px; left: 8px; }
    .card::after { top: 8px; right: 8px; }
    .card:hover { transform: translateY(-3px); box-shadow: 4px 4px 0 var(--western-raw-umber), 0 14px 36px rgba(58,22,14,0.3); }
    .card-title {
      font-family: 'Rye', serif; font-size: 1.2rem; text-transform: uppercase; letter-spacing: 0.06em;
      color: var(--western-oxblood); text-align: center; padding-bottom: 0.75rem; margin-bottom: 1rem;
      border-bottom: 3px double var(--western-saddle);
    }
    .card p { color: var(--western-raw-umber); font-size: 0.95rem; line-height: 1.7; }
    .card-badge {
      display: inline-block; background: var(--western-saddle); color: var(--western-bone);
      font-family: 'Crete Round', serif; font-size: 0.7rem; letter-spacing: 0.1em;
      text-transform: uppercase; padding: 0.25rem 0.75rem; margin-top: 1rem;
    }

    /* Wanted Poster */
    .wanted-poster {
      background: var(--western-parchment); border: 4px solid var(--western-dark-sienna);
      outline: 2px solid var(--western-saddle); outline-offset: 4px;
      padding: 2.5rem 2rem; max-width: 520px; margin: 2rem auto; text-align: center; position: relative;
      box-shadow: 0 8px 24px rgba(0,0,0,0.35), inset 0 0 40px rgba(112,66,20,0.12);
    }
    .wanted-poster h2 { font-size: clamp(2.4rem, 6vw, 3.5rem); color: var(--western-oxblood); letter-spacing: 0.14em; }
    .wanted-poster .reward-line {
      font-family: 'Alfa Slab One', serif; font-size: 1.1rem; text-transform: uppercase;
      letter-spacing: 0.2em; color: var(--western-dark-sienna);
      border-top: 3px double var(--western-dark-sienna); border-bottom: 3px double var(--western-dark-sienna);
      padding: 0.5rem 0; margin: 1rem auto; display: inline-block;
    }
    .wanted-poster .amount { font-family: 'Rye', serif; font-size: 2rem; color: var(--western-oxblood); margin: 0.5rem 0; }
    .wanted-poster .description { font-style: italic; color: var(--western-raw-umber); font-size: 0.95rem; line-height: 1.6; max-width: 380px; margin: 1rem auto; }

    /* Rope Divider */
    .rope-divider {
      height: 8px; border-radius: 4px; margin: 3rem auto; max-width: 400px;
      background: repeating-linear-gradient(120deg, #b5903a 0px, #d2b48c 5px, #a07828 10px, #c4a060 15px, #b5903a 20px);
      box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    }

    /* Dark Section */
    .dark-section {
      background: linear-gradient(180deg, var(--western-dark-sienna) 0%, var(--western-charcoal) 100%);
      color: var(--western-rawhide); padding: 5rem 0;
    }
    .dark-section h2 { color: var(--western-gold); }
    .dark-section p { color: var(--western-rawhide); }
    .dark-section .double-rule {
      background: linear-gradient(180deg, var(--western-gold) 0%, var(--western-gold) 30%, transparent 30%, transparent 55%, var(--western-gold) 55%, var(--western-gold) 100%);
    }

    /* Features */
    .features { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2rem; margin-top: 2rem; }
    .feature-item { display: flex; gap: 1rem; align-items: flex-start; }
    .feature-icon {
      flex-shrink: 0; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center;
      background: var(--western-gold); color: var(--western-dark-sienna); font-size: 1rem;
      clip-path: polygon(50% 0%, 63% 25%, 93% 25%, 72% 45%, 80% 75%, 50% 58%, 20% 75%, 28% 45%, 7% 25%, 37% 25%);
    }
    .feature-item h4 { font-family: 'Crete Round', serif; font-size: 1rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--western-bone); margin-bottom: 0.25rem; }
    .feature-item p { font-size: 0.9rem; line-height: 1.6; opacity: 0.85; }

    /* Testimonial */
    .testimonial { text-align: center; padding: 3rem 2rem; max-width: 700px; margin: 0 auto; }
    .testimonial blockquote {
      font-family: 'Playfair Display', serif; font-size: 1.4rem; font-style: italic;
      color: var(--western-raw-umber); line-height: 1.6; position: relative; padding: 0 2rem;
    }
    .testimonial blockquote::before { content: '\201C'; font-family: 'Rye', serif; font-size: 4rem; color: var(--western-gold); position: absolute; top: -1rem; left: -0.5rem; opacity: 0.5; }
    .testimonial cite { display: block; margin-top: 1rem; font-family: 'Crete Round', serif; font-size: 0.85rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--western-burnt-sienna); font-style: normal; }

    /* Footer */
    footer {
      background: linear-gradient(180deg, var(--western-charcoal) 0%, #1a0e06 100%);
      color: var(--western-rawhide); text-align: center; padding: 3rem 2rem 2rem; position: relative;
    }
    footer::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, transparent, var(--western-saddle) 20%, var(--western-gold) 50%, var(--western-saddle) 80%, transparent); }
    .footer-brand { font-family: 'Rye', serif; font-size: 1.4rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--western-gold); margin-bottom: 0.5rem; }
    footer p { font-size: 0.85rem; opacity: 0.7; margin-top: 1rem; }
    footer nav { background: transparent; border: none; box-shadow: none; padding: 1rem 0; position: static; gap: 1.5rem; flex-wrap: wrap; }
    footer nav::before, footer nav::after { display: none; }
    footer nav a { font-size: 0.75rem; color: var(--western-rawhide); opacity: 0.7; }
    footer nav a:hover { opacity: 1; color: var(--western-gold-light); }

    /* Responsive */
    @media (max-width: 768px) {
      nav { gap: 0.25rem; padding: 0.6rem 1rem; flex-wrap: wrap; }
      nav a { font-size: 0.7rem; letter-spacing: 0.08em; padding: 0.3rem 0.5rem; }
      .hero h1 { font-size: clamp(2.2rem, 12vw, 4rem); }
      .card-grid, .features { grid-template-columns: 1fr; }
      .wanted-poster { margin: 2rem 1rem; padding: 1.5rem 1rem; }
    }
  </style>
</head>
<body>

  <!-- Navigation -->
  <nav>
    <a href="#home">Home</a>
    <span class="nav-sep">&#10022;</span>
    <a href="#about">About</a>
    <span class="nav-sep">&#10022;</span>
    <a href="#services">Services</a>
    <span class="nav-sep">&#10022;</span>
    <a href="#gallery">Gallery</a>
    <span class="nav-sep">&#10022;</span>
    <a href="#contact">Contact</a>
  </nav>

  <!-- Hero Section -->
  <section class="hero" id="home">
    <h1>The Frontier</h1>
    <p class="tagline">Forged in dust, tempered by the open sky</p>
    <hr class="hero-rule">
    <div class="cta">
      <a href="#services" class="btn">Explore the Trail</a>
      <a href="#about" class="btn btn--outline" style="margin-left:1rem; color:var(--western-bone); border-color:var(--western-rawhide);">Our Story</a>
    </div>
  </section>

  <!-- About Section -->
  <section id="about">
    <div class="container">
      <div class="section-header">
        <h2>Our Heritage</h2>
        <hr class="double-rule">
        <p>Built on grit, guided by the compass of honest craftsmanship</p>
      </div>
      <div class="testimonial">
        <blockquote>
          There was no trail before we rode through. Every mile was earned,
          every sunset a reward for the day's labor. This is the spirit
          we carry in everything we build.
        </blockquote>
        <cite>-- The Founders, est. 1887</cite>
      </div>
      <div class="rope-divider"></div>
    </div>
  </section>

  <!-- Wanted Poster Section -->
  <section>
    <div class="container">
      <div class="wanted-poster">
        <h2>Wanted</h2>
        <div class="reward-line">Dead or Alive</div>
        <div class="amount">$5,000 Reward</div>
        <p class="description">
          For the capture of exceptional design -- rugged, authentic, and
          unforgettable. Known to leave a lasting impression on all who
          encounter it across these territories.
        </p>
        <div class="reward-line">Contact the Sheriff</div>
      </div>
    </div>
  </section>

  <!-- Services Section (Cards) -->
  <section id="services">
    <div class="container">
      <div class="section-header">
        <h2>Services</h2>
        <hr class="double-rule">
        <p>What we bring to the frontier</p>
      </div>
      <div class="card-grid">
        <div class="card">
          <h3 class="card-title">Trail Blazing</h3>
          <p>We chart the course through uncharted territory, crafting brand identities and visual systems that stake your claim with authority and authenticity.</p>
          <span class="card-badge">Branding</span>
        </div>
        <div class="card">
          <h3 class="card-title">Homesteading</h3>
          <p>Building your digital homestead from the ground up -- websites and applications constructed with the same care and permanence as a frontier settlement.</p>
          <span class="card-badge">Development</span>
        </div>
        <div class="card">
          <h3 class="card-title">Prospecting</h3>
          <p>Mining for the gold in your data and market position. Our strategy work uncovers opportunities hidden beneath the surface and maps a route to claim them.</p>
          <span class="card-badge">Strategy</span>
        </div>
      </div>
    </div>
  </section>

  <!-- Dark Feature Section -->
  <section class="dark-section" id="gallery">
    <div class="container">
      <div class="section-header">
        <h2>Why the Frontier</h2>
        <hr class="double-rule">
        <p style="color: var(--western-rawhide);">The principles that guide our craft</p>
      </div>
      <div class="features">
        <div class="feature-item">
          <div class="feature-icon">&#9733;</div>
          <div>
            <h4>Built to Endure</h4>
            <p>Like frontier architecture, our work is engineered for permanence. No flimsy frameworks -- just solid, lasting craft.</p>
          </div>
        </div>
        <div class="feature-item">
          <div class="feature-icon">&#9733;</div>
          <div>
            <h4>Honest Materials</h4>
            <p>Authentic textures, real typography, and grounded color palettes. No artificial gloss -- just genuine, tactile design.</p>
          </div>
        </div>
        <div class="feature-item">
          <div class="feature-icon">&#9733;</div>
          <div>
            <h4>Clear Authority</h4>
            <p>Strong typographic hierarchy and bold visual weight ensure your message commands attention across the landscape.</p>
          </div>
        </div>
        <div class="feature-item">
          <div class="feature-icon">&#9733;</div>
          <div>
            <h4>Frontier Spirit</h4>
            <p>Independence, resourcefulness, and the courage to forge a path where none existed. Every project is an expedition.</p>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- Call to Action -->
  <section id="contact">
    <div class="container">
      <div class="section-header">
        <h2>Ride With Us</h2>
        <hr class="double-rule">
        <p>Ready to stake your claim? Let us saddle up together.</p>
      </div>
      <div style="text-align: center;">
        <a href="#" class="btn btn--wanted">Start Your Journey</a>
      </div>
    </div>
  </section>

  <!-- Footer -->
  <footer>
    <div class="footer-brand">The Frontier Co.</div>
    <nav>
      <a href="#home">Home</a>
      <a href="#about">About</a>
      <a href="#services">Services</a>
      <a href="#gallery">Gallery</a>
      <a href="#contact">Contact</a>
    </nav>
    <p>&copy; 1887 -- Present. All rights reserved across these territories.</p>
  </footer>

</body>
</html>

Implementation Tips

  • Layer texture subtly: Use CSS gradients and repeating patterns at very low opacity (0.02-0.08) for parchment and grain effects; heavy-handed textures quickly look dated or amateurish
  • Reserve display fonts for headlines only: Rye, Smokum, and Sancreek are powerful at large sizes but illegible at small sizes; always pair them with readable serif body fonts like Lora or Source Serif 4
  • Use the double-rule motif consistently: The thick-thin double horizontal rule is a signature Western typographic device; employ it between sections, under headings, and inside cards for authentic period structure
  • Apply box-shadow offsets for depth: Hard-offset shadows (e.g., 4px 4px 0) rather than soft diffused shadows reinforce the physical, printed, block-like quality of frontier design
  • Introduce turquoise and gold sparingly: These accent colors are most effective when used on small, deliberate elements -- badges, icons, interactive highlights -- rather than large surfaces that would dilute the earth-tone foundation
  • Test contrast ratios on parchment backgrounds: Earth-tone palettes can easily fail WCAG accessibility requirements; ensure --western-dark-sienna on --western-parchment maintains at least a 4.5:1 contrast ratio for body text
  • Animate with restraint: Subtle hover lifts on cards and smooth color transitions suit the aesthetic; avoid bouncy, elastic, or playful animations that contradict the rugged, weighty tone
  • Use border-image for rope borders: The repeating-linear-gradient approach creates convincing rope textures without image assets, keeping the design lightweight and resolution-independent
← Back to designs
Agence WagnerAgence Wagner

© 2026 Agence Wagner. All rights reserved.

Designs from chrislemke/website_designs, licensed under MIT.