Agence WagnerAgence Wagner
FRENDEELS
Retour aux designs
MaximalisteColoréVintage numériqueOrnemental
Aperçu

Vectorbloom Design Reference

Vectorbloom is a digitally-driven decorative aesthetic from the early 2000s through the early 2010s, born from the era's fascination with vector graphic tools and their capacity for intricate image manipulation. It applies maximalist floral and organic patterns, psychedelic color, and digitally precise vector ornament to flat surfaces -- walls, ceilings, furniture, packaging, and screens. Drawing from 1960s Psychedelia, 1970s Supergraphic Ultramodern muralism, and Art Nouveau's organic curves, Vectorbloom translates these influences into a distinctly digital idiom: complex, layered, and seamlessly repeating compositions of flourishes, hybrid creatures, and blooming floral forms rendered with the precision only vector tools can achieve. The aesthetic celebrates technological opulence, visual density, and psychedelic fantasy.

Visual Characteristics

Core Motifs and Patterns

  • Blooming floral forms -- elaborate, digitally rendered flowers, petals, and botanical elements that appear to unfurl and expand across surfaces
  • Flourishes and scrollwork -- sinuous vector curves, tendrils, and ornamental swirls inspired by Art Nouveau whiplash lines
  • Hybrid creatures -- abstract aquatic or fantastical organisms composed of organic and geometric elements, blending natural and digital forms
  • Multi-layered imagery -- dense, stacked compositions where elements overlap, interweave, and flow into one another
  • Psychedelic organic shapes -- amorphous, flowing forms reminiscent of 1960s psychedelic poster art, rendered with digital crispness
  • Seamless, environment-spanning patterns -- designs that function as continuous imagery across walls, ceilings, floors, and surfaces without visible seams or endpoints
  • Vector-precise linework -- clean, sharp Bezier curves with no hand-drawn imperfection; the digital tool is part of the aesthetic identity
  • Symmetry and mirroring -- kaleidoscopic arrangements where motifs mirror and rotate to create complex radial or bilateral compositions
  • Decorative filigree -- fine, intricate ornamental vector detail filling negative space

Design Principles

  • Maximalism -- more is more; every surface is an opportunity for intricate visual density
  • Flat surface application -- designs are applied to flat planes (walls, screens, furniture panels) rather than sculpted in 3D; occasional pseudo-3D effects add subtle depth
  • Dramatic gradients on flat fills -- while fundamentally flat, colors transition through bold gradients within shapes, creating luminous, glowing effects
  • Digital precision -- the cleanness and mathematical perfection of vector software is embraced, not hidden
  • Environmental immersion -- patterns are designed to envelop and transform entire spaces, not merely decorate isolated objects
  • Organic forms through digital means -- natural, botanical, and biological shapes rendered with technological precision create the distinctive Vectorbloom tension
  • Color as atmosphere -- saturated, vivid palettes create psychedelic mood and emotional intensity

Color Palette

Primary Scheme

Vectorbloom uses a vivid, saturated, and wide-ranging palette anchored by pinks, magentas, purples, and blues, with green, yellow, and red accents. Black provides contrast and grounding; white appears as highlights and negative space. Colors are applied in bold gradients and flat fills, never muted or earthy.

Role Colors Hex (suggested)
Hot Pink / Magenta Vivid pink, deep magenta #FF2D8A, #E91E8C
Fuchsia Bright fuchsia, electric pink #FF00FF, #D946EF
Deep Purple Rich violet, royal purple #7B2D8E, #6B21A8
Soft Lavender Light purple, mauve #C084FC, #DDA0DD
Electric Blue Vivid sky blue, cyan-blue #00A3FF, #38BDF8
Deep Teal Dark aqua, blue-green #0D9488, #0E7490
Lime Green Vivid chartreuse, acid green #84CC16, #A3E635
Emerald Green Rich green, botanical #10B981, #22C55E
Warm Yellow Golden yellow, amber #FACC15, #F59E0B
Coral Red Warm red, red-orange #EF4444, #F97316
Background (Light) Soft mauve, pale pink #F5D6F5, #FDF2F8
Background (Dark) Deep plum, near-black violet #1E0A2E, #0F0520
Black True black, rich black #000000, #0A0A12
White Pure white, soft cream #FFFFFF, #FFF5F9

Suggested CSS Custom Properties

:root {
  /* Signature pinks and magentas */
  --vb-hot-pink: #ff2d8a;
  --vb-magenta: #e91e8c;
  --vb-fuchsia: #d946ef;
  --vb-soft-pink: #f9a8d4;

  /* Purples */
  --vb-deep-purple: #7b2d8e;
  --vb-royal-purple: #6b21a8;
  --vb-lavender: #c084fc;
  --vb-mauve: #dda0dd;

  /* Blues and teals */
  --vb-electric-blue: #00a3ff;
  --vb-sky-blue: #38bdf8;
  --vb-deep-teal: #0d9488;
  --vb-cyan: #06b6d4;

  /* Greens */
  --vb-lime: #84cc16;
  --vb-emerald: #10b981;

  /* Warm accents */
  --vb-yellow: #facc15;
  --vb-coral: #ef4444;
  --vb-orange: #f97316;

  /* Backgrounds */
  --vb-bg-light: #f5d6f5;
  --vb-bg-pale: #fdf2f8;
  --vb-bg-dark: #1e0a2e;
  --vb-bg-deep: #0f0520;

  /* Neutrals */
  --vb-black: #0a0a12;
  --vb-white: #ffffff;
  --vb-off-white: #fff5f9;

  /* Functional mappings */
  --vb-bg-primary: var(--vb-bg-light);
  --vb-bg-secondary: var(--vb-bg-pale);
  --vb-text-primary: var(--vb-black);
  --vb-text-on-dark: var(--vb-off-white);
  --vb-accent: var(--vb-hot-pink);
  --vb-accent-secondary: var(--vb-fuchsia);
}

Color Guidelines

  • Vivid and saturated -- Vectorbloom colors are bold and electric, never dusty, pastel, or muted
  • Dramatic gradients within shapes are a defining characteristic; colors flow from hot pink to purple to blue within a single form
  • Multi-hue compositions -- unlike monochromatic aesthetics, Vectorbloom freely uses the full spectrum within a single composition
  • Black as grounding contrast -- black outlines, backgrounds, or negative space anchor the vivid colors and prevent visual chaos
  • Pink-purple-blue axis dominates -- the signature Vectorbloom color story moves through magenta, violet, and blue; green and yellow are supporting accents
  • Light backgrounds use soft mauves, pale pinks, and lavender tints to maintain the warm, floral atmosphere
  • Dark backgrounds use deep plum and near-black violet, creating a nocturnal psychedelic mood

Typography

Typeface Characteristics

Vectorbloom typography balances decorative elegance with digital modernity:

  • Clean, rounded sans-serifs for body text -- modern and legible, complementing rather than competing with ornate visuals
  • Decorative display typefaces for headings -- flowing, curvy, or playfully stylized fonts that echo the organic vector motifs
  • Generous, open letter-spacing -- letting type breathe within dense visual environments
  • No harsh, angular, or industrial type -- typography should feel organic, fluid, and approachable
  • Color-integrated type -- headings may use gradient fills or be colored to match the surrounding palette
  • Occasional script or calligraphic accents -- for decorative labels or short display text, referencing Art Nouveau lettering
Font Style Usage
Rubik Rounded geometric sans Body text, headings (the aesthetic's signature typeface)
Quicksand Rounded, soft geometric sans Headlines, feature titles, display text
Comfortaa Rounded, futuristic geometric Display headings, decorative titles
Nunito Soft, rounded sans-serif Body text, subheadings
Josefin Sans Elegant geometric sans with vintage feel Section titles, navigation
Pacifico Flowing brush script Decorative accents, short display text
Dancing Script Casual calligraphic script Pull quotes, decorative labels
Tenor Sans Clean serif-like sans with elegance Formal headings, refined body copy
Fredoka Rounded, playful sans-serif Friendly display headings, bold accents

Typography CSS Example

@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300;0,400;0,600;0,700;1,400&family=Quicksand:wght@400;500;600;700&family=Comfortaa:wght@400;600;700&family=Pacifico&display=swap');

/* Headlines */
h1, h2, h3 {
  font-family: 'Quicksand', 'Comfortaa', 'Rubik', sans-serif;
  font-weight: 700;
  color: var(--vb-deep-purple);
  letter-spacing: 0.02em;
  line-height: 1.15;
}

/* Display / Hero text */
.vb-display {
  font-family: 'Comfortaa', 'Quicksand', sans-serif;
  font-size: clamp(2.5rem, 7vw, 6rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.05;
  background: linear-gradient(135deg, var(--vb-hot-pink), var(--vb-fuchsia), var(--vb-electric-blue));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Decorative script accents */
.vb-script {
  font-family: 'Pacifico', 'Dancing Script', cursive;
  font-size: 1.6em;
  color: var(--vb-magenta);
}

/* Body text */
body {
  font-family: 'Rubik', 'Nunito', sans-serif;
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.75;
  color: var(--vb-text-primary);
}

/* Labels and secondary text */
.vb-label {
  font-family: 'Rubik', sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--vb-magenta);
}

Layout Principles

Grid and Structure

  • Immersive, full-bleed compositions -- backgrounds and patterns extend edge-to-edge, filling the viewport
  • Layered depth without 3D -- multiple overlapping elements at different opacities create depth on a flat plane
  • Generous content margins within maximalist surroundings -- text and interactive elements need clear space even when borders are ornate
  • Centered, flowing content -- content areas sit within or atop the dense pattern work, using translucent panels or color overlays for readability
  • Organic section transitions -- sections blend into one another through flowing pattern elements rather than hard horizontal dividers
  • Radial and circular compositions -- reflecting the kaleidoscopic, blooming motif, key sections may radiate outward from a center point
  • Large hero areas dominated by pattern and imagery with text overlaid

Section Organization

  • Use flowing floral dividers between sections (vine-like SVG separators, blooming ornaments)
  • Apply translucent overlay panels over patterned backgrounds for text readability
  • Create hierarchy through color intensity -- hero sections use full-saturation patterns; secondary sections use lighter, more subdued versions
  • Employ ornamental framing -- content panels bordered by vector flourishes and floral elements
  • Gradient section backgrounds that shift hue as the user scrolls, maintaining the psychedelic atmosphere

CSS/Design Techniques

Psychedelic Gradient Background

/* Signature Vectorbloom multi-color gradient background */
.vb-gradient-bg {
  background: linear-gradient(
    135deg,
    var(--vb-bg-light) 0%,
    #f0b4f0 15%,
    #d8a0f0 30%,
    #b4c8ff 50%,
    #a0f0d0 70%,
    #f0e0a0 85%,
    var(--vb-bg-light) 100%
  );
}

/* Animated gradient shift for immersive sections */
.vb-gradient-animated {
  background: linear-gradient(
    135deg,
    var(--vb-hot-pink),
    var(--vb-fuchsia),
    var(--vb-deep-purple),
    var(--vb-electric-blue),
    var(--vb-deep-teal),
    var(--vb-emerald)
  );
  background-size: 300% 300%;
  animation: vb-gradient-shift 12s ease infinite;
}

@keyframes vb-gradient-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

Blooming Floral Ornament (SVG + CSS)

/* Floral flourish divider */
.vb-floral-divider {
  height: 60px;
  width: 70%;
  margin: 2.5rem auto;
  background: no-repeat center / contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 60'%3E%3Cpath d='M0,30 C40,10 80,50 120,30 S200,10 250,30 S320,50 380,30 S440,10 500,30' fill='none' stroke='%23e91e8c' stroke-width='1.5'/%3E%3Ccircle cx='250' cy='30' r='8' fill='%23d946ef'/%3E%3Ccircle cx='250' cy='30' r='4' fill='%23ff2d8a'/%3E%3Cpath d='M230,30 Q240,15 250,22 Q260,15 270,30 Q260,45 250,38 Q240,45 230,30Z' fill='none' stroke='%23d946ef' stroke-width='1'/%3E%3C/svg%3E");
  opacity: 0.8;
}

/* Double flourish with gradient line */
.vb-flourish-line {
  height: 3px;
  width: 60%;
  margin: 2rem auto;
  background: linear-gradient(
    90deg,
    transparent,
    var(--vb-hot-pink) 20%,
    var(--vb-fuchsia) 50%,
    var(--vb-electric-blue) 80%,
    transparent
  );
  border-radius: 2px;
  position: relative;
}

.vb-flourish-line::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 16px;
  height: 16px;
  background: radial-gradient(circle, var(--vb-fuchsia), var(--vb-hot-pink));
  border-radius: 50% 0 50% 0;
  rotate: 45deg;
}

Translucent Content Panel (Over Pattern Background)

/* Glass-style panel for readable text over busy pattern backgrounds */
.vb-content-panel {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(233, 30, 140, 0.2);
  border-radius: 24px;
  padding: 3rem;
  box-shadow:
    0 8px 32px rgba(123, 45, 142, 0.1),
    inset 0 0 0 1px rgba(255, 255, 255, 0.3);
}

/* Dark variant for light-on-dark sections */
.vb-content-panel--dark {
  background: rgba(30, 10, 46, 0.85);
  border: 1px solid rgba(217, 70, 239, 0.25);
  color: var(--vb-text-on-dark);
}

Vectorbloom Card

.vb-card {
  background: var(--vb-white);
  border-radius: 20px;
  padding: 2.5rem;
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 30px rgba(123, 45, 142, 0.12);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.vb-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 50px rgba(233, 30, 140, 0.18);
}

/* Decorative gradient corner bloom */
.vb-card::before {
  content: '';
  position: absolute;
  top: -40px;
  right: -40px;
  width: 120px;
  height: 120px;
  background: radial-gradient(
    circle,
    rgba(217, 70, 239, 0.15),
    rgba(255, 45, 138, 0.08),
    transparent 70%
  );
  border-radius: 50%;
  pointer-events: none;
}

/* Bottom-left complementary bloom */
.vb-card::after {
  content: '';
  position: absolute;
  bottom: -30px;
  left: -30px;
  width: 100px;
  height: 100px;
  background: radial-gradient(
    circle,
    rgba(0, 163, 255, 0.1),
    rgba(13, 148, 136, 0.06),
    transparent 70%
  );
  border-radius: 50%;
  pointer-events: none;
}

Floral Overlay Pattern

/* Subtle repeating floral pattern for backgrounds */
.vb-pattern-bg {
  background-color: var(--vb-bg-light);
  background-image:
    radial-gradient(ellipse at 25% 25%, rgba(217, 70, 239, 0.06) 0%, transparent 50%),
    radial-gradient(ellipse at 75% 75%, rgba(255, 45, 138, 0.06) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 50%, rgba(0, 163, 255, 0.04) 0%, transparent 40%);
}

/* Dense vine/filigree pattern using repeating SVG */
.vb-filigree-bg {
  background-color: var(--vb-bg-pale);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Cpath d='M40,0 C45,20 60,25 40,40 C20,25 35,20 40,0Z' fill='%23d946ef' opacity='0.04'/%3E%3Cpath d='M0,40 C20,35 25,20 40,40 C25,60 20,45 0,40Z' fill='%23e91e8c' opacity='0.03'/%3E%3C/svg%3E");
  background-size: 80px 80px;
}

Gradient Border with Bloom Glow

/* Gradient border using background-clip technique */
.vb-gradient-border {
  position: relative;
  background: var(--vb-white);
  border-radius: 20px;
  padding: 2.5rem;
}

.vb-gradient-border::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 22px;
  background: linear-gradient(
    135deg,
    var(--vb-hot-pink),
    var(--vb-fuchsia),
    var(--vb-electric-blue),
    var(--vb-emerald)
  );
  z-index: -1;
}

/* Glowing bloom shadow */
.vb-bloom-glow {
  box-shadow:
    0 0 20px rgba(233, 30, 140, 0.15),
    0 0 60px rgba(217, 70, 239, 0.08),
    0 0 100px rgba(0, 163, 255, 0.05);
}

Vectorbloom Button

.vb-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 36px;
  background: linear-gradient(135deg, var(--vb-hot-pink), var(--vb-fuchsia));
  color: var(--vb-white);
  border: none;
  border-radius: 50px;
  font-family: 'Quicksand', 'Rubik', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 20px rgba(233, 30, 140, 0.3);
}

.vb-button:hover {
  background: linear-gradient(135deg, var(--vb-fuchsia), var(--vb-electric-blue));
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(217, 70, 239, 0.4);
}

/* Outline variant */
.vb-button--outline {
  background: transparent;
  border: 2px solid var(--vb-hot-pink);
  color: var(--vb-hot-pink);
  box-shadow: none;
}

.vb-button--outline:hover {
  background: linear-gradient(135deg, var(--vb-hot-pink), var(--vb-fuchsia));
  color: var(--vb-white);
  border-color: transparent;
}

Kaleidoscopic Radial Background

/* Radiating bloom pattern for hero or feature sections */
.vb-radial-bloom {
  background:
    radial-gradient(circle at 50% 50%, rgba(217, 70, 239, 0.12) 0%, transparent 40%),
    radial-gradient(circle at 20% 80%, rgba(255, 45, 138, 0.1) 0%, transparent 35%),
    radial-gradient(circle at 80% 20%, rgba(0, 163, 255, 0.08) 0%, transparent 35%),
    radial-gradient(circle at 30% 30%, rgba(132, 204, 22, 0.06) 0%, transparent 30%),
    radial-gradient(circle at 70% 70%, rgba(250, 204, 21, 0.06) 0%, transparent 30%);
  background-color: var(--vb-bg-light);
}

/* Dark variant */
.vb-radial-bloom--dark {
  background:
    radial-gradient(circle at 50% 50%, rgba(217, 70, 239, 0.2) 0%, transparent 40%),
    radial-gradient(circle at 20% 80%, rgba(255, 45, 138, 0.15) 0%, transparent 35%),
    radial-gradient(circle at 80% 20%, rgba(0, 163, 255, 0.12) 0%, transparent 35%);
  background-color: var(--vb-bg-dark);
}

.vb-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 40px;
}

.vb-nav-logo {
  font-family: 'Comfortaa', 'Quicksand', sans-serif;
  font-weight: 700;
  font-size: 1.4rem;
  background: linear-gradient(135deg, var(--vb-hot-pink), var(--vb-fuchsia));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-decoration: none;
}

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

.vb-nav-links a {
  font-family: 'Rubik', sans-serif;
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--vb-deep-purple);
  text-decoration: none;
  transition: color 0.2s ease;
}

.vb-nav-links a:hover {
  color: var(--vb-hot-pink);
}

Materials and Textures (Visual Metaphors for Web)

Vectorbloom originated on physical surfaces and objects. Their web equivalents:

Physical Application Web Equivalent
Environmental wall/ceiling/floor murals (Katrin Olina) Full-bleed gradient backgrounds with layered SVG pattern overlays spanning the viewport
Laser-cut plywood furniture (Studio Bility) Intricate SVG clip-paths and mask patterns creating filigree border effects
Frosted yogurt shop interiors (SNOG) Translucent overlay panels with backdrop-filter: blur over vivid pattern backgrounds
Painted beauty salon interiors Saturated gradient section backgrounds with ornamental dividers
Glass light fixtures Translucent gradient shapes with soft radial glows and bloom shadows
Decorated plastic sculptures Gradient-filled SVG shapes with ornamental detail and rounded forms
Magazine advertisements and print graphics Bold typography with gradient fills, dense floral framing, high color saturation
Angelfire-era web templates Tiled pattern backgrounds, ornamental borders, decorative cursor trails

Notable Practitioners and Influences

Practitioner / Reference Contribution
Katrin Olina Icelandic graphic artist who pioneered Vectorbloom in interior design; created seamless, immersive vector environments (notably the Cristal Bar, Hong Kong) where a single graphic image functions as wall-to-ceiling lining, morphing across surfaces
SNOG Frozen Yogurt Commercial interiors exemplifying "frozen yogurt futurism" -- dense vector patterns applied to retail environments
Studio Bility Inner Beauty Bench (2008) -- laser-cut plywood furniture with intricate vector floral patterns

Video Game Expressions

Game Year Relevance
Lumines 2004 Psychedelic vector visuals synchronized to electronic music
Feel the Magic: XY/XX 2004 Stylized vector art direction
PixelJunk Eden 2008 Blooming organic vector garden environments
Child of Eden 2011 Synesthetic vector-bloom visual experience
Hohokum 2014 Flowing vector environments with organic forms
Aesthetic Relationship to Vectorbloom
Art Nouveau Major visual ancestor; provides the organic curves, botanical motifs, and ornamental flourishes that Vectorbloom digitalizes
Psychedelia 1960s influence; contributes the saturated, multicolor palette, flowing forms, and mind-expanding visual density
Supergraphic Ultramodern 1970s influence; provides the concept of large-scale, environment-transforming graphic application
Frutiger Aero Contemporary sibling; shares the early-2000s digital optimism but favors glossy naturalism over flat ornamental density
Vectordelia Close sibling; shares the psychedelic vector toolkit but Vectorbloom emphasizes floral blooming and maximalist ornament
Superflat Pop Related; shares flat, digitally precise rendering and vivid color but draws from Japanese pop culture rather than botanical forms
McBling Period contemporary; shares the early-2000s maximalist, flashy sensibility in a pop-culture context
Neo-Vectorheart Sibling from the same vector design lineage; Neo-Vectorheart is angular and monochromatic where Vectorbloom is organic and polychromatic

Quick-Start: Minimal Vectorbloom Page Template

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vectorbloom Page</title>
  <link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;600;700&family=Rubik:ital,wght@0,300;0,400;0,600;0,700;1,400&family=Comfortaa:wght@400;600;700&family=Pacifico&display=swap" rel="stylesheet">
  <style>
    :root {
      --vb-hot-pink: #ff2d8a;
      --vb-magenta: #e91e8c;
      --vb-fuchsia: #d946ef;
      --vb-deep-purple: #7b2d8e;
      --vb-lavender: #c084fc;
      --vb-electric-blue: #00a3ff;
      --vb-deep-teal: #0d9488;
      --vb-lime: #84cc16;
      --vb-yellow: #facc15;
      --vb-bg-light: #f5d6f5;
      --vb-bg-pale: #fdf2f8;
      --vb-black: #0a0a12;
      --vb-white: #ffffff;
    }

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

    body {
      background: var(--vb-bg-light);
      color: var(--vb-black);
      font-family: 'Rubik', sans-serif;
      font-weight: 400;
      letter-spacing: 0.01em;
      line-height: 1.75;
    }

    h1, h2, h3 {
      font-family: 'Quicksand', 'Comfortaa', sans-serif;
      font-weight: 700;
      color: var(--vb-deep-purple);
      letter-spacing: 0.02em;
    }

    /* Navigation */
    nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      max-width: 1200px;
      margin: 0 auto;
      padding: 20px 40px;
    }

    nav a.logo {
      font-family: 'Comfortaa', sans-serif;
      font-weight: 700;
      font-size: 1.3rem;
      background: linear-gradient(135deg, var(--vb-hot-pink), var(--vb-fuchsia));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      text-decoration: none;
    }

    nav ul {
      display: flex;
      gap: 28px;
      list-style: none;
    }

    nav ul a {
      color: var(--vb-deep-purple);
      text-decoration: none;
      font-weight: 500;
      font-size: 0.95rem;
      transition: color 0.2s;
    }

    nav ul a:hover { color: var(--vb-hot-pink); }

    /* Hero with radial bloom background */
    .hero {
      text-align: center;
      padding: 6rem 2rem;
      position: relative;
      overflow: hidden;
      background:
        radial-gradient(circle at 50% 50%, rgba(217, 70, 239, 0.12) 0%, transparent 40%),
        radial-gradient(circle at 20% 80%, rgba(255, 45, 138, 0.1) 0%, transparent 35%),
        radial-gradient(circle at 80% 20%, rgba(0, 163, 255, 0.08) 0%, transparent 35%);
    }

    .hero h1 {
      font-family: 'Comfortaa', sans-serif;
      font-size: clamp(2.5rem, 7vw, 5.5rem);
      font-weight: 700;
      letter-spacing: 0.04em;
      background: linear-gradient(135deg, var(--vb-hot-pink), var(--vb-fuchsia), var(--vb-electric-blue));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      line-height: 1.1;
    }

    .hero .subtitle {
      font-family: 'Pacifico', cursive;
      font-size: 1.6rem;
      color: var(--vb-magenta);
      margin-top: 0.75rem;
    }

    /* Gradient flourish divider */
    .vb-divider {
      height: 3px;
      width: 40%;
      margin: 2rem auto;
      background: linear-gradient(
        90deg,
        transparent,
        var(--vb-hot-pink) 20%,
        var(--vb-fuchsia) 50%,
        var(--vb-electric-blue) 80%,
        transparent
      );
      border-radius: 2px;
    }

    /* Content section */
    section {
      max-width: 800px;
      margin: 0 auto;
      padding: 4rem 2rem;
    }

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

    section p {
      text-align: center;
      color: var(--vb-deep-purple);
      opacity: 0.85;
    }

    /* Card */
    .card {
      background: var(--vb-white);
      border-radius: 20px;
      padding: 2.5rem;
      margin: 1.5rem 0;
      position: relative;
      overflow: hidden;
      box-shadow: 0 8px 30px rgba(123, 45, 142, 0.12);
    }

    .card::before {
      content: '';
      position: absolute;
      top: -40px;
      right: -40px;
      width: 120px;
      height: 120px;
      background: radial-gradient(circle, rgba(217, 70, 239, 0.15), transparent 70%);
      border-radius: 50%;
      pointer-events: none;
    }

    /* Button */
    .btn {
      display: inline-block;
      padding: 14px 36px;
      background: linear-gradient(135deg, var(--vb-hot-pink), var(--vb-fuchsia));
      color: var(--vb-white);
      border: none;
      border-radius: 50px;
      font-family: 'Quicksand', sans-serif;
      font-weight: 700;
      font-size: 1rem;
      text-decoration: none;
      cursor: pointer;
      transition: all 0.3s ease;
      box-shadow: 0 4px 20px rgba(233, 30, 140, 0.3);
    }

    .btn:hover {
      background: linear-gradient(135deg, var(--vb-fuchsia), var(--vb-electric-blue));
      transform: translateY(-2px);
      box-shadow: 0 8px 30px rgba(217, 70, 239, 0.4);
    }

    /* Feature grid */
    .features {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 2rem;
      max-width: 1100px;
      margin: 0 auto;
      padding: 2rem 2rem 4rem;
    }

    @media (max-width: 768px) {
      .hero { padding: 4rem 1.5rem; }
      nav { padding: 16px 20px; }
      nav ul { gap: 16px; }
    }
  </style>
</head>
<body>
  <nav>
    <a href="#" class="logo">Vectorbloom</a>
    <ul>
      <li><a href="#">Gallery</a></li>
      <li><a href="#">Designs</a></li>
      <li><a href="#">About</a></li>
    </ul>
  </nav>

  <div class="hero">
    <h1>Digital Blooms</h1>
    <div class="subtitle">where vectors meet nature</div>
    <div class="vb-divider"></div>
    <p style="margin-top: 1.5rem;">
      <a href="#" class="btn">Explore the Garden</a>
    </p>
  </div>

  <section>
    <h2>Technological Opulence</h2>
    <p>Maximalist vector ornament meets psychedelic botanical fantasy. Every surface becomes a canvas for intricate, blooming digital compositions.</p>
  </section>

  <div class="features">
    <div class="card">
      <h3>Flourishing Patterns</h3>
      <p>Intricate floral forms rendered with digital precision, spreading seamlessly across every surface.</p>
    </div>
    <div class="card">
      <h3>Vivid Palettes</h3>
      <p>Bold gradients flowing from hot pink through deep purple to electric blue create luminous, psychedelic atmospheres.</p>
    </div>
    <div class="card">
      <h3>Immersive Environments</h3>
      <p>Patterns designed to transform entire spaces, enveloping walls, ceilings, and floors in continuous imagery.</p>
    </div>
  </div>
</body>
</html>
← Retour aux designs
Agence WagnerAgence Wagner

© 2026 Agence Wagner. Tous droits réservés.

Designs issus de chrislemke/website_designs, sous licence MIT.