Agence WagnerAgence Wagner
FRENDEELS
Back to designs
RétroFuturisteColoréGéométrique
Preview

Raygun Gothic Design Reference

Raygun Gothic is a retrofuturistic aesthetic representing "a view of the future from the perspective of circa 1945 to 1970." It combines a brightly-colored art style drawn from comic books and pulp science fiction with imagery of heroism, discovery, and optimistic technological progress. The aesthetic ranges from a stylized, slightly sci-fi depiction of mid-century America to full futuristic settings with moon cities and intergalactic adventure. Shiny chrome, glowing neon, streamlined curves, rocket fins, and vibrant saturated colors define a world where the Space Age promise was fulfilled. Key values: retrofuturism, optimism, adventure, atomic-era confidence, space exploration, pulp heroism.

Visual Characteristics

Core Motifs and Patterns

  • Rocket ships and fins -- sleek, tapered rockets with stabilizer fins; aircraft-like tail fins on vehicles, buildings, and furniture
  • Chrome grilles and highlights -- polished metal grille patterns, chrome bumper-like accents, reflective metallic trim
  • Starbursts -- radiating spike patterns on clocks, signage, textiles, and decorative elements
  • Atom models -- ball-and-stick atomic structures used as decorative motifs on graphics, textiles, and signage
  • Radar dishes and antennae -- parabolic dish shapes and branching antenna structures as architectural and decorative elements
  • Robots and automatons -- boxy or rounded humanoid robots with riveted panels, antenna ears, and glowing eyes
  • Ray guns and energy beams -- stylized futuristic weapons emitting colorful laser/energy beams
  • Celestial bodies -- planets with visible rings, crescent moons, spiral galaxies, and scattered stars
  • Stylized metal struts and support beams -- exposed structural elements treated as decoration
  • Grates and grille patterns -- geometric ventilation-like patterns used ornamentally
  • Hover vehicles -- streamlined flying cars and saucers with smooth undersides and chrome accents
  • Neon tube forms -- glowing tubular shapes outlining structures, signs, and decorative borders

Design Principles

  • Streamlined aerodynamic curves -- everything suggests speed and forward motion, even stationary objects
  • Optimistic futurism -- designs project confidence that technology will deliver a bright, exciting future
  • Pulp drama and boldness -- high-impact, eye-catching compositions inspired by magazine covers and movie posters
  • Chrome meets color -- gleaming metallic surfaces paired with saturated, vibrant hues
  • Exaggerated scale -- oversized fins, towering antennae, and dramatic rocket forms for visual impact
  • Symmetry with dynamic accents -- broadly symmetrical compositions punctuated by angled fins and sweeping curves
  • Layered depth -- foreground chrome elements over colorful nebula-like backgrounds, creating cinematic depth
  • Mid-century graphic style -- clean lines, bold shapes, and limited-palette illustration techniques from 1950s commercial art

Color Palette

Primary Scheme

Role Colors
Backgrounds Deep space navy, midnight black, dark teal
Primary accents Chrome silver, polished steel
Vibrant accents Rocket red, atomic turquoise, pulp orange, ray-gun green
Glow effects Neon cyan, neon magenta, energy yellow
Warm neutrals Retro cream, ivory white

Detailed Color Specifications

Color Hex (suggested) Usage
Deep Space Navy #0B0E2D, #0D1137 Primary dark backgrounds, deep space fields
Midnight Teal #0A2342, #0F3057 Secondary dark backgrounds, panel bases
Chrome Silver #C0C0C0, #D6D6D6 Metallic accents, chrome trim, borders
Polished Steel #8A9BA8, #7B8D9E Secondary metallics, structural elements
Rocket Red #E23D28, #D42B1E Call-to-action, rocket body accents, bold highlights
Atomic Turquoise #00CED1, #20B2AA Primary vibrant accent, neon glow, highlights
Pulp Orange #FF6B35, #E85D26 Secondary warm accent, energy effects, hover states
Ray-Gun Green #39FF14, #32CD32 Energy beams, laser effects, status indicators
Neon Cyan #00FFFF, #00E5FF Glow effects, neon outlines, interactive highlights
Neon Magenta #FF00FF, #E040FB Secondary glow, alien elements, decorative neon
Energy Yellow #FFD700, #FFC107 Starburst elements, energy pulses, warm highlights
Retro Cream #FAF0DC, #F5EACB Light text on dark, retro paper feel
Cosmic Purple #4A0E78, #5B2C8E Nebula effects, deep accent, cosmic backgrounds

Suggested CSS Custom Properties

:root {
  /* Deep backgrounds */
  --raygun-space: #0b0e2d;
  --raygun-navy: #0d1137;
  --raygun-teal-dark: #0a2342;
  --raygun-midnight: #0f3057;

  /* Metallics */
  --raygun-chrome: #c0c0c0;
  --raygun-chrome-light: #e0e0e0;
  --raygun-chrome-dark: #8a9ba8;
  --raygun-steel: #7b8d9e;

  /* Vibrant accents */
  --raygun-red: #e23d28;
  --raygun-turquoise: #00ced1;
  --raygun-orange: #ff6b35;
  --raygun-green: #39ff14;
  --raygun-yellow: #ffd700;
  --raygun-purple: #5b2c8e;

  /* Neon / glow */
  --raygun-neon-cyan: #00ffff;
  --raygun-neon-magenta: #ff00ff;
  --raygun-neon-green: #39ff14;

  /* Warm neutrals */
  --raygun-cream: #faf0dc;
  --raygun-ivory: #f5f5f0;

  /* Functional */
  --raygun-bg-primary: var(--raygun-space);
  --raygun-bg-secondary: var(--raygun-teal-dark);
  --raygun-bg-panel: var(--raygun-midnight);
  --raygun-text-primary: var(--raygun-cream);
  --raygun-text-heading: var(--raygun-neon-cyan);
  --raygun-accent: var(--raygun-turquoise);
  --raygun-accent-warm: var(--raygun-orange);
  --raygun-border: var(--raygun-chrome);
}

Approaches

  • Deep space with neon accents -- dark navy/black base with glowing cyan, magenta, and green neon outlines and accents
  • Chrome and color pop -- silver metallic surfaces and borders paired with saturated red, orange, and turquoise
  • Pulp magazine palette -- limited bold primaries (red, turquoise, yellow) against deep dark backgrounds, evoking vintage sci-fi cover art
  • Retro-optimist light theme -- cream/ivory backgrounds with chrome accents and bright saturated spot colors (diner/Googie variant)
  • Cosmic gradient fields -- deep purple-to-teal gradient backgrounds suggesting nebulae and deep space, with chrome foreground elements

Typography

Typeface Characteristics

Raygun Gothic typography blends mid-century commercial lettering with space-age futurism:

  • Bold, geometric sans-serifs with a retro-futuristic character
  • Extended or wide letterforms suggesting expansiveness and the vastness of space
  • Uppercase-dominant headlines evoking rocket nosecone stencils and mission patches
  • Inline and dimensional effects -- letters with internal lines, shadows, or bevels suggesting chrome engraving
  • Wide letter-spacing for headlines, mimicking retro signage and pulp magazine mastheads
  • Rounded terminals on body text for a friendly, optimistic mid-century feel
  • Occasional script or brush styles for diner-influenced or nostalgic accents

Recommended Web Fonts (Google Fonts / Free)

Font Style Usage
Orbitron Geometric, futuristic, space-age Headlines, display text
Audiowide Wide, technical, retro-futuristic Headlines, titles
Bungee Bold, playful, display Feature headings, banners
Bungee Shade Dimensional retro display Large hero text, poster-style
Monoton Retro outline display Decorative neon-style titles
Righteous Rounded retro, 1960s feel Subheadings, labels
Russo One Bold, wide, geometric Section headings, navigation
Jost Geometric sans, Futura-inspired Body text, clean all-purpose
Space Grotesk Modern geometric, technical Body text, data displays
Pacifico 1950s brush script Decorative diner-style accents
Bangers Comic book / pulp style Callouts, exclamatory text

Typography CSS Example

/* Headlines */
h1, h2, h3 {
  font-family: 'Orbitron', 'Audiowide', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--raygun-neon-cyan);
  font-weight: 700;
}

/* Display / Hero text */
.raygun-display {
  font-family: 'Bungee Shade', 'Bungee', sans-serif;
  font-size: clamp(3rem, 8vw, 8rem);
  letter-spacing: 0.08em;
  line-height: 1.1;
  color: var(--raygun-neon-cyan);
  text-shadow:
    0 0 10px var(--raygun-neon-cyan),
    0 0 30px rgba(0, 255, 255, 0.4),
    3px 3px 0 var(--raygun-red);
}

/* Body text */
body {
  font-family: 'Jost', 'Space Grotesk', sans-serif;
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1.7;
  color: var(--raygun-cream);
}

/* Retro script accent */
.raygun-script {
  font-family: 'Pacifico', cursive;
  font-size: 1.4em;
  color: var(--raygun-orange);
  transform: rotate(-3deg);
}

/* Pulp / comic callout */
.raygun-pulp {
  font-family: 'Bangers', 'Bungee', sans-serif;
  font-size: 1.6em;
  color: var(--raygun-yellow);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-shadow: 2px 2px 0 var(--raygun-red);
}

Layout Principles

Grid and Structure

  • Dramatic, cinematic compositions -- large hero areas with deep-space backgrounds and chrome-framed content
  • Sweeping curves and arcs -- section boundaries follow parabolic or fin-shaped curves rather than straight horizontal lines
  • Central vertical axis with flanking fins -- content centered with decorative fin or antenna elements on the sides
  • Layered foreground/background -- chrome UI elements float over starfield or gradient cosmic backgrounds
  • Generous vertical spacing -- sections breathe with the vastness of space between them
  • Angled and tapered containers -- panels narrow toward the top or bottom like rocket fuselages

Section Organization

  • Use chrome-bordered panels with rounded corners and metallic gradient edges as content containers
  • Apply neon-glow dividers between sections -- thin lines with cyan or magenta glow effects
  • Create hierarchy through glow intensity -- brighter neon glow = higher importance
  • Employ fin-shaped decorative elements as section separators or side accents
  • Feature starburst or atom decorations as visual punctuation between content blocks
  • Place radar-dish or antenna ornaments in header/navigation areas
  • Use cosmic gradient backgrounds that shift hue between sections (navy to teal to purple)

CSS/Design Techniques

Neon Glow Text Effect

.raygun-neon {
  color: var(--raygun-neon-cyan);
  text-shadow:
    0 0 7px var(--raygun-neon-cyan),
    0 0 10px var(--raygun-neon-cyan),
    0 0 21px var(--raygun-neon-cyan),
    0 0 42px var(--raygun-turquoise),
    0 0 82px var(--raygun-turquoise);
}

/* Magenta neon variant */
.raygun-neon-magenta {
  color: var(--raygun-neon-magenta);
  text-shadow:
    0 0 7px var(--raygun-neon-magenta),
    0 0 10px var(--raygun-neon-magenta),
    0 0 21px var(--raygun-neon-magenta),
    0 0 42px #b000b0,
    0 0 82px #b000b0;
}

Chrome Metallic Surface

/* Polished chrome gradient (vertical reflection) */
.raygun-chrome-surface {
  background: linear-gradient(
    180deg,
    #e8e8e8 0%,
    #c0c0c0 20%,
    #808080 45%,
    #a0a0a0 55%,
    #d4d4d4 80%,
    #f0f0f0 100%
  );
}

/* Chrome text effect */
.raygun-chrome-text {
  background: linear-gradient(
    180deg,
    #ffffff 0%,
    #c0c0c0 35%,
    #707070 50%,
    #c0c0c0 65%,
    #ffffff 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

Starburst Decoration

.raygun-starburst {
  position: relative;
  width: 200px;
  height: 200px;
}

.raygun-starburst::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-conic-gradient(
    var(--raygun-yellow) 0deg 4deg,
    transparent 4deg 12deg
  );
  border-radius: 50%;
  opacity: 0.15;
  animation: starburst-spin 25s linear infinite;
}

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

Rocket Fin Section Divider

.raygun-fin-divider {
  height: 80px;
  position: relative;
  background: var(--raygun-bg-primary);
}

.raygun-fin-divider::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 60px solid transparent;
  border-right: 60px solid transparent;
  border-bottom: 80px solid var(--raygun-chrome);
  opacity: 0.3;
}

/* Alternate: sweeping fin curve */
.raygun-sweep-divider {
  height: 60px;
  background: var(--raygun-bg-secondary);
  clip-path: polygon(0 100%, 0 60%, 40% 0, 60% 0, 100% 60%, 100% 100%);
  border-top: 2px solid var(--raygun-chrome);
}

Neon Border / Glow Box

.raygun-neon-box {
  border: 1px solid var(--raygun-neon-cyan);
  border-radius: 12px;
  box-shadow:
    0 0 8px rgba(0, 255, 255, 0.3),
    0 0 20px rgba(0, 255, 255, 0.1),
    inset 0 0 8px rgba(0, 255, 255, 0.05);
  padding: 2rem;
  background: rgba(10, 35, 66, 0.8);
}

/* Warm neon variant */
.raygun-neon-box-warm {
  border-color: var(--raygun-orange);
  box-shadow:
    0 0 8px rgba(255, 107, 53, 0.3),
    0 0 20px rgba(255, 107, 53, 0.1),
    inset 0 0 8px rgba(255, 107, 53, 0.05);
}

Cosmic Gradient Background

/* Deep space nebula background */
.raygun-cosmic-bg {
  background: linear-gradient(
    160deg,
    #0b0e2d 0%,
    #0a2342 30%,
    #1a0a3e 60%,
    #0f3057 100%
  );
}

/* Animated starfield overlay */
.raygun-starfield {
  background-image:
    radial-gradient(1px 1px at 10% 20%, rgba(255, 255, 255, 0.8), transparent),
    radial-gradient(1px 1px at 40% 60%, rgba(255, 255, 255, 0.6), transparent),
    radial-gradient(1.5px 1.5px at 70% 30%, rgba(255, 255, 255, 0.9), transparent),
    radial-gradient(1px 1px at 85% 75%, rgba(255, 255, 255, 0.5), transparent),
    radial-gradient(1px 1px at 25% 85%, rgba(255, 255, 255, 0.7), transparent),
    radial-gradient(1.5px 1.5px at 55% 10%, rgba(255, 255, 255, 0.6), transparent);
  background-size: 250px 250px;
}

Chrome-Framed Card / Panel

.raygun-card {
  background: linear-gradient(
    160deg,
    rgba(15, 48, 87, 0.9) 0%,
    rgba(10, 35, 66, 0.95) 100%
  );
  border: 1px solid var(--raygun-chrome-dark);
  border-radius: 12px;
  padding: 2rem;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(192, 192, 192, 0.1);
}

/* Chrome top edge highlight */
.raygun-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 5%;
  right: 5%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--raygun-chrome-light) 30%,
    var(--raygun-chrome-light) 70%,
    transparent
  );
}

/* Subtle starburst corner decoration */
.raygun-card::after {
  content: '';
  position: absolute;
  top: -40px;
  right: -40px;
  width: 100px;
  height: 100px;
  background: repeating-conic-gradient(
    var(--raygun-yellow) 0deg 3deg,
    transparent 3deg 15deg
  );
  border-radius: 50%;
  opacity: 0.06;
}

Atom Orbit Decoration

.raygun-atom {
  position: relative;
  width: 120px;
  height: 120px;
}

/* Nucleus */
.raygun-atom-nucleus {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 16px;
  height: 16px;
  background: var(--raygun-neon-cyan);
  border-radius: 50%;
  box-shadow: 0 0 10px var(--raygun-neon-cyan), 0 0 20px var(--raygun-neon-cyan);
}

/* Orbital rings */
.raygun-atom::before,
.raygun-atom::after {
  content: '';
  position: absolute;
  inset: 10%;
  border: 1.5px solid var(--raygun-turquoise);
  border-radius: 50%;
  opacity: 0.5;
}

.raygun-atom::before {
  transform: rotateX(65deg);
  animation: orbit-spin 4s linear infinite;
}

.raygun-atom::after {
  transform: rotateX(65deg) rotateZ(60deg);
  animation: orbit-spin 4s linear infinite reverse;
}

@keyframes orbit-spin {
  to { transform: rotateX(65deg) rotateZ(360deg); }
}

Ray Gun Energy Beam Accent

/* Horizontal energy beam divider */
.raygun-beam {
  height: 3px;
  margin: 2rem auto;
  width: 60%;
  background: linear-gradient(
    90deg,
    transparent,
    var(--raygun-neon-green) 15%,
    var(--raygun-neon-cyan) 50%,
    var(--raygun-neon-green) 85%,
    transparent
  );
  box-shadow:
    0 0 8px rgba(57, 255, 20, 0.4),
    0 0 20px rgba(0, 206, 209, 0.2);
  border-radius: 2px;
}

Grille / Vent Pattern

/* Horizontal chrome grille pattern */
.raygun-grille {
  background: repeating-linear-gradient(
    0deg,
    var(--raygun-chrome) 0px,
    var(--raygun-chrome) 2px,
    var(--raygun-teal-dark) 2px,
    var(--raygun-teal-dark) 8px
  );
  border-radius: 8px;
  padding: 1rem;
  border: 2px solid var(--raygun-chrome);
}

Materials and Textures (Visual Metaphors for Web)

Physical Raygun Gothic materials and their web equivalents:

Physical Material Web Equivalent
Polished chrome / steel Multi-stop silver linear gradients with bright center highlights
Neon tube lighting CSS text-shadow and box-shadow glow effects in cyan, magenta, green
Brushed aluminum Directional gradient with fine repeating-linear-gradient texture overlay
Colored anodized metal Tinted metallic gradients (turquoise-chrome, red-chrome)
Riveted metal panels Subtle dot-pattern backgrounds with chrome borders
Bakelite / early plastics Smooth, deep solid colors (dark teal, burgundy) with slight sheen gradient
Rocket fuselage skin Smooth silver gradient with subtle rivet dot pattern overlay
Neon signage glass Semi-transparent colored borders with outer glow effects
Starfield / deep space Dark gradient backgrounds with scattered radial-gradient star dots
Ray gun energy beam Bright gradient lines with saturated glow box-shadows
Pulp magazine paper Warm cream/ivory backgrounds with slight texture noise
Comic book ink High-contrast flat color blocks with bold dark outlines

Key Influences and References

Reference Contribution
Flash Gordon (1934) Archetypal rocket ships, alien worlds, heroic pulp adventure visual language
Buck Rogers (1929) Ray guns, space suits, chrome cityscapes, retro-futuristic technology
The Jetsons (1962) Domestic retrofuturism, hover cars, automated homes, pastel space-age palette
Forbidden Planet (1956) Chrome interiors, energy weapons, alien architecture, Robby the Robot
Googie architecture Upswept roofs, boomerang shapes, starbursts, space-age commercial design
1950s pulp sci-fi covers Saturated color palettes, dramatic compositions, chrome rockets, alien vistas
Tomorrowland (Disneyland, 1955) Immersive retrofuturistic environments, monorails, space-themed architecture
Meet the Robinsons (2007) Fully realized Raygun Gothic cityscapes, chrome bubble architecture
My Life as a Teenage Robot (2002) Animated Raygun Gothic world with 1950s-meets-future visual design
Aesthetic Relationship to Raygun Gothic
Art Deco Predecessor; shares geometric ornamentation and metallic glamour, which Raygun Gothic projects into space-age contexts
Atompunk Sibling; Atompunk amplifies the nuclear anxiety side while Raygun Gothic emphasizes the optimistic adventure side
Googie Architectural cousin; shares fins, starbursts, and boomerang shapes in commercial building design
Streamline Moderne Direct ancestor; aerodynamic curves and chrome surfaces that Raygun Gothic launches into outer space
Space Age Later evolution; focuses specifically on the 1960s space exploration era with sleeker, more minimal forms
Retrofuturism Parent category; Raygun Gothic is one of the most recognizable retrofuturistic sub-styles
Dieselpunk Period neighbor; shares early-mid 20th century machine aesthetics but with darker, grittier industrial tone
Mid-Century Modern Contemporary; shares era and some forms but Mid-Century Modern is more restrained and domestic
Cassette Futurism Successor; represents the next generation of retrofuturism (1970s-1980s) with analog tech instead of chrome rockets
Diner Overlapping; shares chrome, neon, and bright colors in a terrestrial, food-service context

Quick-Start: Minimal Raygun Gothic Page Template

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Raygun Gothic Page</title>
  <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Jost:wght@300;400;500&family=Bungee+Shade&family=Bangers&display=swap" rel="stylesheet">
  <style>
    :root {
      --raygun-space: #0b0e2d;
      --raygun-teal-dark: #0a2342;
      --raygun-midnight: #0f3057;
      --raygun-chrome: #c0c0c0;
      --raygun-chrome-light: #e0e0e0;
      --raygun-red: #e23d28;
      --raygun-turquoise: #00ced1;
      --raygun-orange: #ff6b35;
      --raygun-neon-cyan: #00ffff;
      --raygun-yellow: #ffd700;
      --raygun-cream: #faf0dc;
    }

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

    body {
      background: linear-gradient(160deg, #0b0e2d 0%, #0a2342 50%, #0f3057 100%);
      color: var(--raygun-cream);
      font-family: 'Jost', sans-serif;
      font-weight: 400;
      letter-spacing: 0.02em;
      line-height: 1.7;
      min-height: 100vh;
    }

    h1, h2, h3 {
      font-family: 'Orbitron', sans-serif;
      text-transform: uppercase;
      letter-spacing: 0.12em;
      color: var(--raygun-neon-cyan);
      text-shadow: 0 0 10px rgba(0, 255, 255, 0.4);
    }

    .hero {
      text-align: center;
      padding: 6rem 2rem;
      position: relative;
      overflow: hidden;
    }

    .hero h1 {
      font-family: 'Bungee Shade', sans-serif;
      font-size: clamp(3rem, 8vw, 7rem);
      letter-spacing: 0.08em;
      color: var(--raygun-neon-cyan);
      text-shadow:
        0 0 10px var(--raygun-neon-cyan),
        0 0 30px rgba(0, 255, 255, 0.3),
        3px 3px 0 var(--raygun-red);
    }

    /* Starburst background decoration */
    .hero::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 600px;
      height: 600px;
      background: repeating-conic-gradient(
        var(--raygun-yellow) 0deg 3deg,
        transparent 3deg 12deg
      );
      border-radius: 50%;
      opacity: 0.04;
      pointer-events: none;
    }

    .raygun-divider {
      width: 60%;
      margin: 2rem auto;
      border: none;
      height: 2px;
      background: linear-gradient(
        90deg,
        transparent,
        var(--raygun-neon-cyan) 20%,
        var(--raygun-neon-cyan) 80%,
        transparent
      );
      box-shadow: 0 0 8px rgba(0, 255, 255, 0.3);
    }

    section {
      max-width: 900px;
      margin: 0 auto;
      padding: 4rem 2rem;
      text-align: center;
    }

    .raygun-card {
      background: rgba(15, 48, 87, 0.8);
      border: 1px solid rgba(192, 192, 192, 0.3);
      border-radius: 12px;
      padding: 2rem;
      box-shadow:
        0 4px 20px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(192, 192, 192, 0.1);
    }

    a {
      color: var(--raygun-neon-cyan);
      text-decoration: none;
      border-bottom: 1px dashed var(--raygun-turquoise);
    }

    a:hover {
      color: var(--raygun-orange);
      border-bottom-color: var(--raygun-orange);
      text-shadow: 0 0 8px var(--raygun-orange);
    }
  </style>
</head>
<body>
  <div class="hero">
    <h1>Title Here</h1>
    <hr class="raygun-divider">
    <p>A retrofuturistic subtitle in clean Jost</p>
  </div>
  <section>
    <div class="raygun-card">
      <h2>Section Heading</h2>
      <p>Content with Raygun Gothic styling applied.</p>
    </div>
  </section>
</body>
</html>
← Back to designs
Agence WagnerAgence Wagner

© 2026 Agence Wagner. All rights reserved.

Designs from chrislemke/website_designs, licensed under MIT.