website_designs

Supergraphic Ultramodern

Supergraphic Ultramodern (also known as 70s Ultra-Modern) is a futuristic design aesthetic popular from the late 1960s through the early 1980s, succeeding Raygun Gothic, Space Age, Googie, and Mid-Century Modern. The name combines “supergraphics” – oversized, wall-spanning graphic elements in vibrant colors and geometric shapes – with “ultramodern,” referencing the cutting-edge futuristic atmosphere the style aimed to evoke. It is defined by bold curves, rainbow palettes, flat iconography, plastic and metallic materials, and interiors that feel like inhabitable sculptures. The mood is optimistic, playful, and technologically confident – a vision of the future as dreamed in the Space Age, rendered in tangible, consumer-friendly form.

Visual Characteristics

Core Design Traits

Oversized supergraphics – massive geometric shapes, stripes, arcs, and color fields painted or applied across walls, ceilings, floors, and furniture, treating surfaces as immersive canvases
Curves and rounded forms everywhere – bulbous furniture silhouettes, sweeping arcs, rounded corners, pod-like enclosures; straight lines are rare
Rainbow color application – full-spectrum rainbow gradients used as decorative bands, arcs, and stripe sequences across large surfaces
Flat graphic iconography – simplified, two-dimensional symbols and pictograms; bold, reductive visual communication
White-dominated spaces with chromatic bursts – pristine white backgrounds punctuated by vivid orange, rainbow, or earth-tone accents
Glossy, reflective surfaces – plastics, fiberglass, shiny metals, and lacquered finishes creating a sleek, futuristic sheen
Inflatable and modular forms – soft, pneumatic shapes suggesting comfort and playfulness; modular, reconfigurable seating and furniture
Op Art-influenced patterns – optical illusion grids, concentric circles, and interference patterns adding visual dynamism
Prefabricated, industrial-friendly forms – clean, mass-producible shapes reflecting utopian industrial optimism
Environmental immersion – graphics and color flow across every surface, erasing the boundary between decoration and architecture

Design Principles

Treat every surface as a potential canvas for bold graphic expression
Use scale as a primary tool – oversized graphics command attention and transform spatial perception
Balance white minimalist space with concentrated bursts of vibrant color
Embrace curves, organic forms, and soft shapes over angular geometry
Materials should project futurism: glossy plastics, chrome, fiberglass over wood or stone
Flat, reductive iconography over detailed illustration
Create immersive, enveloping environments rather than decorated surfaces
Celebrate technological optimism and consumer playfulness

Color Palette

Primary Palette

The Supergraphic Ultramodern palette anchors on clean white, punctuated by saturated warm tones and full-spectrum rainbow sequences. Orange is the signature accent color of the era.

Role	Color	Hex	Description
White Base	Pure White	`#FFFFFF`	Dominant background; pristine, futuristic void
Warm White	Off-White	`#F5F0E8`	Softer alternative for large surfaces
Signature Orange	70s Orange	`#FF6B1A`	The defining accent color of the era
Deep Orange	Burnt Orange	`#D4561E`	Earthier, warmer orange variant
Earth Brown	Warm Brown	`#8B5E3C`	Period earth-tone grounding color
Chocolate	Dark Brown	`#5C3A21`	Deep neutral for contrast
Harvest Gold	Mustard Yellow	`#DAA520`	Warm 70s gold accent
Avocado	70s Green	`#568203`	Period avocado green for earth-tone schemes

Rainbow Sequence

Used as stripe bands, arc gradients, and decorative sequences:

Position	Color	Hex
Red	Vivid Red	`#FF2D2D`
Orange	Bright Orange	`#FF8C00`
Yellow	Sunny Yellow	`#FFD700`
Green	Lime Green	`#32CD32`
Blue	Sky Blue	`#1E90FF`
Indigo	Deep Blue	`#4B0082`
Violet	Bright Violet	`#9B30FF`

Extended Palette

Role	Color	Hex	Description
Chrome Silver	Metallic Silver	`#C0C0C0`	Reflective metal accents
Hot Pink	Fuchsia	`#FF1493`	Bold pop accent for contrast
Sky Blue	Light Cyan	`#87CEEB`	Cool accent, futuristic calm
Charcoal	Dark Gray	`#333333`	Text and deep contrast
Fiberglass White	Warm Plastic	`#F0EDE4`	The yellowish-white of molded fiberglass

CSS Custom Properties

:root {
  /* Core palette */
  --su-white: #ffffff;
  --su-warm-white: #f5f0e8;
  --su-orange: #ff6b1a;
  --su-deep-orange: #d4561e;
  --su-brown: #8b5e3c;
  --su-dark-brown: #5c3a21;
  --su-gold: #daa520;
  --su-avocado: #568203;

  /* Rainbow */
  --su-red: #ff2d2d;
  --su-rainbow-orange: #ff8c00;
  --su-yellow: #ffd700;
  --su-green: #32cd32;
  --su-blue: #1e90ff;
  --su-indigo: #4b0082;
  --su-violet: #9b30ff;

  /* Extended */
  --su-chrome: #c0c0c0;
  --su-hot-pink: #ff1493;
  --su-sky-blue: #87ceeb;
  --su-charcoal: #333333;
  --su-fiberglass: #f0ede4;

  /* Functional */
  --su-bg-primary: var(--su-white);
  --su-bg-warm: var(--su-warm-white);
  --su-text-primary: var(--su-charcoal);
  --su-text-light: var(--su-white);
  --su-accent: var(--su-orange);
  --su-accent-secondary: var(--su-deep-orange);
}

Palette Usage Guidelines

Use white as the dominant surface color – it is the canvas onto which supergraphics are placed
Deploy orange as the primary accent; it is the single most characteristic color of the era
Rainbow sequences should flow as continuous bands, not as isolated color spots
Earth tones (brown, gold, avocado) are period-appropriate alternatives to the rainbow scheme
Metallic chrome accents reinforce the futuristic material language
Avoid desaturated or pastel treatments – colors are vivid and saturated
Large color fields are preferred over small decorative touches

Typography

Typeface Characteristics

Supergraphic Ultramodern typography is dominated by Helvetica and its geometric sans-serif relatives. Type is clean, confident, and functional – a direct expression of International Typographic Style principles applied to futuristic environments.

Helvetica / neo-grotesque sans-serifs – the canonical typeface of the era; clean, neutral, and universally modern
Bold, heavy weights for headlines and supergraphic text elements
All-caps display text with generous letter-spacing for signage and environmental graphics
Flat, iconic pictograms alongside type – simplified visual symbols (arrows, circles, pictographic icons)
Large scale – type used at architectural scale, spanning walls and surfaces
Minimal ornamentation – no serifs, no scripts, no decorative faces; pure functional clarity

Recommended Google Fonts

Font	Role	Notes
Inter	Headlines, body	Modern Helvetica-inspired sans-serif with excellent screen rendering
Roboto	Headlines, body	Neo-grotesque with Helvetica DNA; Google’s system font
Work Sans	Headlines, display	Geometric sans with clean, confident letterforms
Montserrat	Headlines, display	Geometric sans inspired by mid-20th century urban signage
DM Sans	Body, UI	Clean geometric sans with warm, approachable feel
Barlow	Headlines, body	Low-contrast, grotesk-style with futuristic character
Archivo	Headlines, display	Grotesque with strong, confident presence at large sizes

Typography Rules

Headlines: Bold geometric sans-serif, often ALL CAPS, generous letter-spacing (0.08-0.15em)
Body text: Clean sans-serif, regular weight, comfortable line-height (1.6-1.8)
Supergraphic text: Extra-bold, extremely large scale, used as environmental/decorative element
Limit to 1-2 typeface families – typographic restraint is a core principle
Scale contrast: Massive headlines against restrained body text; the jump in size should be dramatic
Icons and pictograms complement type – simplified, flat, universally readable symbols

Font Import

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;900&family=Barlow:wght@400;500;700;900&display=swap');

Typography CSS

h1, h2, h3 {
  font-family: 'Inter', 'Helvetica Neue', 'Arial', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  line-height: 1.1;
  color: var(--su-charcoal);
}

h1 {
  font-size: clamp(3rem, 7vw, 6rem);
  font-weight: 900;
  letter-spacing: 0.12em;
}

h2 {
  font-size: clamp(1.75rem, 4vw, 3rem);
  color: var(--su-orange);
}

h3 {
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0.04em;
}

body {
  font-family: 'Inter', 'Helvetica Neue', 'Arial', sans-serif;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--su-charcoal);
}

Motifs and Patterns

Rainbow stripe bands – horizontal or arcing bands of full-spectrum color flowing across surfaces
Oversized concentric circles – nested rings of color radiating outward, used as wall-scale decorations
Sweeping arcs and curves – large-radius curves painted across walls and ceilings, directing the eye
Bold geometric color fields – massive blocks of solid color dividing and organizing space
Op Art grids and patterns – interference patterns, moire effects, and optical illusions at architectural scale
Flat pictographic icons – simplified human figures, arrows, circles, and universal symbols
Stripe sequences – alternating bands of color (often rainbow-ordered) used as borders and dividers
Biomorphic blobs – organic, amoeba-like shapes in bright colors floating on white backgrounds
Pod and bubble forms – circular and ovoid enclosures suggesting space capsules and futuristic habitats
Chrome highlights and metallic accents – reflective surfaces catching light, adding futuristic sheen

Layout Principles

Grid and Structure

Curved, flowing compositions – layouts follow arcs and organic paths rather than rigid rectangular grids
White space as canvas – generous white backgrounds establish the pristine futuristic environment
Oversized graphic elements – key visual elements span the full width or height of the viewport
Immersive color sections – full-bleed color blocks create distinct environmental zones
Asymmetric, dynamic placement – elements positioned with confident off-center balance
Rounded containers – content blocks use rounded corners, pill shapes, and circular forms
Horizontal flow – content tends to sweep horizontally, echoing the curving architectural forms
Layered depth through overlapping curves – arcs and circles overlap to create spatial interest without 3D effects

Section Organization

Use rainbow stripe dividers or sweeping arc separators between sections
Apply rounded, pod-like content containers with generous padding
Create hierarchy through dramatic scale contrast – oversized headlines, moderate body text
Feature full-bleed color blocks alternating with white sections for visual rhythm
Employ circular or pill-shaped call-to-action elements
Background supergraphics (large arcs, circles, stripes) should be visible behind content, creating environmental depth

CSS / Design Techniques

Base Variables and Reset

:root {
  --su-white: #ffffff;
  --su-warm-white: #f5f0e8;
  --su-orange: #ff6b1a;
  --su-deep-orange: #d4561e;
  --su-brown: #8b5e3c;
  --su-gold: #daa520;
  --su-charcoal: #333333;
  --su-chrome: #c0c0c0;
  --su-red: #ff2d2d;
  --su-yellow: #ffd700;
  --su-green: #32cd32;
  --su-blue: #1e90ff;
  --su-violet: #9b30ff;

  --font-display: 'Inter', 'Helvetica Neue', sans-serif;
  --font-body: 'Inter', 'Helvetica Neue', sans-serif;

  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 4rem;
  --space-xl: 6rem;
}

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

body {
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.7;
  color: var(--su-charcoal);
  background-color: var(--su-white);
}

Rainbow Stripe Divider

.su-rainbow-stripe {
  height: 8px;
  background: linear-gradient(
    90deg,
    #ff2d2d 0%, #ff2d2d 14.28%,
    #ff8c00 14.28%, #ff8c00 28.57%,
    #ffd700 28.57%, #ffd700 42.85%,
    #32cd32 42.85%, #32cd32 57.14%,
    #1e90ff 57.14%, #1e90ff 71.42%,
    #4b0082 71.42%, #4b0082 85.71%,
    #9b30ff 85.71%, #9b30ff 100%
  );
  width: 100%;
}

/* Thicker rainbow band */
.su-rainbow-band {
  height: 40px;
  background: linear-gradient(
    90deg,
    #ff2d2d, #ff8c00, #ffd700, #32cd32, #1e90ff, #4b0082, #9b30ff
  );
  width: 100%;
}

Sweeping Arc Background

.su-arc-bg {
  position: relative;
  overflow: hidden;
}

.su-arc-bg::before {
  content: '';
  position: absolute;
  bottom: -300px;
  left: -100px;
  width: 800px;
  height: 800px;
  border-radius: 50%;
  border: 60px solid var(--su-orange);
  opacity: 0.12;
  pointer-events: none;
}

/* Multiple overlapping arcs */
.su-arc-bg::after {
  content: '';
  position: absolute;
  top: -400px;
  right: -200px;
  width: 900px;
  height: 900px;
  border-radius: 50%;
  border: 40px solid var(--su-blue);
  opacity: 0.08;
  pointer-events: none;
}

Concentric Circle Motif

.su-concentric {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.su-concentric::before {
  content: '';
  position: absolute;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    var(--su-orange) 0%, var(--su-orange) 15%,
    transparent 15%, transparent 25%,
    var(--su-yellow) 25%, var(--su-yellow) 35%,
    transparent 35%, transparent 45%,
    var(--su-green) 45%, var(--su-green) 55%,
    transparent 55%, transparent 65%,
    var(--su-blue) 65%, var(--su-blue) 75%,
    transparent 75%
  );
  opacity: 0.15;
  pointer-events: none;
}

Pod-Shaped Content Card

.su-pod {
  background: var(--su-white);
  border-radius: 2rem;
  padding: var(--space-lg);
  position: relative;
  overflow: hidden;
  border: 2px solid #e8e4de;
}

/* Orange accent arc inside pod */
.su-pod::before {
  content: '';
  position: absolute;
  top: -60px;
  right: -60px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: var(--su-orange);
  opacity: 0.1;
  pointer-events: none;
}

/* Chrome-accent variant */
.su-pod--chrome {
  border-color: var(--su-chrome);
  background: linear-gradient(
    180deg,
    var(--su-white) 0%,
    var(--su-fiberglass) 100%
  );
}

Rounded Pill Buttons

.su-button {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 1rem 2.5rem;
  border: none;
  border-radius: 100px;
  background: var(--su-orange);
  color: var(--su-white);
  cursor: pointer;
  transition: all 0.3s ease;
}

.su-button:hover {
  background: var(--su-deep-orange);
  transform: scale(1.03);
}

.su-button--white {
  background: var(--su-white);
  color: var(--su-orange);
  border: 2px solid var(--su-orange);
}

.su-button--white:hover {
  background: var(--su-orange);
  color: var(--su-white);
}

.su-button--chrome {
  background: linear-gradient(135deg, #d4d4d4, #f0f0f0, #c0c0c0);
  color: var(--su-charcoal);
}

Full-Bleed Orange Section

.su-section--orange {
  background: var(--su-orange);
  color: var(--su-white);
  padding: var(--space-xl) var(--space-md);
  position: relative;
  overflow: hidden;
}

.su-section--orange h1,
.su-section--orange h2,
.su-section--orange h3 {
  color: var(--su-white);
}

/* Sweeping white arc decoration */
.su-section--orange::before {
  content: '';
  position: absolute;
  bottom: -200px;
  left: -100px;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  pointer-events: none;
}

White Section with Supergraphic Background

.su-section--white {
  background: var(--su-white);
  padding: var(--space-xl) var(--space-md);
  position: relative;
  overflow: hidden;
}

/* Large decorative supergraphic arc */
.su-section--white::before {
  content: '';
  position: absolute;
  top: -250px;
  right: -150px;
  width: 700px;
  height: 700px;
  border-radius: 50%;
  border: 80px solid var(--su-orange);
  opacity: 0.06;
  pointer-events: none;
}

Glossy / Plastic Surface Effect

.su-glossy {
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.4) 0%,
    rgba(255, 255, 255, 0) 50%,
    rgba(0, 0, 0, 0.03) 100%
  );
  border-radius: 2rem;
}

/* Chrome / metallic surface */
.su-chrome-surface {
  background: linear-gradient(
    135deg,
    #e0e0e0, #f8f8f8, #c8c8c8, #f0f0f0, #d0d0d0
  );
  border-radius: 1rem;
}

.su-chrome-text {
  background: linear-gradient(
    135deg,
    #c0c0c0, #f5f5f5, #a0a0a0, #e8e8e8
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

Rainbow Arc Decoration

.su-rainbow-arc {
  position: relative;
  overflow: hidden;
}

.su-rainbow-arc::before {
  content: '';
  position: absolute;
  bottom: -350px;
  left: 50%;
  transform: translateX(-50%);
  width: 700px;
  height: 700px;
  border-radius: 50%;
  background: conic-gradient(
    from 180deg,
    #ff2d2d, #ff8c00, #ffd700, #32cd32, #1e90ff, #9b30ff, transparent 50%
  );
  opacity: 0.08;
  pointer-events: none;
}

Op Art Grid Pattern

.su-op-art-bg {
  background-image:
    repeating-radial-gradient(
      circle at 50% 50%,
      transparent 0px,
      transparent 8px,
      rgba(51, 51, 51, 0.04) 8px,
      rgba(51, 51, 51, 0.04) 10px
    );
}

Rounded Grid Layout

.su-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-md);
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--space-lg) var(--space-md);
}

/* Asymmetric two-column layout */
.su-grid--asymmetric {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: var(--space-lg);
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--space-xl) var(--space-md);
}

.su-grid--asymmetric:nth-child(even) {
  grid-template-columns: 1fr 1.5fr;
}

Responsive Considerations

@media (max-width: 768px) {
  .su-grid {
    grid-template-columns: 1fr;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-sm);
  }

  .su-grid--asymmetric,
  .su-grid--asymmetric:nth-child(even) {
    grid-template-columns: 1fr;
  }

  h1 {
    letter-spacing: 0.06em;
  }

  .su-pod {
    border-radius: 1.5rem;
    padding: var(--space-md);
  }
}

Materials and Textures (Visual Metaphors for Web)

Physical Material	Web Equivalent
Molded fiberglass (furniture, pods)	Smooth white panels with large rounded corners and subtle warm-white gradients
Chrome / polished metal	Linear metallic gradients (silver, chrome reflections)
Glossy plastic (ABS, acrylic)	Solid color fills with subtle highlight gradients suggesting sheen
Plush / velour fabric	Rich, saturated color fields (deep orange, brown) with no texture
Inflatable vinyl	Soft, puffy appearance via large border-radius and subtle inner shadows
Painted supergraphics	Bold CSS gradients, large-scale geometric shapes, and color blocks
Fiberglass-reinforced plastic	Warm off-white (#F0EDE4) solid fills with clean edges
Shag carpet	Dense, warm earth-tone background fields
Smoked glass / plexiglass	Semi-transparent overlays with subtle blur (backdrop-filter)
Laminate surfaces	Flat, solid color blocks with crisp edges

Design Do’s and Don’ts

Do

Use white as the dominant background, treating it as a futuristic void
Deploy oversized graphic elements (arcs, circles, stripes) at environmental scale
Make orange the hero accent color – it is the signature hue
Use rainbow stripe sequences as structural dividers and decorative bands
Apply generous rounded corners to all containers (2rem+ border-radius)
Keep typography in the Helvetica / neo-grotesque sans-serif family
Use flat, simplified iconography and pictograms
Create dramatic scale contrast between headlines and body text
Let curves dominate – arcs, circles, and organic shapes define the aesthetic

Don’t

Use angular, sharp-cornered containers (this contradicts the curvilinear language)
Apply detailed textures, woodgrain, or natural materials (the aesthetic is synthetic)
Use serif or decorative typefaces (Helvetica-style neutrality is essential)
Overcrowd layouts – generous white space is the canvas for supergraphics
Use small, timid accent colors – bold, oversized color application is the point
Apply drop shadows or 3D effects (depth comes from overlapping flat planes)
Mix too many competing graphic motifs – each section should feature one dominant supergraphic element
Use pastel or desaturated colors – the palette is vivid and confident

Aesthetic	Relationship to Supergraphic Ultramodern
Mid-Century Modern	Direct predecessor; Supergraphic Ultramodern inherits its curved forms but amplifies the color and graphic scale
Space Age	Overlapping sibling; shares futuristic material language and pod-like forms
Raygun Gothic	Earlier retro-futurist ancestor; Supergraphic Ultramodern is its 1970s evolution
Earth Tones	Contemporary overlap; shares brown, orange, gold, and avocado palette
Cassette Futurism	Overlapping aesthetic; shares the analog-futuristic material language of the late 70s
Disco	Contemporary sibling; shares the reflective surfaces, chrome accents, and exuberant color
International Typographic Style	Design foundation; provides the Helvetica-centric, grid-based typographic discipline
Y2K Futurism	Direct descendant; the 1990s revival of Supergraphic Ultramodern’s curves and optimism
Memphis Design	Successor; replaced Ultramodern’s smooth curves with jagged geometry and pattern
Laser Grid	Successor aesthetic; shares the neon-bright palette but shifts to digital, wireframe forms
Groovival	Modern revival; contemporary reinterpretation of 70s curves, rainbows, and earth tones
Flat Design	Modern digital descendant; shares the commitment to two-dimensional, bold-color graphic expression

Quick-Start: Minimal Supergraphic Ultramodern Page Template

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Supergraphic Ultramodern Page</title>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;900&family=Barlow:wght@400;500;700&display=swap" rel="stylesheet">
  <style>
    :root {
      --su-white: #ffffff;
      --su-warm-white: #f5f0e8;
      --su-orange: #ff6b1a;
      --su-deep-orange: #d4561e;
      --su-brown: #8b5e3c;
      --su-charcoal: #333333;
      --su-chrome: #c0c0c0;
      --su-red: #ff2d2d;
      --su-yellow: #ffd700;
      --su-green: #32cd32;
      --su-blue: #1e90ff;
      --su-violet: #9b30ff;
    }

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

    body {
      background: var(--su-white);
      color: var(--su-charcoal);
      font-family: 'Inter', 'Helvetica Neue', sans-serif;
      font-weight: 400;
      line-height: 1.7;
    }

    h1, h2, h3 {
      font-family: 'Inter', 'Helvetica Neue', sans-serif;
      text-transform: uppercase;
      letter-spacing: 0.10em;
      font-weight: 700;
      line-height: 1.1;
    }

    /* Rainbow stripe divider */
    .rainbow-stripe {
      height: 6px;
      background: linear-gradient(
        90deg,
        #ff2d2d, #ff8c00, #ffd700, #32cd32, #1e90ff, #4b0082, #9b30ff
      );
      width: 100%;
    }

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

    .hero h1 {
      font-size: clamp(3rem, 7vw, 6rem);
      font-weight: 900;
      letter-spacing: 0.12em;
      color: var(--su-charcoal);
      margin-bottom: 1rem;
    }

    .hero p {
      font-size: 1.2rem;
      color: var(--su-brown);
      max-width: 600px;
      margin: 0 auto 2rem;
    }

    /* Large decorative arc behind hero */
    .hero::before {
      content: '';
      position: absolute;
      bottom: -300px;
      left: 50%;
      transform: translateX(-50%);
      width: 800px;
      height: 800px;
      border-radius: 50%;
      border: 80px solid var(--su-orange);
      opacity: 0.07;
      pointer-events: none;
    }

    /* Pill button */
    .btn {
      display: inline-block;
      background: var(--su-orange);
      color: var(--su-white);
      border: none;
      border-radius: 100px;
      padding: 1rem 2.5rem;
      font-family: 'Inter', sans-serif;
      font-weight: 700;
      font-size: 0.9rem;
      text-transform: uppercase;
      letter-spacing: 0.10em;
      text-decoration: none;
      cursor: pointer;
      transition: background 0.3s;
    }

    .btn:hover {
      background: var(--su-deep-orange);
    }

    /* Orange section */
    .section-orange {
      background: var(--su-orange);
      color: var(--su-white);
      text-align: center;
      padding: 5rem 2rem;
      position: relative;
      overflow: hidden;
    }

    .section-orange h2 {
      color: var(--su-white);
      font-size: clamp(2rem, 4vw, 3rem);
      margin-bottom: 1rem;
    }

    .section-orange p {
      font-size: 1.1rem;
      opacity: 0.9;
      max-width: 600px;
      margin: 0 auto 2rem;
    }

    /* Sweeping white arc */
    .section-orange::before {
      content: '';
      position: absolute;
      bottom: -250px;
      right: -150px;
      width: 600px;
      height: 600px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.08);
      pointer-events: none;
    }

    .section-orange .btn {
      background: var(--su-white);
      color: var(--su-orange);
    }

    .section-orange .btn:hover {
      background: var(--su-warm-white);
    }

    /* Content section */
    section {
      max-width: 1000px;
      margin: 0 auto;
      padding: 5rem 2rem;
      text-align: center;
    }

    section h2 {
      font-size: clamp(1.75rem, 3vw, 2.75rem);
      color: var(--su-orange);
      margin-bottom: 1.5rem;
    }

    /* Pod cards */
    .pods {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 2rem;
      margin-top: 2rem;
    }

    .pod {
      background: var(--su-white);
      border: 2px solid #e8e4de;
      border-radius: 2rem;
      padding: 2.5rem;
      text-align: left;
      position: relative;
      overflow: hidden;
    }

    .pod::before {
      content: '';
      position: absolute;
      top: -40px;
      right: -40px;
      width: 100px;
      height: 100px;
      border-radius: 50%;
      background: var(--su-orange);
      opacity: 0.08;
    }

    .pod h3 {
      font-size: 1.15rem;
      text-transform: none;
      letter-spacing: 0.03em;
      margin-bottom: 0.75rem;
      color: var(--su-charcoal);
    }

    .pod p {
      font-size: 0.95rem;
      line-height: 1.6;
      color: #666;
    }

    /* Footer */
    footer {
      background: var(--su-charcoal);
      color: var(--su-chrome);
      text-align: center;
      padding: 2.5rem;
      font-size: 0.9rem;
    }

    @media (max-width: 768px) {
      .hero { padding: 4rem 1.5rem; }
      .pods { grid-template-columns: 1fr; }
      .pod { border-radius: 1.5rem; }
    }
  </style>
</head>
<body>
  <div class="rainbow-stripe"></div>

  <div class="hero">
    <h1>Title Here</h1>
    <p>A bold, optimistic subtitle in clean Inter sans-serif</p>
    <a href="#" class="btn">Get Started</a>
  </div>

  <div class="rainbow-stripe"></div>

  <section>
    <h2>Section Heading</h2>
    <p>Content styled in the Supergraphic Ultramodern aesthetic -- clean white canvas with bold orange accents and sweeping curves.</p>
    <div class="pods">
      <div class="pod">
        <h3>Feature One</h3>
        <p>Pod-shaped card with generous rounded corners and subtle orange arc decoration.</p>
      </div>
      <div class="pod">
        <h3>Feature Two</h3>
        <p>Clean, futuristic containers echoing the molded plastic forms of the era.</p>
      </div>
      <div class="pod">
        <h3>Feature Three</h3>
        <p>Helvetica-style typography and flat graphic language throughout.</p>
      </div>
    </div>
  </section>

  <div class="section-orange">
    <h2>Bold Statement Here</h2>
    <p>Full-bleed orange sections create immersive color environments, echoing the painted supergraphic interiors of the 1970s.</p>
    <a href="#" class="btn">Learn More</a>
  </div>

  <div class="rainbow-stripe"></div>

  <footer>
    <p>Built with Supergraphic Ultramodern design principles.</p>
  </footer>
</body>
</html>

This site is open source. Improve this page.