website_designs

Modernisme Design Reference

Modernisme (Catalan Modernism) was a cultural and artistic movement centered in Catalonia, Spain – primarily Barcelona – from the late 1880s to the early 1910s. It was a regional manifestation of the international Art Nouveau style, but developed a distinct identity driven by Catalan politics and culture. The movement embraced the concept of the Gesamtkunstwerk (total work of art), integrating architecture with sculpture, design, and decorative arts. It is defined by its use of curvilinear forms inspired by nature, vibrant polychromy, trencadis mosaic, stained glass, and wrought ironwork, with a particular emphasis on richly ornamented surfaces and a bold, sculptural sense of form that distinguishes it from the more delicate curves of French Art Nouveau.

Visual Characteristics

Core Motifs and Patterns

Curvilinear “whiplash” lines – sinuous, flowing curves that favor organic movement over straight lines; the signature Modernista contour
Trencadis mosaics – fragmented ceramic tile pieces reassembled into colorful, irregular mosaic surfaces (Park Guell’s serpentine bench being the iconic example)
Organic and natural forms – plants, flowers, geological formations, animals rendered in stylized, sculptural abstraction
Stained glass – abundant use of colored glass panels for interior light effects, often depicting floral and symbolic scenes
Wrought ironwork – ornamental forged iron in gates, balconies, railings, and structural elements with flowing organic shapes
Vegetal motifs – leaves, vines, tendrils, flowers integrated into facades, interiors, and decorative objects
Female figures – elegant women as sculptural and decorative elements, often integrated into architectural ornamentation
Catenary arches and parabolic structures – mathematically derived curves used structurally and decoratively (Gaudi’s signature)
Undulating facades – building surfaces that ripple and flow like natural formations, rejecting flat planes
Sgraffito decoration – decorative plasterwork with incised or layered patterns on building exteriors
Glazed ceramic tile – colorful glazed tiles enriching facades with vibrant polychromatic surfaces
Exposed brick – raw ceramic brick left visible as an honest, textural material statement
Gothic and medieval references – pointed arches, pinnacles, and tracery reinterpreted through a Modernista lens
Symbolist imagery – dreamlike scenes with fairies, nymphs, and figures in stylized natural settings (Alexandre de Riquer’s influence)

Design Principles

Gesamtkunstwerk (total work of art) – every element from structure to furniture to doorknob designed as a unified whole
Curves over straight lines – organic, flowing forms dominate the visual language
Form asymmetry – compositions avoid rigid bilateral symmetry, favoring natural irregularity
Detailed ornamentation – surfaces are richly decorated, never left plain; ornament is integral, not applied
Nature as structural inspiration – natural forms (bone, shell, tree, cave) inform not just decoration but actual structure
Integration of arts and crafts – architects collaborated closely with sculptors, ceramicists, glassmakers, ironworkers
Vibrant polychromy – bold, rich color applied across surfaces through tile, glass, paint, and mosaic
Innovation with materials – exposed brick, cast iron, metal structures, and ceramic used in novel combinations
National identity through design – Catalan cultural symbols and medieval architectural heritage reinterpreted for modernity
Rational planning with ornamental expression – functional structure underneath richly decorative surfaces

Color Palette

Primary Scheme

Modernisme employs a vibrant, polychromatic palette inspired by Mediterranean light, glazed ceramics, and the natural Catalan landscape. Colors are rich and saturated, often seen in mosaic tile, stained glass, and painted ceramic.

Role	Colors
Warm earth tones	Terracotta, burnt sienna, warm ochre, raw umber
Mediterranean blues	Deep cobalt, cerulean, turquoise, azure
Botanical greens	Olive, emerald, sage, moss
Jewel tones	Ruby red, amber gold, amethyst purple, sapphire blue
Ceramic whites	Bone white, cream, warm ivory, bisque
Iron and stone	Charcoal, warm gray, oxidized bronze
Accent golds	Gilded gold, antique brass, warm amber

Detailed Color Table

Color	Hex (suggested)	Usage
Terracotta	`#C2703E`, `#B85C38`	Warm backgrounds, brick elements, earthy panels
Burnt Sienna	`#A0522D`, `#8B4513`	Borders, warm accent details
Warm Ochre	`#CC9544`, `#D4A04A`	Headings, ornamental highlights, ceramic accents
Deep Cobalt	`#1E3A6E`, `#243F72`	Deep backgrounds, stained glass panels
Cerulean	`#2A7AB5`, `#3586BF`	Tile accents, mosaic highlights
Turquoise	`#3AAFA9`, `#40B5AD`	Trencadis fragments, decorative accents
Olive Green	`#6B7B3A`, `#5C6B2F`	Botanical motifs, organic backgrounds
Emerald	`#2E8B57`, `#3A9D6A`	Rich foliage accents, stained glass
Ruby Red	`#9B1B30`, `#A52038`	Jewel-tone accents, stained glass, emphasis elements
Amber Gold	`#D4A03A`, `#C5952F`	Metallic highlights, ornamental borders, gilded details
Amethyst	`#7B5EA7`, `#6A4E96`	Stained glass accents, decorative flourishes
Bone White	`#F5EFE0`, `#FAF4E8`	Page backgrounds, light surfaces
Cream	`#F0E6D0`, `#EDE0C8`	Secondary backgrounds, text panels
Warm Charcoal	`#3A3530`, `#2E2A26`	Dark text, ironwork elements, structural lines
Oxidized Bronze	`#6B5D4A`, `#7A6B55`	Borders, metallic surface details
Mosaic Gold	`#B8943A`, `#C9A545`	Trencadis accents, ornamental tile highlights

Suggested CSS Custom Properties

:root {
  /* Base / Backgrounds */
  --mod-bone-white: #f5efe0;
  --mod-cream: #f0e6d0;
  --mod-ivory: #faf4e8;
  --mod-charcoal: #3a3530;
  --mod-warm-black: #2e2a26;

  /* Earth tones */
  --mod-terracotta: #c2703e;
  --mod-sienna: #a0522d;
  --mod-ochre: #cc9544;
  --mod-umber: #6b5d4a;

  /* Mediterranean blues */
  --mod-cobalt: #1e3a6e;
  --mod-cerulean: #2a7ab5;
  --mod-turquoise: #3aafa9;

  /* Botanical greens */
  --mod-olive: #6b7b3a;
  --mod-emerald: #2e8b57;
  --mod-sage: #8a9e6e;

  /* Jewel accents */
  --mod-ruby: #9b1b30;
  --mod-amethyst: #7b5ea7;
  --mod-amber: #d4a03a;
  --mod-gold: #b8943a;

  /* Oxidized metal */
  --mod-bronze: #7a6b55;
  --mod-iron: #4a4540;

  /* Functional */
  --mod-bg-primary: var(--mod-bone-white);
  --mod-bg-secondary: var(--mod-cream);
  --mod-text-primary: var(--mod-charcoal);
  --mod-accent: var(--mod-terracotta);
  --mod-border: var(--mod-bronze);
}

Approaches

Vibrant polychromatic palette – rich, saturated colors inspired by glazed ceramics and Mediterranean light
Earthy warmth with jewel-tone accents – terracotta and ochre base enriched by cobalt, ruby, and emerald
Gold and bronze as ornamental metallics – evoking gilded ironwork and ceramic glaze
Light variant – warm bone-white or cream backgrounds with colorful mosaic-inspired accent panels
Dark variant – deep cobalt or charcoal backgrounds with gold, turquoise, and amber accents evoking stained glass interiors
Mosaic color mixing – adjacent fragments of contrasting colors mimicking trencadis technique

Typography

Typeface Characteristics

Modernisme typography features:

Decorative, hand-lettered quality with flowing organic curves influenced by poster art (Alexandre de Riquer, Ramon Casas)
Gothic/medieval references – letterforms sometimes echo Catalan Gothic manuscript traditions
Integration with ornamental surroundings – text merges with decorative borders and botanical frames
Variable stroke weight – thick-to-thin transitions suggesting calligraphic brush or pen
Architectural letterforms – strong, sculptural characters with solid presence, more robust than French Art Nouveau
Regional personality – a blend of Mediterranean warmth and Gothic structure absent in northern European Art Nouveau
Poster art influence – bold display lettering designed for visual impact (as seen in Quatre Gats posters)

Recommended Web Fonts (Google Fonts / Free)

Font	Style	Usage
Playfair Display	High-contrast serif with organic curves	Headlines, display text
Cormorant Garamond	Elegant serif with Modernista proportions	Body text, subheadings
Cinzel Decorative	Ornamental inscriptional serif	Feature titles, decorative headers
Cinzel	Refined serif with architectural weight	Section headings, formal titles
EB Garamond	Classic proportions with organic warmth	Body copy, reading text
Spectral	Organic serif with visible stroke variation	Body text, content blocks
Tangerine	Calligraphic script with flowing movement	Decorative accents, pull quotes
Great Vibes	Flowing calligraphic script	Decorative subtitles, ornamental labels
Marcellus	Inscriptional with gentle organic curves	Navigation, subheadings
Lora	Calligraphy-inspired serif with brush roots	Body text, balanced reading

Typography CSS Example

/* Headlines */
h1, h2, h3 {
  font-family: 'Playfair Display', 'Cinzel', serif;
  letter-spacing: 0.04em;
  color: var(--mod-charcoal);
  font-weight: 700;
  line-height: 1.2;
}

/* Display / Hero text */
.mod-display {
  font-family: 'Cinzel Decorative', 'Playfair Display', serif;
  font-size: clamp(2.5rem, 7vw, 5.5rem);
  letter-spacing: 0.06em;
  line-height: 1.1;
  font-weight: 400;
  color: var(--mod-charcoal);
}

/* Decorative script accents */
.mod-script {
  font-family: 'Tangerine', 'Great Vibes', cursive;
  font-size: 1.8em;
  color: var(--mod-amber);
}

/* Body text */
body {
  font-family: 'Cormorant Garamond', 'EB Garamond', 'Spectral', serif;
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1.75;
  color: var(--mod-charcoal);
}

Layout Principles

Grid and Structure

Organic, sculptural layouts – compositions suggest architectural facades with flowing surfaces and carved depth
Asymmetric yet balanced – weight distributed unevenly but harmoniously, like a Gaudi facade
Layered depth – overlapping panels and elements create a sense of three-dimensional relief
Generous ornamentation frames – content surrounded by decorative borders, arches, and botanical frames
Vertical emphasis with undulating rhythm – content flows vertically with wave-like horizontal variations
Mosaic-inspired grid – irregular, fragmented grid sections evoking trencadis tile layouts

Section Organization

Use ornamental arch dividers between sections (pointed Gothic or parabolic arches)
Apply trencadis-style mosaic borders – fragmented, colorful tile patterns framing content areas
Create hierarchy through sculptural scale – large, bold headings that feel carved or embossed
Employ stained glass panel effects – colored, translucent sections with dark “leading” borders
Use wrought iron ornamental separators – dark, flowing linear dividers suggesting forged metalwork
Rounded and organic containers – panels with flowing edges, not rigid rectangles

CSS/Design Techniques

Trencadis Mosaic Border

/* Fragmented mosaic border effect using multi-color gradient */
.mod-trencadis-border {
  border: 4px solid transparent;
  background:
    linear-gradient(var(--mod-cream), var(--mod-cream)) padding-box,
    linear-gradient(
      135deg,
      var(--mod-turquoise) 0%,
      var(--mod-cerulean) 15%,
      var(--mod-amber) 30%,
      var(--mod-emerald) 45%,
      var(--mod-terracotta) 60%,
      var(--mod-cobalt) 75%,
      var(--mod-ochre) 90%,
      var(--mod-turquoise) 100%
    ) border-box;
  border-radius: 12px;
  padding: 2rem;
}

/* Mosaic tile background pattern */
.mod-mosaic-bg {
  background-color: var(--mod-cream);
  background-image:
    linear-gradient(45deg, var(--mod-turquoise) 25%, transparent 25%),
    linear-gradient(-45deg, var(--mod-cerulean) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--mod-ochre) 75%),
    linear-gradient(-45deg, transparent 75%, var(--mod-terracotta) 75%);
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0;
  opacity: 0.08;
}

Stained Glass Panel Effect

/* Colored panels with dark "leading" between panes */
.mod-stained-glass {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
  background: var(--mod-iron); /* dark iron "leading" */
  border-radius: 50% 50% 4px 4px / 20% 20% 4px 4px; /* Gothic arch top */
  overflow: hidden;
  padding: 3px;
}

.mod-stained-glass > *:nth-child(1) { background: rgba(42, 122, 181, 0.15); }
.mod-stained-glass > *:nth-child(2) { background: rgba(58, 175, 169, 0.12); }
.mod-stained-glass > *:nth-child(3) { background: rgba(212, 160, 58, 0.15); }
.mod-stained-glass > *:nth-child(4) { background: rgba(155, 27, 48, 0.1); }
.mod-stained-glass > *:nth-child(5) { background: rgba(46, 139, 87, 0.12); }
.mod-stained-glass > *:nth-child(6) { background: rgba(123, 94, 167, 0.1); }

.mod-stained-glass > * {
  padding: 1.5rem;
  border-radius: 2px;
}

Wrought Iron Ornamental Divider

/* Flowing ironwork divider using SVG */
.mod-iron-divider {
  height: 50px;
  background: no-repeat center / 60% auto;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 50'%3E%3Cpath d='M0,25 C30,10 50,40 80,25 C110,10 130,40 160,25 C190,10 210,40 240,25 C270,10 290,40 320,25 C350,10 370,40 400,25' fill='none' stroke='%234a4540' stroke-width='2'/%3E%3Cpath d='M0,25 C30,15 50,35 80,25 C110,15 130,35 160,25 C190,15 210,35 240,25 C270,15 290,35 320,25 C350,15 370,35 400,25' fill='none' stroke='%234a4540' stroke-width='1' opacity='0.5'/%3E%3Ccircle cx='200' cy='25' r='6' fill='none' stroke='%234a4540' stroke-width='1.5'/%3E%3Ccircle cx='200' cy='25' r='2' fill='%23b8943a'/%3E%3C/svg%3E");
  margin: 2.5rem auto;
  opacity: 0.7;
}

Parabolic Arch Frame

/* Gaudi-inspired parabolic arch container */
.mod-arch-panel {
  background: var(--mod-ivory);
  border: 2px solid var(--mod-bronze);
  border-radius: 50% 50% 8px 8px / 25% 25% 8px 8px;
  padding: 3rem 2.5rem 2rem;
  position: relative;
  box-shadow: 0 4px 20px rgba(58, 53, 48, 0.12);
  text-align: center;
}

/* Keystone ornament at arch apex */
.mod-arch-panel::before {
  content: '';
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 16px;
  height: 16px;
  background: var(--mod-amber);
  border: 2px solid var(--mod-bronze);
  border-radius: 50%;
}

Modernista Card

.mod-card {
  background: var(--mod-ivory);
  border: 1px solid var(--mod-bronze);
  border-radius: 8px;
  padding: 2rem;
  position: relative;
  overflow: hidden;
  transition: box-shadow 0.4s ease, transform 0.3s ease;
}

.mod-card:hover {
  box-shadow: 0 8px 30px rgba(58, 53, 48, 0.15);
  transform: translateY(-2px);
}

/* Colorful mosaic accent strip at top */
.mod-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(
    90deg,
    var(--mod-turquoise) 0%,
    var(--mod-cerulean) 20%,
    var(--mod-amber) 40%,
    var(--mod-emerald) 60%,
    var(--mod-terracotta) 80%,
    var(--mod-cobalt) 100%
  );
}

/* Subtle organic corner ornament */
.mod-card::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 80px;
  height: 80px;
  opacity: 0.05;
  background: no-repeat bottom right / contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Cpath d='M80,80 C60,70 40,60 30,40 C25,30 35,20 45,25 C55,30 65,50 80,80Z' fill='%233aafa9'/%3E%3Cpath d='M80,80 C70,60 55,45 40,35 C35,30 40,22 48,28 C56,34 68,55 80,80Z' fill='%23cc9544'/%3E%3C/svg%3E");
  pointer-events: none;
}

Gold Accent Line with Ornamental Center

.mod-gold-line {
  width: 50%;
  margin: 2rem auto;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--mod-amber) 15%,
    var(--mod-gold) 50%,
    var(--mod-amber) 85%,
    transparent
  );
  position: relative;
}

.mod-gold-line::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
  width: 10px;
  height: 10px;
  background: var(--mod-amber);
  border: 1px solid var(--mod-gold);
  border-radius: 2px;
}

Organic Shadow and Depth

/* Sculptural depth shadow (evoking carved stone facades) */
.mod-shadow {
  box-shadow:
    0 2px 6px rgba(58, 53, 48, 0.1),
    0 8px 25px rgba(58, 53, 48, 0.08),
    0 15px 40px rgba(30, 58, 110, 0.04);
}

/* Inner glow suggesting stained glass illumination */
.mod-inner-glow {
  box-shadow:
    inset 0 0 40px rgba(212, 160, 58, 0.06),
    inset 0 0 80px rgba(42, 122, 181, 0.03),
    0 4px 20px rgba(58, 53, 48, 0.1);
}

Background Texture

/* Subtle sgraffito-inspired texture */
.mod-texture-bg {
  background-color: var(--mod-bone-white);
  background-image:
    radial-gradient(ellipse at 30% 40%, rgba(194, 112, 62, 0.04) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 60%, rgba(42, 122, 181, 0.03) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 80%, rgba(58, 175, 169, 0.03) 0%, transparent 40%);
}

/* Ceramic tile-inspired subtle repeat */
.mod-ceramic-bg {
  background-color: var(--mod-cream);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Crect x='0' y='0' width='60' height='60' fill='none' stroke='%236b5d4a' stroke-width='0.3' opacity='0.08'/%3E%3Cpath d='M30,5 C20,15 15,20 5,30 C15,20 20,15 30,5Z' fill='%233aafa9' opacity='0.03'/%3E%3Cpath d='M30,55 C40,45 45,40 55,30 C45,40 40,45 30,55Z' fill='%23cc9544' opacity='0.03'/%3E%3C/svg%3E");
  background-size: 60px 60px;
}

Materials and Textures (Visual Metaphors for Web)

Physical Modernista materials and their web equivalents:

Physical Material	Web Equivalent
Trencadis mosaic (broken ceramic tiles)	Multi-colored gradient borders, fragmented grid patterns, irregular mosaic backgrounds
Stained glass	Colored translucent overlays, tinted panels with dark grid “leading” borders
Wrought iron	Dark flowing SVG line dividers, ornamental borders with organic curves
Glazed ceramic tile	Rich, saturated color fills with subtle gloss gradients
Exposed brick	Warm terracotta backgrounds with subtle grid texture
Carved stone	Embossed/raised elements using layered box-shadows and subtle 3D transforms
Sgraffito plaster	Layered background patterns with incised line details, subtle etched textures
Gold leaf / Gilt	Warm amber-gold gradient accents on borders, headings, ornamental details
Cast iron structure	Dark, strong structural grid lines and heavy dividers
Parabolic arches	`border-radius` creating arch-shaped containers and frames
Catalan vault brick	Warm repeating geometric patterns suggesting structural brick vaulting
Mediterranean ceramic	Bright polychromatic accent colors in small, concentrated areas

Architecture and Visual References

Modernista architecture, the movement’s most celebrated expression, provides rich visual vocabulary for web design:

Antoni Gaudi – individualistic style inspired by nature; undulating organic surfaces, sculptural facades, hyperbolic and parabolic structures, catenary arches; trencadis mosaic on every surface; works include Park Guell, Sagrada Familia, Casa Batllo, Casa Mila, Casa Vicens, Palau Guell
Lluis Domenech i Montaner – blended constructive rationalism and ornate decoration; metal structures and stained glass for light-filled ornate spaces; Palau de la Musica Catalana, Hospital de la Santa Creu i Sant Pau
Josep Puig i Cadafalch – adapted Modernisme with Gothic and traditional Catalan elements; medieval imagery reinterpreted; Casa Marti, Casa Amatller, Casarramona Factory
Josep Maria Jujol – late Modernista exponent with ties to Catalan rural tradition; formal sensitivity and imaginative ornamentation
Lluis Muncunill – buildings with vibrant, organic forms; parabolic arches and exposed brick vaults

Painting References

Santiago Rusinol & Ramon Casas – gray, moderately Impressionist style; poster art for Quatre Gats
Alexandre de Riquer – Symbolist painting, poster art, and design; dreamlike scenes with fairies and nymphs in stylized natural settings; influenced by English Pre-Raphaelitism

Aesthetic	Relationship to Modernisme
Art Nouveau	Parent international movement; Modernisme is the Catalan regional variant with distinct sculptural and polychromatic identity
Arts and Crafts	Philosophical influence; shared emphasis on handcraft, collaboration between architects and artisans
Gothic Revival	Architectural reference; Catalan Gothic forms reinterpreted through Modernista lens
Symbolism	Closely aligned in painting and literature; dreamlike, symbolic imagery in Modernista art
Pre-Raphaelitism	Artistic influence on painters like Alexandre de Riquer
Noucentisme	Direct successor movement; replaced Modernisme’s ornamental exuberance with classical restraint
Art Deco	Modernisme’s geometric and structural elements foreshadowed Art Deco’s later geometry

Quick-Start: Minimal Modernisme Page Template

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Modernisme Page</title>
  <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400&family=Cormorant+Garamond:ital,wght@0,300;0,400;1,400&family=Cinzel+Decorative:wght@400;700&family=Tangerine:wght@400;700&display=swap" rel="stylesheet">
  <style>
    :root {
      --mod-bone-white: #f5efe0;
      --mod-cream: #f0e6d0;
      --mod-ivory: #faf4e8;
      --mod-charcoal: #3a3530;
      --mod-terracotta: #c2703e;
      --mod-ochre: #cc9544;
      --mod-cobalt: #1e3a6e;
      --mod-cerulean: #2a7ab5;
      --mod-turquoise: #3aafa9;
      --mod-olive: #6b7b3a;
      --mod-emerald: #2e8b57;
      --mod-ruby: #9b1b30;
      --mod-amber: #d4a03a;
      --mod-gold: #b8943a;
      --mod-bronze: #7a6b55;
      --mod-iron: #4a4540;
    }

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

    body {
      background: var(--mod-bone-white);
      color: var(--mod-charcoal);
      font-family: 'Cormorant Garamond', serif;
      font-weight: 400;
      letter-spacing: 0.02em;
      line-height: 1.75;
    }

    h1, h2, h3 {
      font-family: 'Playfair Display', serif;
      letter-spacing: 0.04em;
      font-weight: 700;
    }

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

    .hero h1 {
      font-family: 'Cinzel Decorative', serif;
      font-size: clamp(2.5rem, 7vw, 5rem);
      font-weight: 400;
      letter-spacing: 0.06em;
      color: var(--mod-charcoal);
    }

    .hero .subtitle {
      font-family: 'Tangerine', cursive;
      font-size: 2.2rem;
      color: var(--mod-amber);
      margin-top: 0.5rem;
    }

    /* Trencadis-inspired colorful accent bar */
    .mod-mosaic-bar {
      height: 4px;
      width: 40%;
      margin: 1.5rem auto;
      background: linear-gradient(
        90deg,
        var(--mod-turquoise),
        var(--mod-cerulean),
        var(--mod-amber),
        var(--mod-emerald),
        var(--mod-terracotta),
        var(--mod-cobalt)
      );
      border-radius: 2px;
    }

    /* Wrought iron divider */
    .mod-divider {
      height: 50px;
      width: 50%;
      margin: 2rem auto;
      background: no-repeat center / 100% auto;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 50'%3E%3Cpath d='M0,25 C30,10 50,40 80,25 C110,10 130,40 160,25 C190,10 210,40 240,25 C270,10 290,40 320,25 C350,10 370,40 400,25' fill='none' stroke='%234a4540' stroke-width='2'/%3E%3Ccircle cx='200' cy='25' r='5' fill='none' stroke='%234a4540' stroke-width='1.5'/%3E%3Ccircle cx='200' cy='25' r='2' fill='%23b8943a'/%3E%3C/svg%3E");
      opacity: 0.6;
    }

    section {
      max-width: 800px;
      margin: 0 auto;
      padding: 3rem 2rem;
    }

    section h2 {
      text-align: center;
      margin-bottom: 1.5rem;
      color: var(--mod-charcoal);
    }

    section p {
      text-align: justify;
      text-indent: 1.5em;
    }

    /* Arch-shaped panel */
    .mod-arch {
      background: var(--mod-ivory);
      border: 2px solid var(--mod-bronze);
      border-radius: 50% 50% 8px 8px / 20% 20% 8px 8px;
      padding: 3rem 2rem 2rem;
      text-align: center;
      box-shadow: 0 4px 20px rgba(58, 53, 48, 0.1);
    }
  </style>
</head>
<body>
  <div class="hero">
    <h1>Title Here</h1>
    <div class="subtitle">A flowing subtitle in script</div>
    <div class="mod-mosaic-bar"></div>
  </div>
  <div class="mod-divider"></div>
  <section>
    <h2>Section Heading</h2>
    <p>Content with Modernisme styling applied. The vibrant polychromatic palette, sculptural forms, and rich ornamentation create a bold, Mediterranean-inspired presentation rooted in the Catalan architectural tradition of Gaudi, Domenech i Montaner, and Puig i Cadafalch.</p>
  </section>
</body>
</html>

This site is open source. Improve this page.