Agence WagnerAgence Wagner
FRENDEELS
Zruck züe de Designs
RétroColoréTexture
Vorschau

70s Retro Design Reference

Overview

70s Retro is a warm, nostalgic design aesthetic rooted in the visual culture of the 1970s, drawing from both the earthy, back-to-nature hippie movement and the glamorous, exuberant disco era. Its signature palette of harvest gold, avocado green, burnt orange, and chocolate brown was born from the decade's environmental consciousness and celebration of natural materials like wood, rattan, and macrame. On the web, 70s Retro translates into rich earth-toned color schemes, bold rounded typography reminiscent of Cooper Black and hand-lettered signage, textured backgrounds evoking wood paneling and shag carpet, and decorative motifs such as sunbursts, mushrooms, and paisley patterns. The aesthetic embraces analog warmth over digital sterility, using grain overlays, rounded corners, and layered gradients to create interfaces that feel tactile, inviting, and unabashedly groovy. Whether channeling the mellow vibe of a record store or the sparkle of a disco dance floor, 70s Retro design rejects the cold precision of modernism in favor of personality, pattern, and a deeply saturated sense of fun.

Visual Characteristics

Core Design Traits

  • Earth-toned color dominance: Warm browns, harvest golds, avocado greens, burnt oranges, and rusty reds form the backbone of every layout, evoking the decade's embrace of natural materials and environmental consciousness
  • Bold, rounded typography: Thick, curvy display typefaces with rounded serifs and bubble-letter forms channel the hand-lettered signage, album covers, and poster art of the era
  • Sunburst and radial patterns: Radiating line patterns, starburst shapes, and concentric circles serve as backgrounds, dividers, and decorative accents throughout the design
  • Textured, tactile surfaces: Wood grain, cork, shag carpet, woven textile, and paper textures layered via CSS create an analog warmth that fights the flatness of the screen
  • Mushroom, floral, and botanical motifs: Toadstool illustrations, daisy chains, fern fronds, and trailing vine patterns appear as ornamental elements reflecting the decade's nature obsession
  • Warm gradients and halftone effects: Smooth color transitions between oranges, yellows, and browns paired with dot-matrix halftone overlays give layouts a printed, physical quality
  • Rounded geometry and soft shapes: Circles, rounded rectangles, arched doorway shapes, and wavy lines replace sharp angles and hard corners throughout the interface
  • Macrame and woven border details: Knotted, fringed, and woven decorative borders evoke the handcraft movement that defined 70s domestic interiors
  • Disco shimmer and metallic accents: Gold foil textures, mirror-ball sparkle effects, and metallic gradients represent the glamorous nightlife side of the decade
  • Film grain and analog noise: Subtle noise overlays and slight desaturation filters give digital imagery the warm, slightly faded look of 70s photography and film stock

Design Principles

  • Analog warmth over digital precision: Every element should feel as though it was printed on textured paper, carved from wood, or woven by hand rather than generated by a computer
  • Unapologetic boldness: The 70s were loud, confident, and expressive; typography should be oversized, colors should be saturated, and patterns should be layered without apology
  • Earth-first palette with disco accents: Ground the design in muted natural tones but allow strategic bursts of gold shimmer, mirror-ball sparkle, or neon warmth to keep the energy alive
  • Handcrafted imperfection: Embrace slight irregularities, hand-drawn qualities, and organic asymmetry; machine-perfect alignment contradicts the era's spirit
  • Pattern as personality: Use repeating patterns (stripes, florals, geometrics, paisleys) as core design elements rather than mere decoration; pattern communicates the era more than any single element
  • Layered depth through texture: Build visual richness by stacking textures, gradients, and patterns rather than relying on flat color fills and sharp vector graphics
  • Nostalgic but not ironic: Approach the aesthetic with genuine affection rather than kitsch mockery; the warmth should feel sincere, not satirical

Color Palette

The 70s palette is dominated by warm earth tones inspired by the natural world and the decade's embrace of organic materials. These colors appeared on everything from kitchen appliances to album covers, and they remain instantly recognizable as the visual signature of the era.

Swatch Hex Role/Usage
Harvest Gold #DAA520 Primary accent, call-to-action buttons, headline highlights
Burnt Orange #CC5500 Secondary accent, hover states, warm emphasis
Avocado Green #568203 Nature accent, badges, success states
Chocolate Brown #3E2723 Primary text, deep backgrounds, footer
Rust #B7410E Tertiary accent, borders, active states
Mustard Yellow #E4A010 Highlights, tags, warm glow effects
Cream #FFF8E7 Primary background, card surfaces
Tan #D2B48C Secondary background, surface variation
Olive Green #6B6B3C Muted accent, secondary text
Terracotta #C2714F Decorative accent, dividers, warm midtone
Deep Teal #006D6F Cool contrast accent, links
Paprika Red #8B2500 Error states, strong emphasis
Warm White #FAF0E6 Alternate light background, card highlight
Dusty Rose #C08081 Soft accent, disco-era femininity
Disco Gold #FFD700 Metallic shimmer, sparkle effects, glamour accents

CSS Custom Properties

:root {
  /* --- Primary Earth Tones --- */
  --retro-harvest-gold: #DAA520;
  --retro-burnt-orange: #CC5500;
  --retro-avocado: #568203;
  --retro-chocolate: #3E2723;
  --retro-rust: #B7410E;
  --retro-mustard: #E4A010;

  /* --- Backgrounds & Neutrals --- */
  --retro-cream: #FFF8E7;
  --retro-tan: #D2B48C;
  --retro-warm-white: #FAF0E6;

  /* --- Supporting Accents --- */
  --retro-olive: #6B6B3C;
  --retro-terracotta: #C2714F;
  --retro-teal: #006D6F;
  --retro-paprika: #8B2500;
  --retro-dusty-rose: #C08081;
  --retro-disco-gold: #FFD700;

  /* --- Functional Tokens --- */
  --retro-bg: var(--retro-cream);
  --retro-text: var(--retro-chocolate);
  --retro-heading: var(--retro-chocolate);
  --retro-accent: var(--retro-burnt-orange);
  --retro-link: var(--retro-teal);
  --retro-surface: var(--retro-warm-white);
  --retro-border: var(--retro-tan);
  --retro-highlight: var(--retro-harvest-gold);
}

Typography

70s typography is defined by bold, rounded, high-impact display faces with generous curves and thick strokes. Headings borrow from the era's poster art and album cover lettering, while body text maintains warmth through humanist serif or rounded sans-serif forms. Script and handwritten faces serve as accent text, capturing the decade's handcrafted, personal quality.

Font Weight(s) Usage Link
Righteous 400 Display headings, hero titles, bold statements fonts.google.com/specimen/Righteous
Boogaloo 400 Playful headings, subheadings, taglines fonts.google.com/specimen/Boogaloo
Fredoka 300, 400, 500, 600, 700 Rounded headings, buttons, UI labels fonts.google.com/specimen/Fredoka
Caprasimo 400 Bubbly display text, feature headlines fonts.google.com/specimen/Caprasimo
Libre Baskerville 400, 700 Body text, long-form reading, editorial content fonts.google.com/specimen/Libre+Baskerville
DM Serif Display 400 Elegant display headings, vintage editorial feel fonts.google.com/specimen/DM+Serif+Display
Shadows Into Light 400 Handwritten accent text, decorative labels, quotes fonts.google.com/specimen/Shadows+Into+Light
Lora 400, 500, 600, 700 Warm serif body text, paragraphs, captions fonts.google.com/specimen/Lora

Font Pairing Suggestions

Heading Body Vibe
Righteous Libre Baskerville Bold groovy headlines with warm, readable editorial body text
Boogaloo Lora Playful, funky headings grounded by elegant serif paragraphs
Caprasimo Libre Baskerville Bubbly, high-impact display with classic serif readability
Fredoka 600 Lora Rounded, friendly headings with warm traditional body text
DM Serif Display Libre Baskerville Vintage editorial grandeur paired with bookish body text

CSS Example

@import url('https://fonts.googleapis.com/css2?family=Righteous&family=Boogaloo&family=Fredoka:wght@400;500;600;700&family=Libre+Baskerville:wght@400;700&family=Shadows+Into+Light&display=swap');

/* === Base Typography === */
body {
  font-family: 'Libre Baskerville', 'Georgia', serif;
  font-size: 1.05rem;
  line-height: 1.8;
  color: var(--retro-text);
  background-color: var(--retro-bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: 'Righteous', 'Impact', cursive;
  color: var(--retro-heading);
  line-height: 1.15;
  letter-spacing: 0.01em;
}

h1 {
  font-size: clamp(2.8rem, 7vw, 5.5rem);
}

h2 {
  font-size: clamp(2rem, 4.5vw, 3.5rem);
}

h3 {
  font-size: clamp(1.4rem, 3vw, 2rem);
}

a {
  color: var(--retro-link);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  transition: color 0.3s ease;
}

a:hover {
  color: var(--retro-burnt-orange);
}

.handwritten {
  font-family: 'Shadows Into Light', cursive;
  font-size: 1.4rem;
  color: var(--retro-terracotta);
}

.groovy-label {
  font-family: 'Boogaloo', cursive;
  font-size: 1.1rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--retro-burnt-orange);
}

Layout Principles

  • Centered, contained layouts with decorative overflow: Keep readable content at 800-960px max-width but allow decorative elements like sunbursts, patterns, and curved shapes to extend beyond the content boundary
  • Rounded containers and arched sections: Use large border-radius values, clip-path arches, and circular frames to soften every container; the 70s aesthetic has no sharp corners
  • Generous vertical rhythm: Maintain 48-80px spacing between major sections to let the rich textures and bold colors breathe without overwhelming the viewer
  • Horizontal stripe and band layouts: Alternate between warm background color bands (cream, tan, olive, brown) to create the layered, banded look found in 70s wallpaper and textile design
  • Asymmetric accent placement: Position decorative mushroom illustrations, floral motifs, and sunburst patterns off-center for an organic, hand-arranged feel
  • Card grids with rounded corners: Present content in rounded-rectangle cards with warm shadows, arranged in relaxed 2-3 column grids that feel like a corkboard or record shelf
  • Full-width hero sections with radial backgrounds: Use large conic or radial gradient sunbursts behind hero content to create the era's signature radiating energy
  • Footer as wood-paneled den: The footer should use the darkest browns and warmest golds, evoking the wood-paneled family room that defined 70s domestic architecture

CSS / Design Techniques

Retro Card Component

A warm, rounded content card with textured depth that evokes a piece of craft paper pinned to a corkboard.

.retro-card {
  background: linear-gradient(145deg, #FAF0E6 0%, #FFF8E7 100%);
  border: 2px solid var(--retro-tan);
  border-radius: 16px;
  padding: 32px;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 4px 16px rgba(62, 39, 35, 0.1),
    0 1px 3px rgba(62, 39, 35, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.retro-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 2px,
      rgba(62, 39, 35, 0.015) 2px,
      rgba(62, 39, 35, 0.015) 4px
    );
  pointer-events: none;
}

.retro-card::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #CC5500, #DAA520, #568203);
  border-radius: 0 0 16px 16px;
}

.retro-card:hover {
  transform: translateY(-4px);
  box-shadow:
    0 8px 28px rgba(62, 39, 35, 0.15),
    0 2px 6px rgba(62, 39, 35, 0.1);
}

.retro-card h3 {
  font-family: 'Boogaloo', cursive;
  font-size: 1.5rem;
  color: var(--retro-chocolate);
  margin-bottom: 12px;
}

.retro-card p {
  font-size: 1rem;
  line-height: 1.75;
}

Groovy Button

A bold, rounded button with warm gradients and a tactile press effect.

.retro-button {
  display: inline-block;
  font-family: 'Fredoka', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 14px 36px;
  border: none;
  border-radius: 50px;
  background: linear-gradient(135deg, #CC5500 0%, #DAA520 100%);
  color: #FFF8E7;
  cursor: pointer;
  text-decoration: none;
  text-transform: uppercase;
  box-shadow:
    0 4px 12px rgba(204, 85, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.retro-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.2),
    transparent
  );
  transition: left 0.5s ease;
}

.retro-button:hover {
  transform: translateY(-2px);
  box-shadow:
    0 6px 20px rgba(204, 85, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.retro-button:hover::before {
  left: 100%;
}

.retro-button:active {
  transform: translateY(1px);
  box-shadow:
    0 2px 6px rgba(204, 85, 0, 0.3),
    inset 0 2px 4px rgba(0, 0, 0, 0.15);
}

.retro-button--outline {
  background: transparent;
  color: var(--retro-burnt-orange);
  border: 2.5px solid var(--retro-burnt-orange);
  box-shadow: none;
}

.retro-button--outline:hover {
  background: var(--retro-burnt-orange);
  color: var(--retro-cream);
  box-shadow: 0 4px 16px rgba(204, 85, 0, 0.3);
}

A warm, retro-styled top navigation with rounded links and a wood-toned feel.

.retro-nav {
  background: linear-gradient(180deg, #3E2723 0%, #4E342E 100%);
  padding: 14px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 8px rgba(62, 39, 35, 0.3);
}

.retro-nav .logo {
  font-family: 'Righteous', cursive;
  font-size: 1.6rem;
  color: #DAA520;
  text-decoration: none;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.retro-nav-links {
  display: flex;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.retro-nav-links a {
  font-family: 'Fredoka', sans-serif;
  font-size: 0.9rem;
  font-weight: 500;
  color: #FAF0E6;
  text-decoration: none;
  padding: 8px 20px;
  border-radius: 24px;
  transition: all 0.3s ease;
}

.retro-nav-links a:hover {
  background: rgba(218, 165, 32, 0.2);
  color: #DAA520;
}

.retro-nav-links a.active {
  background: #CC5500;
  color: #FFF8E7;
}

Hero Section

A full-width hero with a sunburst radial background and oversized groovy typography.

.retro-hero {
  background:
    radial-gradient(ellipse at center, #E4A010 0%, #CC5500 40%, #3E2723 100%);
  padding: 100px 40px 80px;
  text-align: center;
  position: relative;
  overflow: hidden;
  min-height: 80vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.retro-hero::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 150%;
  height: 150%;
  background: repeating-conic-gradient(
    from 0deg,
    rgba(255, 248, 231, 0.06) 0deg 10deg,
    transparent 10deg 20deg
  );
  pointer-events: none;
  animation: heroSpin 60s linear infinite;
}

@keyframes heroSpin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

.retro-hero::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
  pointer-events: none;
}

.retro-hero h1 {
  font-family: 'Righteous', cursive;
  font-size: clamp(3rem, 9vw, 7rem);
  color: #FFF8E7;
  text-shadow:
    3px 3px 0 rgba(62, 39, 35, 0.4),
    0 0 40px rgba(218, 165, 32, 0.3);
  position: relative;
  z-index: 1;
  margin-bottom: 16px;
}

.retro-hero .tagline {
  font-family: 'Shadows Into Light', cursive;
  font-size: clamp(1.2rem, 3vw, 1.8rem);
  color: #FFD700;
  position: relative;
  z-index: 1;
  margin-bottom: 20px;
}

.retro-hero p {
  font-family: 'Libre Baskerville', serif;
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  color: rgba(255, 248, 231, 0.85);
  max-width: 560px;
  line-height: 1.8;
  position: relative;
  z-index: 1;
}

Sunburst Pattern Background

A pure CSS sunburst radiating pattern, the quintessential 70s decorative motif.

.sunburst-bg {
  position: relative;
  overflow: hidden;
}

.sunburst-bg::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200%;
  height: 200%;
  transform: translate(-50%, -50%);
  background: repeating-conic-gradient(
    from 0deg,
    #DAA520 0deg 5deg,
    #E4A010 5deg 10deg,
    #CC5500 10deg 15deg,
    #DAA520 15deg 20deg
  );
  opacity: 0.08;
  pointer-events: none;
}

/* Muted earth-tone variant */
.sunburst-bg--muted::before {
  background: repeating-conic-gradient(
    from 0deg,
    rgba(210, 180, 140, 0.12) 0deg 10deg,
    transparent 10deg 20deg
  );
  opacity: 1;
}

/* Animated slow-spin variant */
.sunburst-bg--spin::before {
  animation: sunburstRotate 90s linear infinite;
}

@keyframes sunburstRotate {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

Wood Paneling Texture

A CSS-only faux wood paneling background that evokes the iconic 70s den.

.wood-panel {
  background-color: #5D3A1A;
  background-image:
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 118px,
      rgba(0, 0, 0, 0.15) 118px,
      rgba(0, 0, 0, 0.15) 120px
    ),
    repeating-linear-gradient(
      180deg,
      transparent,
      transparent 1px,
      rgba(255, 255, 255, 0.02) 1px,
      rgba(255, 255, 255, 0.02) 2px
    ),
    linear-gradient(
      90deg,
      #5D3A1A 0%,
      #6B4226 15%,
      #5D3A1A 30%,
      #704832 50%,
      #5D3A1A 70%,
      #6B4226 85%,
      #5D3A1A 100%
    );
  color: #FAF0E6;
  position: relative;
}

.wood-panel::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='0.06'/%3E%3C/svg%3E");
  pointer-events: none;
}

Groovy Wavy Divider

A decorative section divider using the organic wave shapes of the 70s.

.groovy-divider {
  position: relative;
  height: 60px;
  margin: 0;
  overflow: hidden;
  background: var(--retro-cream);
}

.groovy-divider::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: -5%;
  width: 110%;
  height: 100%;
  background: var(--retro-chocolate);
  clip-path: path('M0,30 C150,60 350,0 500,30 C650,60 850,0 1000,30 C1150,60 1350,0 1500,30 L1500,60 L0,60 Z');
}

/* Alternate approach using SVG background for wider browser support */
.groovy-wave-divider {
  width: 100%;
  height: 50px;
  background: var(--retro-cream);
  position: relative;
}

.groovy-wave-divider::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50px;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1200 50' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0,25 C100,50 200,0 300,25 C400,50 500,0 600,25 C700,50 800,0 900,25 C1000,50 1100,0 1200,25 L1200,50 L0,50 Z' fill='%233E2723'/%3E%3C/svg%3E");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

Disco Ball Shimmer Effect

A sparkling, animated shimmer effect for glamorous disco-side elements.

.disco-shimmer {
  position: relative;
  overflow: hidden;
}

.disco-shimmer::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background:
    radial-gradient(circle at 20% 30%, rgba(255, 215, 0, 0.3) 0%, transparent 2%),
    radial-gradient(circle at 60% 20%, rgba(255, 255, 255, 0.25) 0%, transparent 1.5%),
    radial-gradient(circle at 80% 50%, rgba(255, 215, 0, 0.2) 0%, transparent 2%),
    radial-gradient(circle at 40% 70%, rgba(255, 255, 255, 0.3) 0%, transparent 1%),
    radial-gradient(circle at 10% 80%, rgba(255, 215, 0, 0.25) 0%, transparent 1.5%),
    radial-gradient(circle at 70% 90%, rgba(255, 255, 255, 0.2) 0%, transparent 2%),
    radial-gradient(circle at 90% 10%, rgba(255, 215, 0, 0.15) 0%, transparent 1.5%),
    radial-gradient(circle at 30% 50%, rgba(255, 255, 255, 0.2) 0%, transparent 1%);
  animation: discoSparkle 4s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 1;
}

@keyframes discoSparkle {
  0% {
    transform: translate(0, 0) rotate(0deg);
    opacity: 0.6;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translate(10px, -10px) rotate(3deg);
    opacity: 0.6;
  }
}

Retro Stripe Band

A horizontal color band section divider using the decade's earth-tone stripes.

.retro-stripe-band {
  display: flex;
  height: 24px;
  width: 100%;
}

.retro-stripe-band span {
  flex: 1;
}

.retro-stripe-band span:nth-child(1) { background: #CC5500; }
.retro-stripe-band span:nth-child(2) { background: #DAA520; }
.retro-stripe-band span:nth-child(3) { background: #568203; }
.retro-stripe-band span:nth-child(4) { background: #E4A010; }
.retro-stripe-band span:nth-child(5) { background: #B7410E; }
.retro-stripe-band span:nth-child(6) { background: #3E2723; }
.retro-stripe-band span:nth-child(7) { background: #C2714F; }

/* Thinner variant for subtle section breaks */
.retro-stripe-band--thin {
  height: 6px;
}

/* Rounded variant for use between rounded sections */
.retro-stripe-band--rounded {
  border-radius: 3px;
  overflow: hidden;
  margin: 32px auto;
  max-width: 400px;
}

Design Do's and Don'ts

Do's

  • Use warm, earth-toned color palettes grounded in harvest gold, avocado green, burnt orange, and chocolate brown; these are the non-negotiable foundation of the era
  • Choose bold, rounded display typefaces with thick strokes and friendly curves for headings; the rounder and bolder, the more authentically 70s the design feels
  • Layer textures generously using CSS grain overlays, subtle paper textures, and faux wood-panel backgrounds to create the analog tactile warmth the era demands
  • Incorporate sunburst and radial patterns as background elements, section dividers, or decorative accents; they are the single most iconic motif of the decade
  • Round all corners with generous border-radius values (12-50px) on cards, buttons, containers, and image frames; the 70s softened every edge
  • Use warm-tinted shadows with brown and orange tints (rgba(62, 39, 35, 0.12)) rather than pure black to maintain the cozy, amber-lit feel
  • Add striped color bands using the full earth-tone palette as section dividers and decorative accents; horizontal stripes were ubiquitous in 70s textile and wallpaper design
  • Create contrast between earthy sections and disco accents by using deep browns and greens for most of the page, then letting gold shimmer and warm metallics punctuate key interactive elements
  • Employ large, confident heading sizes that dominate their sections; 70s poster and album art used massive, space-filling typography without hesitation

Don'ts

  • Don't use cold blues, clinical grays, or stark whites as primary colors; the 70s palette is warm through and through, and cold tones break the illusion instantly
  • Don't use thin, geometric sans-serif fonts for headings; Helvetica and Futura are excellent typefaces but they belong to a different era and contradict the thick, rounded 70s lettering style
  • Don't make the design flat and textureless; the 70s were maximally tactile, and a smooth, gradient-free, shadow-free layout feels more like 2010s flat design than 1970s retro
  • Don't use sharp, angular corners on cards, buttons, or containers; squared-off elements feel modernist and cold, contradicting the warm organic geometry of the era
  • Don't overdo the disco elements at the expense of the earthy foundation; disco gold and shimmer effects should be accent touches, not the dominant visual language
  • Don't use pure black (#000000) for text or backgrounds; always use warm dark browns like #3E2723 or #4E342E to keep the cozy amber tone consistent
  • Don't apply high-contrast, saturated neon colors; the 70s palette is rich but muted and earthy, not electric; neon belongs to the 80s
  • Don't neglect the handcrafted quality; everything should feel slightly hand-touched, imperfect, and organic rather than pixel-perfect and machine-generated
  • Don't use minimalist empty space as a design strategy; the 70s embraced pattern, texture, and visual density; generous padding is fine, but barren whitespace is not
Aesthetic Relationship
Psychedelic Immediate predecessor; shares the bold color, organic forms, and counter-culture spirit but pushes further into acid-bright saturation, optical illusions, and extreme distortion
Mid-Century Modern The design language the 70s inherited and softened; Mid-Century's clean lines and atomic-age optimism became warmer, rounder, and more textured in the hands of 70s designers
Synthwave The neon-drenched 80s successor; Synthwave takes the disco-era's metallic shimmer and electrifies it with chrome, laser grids, and digital excess
Cottagecore Shares the back-to-nature ethos, earth-toned palettes, and handcrafted warmth, though Cottagecore romanticizes an English countryside rather than a California canyon commune
Earth Tones Closest modern cousin in palette; Earth Tones distills the 70s color language into a contemporary, minimal framework without the era-specific patterns and typography
Memphis Design The 1980s reaction against 70s earthiness; Memphis replaced warm browns with electric pastels and geometric chaos, deliberately rejecting the decade's organic harmony
Bohemian / Geo-Boho Modern heir to the hippie side of 70s Retro; shares the textile patterns, natural materials, and handcrafted quality but filters them through contemporary global eclecticism
Atomic Age The 50s-60s space-age optimism that evolved into 70s retro-futurism; both share curvilinear forms and bold color, but Atomic Age is shinier and more chrome-forward

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>Far Out Records &mdash; Vintage Vinyl &amp; Good Vibes</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Righteous&family=Boogaloo&family=Fredoka:wght@400;500;600;700&family=Libre+Baskerville:wght@400;700&family=Shadows+Into+Light&display=swap" rel="stylesheet">
  <style>
    /* --- Custom Properties --- */
    :root {
      --retro-harvest-gold: #DAA520;
      --retro-burnt-orange: #CC5500;
      --retro-avocado: #568203;
      --retro-chocolate: #3E2723;
      --retro-rust: #B7410E;
      --retro-mustard: #E4A010;
      --retro-cream: #FFF8E7;
      --retro-tan: #D2B48C;
      --retro-warm-white: #FAF0E6;
      --retro-olive: #6B6B3C;
      --retro-terracotta: #C2714F;
      --retro-teal: #006D6F;
      --retro-paprika: #8B2500;
      --retro-dusty-rose: #C08081;
      --retro-disco-gold: #FFD700;
    }

    /* --- Reset & Base --- */
    *, *::before, *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      font-family: 'Libre Baskerville', Georgia, serif;
      font-size: 1.05rem;
      line-height: 1.8;
      color: var(--retro-chocolate);
      background-color: var(--retro-cream);
      overflow-x: hidden;
    }

    /* --- Typography --- */
    h1, h2, h3, h4 {
      font-family: 'Righteous', cursive;
      line-height: 1.15;
    }

    a {
      color: var(--retro-teal);
      text-decoration: underline;
      text-decoration-thickness: 2px;
      text-underline-offset: 3px;
      transition: color 0.3s ease;
    }

    a:hover {
      color: var(--retro-burnt-orange);
    }

    /* --- Navigation --- */
    .nav {
      background: linear-gradient(180deg, #3E2723 0%, #4E342E 100%);
      padding: 14px 32px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: sticky;
      top: 0;
      z-index: 100;
      box-shadow: 0 2px 8px rgba(62, 39, 35, 0.4);
    }

    .nav-logo {
      font-family: 'Righteous', cursive;
      font-size: 1.5rem;
      color: var(--retro-harvest-gold);
      text-decoration: none;
      text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    }

    .nav-links {
      display: flex;
      gap: 4px;
      list-style: none;
    }

    .nav-links a {
      font-family: 'Fredoka', sans-serif;
      font-size: 0.88rem;
      font-weight: 500;
      color: var(--retro-warm-white);
      text-decoration: none;
      padding: 8px 20px;
      border-radius: 24px;
      transition: all 0.3s ease;
    }

    .nav-links a:hover {
      background: rgba(218, 165, 32, 0.2);
      color: var(--retro-harvest-gold);
    }

    /* --- Hero with Sunburst --- */
    .hero {
      background: radial-gradient(ellipse at center, #E4A010 0%, #CC5500 40%, #3E2723 100%);
      padding: 100px 24px 80px;
      text-align: center;
      position: relative;
      overflow: hidden;
      min-height: 85vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }

    .hero::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 180%;
      height: 180%;
      background: repeating-conic-gradient(
        from 0deg,
        rgba(255, 248, 231, 0.07) 0deg 10deg,
        transparent 10deg 20deg
      );
      pointer-events: none;
      animation: heroSpin 80s linear infinite;
    }

    @keyframes heroSpin {
      from { transform: translate(-50%, -50%) rotate(0deg); }
      to { transform: translate(-50%, -50%) rotate(360deg); }
    }

    .hero h1 {
      font-size: clamp(3rem, 9vw, 7rem);
      color: var(--retro-cream);
      text-shadow:
        3px 3px 0 rgba(62, 39, 35, 0.4),
        0 0 50px rgba(218, 165, 32, 0.3);
      position: relative;
      z-index: 1;
      margin-bottom: 12px;
    }

    .hero .tagline {
      font-family: 'Shadows Into Light', cursive;
      font-size: clamp(1.2rem, 3vw, 1.8rem);
      color: var(--retro-disco-gold);
      position: relative;
      z-index: 1;
      margin-bottom: 20px;
    }

    .hero p {
      font-size: clamp(1rem, 1.5vw, 1.15rem);
      color: rgba(255, 248, 231, 0.85);
      max-width: 540px;
      line-height: 1.8;
      position: relative;
      z-index: 1;
      margin-bottom: 32px;
    }

    .hero-buttons {
      display: flex;
      gap: 14px;
      flex-wrap: wrap;
      justify-content: center;
      position: relative;
      z-index: 1;
    }

    /* --- Buttons --- */
    .btn {
      display: inline-block;
      font-family: 'Fredoka', sans-serif;
      font-size: 1rem;
      font-weight: 600;
      letter-spacing: 0.03em;
      padding: 14px 36px;
      border: none;
      border-radius: 50px;
      cursor: pointer;
      text-decoration: none;
      text-transform: uppercase;
      transition: all 0.3s ease;
    }

    .btn-primary {
      background: linear-gradient(135deg, #CC5500 0%, #DAA520 100%);
      color: var(--retro-cream);
      box-shadow:
        0 4px 14px rgba(204, 85, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    }

    .btn-primary:hover {
      transform: translateY(-2px);
      box-shadow:
        0 6px 22px rgba(204, 85, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
      color: var(--retro-cream);
    }

    .btn-outline {
      background: transparent;
      color: var(--retro-cream);
      border: 2.5px solid rgba(255, 248, 231, 0.5);
      box-shadow: none;
    }

    .btn-outline:hover {
      background: rgba(255, 248, 231, 0.15);
      border-color: var(--retro-cream);
      color: var(--retro-cream);
    }

    /* --- Stripe Band --- */
    .stripe-band {
      display: flex;
      height: 8px;
      width: 100%;
    }

    .stripe-band span { flex: 1; }
    .stripe-band span:nth-child(1) { background: #CC5500; }
    .stripe-band span:nth-child(2) { background: #DAA520; }
    .stripe-band span:nth-child(3) { background: #568203; }
    .stripe-band span:nth-child(4) { background: #E4A010; }
    .stripe-band span:nth-child(5) { background: #B7410E; }
    .stripe-band span:nth-child(6) { background: #3E2723; }
    .stripe-band span:nth-child(7) { background: #C2714F; }

    /* --- Container --- */
    .container {
      max-width: 920px;
      margin: 0 auto;
      padding: 0 24px;
    }

    /* --- Section --- */
    .section {
      padding: 64px 24px;
    }

    .section--tan {
      background: var(--retro-tan);
      background-image:
        repeating-linear-gradient(
          0deg,
          transparent,
          transparent 2px,
          rgba(62, 39, 35, 0.02) 2px,
          rgba(62, 39, 35, 0.02) 4px
        );
    }

    .section--cream {
      background: var(--retro-cream);
    }

    .section-label {
      font-family: 'Boogaloo', cursive;
      font-size: 1rem;
      text-transform: uppercase;
      letter-spacing: 0.12em;
      color: var(--retro-burnt-orange);
      text-align: center;
      margin-bottom: 8px;
    }

    .section-title {
      font-family: 'Righteous', cursive;
      font-size: clamp(2rem, 5vw, 3.2rem);
      text-align: center;
      color: var(--retro-chocolate);
      margin-bottom: 12px;
    }

    .section-subtitle {
      font-family: 'Shadows Into Light', cursive;
      font-size: 1.3rem;
      text-align: center;
      color: var(--retro-terracotta);
      margin-bottom: 48px;
    }

    /* --- Card Grid --- */
    .card-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
      gap: 28px;
    }

    .card {
      background: linear-gradient(145deg, var(--retro-warm-white) 0%, var(--retro-cream) 100%);
      border: 2px solid var(--retro-tan);
      border-radius: 16px;
      padding: 32px;
      position: relative;
      overflow: hidden;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      box-shadow: 0 3px 12px rgba(62, 39, 35, 0.08);
    }

    .card::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 4px;
      background: linear-gradient(90deg, #CC5500, #DAA520, #568203);
      border-radius: 0 0 16px 16px;
    }

    .card:hover {
      transform: translateY(-4px);
      box-shadow: 0 8px 28px rgba(62, 39, 35, 0.14);
    }

    .card-icon {
      font-size: 2.4rem;
      margin-bottom: 14px;
      display: block;
    }

    .card h3 {
      font-family: 'Boogaloo', cursive;
      font-size: 1.5rem;
      color: var(--retro-chocolate);
      margin-bottom: 10px;
    }

    .card p {
      font-size: 0.98rem;
      line-height: 1.75;
    }

    .card .tag {
      display: inline-block;
      font-family: 'Fredoka', sans-serif;
      font-size: 0.75rem;
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      padding: 4px 14px;
      border-radius: 20px;
      border: 1.5px solid var(--retro-tan);
      color: var(--retro-olive);
      margin-top: 14px;
      margin-right: 6px;
    }

    /* --- Feature Block --- */
    .feature-list {
      display: flex;
      flex-direction: column;
      gap: 28px;
    }

    .feature {
      display: flex;
      align-items: flex-start;
      gap: 24px;
      background: var(--retro-warm-white);
      border-radius: 14px;
      padding: 28px 32px;
      border: 1.5px solid rgba(210, 180, 140, 0.5);
      transition: transform 0.3s ease;
    }

    .feature:hover {
      transform: translateX(6px);
    }

    .feature-icon {
      font-size: 2.2rem;
      flex-shrink: 0;
      width: 56px;
      height: 56px;
      background: linear-gradient(135deg, #CC5500, #DAA520);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .feature h3 {
      font-family: 'Boogaloo', cursive;
      font-size: 1.3rem;
      color: var(--retro-chocolate);
      margin-bottom: 6px;
    }

    .feature p {
      font-size: 0.98rem;
      line-height: 1.7;
    }

    /* --- Groovy Divider --- */
    .groovy-divider {
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 48px auto;
      max-width: 500px;
    }

    .groovy-divider::before,
    .groovy-divider::after {
      content: '';
      flex: 1;
      height: 3px;
      border-radius: 2px;
      background: linear-gradient(90deg, transparent, var(--retro-tan), transparent);
    }

    .groovy-divider span {
      padding: 0 18px;
      font-size: 1.4rem;
      color: var(--retro-harvest-gold);
      opacity: 0.7;
    }

    /* --- Testimonial / Quote --- */
    .quote-block {
      text-align: center;
      padding: 48px 32px;
      margin: 0 auto;
      max-width: 700px;
      background: var(--retro-warm-white);
      border-radius: 20px;
      border: 2px solid var(--retro-tan);
      position: relative;
    }

    .quote-block::before {
      content: '\201C';
      font-family: 'Righteous', cursive;
      font-size: 6rem;
      color: var(--retro-harvest-gold);
      opacity: 0.25;
      position: absolute;
      top: 0;
      left: 28px;
      line-height: 1;
    }

    .quote-block p {
      font-family: 'Libre Baskerville', serif;
      font-size: 1.3rem;
      font-style: italic;
      color: var(--retro-chocolate);
      max-width: 520px;
      margin: 0 auto 14px;
      line-height: 1.7;
    }

    .quote-block cite {
      font-family: 'Shadows Into Light', cursive;
      font-size: 1.1rem;
      color: var(--retro-terracotta);
      font-style: normal;
    }

    /* --- Wood Panel Footer --- */
    .footer {
      background-color: #3E2723;
      background-image:
        repeating-linear-gradient(
          90deg,
          transparent,
          transparent 118px,
          rgba(0, 0, 0, 0.12) 118px,
          rgba(0, 0, 0, 0.12) 120px
        ),
        linear-gradient(
          90deg,
          #3E2723 0%,
          #4E342E 20%,
          #3E2723 40%,
          #4A3228 60%,
          #3E2723 80%,
          #4E342E 100%
        );
      padding: 56px 24px 28px;
      text-align: center;
      color: var(--retro-warm-white);
    }

    .footer h3 {
      font-family: 'Righteous', cursive;
      font-size: 1.6rem;
      color: var(--retro-harvest-gold);
      margin-bottom: 10px;
    }

    .footer p {
      font-family: 'Libre Baskerville', serif;
      font-size: 0.92rem;
      color: rgba(250, 240, 230, 0.7);
      max-width: 480px;
      margin: 0 auto 24px;
      line-height: 1.7;
    }

    .footer-links {
      display: flex;
      justify-content: center;
      gap: 24px;
      flex-wrap: wrap;
      margin-bottom: 32px;
    }

    .footer-links a {
      font-family: 'Fredoka', sans-serif;
      font-size: 0.88rem;
      color: rgba(250, 240, 230, 0.6);
      text-decoration: none;
      transition: color 0.3s ease;
    }

    .footer-links a:hover {
      color: var(--retro-harvest-gold);
    }

    .footer-copy {
      font-family: 'Fredoka', sans-serif;
      font-size: 0.75rem;
      color: rgba(250, 240, 230, 0.35);
    }

    /* --- Sunburst BG Utility --- */
    .sunburst-section {
      position: relative;
      overflow: hidden;
    }

    .sunburst-section::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 200%;
      height: 200%;
      background: repeating-conic-gradient(
        from 0deg,
        rgba(218, 165, 32, 0.04) 0deg 10deg,
        transparent 10deg 20deg
      );
      pointer-events: none;
    }

    /* --- Responsive --- */
    @media (max-width: 700px) {
      .hero {
        padding: 70px 20px 60px;
        min-height: 70vh;
      }

      .hero h1 { font-size: 2.6rem; }

      .nav {
        padding: 12px 16px;
        flex-direction: column;
        gap: 10px;
      }

      .nav-links { gap: 2px; flex-wrap: wrap; justify-content: center; }
      .nav-links a { padding: 6px 14px; font-size: 0.82rem; }

      .section { padding: 44px 16px; }
      .card-grid { grid-template-columns: 1fr; }
      .card { padding: 24px; }

      .feature {
        flex-direction: column;
        gap: 14px;
        padding: 24px;
      }

      .quote-block { padding: 36px 20px; }
      .quote-block p { font-size: 1.1rem; }
      .section-title { font-size: 1.8rem; }

      .footer { padding: 40px 16px 24px; }
    }

    @media (prefers-reduced-motion: reduce) {
      .hero::before { animation: none; }
      .card, .feature, .btn { transition: none; }
    }
  </style>
</head>
<body>

  <!-- NAVIGATION -->
  <nav class="nav">
    <a href="#" class="nav-logo">Far Out Records</a>
    <div class="nav-links">
      <a href="#collection">Collection</a>
      <a href="#vibes">Vibes</a>
      <a href="#about">About</a>
      <a href="#visit">Visit</a>
    </div>
  </nav>

  <!-- HERO -->
  <header class="hero">
    <h1>Far Out Records</h1>
    <p class="tagline">Vintage vinyl &amp; good vibes since 1973</p>
    <p>Dig through crates of rare funk, soul, disco, and rock. Every record hand-picked, every groove guaranteed to move your feet and feed your soul.</p>
    <div class="hero-buttons">
      <a href="#collection" class="btn btn-primary">Browse the Stacks</a>
      <a href="#visit" class="btn btn-outline">Visit the Shop</a>
    </div>
  </header>

  <!-- STRIPE BAND -->
  <div class="stripe-band">
    <span></span><span></span><span></span><span></span><span></span><span></span><span></span>
  </div>

  <!-- FEATURED COLLECTION -->
  <section class="section section--cream" id="collection">
    <div class="container">
      <p class="section-label">What's Spinning</p>
      <h2 class="section-title">This Week's Picks</h2>
      <p class="section-subtitle">hand-selected grooves from the crates</p>

      <div class="card-grid">
        <div class="card">
          <span class="card-icon">&#127926;</span>
          <h3>Funkadelic Grooves</h3>
          <p>Deep-cut funk records from the golden era. Parliament, Sly Stone, Curtis Mayfield, and a stack of rare 45s that'll make your turntable weep with joy.</p>
          <span class="tag">Funk</span>
          <span class="tag">Soul</span>
        </div>
        <div class="card">
          <span class="card-icon">&#127911;</span>
          <h3>Disco Inferno</h3>
          <p>Mirror-ball ready dance floor bangers. Original pressings, extended mixes, and the kind of boogie that packed Studio 54 on a Saturday night.</p>
          <span class="tag">Disco</span>
          <span class="tag">Dance</span>
        </div>
        <div class="card">
          <span class="card-icon">&#127928;</span>
          <h3>Laurel Canyon Folk</h3>
          <p>Sun-warmed acoustic gems from the canyon. Joni, Crosby, and a dozen names you haven't heard yet but will never forget once you drop the needle.</p>
          <span class="tag">Folk</span>
          <span class="tag">Rock</span>
        </div>
      </div>
    </div>
  </section>

  <!-- GROOVY DIVIDER -->
  <div class="section section--cream" style="padding: 0;">
    <div class="groovy-divider">
      <span>&#10045; &#10045; &#10045;</span>
    </div>
  </div>

  <!-- WHY FAR OUT (FEATURES) -->
  <section class="section section--tan sunburst-section" id="vibes">
    <div class="container">
      <p class="section-label">The Far Out Difference</p>
      <h2 class="section-title">Why Vinyl Lovers Dig Us</h2>
      <p class="section-subtitle">it's more than a record shop, it's a vibe</p>

      <div class="feature-list">
        <div class="feature">
          <div class="feature-icon">&#128270;</div>
          <div>
            <h3>Crate-Digging Experts</h3>
            <p>Our staff has been hunting rare vinyl since bell-bottoms were new. We know every pressing plant, every label variant, and every hidden B-side gem worth your time.</p>
          </div>
        </div>
        <div class="feature">
          <div class="feature-icon">&#127925;</div>
          <div>
            <h3>Listening Lounge</h3>
            <p>Sink into a beanbag chair, put on the cans, and preview any record before you buy. We've got a mint-condition Marantz receiver and a pair of JBL monitors that'll change your mind about what vinyl can sound like.</p>
          </div>
        </div>
        <div class="feature">
          <div class="feature-icon">&#9749;</div>
          <div>
            <h3>Coffee &amp; Community</h3>
            <p>Free pour-over coffee every Saturday. Live DJ sets on the patio every first Friday. Swap meets, trivia nights, and the kind of conversation that only happens between people who really love music.</p>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- STRIPE BAND -->
  <div class="stripe-band">
    <span></span><span></span><span></span><span></span><span></span><span></span><span></span>
  </div>

  <!-- QUOTE -->
  <section class="section section--cream" id="about">
    <div class="container">
      <div class="quote-block">
        <p>A good record store isn't just a place that sells music. It's a place where the music finds you.</p>
        <cite>&mdash; The Far Out Records Philosophy, est. 1973</cite>
      </div>
    </div>
  </section>

  <!-- VISIT -->
  <section class="section section--cream" id="visit" style="text-align: center;">
    <div class="container">
      <p class="section-label">Come Hang</p>
      <h2 class="section-title">Visit the Shop</h2>
      <p class="section-subtitle">the door is always open</p>
      <p style="max-width: 520px; margin: 0 auto 28px;">
        We're on the corner of Vine and Harmony, just past the macrame studio. Open seven days a week, noon to midnight. Bring your want-list, your dancing shoes, and an open mind.
      </p>
      <a href="#" class="btn btn-primary">Get Directions</a>
    </div>
  </section>

  <!-- STRIPE BAND -->
  <div class="stripe-band">
    <span></span><span></span><span></span><span></span><span></span><span></span><span></span>
  </div>

  <!-- FOOTER (WOOD PANEL) -->
  <footer class="footer">
    <h3>Far Out Records</h3>
    <p>Keeping the groove alive since 1973. Hand-picked vinyl, warm vibes, and a community that believes music sounds better on wax.</p>
    <div class="footer-links">
      <a href="#collection">Collection</a>
      <a href="#vibes">Vibes</a>
      <a href="#about">About</a>
      <a href="#visit">Visit</a>
    </div>
    <p class="footer-copy">&copy; 2026 Far Out Records. Keep on groovin'.</p>
  </footer>

</body>
</html>

Implementation Tips

  • Sunburst patterns via repeating-conic-gradient: This modern CSS function creates authentic radiating line patterns without any image assets; use low opacity (0.04-0.08) on background pseudo-elements and optionally animate with a very slow rotation for subtle life
  • Wood grain with layered linear-gradient: Stack multiple linear gradients with slight color variation and thin vertical lines to simulate the grooves and color shifts of real wood paneling; add a fractal-noise SVG overlay for organic grain
  • Warm-tinted shadows throughout: Never use pure black box-shadows; always tint with chocolate brown (rgba(62, 39, 35, 0.12)) or burnt orange (rgba(204, 85, 0, 0.08)) to maintain the amber warmth that defines the era
  • Film grain via inline SVG noise: Use an feTurbulence SVG filter encoded as a data URI in a pseudo-element background to add subtle analog noise without external assets; keep opacity at 0.04-0.08 for an authentic but non-distracting effect
  • Stripe bands for section transitions: Replace plain horizontal rules with the multi-color stripe band component to inject the era's textile pattern language into the page flow; vary the height (6-24px) depending on the emphasis needed
  • Rounded everything with 14-50px border-radius: Apply generous rounding to every container, button, and card; the 70s aesthetic has essentially no sharp corners, and even a single squared-off element can break the visual harmony
  • prefers-reduced-motion respect: Wrap all sunburst rotation, shimmer, and transition effects in a reduced-motion media query to ensure accessibility; the aesthetic still works without animation since its strength is in color and texture
  • Avoid pure #000000 and #FFFFFF: Use #3E2723 for your deepest dark and #FFF8E7 for your lightest light to keep the entire tonal range bathed in the warm amber glow of a 70s living room
← Zruck züe de Designs
Agence WagnerAgence Wagner

© 2026 Agence Wagner. Alli Rächt vorbehalt.

Designs vu chrislemke/website_designs, lizenziert unter MIT.