website_designs

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

Recommended Web Fonts (Google Fonts)

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>

This site is open source. Improve this page.