Agence WagnerAgence Wagner
FRENDEELS
Zruck züe de Designs
ClairMinimalisteSpirituelGradients
Vorschau

Tranquil Serenity Design Reference

Tranquil Serenity (also known as Frutiger Zen) is a digital design aesthetic that achieved high visibility in the 2000s and 2010s, primarily used in commercial wellness, home decor (e.g., 3D wallpapers), and application interface design. The aesthetic is defined by mass-market CGI rendering of visual motifs traditionally associated with East Asian tranquility and meditation. It shares visual techniques with Frutiger Aero and Y2K Futurism -- particularly the use of digital sheen, lush saturation, and fluid CGI effects to create scenes of idealized, serene nature. The style evokes wellness, relaxation, escapism, commercial spirituality, and digital harmony.

Visual Characteristics

Core Motifs and Patterns

  • Lotus flowers -- the signature motif; pink, white, and golden lotus blossoms floating on still water, symbolizing purity, overcoming stress, and rebirth
  • Glossy CGI water -- perfectly calm, reflective water surfaces with subtle ripples, often with mirror-like reflections of flowers and stones
  • Stacked zen stones -- smooth, rounded river stones balanced in cairn formations, usually on reflective wet surfaces
  • Digital bamboo -- tall green bamboo stalks and leaves rendered with high-saturation CGI, often framing scenes on the sides
  • Smooth bubbles -- translucent, floating soap-like bubbles catching light, drifting through scenes
  • Water droplets and ripples -- single droplets creating perfectly circular ripple patterns on still water
  • Floating frangipani/plumeria -- white or cream tropical flowers placed on water, leaves, or stones
  • Candles and soft flames -- tea lights or pillar candles providing warm ambient glow within serene compositions
  • Reflective surfaces -- every element casts a clean, mirror-like reflection below it
  • Soft bokeh light -- blurred circular light spots in backgrounds, often in green, blue, or warm gold
  • Green leaves with water drops -- fresh leaves with dew or water droplets glistening on their surface
  • Meditating figures -- Buddha statues or silhouetted meditation poses, typically placed within natural settings

Design Principles

  • Digital idealization of nature -- nature rendered through CGI to appear impossibly clean, smooth, and perfect
  • Symmetry and balance -- compositions are calm and centered, mirroring the theme of inner harmony
  • Soft focus and atmospheric depth -- backgrounds fade into soft blur, drawing focus to a serene focal point
  • Warm-cool color interplay -- warm greens and creams balanced with cool bluish grays and misty tones
  • Glossy, smooth surfaces everywhere -- no roughness, grit, or imperfection; everything is polished and digitally pristine
  • Reflections as a compositional device -- water reflections double the visual weight and reinforce stillness
  • Minimal visual clutter -- sparse, carefully arranged elements with generous negative space
  • Ambient glow and luminosity -- scenes appear to radiate soft inner light, especially around flowers and water
  • Commercial spirituality -- meditative Eastern imagery commodified for mass-market wellness branding

Color Palette

Primary Scheme

Role Colors
Base Cream, warm white, soft mist
Primary greens Soft sage, high-saturation bamboo green, deep leaf green
Water tones Pale aqua, bluish gray, cool mist blue
Warm neutrals Warm beige, light taupe, sand
Accent Lotus pink, soft rose, golden glow

Full Palette

Color Hex Usage
Cream White #F7F5F0 Primary backgrounds, open space, mist areas
Warm Mist #E8E4DC Secondary backgrounds, soft fills
Soft Sage #A8B89C Primary accent, foliage, subtle backgrounds
Bamboo Green #5C8A3C High-saturation green elements, bamboo, leaves
Deep Leaf #3D6B2E Dark green accents, depth, shadows on foliage
Fresh Green #7DB856 Bright CGI foliage, highlights on leaves
Pale Aqua #D4E8E0 Water surfaces, light tinted backgrounds
Bluish Gray #A0B0B8 Cool accents, mist, reflective water
Cool Mist #C8D8DC Atmospheric backgrounds, gradient endpoints
Warm Beige #D8CCAC Sandy neutral, warm base tones, stone surfaces
Light Taupe #B8A88C Subtle earthy accents, stone shadows
Lotus Pink #E8A0B0 Flower petals, soft highlights, decorative accents
Deep Rose #C87088 Deeper petal tones, active accents
Petal White #F0E8E8 Light pink-tinted whites for lotus petals, cards
Golden Glow #D4A848 Warm light sources, candle glow, golden lotus accents
Amber Light #E8C870 Soft warm highlights, bokeh light spots
Still Water #88A8A0 Reflective water mid-tones
Deep Charcoal #2C3830 Dark text, deep shadows, contrast elements

Suggested CSS Custom Properties

:root {
  /* Base / Backgrounds */
  --tranquil-cream: #f7f5f0;
  --tranquil-warm-mist: #e8e4dc;
  --tranquil-petal-white: #f0e8e8;
  --tranquil-cool-mist: #c8d8dc;

  /* Greens */
  --tranquil-sage: #a8b89c;
  --tranquil-bamboo: #5c8a3c;
  --tranquil-deep-leaf: #3d6b2e;
  --tranquil-fresh-green: #7db856;

  /* Water / Cool tones */
  --tranquil-pale-aqua: #d4e8e0;
  --tranquil-bluish-gray: #a0b0b8;
  --tranquil-still-water: #88a8a0;

  /* Warm neutrals */
  --tranquil-warm-beige: #d8ccac;
  --tranquil-light-taupe: #b8a88c;

  /* Accents */
  --tranquil-lotus-pink: #e8a0b0;
  --tranquil-deep-rose: #c87088;
  --tranquil-golden-glow: #d4a848;
  --tranquil-amber-light: #e8c870;

  /* Text / Dark */
  --tranquil-charcoal: #2c3830;
  --tranquil-text-secondary: #5a6860;

  /* Functional */
  --tranquil-bg-primary: var(--tranquil-cream);
  --tranquil-bg-secondary: var(--tranquil-warm-mist);
  --tranquil-bg-accent: var(--tranquil-pale-aqua);
  --tranquil-text-primary: var(--tranquil-charcoal);
  --tranquil-accent: var(--tranquil-bamboo);
  --tranquil-accent-soft: var(--tranquil-sage);
  --tranquil-border: var(--tranquil-bluish-gray);
  --tranquil-highlight: var(--tranquil-lotus-pink);
}

Approaches

  • Cream and mist-white dominate the base -- light, open backgrounds that feel like soft morning fog
  • Green as the defining accent -- sage and bamboo greens used throughout for organic vitality
  • Cool aqua tones for water elements -- bluish grays and pale aquas evoke calm, still water
  • Pink used sparingly for focal points -- lotus pink draws the eye like a single bloom on a pond
  • Golden warm accents for luminosity -- amber and gold tones suggest candlelight and sunrise warmth
  • Gradients over flat color -- soft gradients between cream, aqua, and sage create the atmospheric depth characteristic of the aesthetic
  • Low contrast, high harmony -- colors sit close together in value, creating a soothing visual experience

Typography

Typeface Characteristics

Tranquil Serenity typography features:

  • Clean, lightweight letterforms -- thin to regular weights that feel airy and calm
  • Generous letter-spacing -- wide tracking that allows text to breathe like an open landscape
  • Serif or humanist sans-serif -- organic, refined, never mechanical or aggressive
  • East Asian typographic influence -- vertical rhythm, balanced whitespace, minimalist composition
  • Rounded terminals preferred -- soft endings on letterforms that match the smooth CGI surfaces
  • Quiet hierarchy -- subtle size and weight differences rather than dramatic contrast
Font Style Usage
Cormorant Garamond Elegant, light serif Headlines, hero text
Lora Calligraphic serif, gentle curves Subheadings, pull quotes
Noto Serif Clean, balanced serif with CJK support Body text, multilingual content
Source Sans 3 Humanist sans-serif, open forms Body text, UI elements
Nunito Rounded, friendly sans-serif Secondary text, navigation
Raleway Thin geometric elegance Display text, light captions
Zen Antique Japanese-inspired serif Decorative accents, titles with East Asian flavor
EB Garamond Classic proportions, organic feel Long-form body text
Quicksand Rounded geometric sans Labels, tags, light UI elements

Typography CSS Example

/* Headlines */
h1, h2, h3 {
  font-family: 'Cormorant Garamond', 'Lora', Georgia, serif;
  color: var(--tranquil-charcoal);
  font-weight: 300;
  letter-spacing: 0.06em;
  line-height: 1.3;
}

/* Display / Hero text */
.tranquil-display {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2.5rem, 6vw, 5rem);
  font-weight: 300;
  letter-spacing: 0.1em;
  line-height: 1.15;
  color: var(--tranquil-charcoal);
}

/* Body text */
body {
  font-family: 'Source Sans 3', 'Nunito', sans-serif;
  font-weight: 400;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  line-height: 1.8;
  color: var(--tranquil-text-secondary);
}

/* Decorative / Zen accent text */
.tranquil-accent-text {
  font-family: 'Raleway', 'Quicksand', sans-serif;
  font-weight: 300;
  font-size: 0.85rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--tranquil-sage);
}

/* Navigation */
nav a {
  font-family: 'Nunito', 'Source Sans 3', sans-serif;
  font-weight: 400;
  font-size: 0.9rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tranquil-text-secondary);
}

Layout Principles

Grid and Structure

  • Centered, symmetrical layouts -- reflecting the balance and harmony central to the aesthetic
  • Generous whitespace -- abundant breathing room between elements, evoking spaciousness and calm
  • Full-width atmospheric sections -- large background areas with soft gradient washes suggesting mist and water
  • Narrow content containers -- max-width of 800-1000px for focused, meditative reading
  • Vertical flow emphasis -- content scrolls downward like a gentle waterfall, with natural pauses between sections
  • Floating elements -- cards and panels that appear to hover above backgrounds with soft shadows

Section Organization

  • Use soft gradient transitions between sections rather than hard lines (cream fading into pale aqua, aqua into mist)
  • Apply very generous vertical spacing -- 6-10rem between major sections for a meditative pace
  • Create hierarchy through subtlety -- gentle size and opacity differences rather than bold contrasts
  • Employ rounded containers -- soft border-radius on cards and panels, no sharp corners
  • Use atmospheric background treatments -- soft radial gradients, gentle color washes suggesting water and mist
  • Incorporate organic dividers -- subtle SVG shapes suggesting water ripples, lotus silhouettes, or bamboo leaves

CSS/Design Techniques

Water Reflection Effect

/* Element with reflection below */
.tranquil-reflect {
  position: relative;
  padding-bottom: 3rem;
}

.tranquil-reflect::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 10%;
  right: 10%;
  height: 30px;
  background: linear-gradient(
    180deg,
    rgba(168, 184, 156, 0.15) 0%,
    rgba(212, 232, 224, 0.05) 100%
  );
  border-radius: 50%;
  filter: blur(8px);
}

Mist Gradient Background

/* Soft atmospheric mist effect */
.tranquil-mist-bg {
  background: linear-gradient(
    180deg,
    var(--tranquil-cream) 0%,
    var(--tranquil-pale-aqua) 40%,
    var(--tranquil-cool-mist) 70%,
    var(--tranquil-cream) 100%
  );
}

/* Horizontal mist with warm center */
.tranquil-warm-mist-bg {
  background:
    radial-gradient(ellipse 80% 50% at 50% 50%, rgba(232, 200, 112, 0.08) 0%, transparent 70%),
    linear-gradient(180deg, var(--tranquil-cream) 0%, var(--tranquil-warm-mist) 100%);
}

Ripple Divider (SVG)

/* Water ripple section divider */
.tranquil-ripple-divider {
  height: 60px;
  width: 100%;
  background: no-repeat center / 100% auto;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60'%3E%3Cellipse cx='600' cy='30' rx='400' ry='1.5' fill='none' stroke='%23a0b0b8' stroke-width='1' opacity='0.5'/%3E%3Cellipse cx='600' cy='30' rx='280' ry='1' fill='none' stroke='%23a0b0b8' stroke-width='0.8' opacity='0.4'/%3E%3Cellipse cx='600' cy='30' rx='160' ry='0.8' fill='none' stroke='%23a0b0b8' stroke-width='0.6' opacity='0.3'/%3E%3C/svg%3E");
  margin: 3rem auto;
}

Zen Card / Panel

.tranquil-card {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 16px;
  padding: 2.5rem;
  border: 1px solid rgba(168, 184, 156, 0.2);
  box-shadow:
    0 4px 20px rgba(44, 56, 48, 0.06),
    0 12px 40px rgba(136, 168, 160, 0.08);
  transition: box-shadow 0.4s ease, transform 0.4s ease;
}

.tranquil-card:hover {
  box-shadow:
    0 6px 24px rgba(44, 56, 48, 0.08),
    0 16px 48px rgba(136, 168, 160, 0.12);
  transform: translateY(-2px);
}

Lotus Accent Divider

/* Lotus-shaped decorative divider */
.tranquil-lotus-divider {
  width: 120px;
  height: 40px;
  margin: 2rem auto;
  background: no-repeat center / contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 40'%3E%3Cpath d='M60,5 C55,15 40,20 35,30 C45,28 55,22 60,18 C65,22 75,28 85,30 C80,20 65,15 60,5Z' fill='%23e8a0b0' opacity='0.4'/%3E%3Cpath d='M60,8 C57,16 48,20 45,28 C52,26 57,22 60,19 C63,22 68,26 75,28 C72,20 63,16 60,8Z' fill='%23e8a0b0' opacity='0.25'/%3E%3Cline x1='20' y1='20' x2='40' y2='20' stroke='%23a0b0b8' stroke-width='0.5' opacity='0.4'/%3E%3Cline x1='80' y1='20' x2='100' y2='20' stroke='%23a0b0b8' stroke-width='0.5' opacity='0.4'/%3E%3C/svg%3E");
  opacity: 0.8;
}

Bamboo Side Accent

/* Decorative bamboo-inspired vertical accent */
.tranquil-bamboo-accent {
  position: relative;
  padding-left: 2rem;
}

.tranquil-bamboo-accent::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(
    180deg,
    transparent 0%,
    var(--tranquil-sage) 10%,
    var(--tranquil-bamboo) 50%,
    var(--tranquil-sage) 90%,
    transparent 100%
  );
  border-radius: 2px;
}

/* Bamboo node markers */
.tranquil-bamboo-accent::after {
  content: '';
  position: absolute;
  left: -2px;
  top: 30%;
  width: 7px;
  height: 3px;
  background: var(--tranquil-bamboo);
  border-radius: 1px;
  box-shadow: 0 100px 0 var(--tranquil-bamboo);
}

Soft Glow / Bokeh Background

/* Bokeh light spots background */
.tranquil-bokeh-bg {
  position: relative;
  overflow: hidden;
}

.tranquil-bokeh-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle 80px at 20% 30%, rgba(168, 184, 156, 0.15) 0%, transparent 70%),
    radial-gradient(circle 60px at 70% 20%, rgba(232, 200, 112, 0.1) 0%, transparent 70%),
    radial-gradient(circle 100px at 80% 70%, rgba(212, 232, 224, 0.12) 0%, transparent 70%),
    radial-gradient(circle 50px at 30% 80%, rgba(232, 160, 176, 0.08) 0%, transparent 70%),
    radial-gradient(circle 70px at 50% 50%, rgba(168, 184, 156, 0.1) 0%, transparent 70%);
  pointer-events: none;
}

Button Styles

/* Primary -- Sage green */
.tranquil-btn-primary {
  background: var(--tranquil-sage);
  color: var(--tranquil-cream);
  border: none;
  padding: 0.75rem 2.2rem;
  border-radius: 24px;
  font-family: 'Nunito', sans-serif;
  font-size: 0.9rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.4s ease, box-shadow 0.4s ease;
}

.tranquil-btn-primary:hover {
  background: var(--tranquil-bamboo);
  box-shadow: 0 4px 16px rgba(92, 138, 60, 0.2);
}

/* Secondary -- Outlined */
.tranquil-btn-secondary {
  background: transparent;
  color: var(--tranquil-sage);
  border: 1px solid var(--tranquil-sage);
  padding: 0.7rem 2rem;
  border-radius: 24px;
  font-family: 'Nunito', sans-serif;
  font-size: 0.9rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.4s ease;
}

.tranquil-btn-secondary:hover {
  background: var(--tranquil-sage);
  color: var(--tranquil-cream);
}

/* Warm accent -- Golden glow */
.tranquil-btn-warm {
  background: linear-gradient(135deg, var(--tranquil-golden-glow), var(--tranquil-amber-light));
  color: var(--tranquil-charcoal);
  border: none;
  padding: 0.75rem 2.2rem;
  border-radius: 24px;
  font-family: 'Nunito', sans-serif;
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: box-shadow 0.4s ease, transform 0.3s ease;
}

.tranquil-btn-warm:hover {
  box-shadow: 0 4px 20px rgba(212, 168, 72, 0.3);
  transform: translateY(-1px);
}

Image Treatment

/* Soft-edged image with ambient glow */
.tranquil-img {
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(136, 168, 160, 0.2);
  object-fit: cover;
}

/* Image with water-reflection fade */
.tranquil-img-reflect {
  border-radius: 12px 12px 0 0;
  mask-image: linear-gradient(180deg, #000 80%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 80%, transparent 100%);
}

/* Frosted glass overlay on image */
.tranquil-img-overlay {
  position: relative;
}

.tranquil-img-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(247, 245, 240, 0.0) 40%,
    rgba(247, 245, 240, 0.7) 100%
  );
  border-radius: 12px;
}

Smooth Stone / Pebble Element

/* Rounded, stone-like container */
.tranquil-stone {
  background: linear-gradient(
    145deg,
    var(--tranquil-warm-mist) 0%,
    var(--tranquil-warm-beige) 100%
  );
  border-radius: 50% 50% 48% 52% / 45% 55% 45% 55%;
  padding: 2rem;
  box-shadow:
    0 4px 12px rgba(44, 56, 48, 0.08),
    0 8px 24px rgba(136, 168, 160, 0.1);
  text-align: center;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

Materials and Textures (Visual Metaphors for Web)

Physical Tranquil Serenity materials and their web equivalents:

Physical Material Web Equivalent
Still water surface Soft horizontal gradient, semi-transparent panels with subtle blue-green tint
Smooth river stones Rounded containers with warm gray-beige gradients, organic border-radius
Bamboo Vertical green accent lines, segmented with node markers
Lotus petals Soft pink-tinted card surfaces, petal-shaped clip-paths, gentle pink shadows
Morning mist Frosted backdrop-filter: blur() overlays, soft radial gradients fading to transparent
Water droplets Small circular elements with radial gradient highlights and subtle shadow
Candle glow Warm radial gradient spots (rgba gold/amber), ambient inner shadows
Polished glass / CGI sheen Subtle linear gradients suggesting light reflection across surfaces
Fresh green leaves High-saturation green fills with slight gradient for light/shadow
Sand / Gravel Warm beige background with faint noise texture overlay

CGI Rendering Style

The Tranquil Serenity aesthetic is defined by its distinctly digital rendering approach:

  • Hyper-smooth surfaces -- no visible texture, grain, or imperfection; everything looks digitally airbrushed
  • Perfect lighting -- soft, diffused light from no specific source, creating even illumination without harsh shadows
  • Exaggerated reflections -- water and surfaces reflect objects more perfectly than in reality
  • High-saturation greens -- foliage is rendered in greens more vivid than nature, creating a hyperreal quality
  • Glossy highlights -- every curved surface has a specular highlight suggesting smooth, polished material
  • Depth of field blur -- backgrounds fade into dreamy soft focus, isolating the central zen composition
  • Digital cleanliness -- no dirt, decay, wilting, or natural imperfection; perpetual freshness
Aesthetic Relationship to Tranquil Serenity
Frutiger Aero Shares digital sheen, lush CGI nature, and glossy rendering; Tranquil Serenity is more meditative and East Asian-influenced
Y2K Futurism Overlapping CGI techniques and glossy digital surfaces; Tranquil Serenity applies them to zen/wellness rather than technology
Frutiger Eco Shares highly saturated, luscious CGI greenery; Tranquil Serenity is more oriental and not associated with tech branding
Chinoiserie Shared East Asian visual motifs; Chinoiserie is more traditional/decorative while Tranquil Serenity is digitally rendered
Cleancore Shared emphasis on pristine, spotless surfaces and minimal clutter
Technozen Related blend of technology and zen aesthetics
Eco-Beige Shared wellness and natural themes but with a muted, beige-dominant palette vs. Tranquil Serenity's vibrant greens
Zen-X Contemporary extension of zen digital aesthetics

Quick-Start: Minimal Tranquil Serenity Page Template

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tranquil Serenity Page</title>
  <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;500&family=Source+Sans+3:wght@300;400;600&family=Nunito:wght@300;400;600&family=Raleway:wght@200;300;400&display=swap" rel="stylesheet">
  <style>
    :root {
      --tranquil-cream: #f7f5f0;
      --tranquil-warm-mist: #e8e4dc;
      --tranquil-sage: #a8b89c;
      --tranquil-bamboo: #5c8a3c;
      --tranquil-pale-aqua: #d4e8e0;
      --tranquil-bluish-gray: #a0b0b8;
      --tranquil-cool-mist: #c8d8dc;
      --tranquil-lotus-pink: #e8a0b0;
      --tranquil-golden-glow: #d4a848;
      --tranquil-charcoal: #2c3830;
      --tranquil-text-secondary: #5a6860;
    }

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

    body {
      background: var(--tranquil-cream);
      color: var(--tranquil-text-secondary);
      font-family: 'Source Sans 3', 'Nunito', sans-serif;
      font-weight: 400;
      font-size: 1.05rem;
      line-height: 1.8;
      letter-spacing: 0.02em;
    }

    h1, h2, h3 {
      font-family: 'Cormorant Garamond', Georgia, serif;
      color: var(--tranquil-charcoal);
      font-weight: 300;
      letter-spacing: 0.06em;
    }

    .hero {
      background: linear-gradient(
        180deg,
        var(--tranquil-cream) 0%,
        var(--tranquil-pale-aqua) 50%,
        var(--tranquil-cream) 100%
      );
      text-align: center;
      padding: 8rem 2rem 6rem;
      position: relative;
      overflow: hidden;
    }

    /* Soft bokeh spots */
    .hero::before {
      content: '';
      position: absolute;
      inset: 0;
      background:
        radial-gradient(circle 100px at 25% 40%, rgba(168, 184, 156, 0.12) 0%, transparent 70%),
        radial-gradient(circle 80px at 75% 30%, rgba(232, 160, 176, 0.08) 0%, transparent 70%),
        radial-gradient(circle 60px at 60% 70%, rgba(212, 168, 72, 0.06) 0%, transparent 70%);
      pointer-events: none;
    }

    .hero h1 {
      font-size: clamp(2.5rem, 6vw, 5rem);
      font-weight: 300;
      letter-spacing: 0.1em;
      margin-bottom: 1rem;
      position: relative;
    }

    .hero .subtitle {
      font-family: 'Raleway', sans-serif;
      font-weight: 300;
      font-size: 0.9rem;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--tranquil-sage);
      position: relative;
    }

    /* Ripple divider */
    .ripple-divider {
      height: 60px;
      width: 100%;
      background: no-repeat center / 60% auto;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 60'%3E%3Cellipse cx='400' cy='30' rx='300' ry='1.5' fill='none' stroke='%23a0b0b8' stroke-width='1' opacity='0.4'/%3E%3Cellipse cx='400' cy='30' rx='200' ry='1' fill='none' stroke='%23a0b0b8' stroke-width='0.7' opacity='0.3'/%3E%3Cellipse cx='400' cy='30' rx='100' ry='0.8' fill='none' stroke='%23a0b0b8' stroke-width='0.5' opacity='0.2'/%3E%3C/svg%3E");
      margin: 2rem auto;
    }

    section {
      max-width: 860px;
      margin: 0 auto;
      padding: 4rem 2rem;
    }

    section h2 {
      text-align: center;
      margin-bottom: 1.5rem;
    }

    section p {
      text-align: center;
      max-width: 640px;
      margin: 0 auto;
    }

    .card-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: 2rem;
      margin-top: 2.5rem;
    }

    .card {
      background: rgba(255, 255, 255, 0.7);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      border-radius: 16px;
      padding: 2.5rem;
      border: 1px solid rgba(168, 184, 156, 0.2);
      box-shadow:
        0 4px 20px rgba(44, 56, 48, 0.06),
        0 12px 40px rgba(136, 168, 160, 0.08);
    }

    .card h3 {
      margin-bottom: 0.8rem;
    }

    .accent-section {
      background: linear-gradient(
        180deg,
        var(--tranquil-cream) 0%,
        var(--tranquil-warm-mist) 50%,
        var(--tranquil-cream) 100%
      );
    }
  </style>
</head>
<body>
  <div class="hero">
    <h1>Tranquil Serenity</h1>
    <div class="subtitle">Wellness, Balance, Digital Harmony</div>
    <div class="ripple-divider"></div>
  </div>

  <section>
    <h2>Section Heading</h2>
    <p>Content styled with the Tranquil Serenity aesthetic. Soft mist backgrounds, gentle greens, and the calm of still water define every element.</p>
    <div class="card-grid">
      <div class="card">
        <h3>Balance</h3>
        <p>Frosted glass cards float above soft gradients like stones balanced on water.</p>
      </div>
      <div class="card">
        <h3>Serenity</h3>
        <p>Muted tones and generous spacing create a meditative visual experience.</p>
      </div>
    </div>
  </section>
</body>
</html>
← Zruck züe de Designs
Agence WagnerAgence Wagner

© 2026 Agence Wagner. Alli Rächt vorbehalt.

Designs vu chrislemke/website_designs, lizenziert unter MIT.