Agence WagnerAgence Wagner
FRENDEELS
Back to designs
RétroClassiqueMonochrome
Preview

Heroic Realism -- Design Reference

An art and design style using realistic techniques to create idealized, larger-than-life depictions of human figures -- originally developed for propaganda posters, murals, and monumental sculpture. Also known as Socialist Realism (Soviet variant), Propaganda Art, or Monumental Realism.

Visual Characteristics

  • Illustration style: Realistic depictions of figures, often exaggerated for a "larger-than-life" effect. Physically perfect individuals rendered with anatomical precision but idealized proportions.
  • Tone: Inspirational, commanding, awe-inducing. Designed to evoke duty, strength, sacrifice, and collective purpose.
  • Subject matter: Idealized workers, soldiers, athletes, national personifications (Uncle Sam, Mother Russia, Marianne), warriors, and stylized animals. Figures embody strength, virtue, and determination.
  • Composition: Dynamic arrangements that create a sense of movement and energy. Figures are placed at monumental scale with strong diagonals and upward-thrusting poses.
  • Key gestures: Raised fists and pointing index fingers to convey power, direction, and call to action.
  • Key influence: Soviet propaganda posters, WPA murals, Shepard Fairey's "Hope" poster, Diego Rivera's Mexican murals, Vera Mukhina's sculpture, Arno Breker's monumental figures.
  • Modern applications: Video games (Command & Conquer, Bioshock Infinite), political campaign art, brand identity with heroic messaging.

Color Palette

Primary Palette

Role Colors
Power colors Deep red, gold/yellow, strong blue, black
National tones Crimson, navy blue, white, military olive, bronze
Backgrounds Deep slate, parchment cream, steel grey, midnight blue
Accents Bright gold, soviet red, hammer yellow, sky blue

CSS Custom Properties

:root {
  /* Power Reds */
  --heroic-crimson:       #B22234;
  --heroic-soviet-red:    #CC0000;
  --heroic-deep-red:      #8B0000;
  --heroic-blood-red:     #6B0F1A;

  /* Golds & Yellows */
  --heroic-gold:          #D4A017;
  --heroic-bright-gold:   #FFD700;
  --heroic-hammer-yellow: #F0C420;
  --heroic-bronze:        #CD7F32;

  /* Blues */
  --heroic-navy:          #002147;
  --heroic-steel-blue:    #3B5998;
  --heroic-sky:           #5B8DB8;
  --heroic-midnight:      #191970;

  /* Neutrals */
  --heroic-black:         #1A1A1A;
  --heroic-charcoal:      #2C2C2C;
  --heroic-slate:         #3D3D3D;
  --heroic-steel-grey:    #71797E;
  --heroic-parchment:     #F5F0E1;
  --heroic-white:         #FAFAFA;

  /* Military & Earth */
  --heroic-olive:         #556B2F;
  --heroic-khaki:         #8B7D3C;
  --heroic-concrete:      #95A5A6;
}

Color Usage Guidelines

  • Backgrounds: Use deep, authoritative tones -- navy, charcoal, slate, or midnight blue. For contrast sections use parchment cream or steel grey. Avoid pastel or playful tones.
  • Headlines and bold text: Bright gold or white on dark backgrounds for maximum impact. Soviet red on light backgrounds.
  • Accent elements: Gold and crimson for badges, banners, stars, and borders. Use sparingly for high-contrast focal points.
  • Figures and illustrations: Rich, saturated tones with dramatic chiaroscuro lighting -- deep shadows against warm highlights.
  • Overall feeling: Bold, saturated, and authoritative. High contrast between darks and brights. The palette commands attention and conveys power, not comfort.

Typography

Font Characteristics

  • Headlines: Bold, condensed, uppercase display typefaces with strong vertical stress. Industrial and commanding -- reminiscent of propaganda poster lettering. Tall, narrow letterforms convey upward thrust and strength.
  • Body text: Clean, highly legible sans-serifs with geometric or humanist structure. Clarity and readability support the messaging-first philosophy.
  • Accent text: Stencil, slab-serif, or extra-bold condensed styles for slogans, callouts, and banner text. Text is a weapon -- every word should feel deliberate.
Role Fonts (Google Fonts / System)
Display Oswald (Bold/Black), Anton, Bebas Neue, Impact
Headings Roboto Condensed (Bold), Barlow Condensed (Bold), Teko
Body Roboto, Source Sans Pro, IBM Plex Sans, Inter
Slogans Stint Ultra Expanded, Black Ops One, Staatliches

CSS Typography Example

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500;700&family=Roboto+Condensed:wght@700&family=Roboto:wght@400;700&family=Bebas+Neue&display=swap');

h1, h2, h3 {
  font-family: 'Oswald', 'Impact', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1.1;
  color: var(--heroic-bright-gold);
}

h1 {
  font-family: 'Bebas Neue', 'Oswald', sans-serif;
  font-size: 4rem;
  letter-spacing: 0.12em;
}

body {
  font-family: 'Roboto', 'Helvetica Neue', sans-serif;
  font-weight: 400;
  line-height: 1.6;
  color: var(--heroic-parchment);
}

.slogan {
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-size: 1.4rem;
  color: var(--heroic-soviet-red);
}

Key Design Elements and Motifs

Recurring Visual Motifs

  • Raised fists -- power, solidarity, revolution; used as icons, dividers, and focal points
  • Pointing fingers -- call to action, directional emphasis, recruitment imagery
  • Stars -- five-pointed stars as badges, decorative elements, and hierarchical markers
  • Laurel wreaths -- achievement, honor, framing device for logos and headings
  • Gear / cog wheels -- industry, labor, mechanical progress
  • Wheat sheaves -- abundance, agricultural strength, prosperity
  • Banners and ribbons -- text containers for slogans and titles
  • Sunbursts / radiating lines -- dawn of a new era, progress, hope, divine light behind figures
  • Flags and national symbols -- patriotic reinforcement, identity anchoring
  • Monumental figures -- oversized human forms dominating the composition
  • Upward diagonals -- dynamic lines suggesting progress, ascent, and forward motion
  • Hammers, sickles, tools -- labor symbols (adapt to context-appropriate modern equivalents)

Decorative CSS Patterns

/* Radiating sunburst behind hero content */
.sunburst {
  background: var(--heroic-navy);
  background-image:
    repeating-conic-gradient(
      var(--heroic-midnight) 0deg 10deg,
      var(--heroic-navy) 10deg 20deg
    );
  position: relative;
}

.sunburst::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at center,
    transparent 30%,
    var(--heroic-navy) 70%
  );
}

/* Five-pointed star using clip-path */
.star {
  display: inline-block;
  width: 60px;
  height: 60px;
  background: var(--heroic-bright-gold);
  clip-path: polygon(
    50% 0%, 61% 35%, 98% 35%, 68% 57%,
    79% 91%, 50% 70%, 21% 91%, 32% 57%,
    2% 35%, 39% 35%
  );
}

/* Propaganda-style banner ribbon */
.banner-ribbon {
  background: var(--heroic-soviet-red);
  color: var(--heroic-bright-gold);
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 0.8rem 3rem;
  position: relative;
  display: inline-block;
  text-align: center;
}

.banner-ribbon::before,
.banner-ribbon::after {
  content: '';
  position: absolute;
  top: 0;
  border-style: solid;
  border-color: var(--heroic-soviet-red);
  height: 100%;
}

.banner-ribbon::before {
  left: -1.5rem;
  border-width: 1.4rem 1.5rem 1.4rem 0;
  border-left-color: transparent;
}

.banner-ribbon::after {
  right: -1.5rem;
  border-width: 1.4rem 0 1.4rem 1.5rem;
  border-right-color: transparent;
}

/* Diagonal progress stripes */
.progress-stripes {
  background: repeating-linear-gradient(
    -45deg,
    var(--heroic-soviet-red) 0px,
    var(--heroic-soviet-red) 10px,
    var(--heroic-deep-red) 10px,
    var(--heroic-deep-red) 20px
  );
  height: 8px;
}

/* Laurel wreath border for badges */
.laurel-badge {
  border: 4px solid var(--heroic-bright-gold);
  border-radius: 50%;
  padding: 2rem;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 0 0 2px var(--heroic-charcoal),
    0 0 0 6px var(--heroic-bright-gold);
}

Textures and Materials

  • Concrete and stone -- monumental, solid surfaces evoking public buildings and monuments.
  • Aged paper and canvas -- slightly distressed textures for poster authenticity without excessive grunge.
  • Metal and steel -- industrial finishes, brushed metal effects for headers and borders.
  • Linen and canvas weave -- subtle background textures referencing original poster printing.
  • Ink and lithograph grain -- halftone-like patterns and printing artifacts for authenticity.

CSS Texture Techniques

/* Stone / concrete texture overlay */
.concrete-bg {
  background-color: var(--heroic-slate);
  background-image:
    linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.05) 0%,
      rgba(0, 0, 0, 0.02) 50%,
      rgba(0, 0, 0, 0.06) 100%
    );
}

/* Aged poster paper */
.aged-paper {
  background-color: var(--heroic-parchment);
  background-image:
    radial-gradient(
      ellipse at 20% 50%,
      rgba(139, 119, 42, 0.06) 0%,
      transparent 50%
    ),
    radial-gradient(
      ellipse at 80% 20%,
      rgba(139, 119, 42, 0.04) 0%,
      transparent 40%
    ),
    linear-gradient(
      to bottom,
      rgba(107, 15, 26, 0.03) 0%,
      transparent 20%,
      transparent 80%,
      rgba(107, 15, 26, 0.04) 100%
    );
}

/* Metallic / brushed steel effect */
.brushed-steel {
  background:
    linear-gradient(
      90deg,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,0.08) 25%,
      rgba(255,255,255,0) 50%,
      rgba(255,255,255,0.05) 75%,
      rgba(255,255,255,0) 100%
    ),
    linear-gradient(
      to bottom,
      var(--heroic-steel-grey),
      var(--heroic-slate)
    );
}

/* Halftone / print grain overlay */
.halftone-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(
    circle, rgba(0,0,0,0.15) 1px, transparent 1px
  );
  background-size: 4px 4px;
  pointer-events: none;
  mix-blend-mode: multiply;
}

Layout Principles

Structure

  • Monumental and vertical -- compositions emphasize height and upward movement. Tall hero sections, vertical stacking, and strong central axes.
  • Hierarchical focal points -- one dominant element (the hero figure or headline) commands attention. Supporting elements are clearly subordinate.
  • Symmetrical and centered -- bilateral symmetry conveys authority, stability, and institutional power. Center-aligned headers are standard.
  • Strong grid with clear boundaries -- content is contained in clearly defined blocks with bold borders. No ambiguity in spatial relationships.
  • Text as design element -- bold typography is integrated directly into the visual composition, not treated as an afterthought. Slogans and headings are compositional anchors.
  • Dramatic scale contrast -- large headlines and figures juxtaposed with smaller supporting text creates visual drama.

Grid and Spacing

.heroic-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  max-width: 1400px;
  margin: 0 auto;
  background: var(--heroic-charcoal);
}

.heroic-section {
  padding: 4rem 3rem;
  position: relative;
  border-bottom: 4px solid var(--heroic-bright-gold);
}

.heroic-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 2.5rem;
  padding: 3rem;
}

.heroic-card {
  background: var(--heroic-slate);
  border: 2px solid var(--heroic-bright-gold);
  padding: 2rem;
  position: relative;
  text-align: center;
}

.heroic-card::before {
  content: '';
  position: absolute;
  top: -2px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 4px;
  background: var(--heroic-soviet-red);
}

/* Bold section divider */
.heroic-divider {
  height: 8px;
  background: linear-gradient(
    to right,
    var(--heroic-soviet-red) 0%,
    var(--heroic-bright-gold) 50%,
    var(--heroic-soviet-red) 100%
  );
  margin: 0;
}

Header / Hero Section

.heroic-hero {
  background: var(--heroic-navy);
  text-align: center;
  padding: 6rem 2rem 4rem;
  position: relative;
  overflow: hidden;
}

/* Radiating lines behind hero */
.heroic-hero::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: repeating-conic-gradient(
    var(--heroic-midnight) 0deg 5deg,
    transparent 5deg 10deg
  );
  opacity: 0.3;
  animation: heroic-rotate 120s linear infinite;
}

@keyframes heroic-rotate {
  to { transform: rotate(360deg); }
}

.heroic-hero h1 {
  position: relative;
  z-index: 1;
  font-family: 'Bebas Neue', 'Oswald', sans-serif;
  font-size: 5rem;
  color: var(--heroic-bright-gold);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  text-shadow:
    3px 3px 0 var(--heroic-black),
    0 0 30px rgba(212, 160, 23, 0.3);
  margin-bottom: 1rem;
}

.heroic-hero .tagline {
  position: relative;
  z-index: 1;
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 700;
  font-size: 1.6rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--heroic-soviet-red);
  border-top: 2px solid var(--heroic-bright-gold);
  border-bottom: 2px solid var(--heroic-bright-gold);
  display: inline-block;
  padding: 0.5rem 2rem;
  margin-top: 1.5rem;
}

Call-to-Action / Propaganda Button

.heroic-cta {
  display: inline-block;
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: 1.2rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--heroic-bright-gold);
  background: var(--heroic-soviet-red);
  border: 3px solid var(--heroic-bright-gold);
  padding: 1rem 3rem;
  cursor: pointer;
  position: relative;
  transition: all 0.2s ease;
  text-decoration: none;
}

.heroic-cta:hover {
  background: var(--heroic-deep-red);
  box-shadow:
    0 0 20px rgba(204, 0, 0, 0.5),
    inset 0 0 20px rgba(255, 215, 0, 0.1);
  transform: scale(1.03);
}

.heroic-cta::after {
  content: '';
  position: absolute;
  bottom: -6px;
  right: -6px;
  width: 100%;
  height: 100%;
  border: 2px solid var(--heroic-bright-gold);
  z-index: -1;
  opacity: 0.4;
}

Design Techniques Summary

Technique Implementation
Radiating sunburst repeating-conic-gradient() behind hero content
Monumental scale Hero headings at 4--5rem with heavy letter-spacing
Gold on dark color: #FFD700 on background: #002147 for maximum authority
Five-pointed stars CSS clip-path: polygon() in gold or red
Banner ribbons Pseudo-elements with angled borders forming ribbon tails
Propaganda borders Thick (3--4px) gold or red borders on cards and sections
Hard shadow depth box-shadow: 4px 4px 0 #1A1A1A for poster-print offset effect
Diagonal progress stripes repeating-linear-gradient(-45deg, ...) in red tones
Dramatic text shadows Multi-layer text-shadow for embossed, glowing headline effect
Halftone print grain Tiny radial-gradient dots with mix-blend-mode: multiply
Upward diagonal layout Rotated or skewed section dividers to suggest upward motion
Strong center axis text-align: center with bilateral symmetry throughout

These aesthetics share visual DNA with Heroic Realism and can be blended or referenced:

Aesthetic Relationship
Socialist Realism Soviet-specific variant; shares all core visual principles and motifs
American Kitsch Uses similar poster techniques but for commercial/domestic subjects
Mexican Muralism Monumental public art with social messaging; Diego Rivera, Orozco
Plakatstil German poster style; bold flat color, minimal detail, powerful simplicity
Realism Parent movement; Heroic Realism adds idealization and propaganda intent
Romanticism Shares dramatic emotion and heroic subjects, but with more painterly feel
Sots Art Ironic, postmodern deconstruction of Socialist Realist imagery
Sovietwave Nostalgic, vaporwave-influenced remix of Soviet visual culture
Politicalwave Contemporary aesthetic blending political imagery with internet culture

Quick-Start Template Skeleton

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Heroic Realism Page</title>
  <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Oswald:wght@500;700&family=Roboto+Condensed:wght@700&family=Roboto:wght@400;700&display=swap" rel="stylesheet">
  <style>
    :root {
      --heroic-crimson:       #B22234;
      --heroic-soviet-red:    #CC0000;
      --heroic-deep-red:      #8B0000;
      --heroic-blood-red:     #6B0F1A;
      --heroic-gold:          #D4A017;
      --heroic-bright-gold:   #FFD700;
      --heroic-hammer-yellow: #F0C420;
      --heroic-navy:          #002147;
      --heroic-steel-blue:    #3B5998;
      --heroic-midnight:      #191970;
      --heroic-black:         #1A1A1A;
      --heroic-charcoal:      #2C2C2C;
      --heroic-slate:         #3D3D3D;
      --heroic-steel-grey:    #71797E;
      --heroic-parchment:     #F5F0E1;
      --heroic-white:         #FAFAFA;
    }

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

    body {
      font-family: 'Roboto', 'Helvetica Neue', sans-serif;
      background: var(--heroic-charcoal);
      color: var(--heroic-parchment);
      line-height: 1.6;
    }

    header {
      background: var(--heroic-navy);
      text-align: center;
      padding: 6rem 2rem 4rem;
      position: relative;
      overflow: hidden;
      border-bottom: 6px solid var(--heroic-bright-gold);
    }

    header::before {
      content: '';
      position: absolute;
      top: -50%; left: -50%;
      width: 200%; height: 200%;
      background: repeating-conic-gradient(
        var(--heroic-midnight) 0deg 5deg,
        transparent 5deg 10deg
      );
      opacity: 0.25;
    }

    header h1 {
      position: relative; z-index: 1;
      font-family: 'Bebas Neue', sans-serif;
      font-size: 5rem;
      color: var(--heroic-bright-gold);
      text-transform: uppercase;
      letter-spacing: 0.15em;
      text-shadow: 3px 3px 0 var(--heroic-black);
    }

    header p {
      position: relative; z-index: 1;
      font-family: 'Roboto Condensed', sans-serif;
      font-weight: 700;
      font-size: 1.4rem;
      text-transform: uppercase;
      letter-spacing: 0.2em;
      color: var(--heroic-soviet-red);
      margin-top: 1rem;
    }

    .divider {
      height: 8px;
      background: linear-gradient(
        to right,
        var(--heroic-soviet-red),
        var(--heroic-bright-gold),
        var(--heroic-soviet-red)
      );
    }

    main {
      max-width: 1200px;
      margin: 0 auto;
      padding: 4rem 2rem;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
      gap: 2.5rem;
    }

    .card {
      background: var(--heroic-slate);
      border: 2px solid var(--heroic-bright-gold);
      padding: 2.5rem 2rem;
      text-align: center;
      position: relative;
    }

    .card::before {
      content: '';
      position: absolute;
      top: -2px; left: 50%;
      transform: translateX(-50%);
      width: 60px; height: 4px;
      background: var(--heroic-soviet-red);
    }

    .card h2 {
      font-family: 'Oswald', sans-serif;
      font-weight: 700;
      font-size: 1.6rem;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--heroic-bright-gold);
      margin-bottom: 1rem;
    }

    .card p {
      color: var(--heroic-parchment);
      line-height: 1.7;
    }

    footer {
      background: var(--heroic-black);
      color: var(--heroic-steel-grey);
      text-align: center;
      padding: 2rem;
      font-family: 'Roboto Condensed', sans-serif;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      border-top: 4px solid var(--heroic-bright-gold);
    }
  </style>
</head>
<body>
  <header>
    <h1>Page Title Here</h1>
    <p>A Bold Slogan for the People</p>
  </header>
  <div class="divider"></div>
  <main>
    <div class="card">
      <h2>Section One</h2>
      <p>Content goes here. Bold, clear, and purposeful.</p>
    </div>
    <div class="card">
      <h2>Section Two</h2>
      <p>Content goes here. Every word serves the mission.</p>
    </div>
    <div class="card">
      <h2>Section Three</h2>
      <p>Content goes here. Strength through clarity.</p>
    </div>
  </main>
  <footer>
    <p>Built with determination and purpose</p>
  </footer>
</body>
</html>
← Back to designs
Agence WagnerAgence Wagner

© 2026 Agence Wagner. All rights reserved.

Designs from chrislemke/website_designs, licensed under MIT.