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

Vectordelia Design Reference

Vectordelia is a broad digital design aesthetic prevalent from the mid-2000s to early 2010s, representing a peak of humanist maximalism in computer-aided graphic design. It is defined by the vibrant, sometimes glossy use of vector graphics featuring abstract flourishes, fluid shapes, solid silhouettes, and gradient blocks, often set against monochrome backgrounds. Unlike skeuomorphic design, Vectordelia focuses on flat but elaborate non-photorealistic forms with crisp, geometrically neat outlines. In animated contexts, compositions typically flow outwards from a central point, gaining variety and complexity as they grow. The aesthetic is a digital evolution of 1960s psychedelic corporate art (Peter Max) merged with the sharp, glossy capabilities of Adobe Illustrator CS2/CS3, channeling optimism, dynamism, and organized chaos into maximalist digital compositions.

Visual Characteristics

Core Motifs and Patterns

  • Abstract flourishes and fluid shapes -- swirling, organic curves and flowing lines that create a sense of movement and growth; the signature compositional element
  • Solid silhouettes -- human figures, dancers, and crowds rendered as flat, opaque shapes with crisp geometrically neat outlines
  • Gradient blocks -- large structural gradient fills used as major compositional elements, not just accents
  • Overlapping compositions -- layered forms stacking and intersecting to create visual density and depth
  • Digital sheen and translucency -- glossy, translucent vector surfaces with a polished digital quality
  • Halftone dot patterns -- Ben-Day dot textures and halftone screens used as decorative overlays and fills
  • Striped circles -- concentric or striped circular forms as recurring graphic elements
  • Bokeh effects -- out-of-focus light circles creating atmospheric depth behind compositions
  • Swirling vines and floral elements -- organic, curving plant forms winding through compositions
  • Splats and organic bursts -- paint-splatter-like shapes adding controlled chaos and energy
  • Butterflies -- delicate, symmetrical forms used as decorative accents symbolizing transformation
  • Sunbursts and auroras -- radiating light patterns and luminous atmospheric effects
  • Bubbles -- floating circular translucent forms adding lightness and whimsy
  • Arrow clusters -- groups of directional arrows creating visual momentum
  • Stars -- five-pointed or multi-pointed star shapes scattered as accent elements
  • Zebra print patterns -- bold black-and-white striped organic patterns (especially in Vector-Electro subgenre)
  • Musical motifs -- speakers, headphones, turntables, microphones, DJ mixers, electric guitars, and music notes
  • Urban silhouettes -- dancer and crowd silhouettes suggesting nightlife, festivals, and youthful energy
  • Central-outward flow -- compositions that radiate from a focal point, growing in variety and complexity toward the edges

Design Principles

  • Humanist maximalism -- abundance of ornamental detail rendered with warmth and human-centered optimism; more is more, but always with intent
  • Organized chaos -- densely layered compositions that feel energetic and spontaneous but are carefully constructed
  • Digital precision, organic feeling -- all forms are vector-constructed (no hand-drawn elements) yet evoke natural, flowing movement
  • Flat but elaborate -- no 3D rendering or photorealism; depth is achieved through layering, overlap, and translucency rather than perspective
  • Crisp outlines -- every shape has geometrically precise edges, maintaining clarity even in the most complex compositions
  • Dynamism and movement -- compositions should feel alive, in motion, radiating energy
  • Optimism and vibrancy -- the visual tone is celebratory, youthful, and energetic
  • Monochrome grounding -- rich, colorful compositions anchored against black or white backgrounds for maximum contrast

Color Palette

Primary Scheme

Vectordelia uses a high-contrast CMYK-derived palette of saturated, vivid colors set against stark monochrome backgrounds. The palette draws from the CMYK print color model, emphasizing pure, vibrant hues at full saturation.

Role Colors Hex (suggested)
Primary Cyan Vivid cyan, electric blue #00D4FF, #00BCD4
Primary Magenta Hot magenta, vivid pink #FF00FF, #E91E90
Primary Lime Electric lime green, vivid green #00FF66, #76FF03
Primary Orange Vibrant orange, tangerine #FF6D00, #FF9100
Hot Pink Saturated pink, fuchsia #FF1493, #FF69B4
Background Dark Pure black, near-black #000000, #0A0A0A
Background Light Pure white, near-white #FFFFFF, #F5F5F5
Gradient Blue Deep blue for gradient depth #0D47A1, #1565C0
Gradient Purple Rich violet for gradient transitions #7B1FA2, #9C27B0
Accent Yellow Bright yellow, golden #FFEA00, #FFD600
Accent Red Vivid red, signal red #FF1744, #D50000
Silhouette Fill Solid black or deep color #000000, #1A1A1A
Translucent White Glass-like overlay rgba(255, 255, 255, 0.15)
Translucent Cyan Glossy color overlay rgba(0, 212, 255, 0.3)

Suggested CSS Custom Properties

:root {
  /* CMYK-derived primaries */
  --vd-cyan: #00d4ff;
  --vd-cyan-deep: #00bcd4;
  --vd-cyan-dark: #0097a7;
  --vd-magenta: #ff00ff;
  --vd-magenta-soft: #e91e90;
  --vd-magenta-deep: #c2185b;
  --vd-lime: #76ff03;
  --vd-lime-bright: #00ff66;
  --vd-lime-deep: #64dd17;
  --vd-orange: #ff6d00;
  --vd-orange-bright: #ff9100;
  --vd-orange-warm: #ff8f00;

  /* Extended accents */
  --vd-hot-pink: #ff1493;
  --vd-pink-soft: #ff69b4;
  --vd-yellow: #ffea00;
  --vd-yellow-deep: #ffd600;
  --vd-red: #ff1744;
  --vd-purple: #9c27b0;
  --vd-purple-deep: #7b1fa2;
  --vd-blue-deep: #0d47a1;

  /* Monochrome base */
  --vd-black: #000000;
  --vd-near-black: #0a0a0a;
  --vd-dark: #1a1a1a;
  --vd-gray-dark: #333333;
  --vd-gray-mid: #666666;
  --vd-gray-light: #cccccc;
  --vd-near-white: #f5f5f5;
  --vd-white: #ffffff;

  /* Translucent overlays */
  --vd-glass-white: rgba(255, 255, 255, 0.15);
  --vd-glass-white-strong: rgba(255, 255, 255, 0.30);
  --vd-glass-cyan: rgba(0, 212, 255, 0.25);
  --vd-glass-magenta: rgba(255, 0, 255, 0.20);
  --vd-glass-lime: rgba(118, 255, 3, 0.20);
  --vd-sheen: rgba(255, 255, 255, 0.08);

  /* Functional mappings */
  --vd-bg-primary: var(--vd-black);
  --vd-bg-secondary: var(--vd-white);
  --vd-bg-surface: var(--vd-dark);
  --vd-text-primary: var(--vd-white);
  --vd-text-on-light: var(--vd-black);
  --vd-text-secondary: var(--vd-gray-light);
  --vd-accent-primary: var(--vd-cyan);
  --vd-accent-secondary: var(--vd-magenta);
  --vd-accent-tertiary: var(--vd-lime);
}

Color Guidelines

  • Monochrome backgrounds are mandatory -- compositions sit on pure black or pure white; the background is the canvas, never a mid-tone
  • CMYK saturation -- colors are pushed to maximum saturation; muted or pastel tones are not part of this aesthetic
  • Multiple vivid colors per composition -- unlike monochromatic aesthetics, Vectordelia uses 3-5 vivid colors simultaneously in a single composition
  • Gradient blocks as structure -- gradients transition between two or three vivid colors (cyan-to-magenta, lime-to-cyan, orange-to-magenta) and serve as major compositional areas
  • Translucent overlays -- semi-transparent colored shapes layer over one another to create optical mixing and depth
  • High contrast is essential -- vivid colors against black backgrounds or vivid colors against white backgrounds; never color-on-color without sufficient contrast
  • Hot pink dominance -- hot pink / fuchsia is the signature accent, especially in Vector-Electro and feminine-leaning compositions

Typography

Typeface Characteristics

Vectordelia typography employs humanist sans-serif typefaces from the Frutiger family tradition, reflecting the same optimistic, human-centered design philosophy that drives the visual language:

  • Humanist sans-serif typefaces -- warm, organic letterforms with subtle stroke variation; the Frutiger family is the canonical reference
  • Clean, rounded character -- approachable and legible even at large display sizes
  • Medium to bold weights for headlines -- confident but not aggressive; matching the optimistic visual tone
  • No decorative, script, or serif fonts -- typography stays clean and modern to contrast with the ornamental illustration
  • Large display sizing -- headlines are bold and prominent, anchoring the visual composition
  • White text on dark backgrounds -- the most common configuration, with text often overlaid on or adjacent to the vector compositions
  • Minimal text overall -- the aesthetic is illustration-dominant; typography supports but does not compete with the vector art
Font Style Usage
Nunito Rounded humanist sans Headlines, display text -- closest free match to the Frutiger warmth and roundness
Nunito Sans Clean humanist sans Body text, paragraphs -- straight-terminal companion to Nunito
Open Sans Humanist, open, neutral Body text -- the Web 2.0 era workhorse with excellent legibility
Lato Warm, semi-rounded sans Headlines and body -- subtle warmth with professional clarity
Source Sans 3 Humanist, clear Body text, UI labels -- Frutiger-like proportions
Cabin Humanist, slightly rounded Headlines, subheadings -- warm and modern
Rubik Rounded, geometric-humanist Display text, buttons -- friendly and bold
Quicksand Rounded geometric Display text, accent labels -- playful and energetic
Comfortaa Rounded geometric Display headings -- bubbly, youthful character
Varela Round Rounded grotesque Headlines, labels -- simple and approachable

Note: The canonical typeface family is Frutiger (Linotype, commercial). The closest free alternatives are Nunito for rounded warmth or Source Sans 3 for humanist proportions.

Typography CSS Example

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&family=Nunito+Sans:wght@400;600&family=Open+Sans:wght@400;600&family=Comfortaa:wght@400;600;700&display=swap');

/* Display / Hero text */
.vd-display {
  font-family: 'Nunito', 'Comfortaa', sans-serif;
  font-size: clamp(3rem, 7vw, 6rem);
  font-weight: 900;
  letter-spacing: -0.01em;
  line-height: 1.05;
  color: var(--vd-white);
  text-shadow:
    0 0 30px var(--vd-glass-cyan),
    0 2px 10px rgba(0, 0, 0, 0.4);
}

/* Headlines */
h1, h2, h3 {
  font-family: 'Nunito', 'Cabin', 'Lato', sans-serif;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.15;
  color: var(--vd-white);
}

/* Body text */
body {
  font-family: 'Nunito Sans', 'Open Sans', 'Source Sans 3', sans-serif;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--vd-text-secondary);
  -webkit-font-smoothing: antialiased;
}

/* Accent / label text */
.vd-label {
  font-family: 'Nunito', 'Quicksand', sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--vd-cyan);
}

/* Playful display text */
.vd-playful {
  font-family: 'Comfortaa', 'Varela Round', sans-serif;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--vd-magenta);
}

Layout Principles

Grid and Structure

  • Monochrome canvas backgrounds -- full-bleed black or white backgrounds that serve as a neutral stage for the vivid vector compositions
  • Central focal compositions -- vector art radiates outward from a central point or hero element, growing in complexity toward the edges
  • Layered, overlapping elements -- shapes, silhouettes, flourishes, and gradient blocks stack and intersect freely
  • Illustration-dominant layouts -- vector art takes 60-80% of the visual space; text is secondary and positioned in clear areas
  • Full-bleed hero sections -- vector compositions fill the entire viewport width, with content overlaid
  • Generous negative space -- despite the maximalist compositions, the monochrome background provides breathing room
  • Asymmetric, dynamic placement -- elements are positioned for visual energy and flow, not grid symmetry
  • Edge-to-edge decorative bleed -- flourishes, vines, and abstract shapes extend beyond content boundaries to the viewport edges

Section Organization

  • Use gradient transitions between sections -- flowing color gradients that shift the mood from one section to the next
  • Apply monochrome background alternation -- alternate between black and white background sections for contrast
  • Create vector composition zones -- dedicated areas where the ornamental vector art dominates, separated from text-heavy zones
  • Use flowing dividers -- sinuous curves and vine-like decorative separators rather than straight lines
  • Add floating decorative elements -- butterflies, bubbles, stars, and abstract shapes scattered at section boundaries
  • Group text content in translucent overlay panels -- semi-transparent dark or light panels that sit atop the vector compositions
  • Silhouette anchoring -- human silhouettes placed at the base or edges of sections to ground the abstract compositions

CSS/Design Techniques

Vivid Gradient Background

/* Signature Vectordelia gradient -- CMYK-derived vivid transition */
.vd-gradient-bg {
  background: linear-gradient(
    135deg,
    #00d4ff 0%,
    #9c27b0 40%,
    #ff00ff 70%,
    #ff6d00 100%
  );
  min-height: 100vh;
}

/* Dark base with colored gradient overlay */
.vd-dark-gradient {
  background:
    radial-gradient(ellipse at 20% 50%, rgba(0, 212, 255, 0.25) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 30%, rgba(255, 0, 255, 0.20) 0%, transparent 50%),
    radial-gradient(ellipse at 60% 80%, rgba(118, 255, 3, 0.15) 0%, transparent 50%),
    #000000;
}

/* Monochrome black canvas -- the classic Vectordelia backdrop */
.vd-black-canvas {
  background: #000000;
  min-height: 100vh;
  position: relative;
  overflow: hidden;
}

/* White canvas variant */
.vd-white-canvas {
  background: #ffffff;
  min-height: 100vh;
  position: relative;
  overflow: hidden;
}

Digital Sheen / Glossy Overlay

/* Translucent glossy panel -- for content overlays on vector compositions */
.vd-glass-panel {
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(12px) saturate(1.3);
  -webkit-backdrop-filter: blur(12px) saturate(1.3);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 2rem;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Glossy sheen highlight strip across top */
.vd-glass-panel::before {
  content: '';
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.4),
    transparent
  );
}

/* Light variant for white backgrounds */
.vd-glass-panel--light {
  background: rgba(255, 255, 255, 0.65);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
}

Gradient Block Element

/* Structural gradient block -- a major compositional element */
.vd-gradient-block {
  border-radius: 16px;
  padding: 3rem;
  position: relative;
  overflow: hidden;
}

.vd-gradient-block--cyan-magenta {
  background: linear-gradient(135deg, #00d4ff, #ff00ff);
}

.vd-gradient-block--lime-cyan {
  background: linear-gradient(135deg, #76ff03, #00d4ff);
}

.vd-gradient-block--orange-magenta {
  background: linear-gradient(135deg, #ff6d00, #ff00ff);
}

.vd-gradient-block--pink-purple {
  background: linear-gradient(135deg, #ff1493, #7b1fa2);
}

/* Gradient block with glossy overlay */
.vd-gradient-block::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.20) 0%,
    rgba(255, 255, 255, 0.02) 100%
  );
  pointer-events: none;
  border-radius: 16px 16px 0 0;
}

Halftone Dot Pattern Overlay

/* Halftone dot pattern -- signature Vectordelia texture */
.vd-halftone {
  position: relative;
}

.vd-halftone::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.08) 1px,
    transparent 1px
  );
  background-size: 8px 8px;
  pointer-events: none;
}

/* Larger halftone variant */
.vd-halftone--large::after {
  background-image: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.06) 2px,
    transparent 2px
  );
  background-size: 16px 16px;
}

/* Fading halftone (more visible on one side) */
.vd-halftone--fade::after {
  mask-image: linear-gradient(90deg, transparent 10%, black 50%, transparent 90%);
  -webkit-mask-image: linear-gradient(90deg, transparent 10%, black 50%, transparent 90%);
}

Swirling Flourish / Vine Decorations (CSS Approximation)

/* Abstract flowing flourish using border curves */
.vd-flourish {
  position: absolute;
  width: 300px;
  height: 300px;
  border-radius: 60% 40% 70% 30% / 50% 60% 40% 50%;
  background: linear-gradient(
    135deg,
    var(--vd-cyan) 0%,
    var(--vd-magenta) 50%,
    var(--vd-lime) 100%
  );
  opacity: 0.4;
  filter: blur(2px);
  pointer-events: none;
}

/* Second flourish with different proportions */
.vd-flourish--alt {
  border-radius: 40% 60% 30% 70% / 60% 40% 60% 40%;
  background: linear-gradient(
    -45deg,
    var(--vd-orange) 0%,
    var(--vd-magenta) 60%,
    var(--vd-purple) 100%
  );
}

/* Organic blob shape */
.vd-blob {
  position: absolute;
  border-radius: 50% 40% 60% 50% / 45% 55% 45% 55%;
  pointer-events: none;
}

.vd-blob--cyan {
  background: radial-gradient(circle, var(--vd-cyan) 0%, transparent 70%);
  width: 400px;
  height: 400px;
  opacity: 0.3;
}

.vd-blob--magenta {
  background: radial-gradient(circle, var(--vd-magenta) 0%, transparent 70%);
  width: 300px;
  height: 300px;
  opacity: 0.25;
}

.vd-blob--lime {
  background: radial-gradient(circle, var(--vd-lime) 0%, transparent 70%);
  width: 250px;
  height: 250px;
  opacity: 0.2;
}

Bokeh Light Effects

/* Soft bokeh circles for atmospheric depth */
.vd-bokeh {
  position: absolute;
  border-radius: 50%;
  filter: blur(40px);
  opacity: 0.15;
  pointer-events: none;
}

.vd-bokeh--cyan {
  background: var(--vd-cyan);
  width: 300px;
  height: 300px;
}

.vd-bokeh--magenta {
  background: var(--vd-magenta);
  width: 250px;
  height: 250px;
}

.vd-bokeh--lime {
  background: var(--vd-lime);
  width: 200px;
  height: 200px;
}

.vd-bokeh--orange {
  background: var(--vd-orange);
  width: 180px;
  height: 180px;
}

/* Animated gentle drift for bokeh */
@keyframes vd-bokeh-drift {
  0%, 100% {
    transform: translate(0, 0) scale(1);
    opacity: 0.12;
  }
  33% {
    transform: translate(15px, -10px) scale(1.05);
    opacity: 0.18;
  }
  66% {
    transform: translate(-10px, 8px) scale(0.95);
    opacity: 0.14;
  }
}

.vd-bokeh--animated {
  animation: vd-bokeh-drift 8s ease-in-out infinite;
}

.vd-bokeh--animated:nth-child(2n) { animation-delay: 2s; animation-duration: 10s; }
.vd-bokeh--animated:nth-child(3n) { animation-delay: 4s; animation-duration: 12s; }

Silhouette Figure

/* Solid black silhouette -- the signature Vectordelia human element */
.vd-silhouette {
  color: var(--vd-black);
  fill: var(--vd-black);
}

/* Silhouette on white background */
.vd-silhouette--on-light {
  color: var(--vd-black);
  fill: var(--vd-black);
}

/* Silhouette on dark background -- vivid color fill */
.vd-silhouette--on-dark {
  fill: var(--vd-white);
}

/* Silhouette with gradient fill */
.vd-silhouette--gradient {
  fill: url(#vd-silhouette-gradient);
}

/* CSS silhouette container with colored glow */
.vd-silhouette-glow {
  filter: drop-shadow(0 0 20px var(--vd-cyan))
          drop-shadow(0 0 40px var(--vd-glass-magenta));
}

Sunburst / Radial Burst

/* Radial sunburst effect -- emanating from a focal point */
.vd-sunburst {
  position: absolute;
  width: 100%;
  height: 100%;
  background: repeating-conic-gradient(
    from 0deg,
    rgba(255, 255, 255, 0.03) 0deg 5deg,
    transparent 5deg 10deg
  );
  pointer-events: none;
}

/* Colored sunburst variant */
.vd-sunburst--cyan {
  background: repeating-conic-gradient(
    from 0deg,
    rgba(0, 212, 255, 0.06) 0deg 5deg,
    transparent 5deg 10deg
  );
}

/* Concentrated radial glow from center */
.vd-radial-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 600px;
  height: 600px;
  background: radial-gradient(
    circle,
    rgba(0, 212, 255, 0.25) 0%,
    rgba(255, 0, 255, 0.15) 30%,
    rgba(118, 255, 3, 0.08) 55%,
    transparent 75%
  );
  pointer-events: none;
}

Striped Circle Decoration

/* Striped circle -- a recurring Vectordelia graphic element */
.vd-striped-circle {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: repeating-linear-gradient(
    45deg,
    var(--vd-cyan),
    var(--vd-cyan) 4px,
    transparent 4px,
    transparent 8px
  );
  opacity: 0.6;
  pointer-events: none;
}

/* Concentric rings variant */
.vd-concentric-circle {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: repeating-radial-gradient(
    circle at center,
    var(--vd-magenta) 0px,
    var(--vd-magenta) 3px,
    transparent 3px,
    transparent 8px
  );
  opacity: 0.5;
  pointer-events: none;
}

Vectordelia Button

/* Vivid gradient button with glossy sheen */
.vd-button {
  display: inline-block;
  padding: 0.85rem 2.5rem;
  border-radius: 30px;
  border: none;
  background: linear-gradient(135deg, var(--vd-cyan), var(--vd-magenta));
  color: var(--vd-white);
  font-family: 'Nunito', 'Rubik', sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 4px 16px rgba(0, 212, 255, 0.3),
    0 2px 8px rgba(255, 0, 255, 0.2);
  transition: all 0.3s ease;
}

/* Glossy highlight strip */
.vd-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.35) 0%,
    rgba(255, 255, 255, 0.05) 100%
  );
  border-radius: 30px 30px 0 0;
  pointer-events: none;
}

.vd-button:hover {
  transform: translateY(-2px);
  box-shadow:
    0 6px 24px rgba(0, 212, 255, 0.4),
    0 4px 12px rgba(255, 0, 255, 0.3);
}

/* Lime-orange variant */
.vd-button--warm {
  background: linear-gradient(135deg, var(--vd-lime), var(--vd-orange));
  box-shadow:
    0 4px 16px rgba(118, 255, 3, 0.3),
    0 2px 8px rgba(255, 109, 0, 0.2);
}

/* Outline variant for light backgrounds */
.vd-button--outline {
  background: transparent;
  border: 2px solid var(--vd-cyan);
  color: var(--vd-cyan);
  box-shadow: none;
}

.vd-button--outline:hover {
  background: var(--vd-cyan);
  color: var(--vd-black);
}

Flowing Divider

/* Organic flowing section divider using SVG path */
.vd-divider {
  width: 100%;
  height: 60px;
  overflow: hidden;
  position: relative;
}

.vd-divider svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* CSS-only gradient divider with organic curve */
.vd-gradient-divider {
  width: 60%;
  margin: 3rem auto;
  border: none;
  height: 3px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--vd-cyan) 20%,
    var(--vd-magenta) 50%,
    var(--vd-lime) 80%,
    transparent
  );
  border-radius: 2px;
  opacity: 0.7;
}

/* Thin luminous line */
.vd-line-divider {
  width: 40%;
  margin: 2rem auto;
  border: none;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--vd-cyan) 25%,
    var(--vd-cyan) 75%,
    transparent
  );
  opacity: 0.4;
}

Star / Sparkle Decoration

/* Star accent element */
.vd-star {
  position: absolute;
  width: 20px;
  height: 20px;
  background: var(--vd-white);
  clip-path: polygon(
    50% 0%, 61% 35%, 98% 35%, 68% 57%,
    79% 91%, 50% 70%, 21% 91%, 32% 57%,
    2% 35%, 39% 35%
  );
  opacity: 0.6;
  pointer-events: none;
}

/* Animated twinkle */
@keyframes vd-twinkle {
  0%, 100% { opacity: 0.3; transform: scale(0.8); }
  50% { opacity: 0.8; transform: scale(1.1); }
}

.vd-star--animated {
  animation: vd-twinkle 3s ease-in-out infinite;
}

.vd-star--animated:nth-child(2n) { animation-delay: 1s; animation-duration: 4s; }
.vd-star--animated:nth-child(3n) { animation-delay: 0.5s; animation-duration: 2.5s; }

/* Colored star variant */
.vd-star--cyan { background: var(--vd-cyan); }
.vd-star--magenta { background: var(--vd-magenta); }
.vd-star--lime { background: var(--vd-lime); }

Bubble Decoration

/* Floating bubble -- translucent, glossy sphere */
.vd-bubble {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(
    circle at 35% 30%,
    rgba(255, 255, 255, 0.6) 0%,
    rgba(255, 255, 255, 0.15) 30%,
    rgba(0, 212, 255, 0.10) 60%,
    rgba(0, 212, 255, 0.03) 100%
  );
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow:
    inset 0 -4px 12px rgba(0, 212, 255, 0.08),
    0 2px 8px rgba(0, 0, 0, 0.05);
  pointer-events: none;
}

.vd-bubble--sm { width: 16px; height: 16px; }
.vd-bubble--md { width: 36px; height: 36px; }
.vd-bubble--lg { width: 64px; height: 64px; }

@keyframes vd-bubble-float {
  0% { transform: translateY(0) scale(1); opacity: 0.5; }
  50% { transform: translateY(-25px) scale(1.04); opacity: 0.8; }
  100% { transform: translateY(-50px) scale(0.96); opacity: 0; }
}

.vd-bubble--animated {
  animation: vd-bubble-float 5s ease-in-out infinite;
}

.vd-bubble--animated:nth-child(2n) { animation-delay: 1.2s; animation-duration: 6s; }
.vd-bubble--animated:nth-child(3n) { animation-delay: 2.5s; animation-duration: 7s; }

Animation and Motion

  • Central-outward flow -- the signature animation pattern; elements emerge from a focal point and radiate outward with growing complexity
  • Organic, flowing transitions -- smooth easing curves (ease-in-out) with medium durations (400-800ms); nothing snaps or jars
  • Growing and blossoming -- elements scale up from zero or from a seed point, unfurling like plants
  • Gentle drift and float -- decorative elements (bubbles, stars, bokeh) drift slowly with subtle oscillation
  • Rotation and spin -- flourishes and decorative elements slowly rotate to add dynamism
  • Pulsing glow -- color accents pulse gently to simulate living, breathing energy
  • No mechanical motion -- avoid sharp, robotic, or linear movements; everything should feel organic and fluid
/* Central-outward emergence */
@keyframes vd-emerge {
  from {
    transform: scale(0);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

.vd-emerge {
  animation: vd-emerge 0.6s ease-out forwards;
}

/* Organic drift */
@keyframes vd-drift {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  25% { transform: translate(8px, -12px) rotate(2deg); }
  50% { transform: translate(-5px, -20px) rotate(-1deg); }
  75% { transform: translate(10px, -8px) rotate(1.5deg); }
}

.vd-drift {
  animation: vd-drift 12s ease-in-out infinite;
}

/* Slow rotation for decorative elements */
@keyframes vd-slow-rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.vd-rotate {
  animation: vd-slow-rotate 30s linear infinite;
}

/* Color pulse glow */
@keyframes vd-glow-pulse {
  0%, 100% {
    box-shadow: 0 0 20px var(--vd-glass-cyan), 0 0 40px var(--vd-glass-magenta);
  }
  50% {
    box-shadow: 0 0 30px var(--vd-glass-cyan), 0 0 60px var(--vd-glass-magenta);
  }
}

.vd-pulse-glow {
  animation: vd-glow-pulse 4s ease-in-out infinite;
}

Materials and Textures (Visual Metaphors for Web)

Visual Effect Web Equivalent
Glossy vector surface Linear gradient (light-to-dark) + ::before with white-to-transparent upper-half overlay
Digital sheen Subtle rgba(255,255,255,0.08) overlay on surfaces
Translucent overlay Semi-transparent colored background + backdrop-filter: blur()
Gradient block Angled linear-gradient between two vivid CMYK colors as a structural element
Halftone dots radial-gradient in background-image with small, repeating dot pattern
Bokeh lights Large blurred circles (filter: blur()) at low opacity with drift animation
Sunburst rays repeating-conic-gradient from center with alternating transparent and semi-transparent wedges
Solid silhouette SVG or CSS clip-path shape with solid black or vivid color fill
Flowing vine SVG path element with organic Bezier curves and gradient stroke
Striped circle repeating-linear-gradient at 45deg inside a border-radius: 50% container
Splat / burst Organic SVG shape with irregular edges and vivid gradient fill
Bubbles Circle with radial gradient (white highlight top-left, color-tint bottom) + thin white border

Subgenres

Subgenre Description
Vectorfunk Music/party-focused variant emphasizing speakers, DJs, musical instruments, and human silhouettes in dance poses; overlaps with Superflat Pop and Four Colors; targets teenage/young adult demographics
Vectorgarden Minimalist, feminine variant featuring abstract flourishes, flowers, auroras, butterflies, and gradients with transparent and glossy textures; overlaps significantly with Frutiger Aero due to shared nature motifs
Vector-Electro Rave/disco/rock variant (2004-2015) incorporating large speakers, electric guitars, DJ mixers, music notes, electric auroras, zebra print, and stars; frequently features hot pink prominently
Vector Grunge Textured variant incorporating grunge elements -- distressed textures, rough edges, and splatter effects layered with the clean vector forms
Vector Musica Latin-influenced variant with musical and cultural motifs specific to Latin American design traditions

Associated Brands and Cultural References

The following products and media exemplify the Vectordelia aesthetic:

  • Apple iPod -- silhouette advertising campaigns with solid-color human figures dancing against vivid backgrounds
  • Microsoft Xbox 360 -- dashboard interfaces and promotional materials featuring flowing vector compositions
  • Microsoft Zune -- marketing materials with organic vector flourishes and vivid color palettes
  • Windows XP -- advertisements and promotional media incorporating vector-style illustrations
  • Coca-Cola -- mid-2000s campaign materials with flowing, organic vector art
  • MTV / Nickelodeon -- on-air graphics and bumpers featuring maximalist vector compositions
  • Just Dance (1-3) -- game interface and promotional art with dancer silhouettes against vivid vector backdrops
  • Kidz Bop -- album covers featuring the signature colorful vector flourish style
  • iDog -- product and packaging design using Vectordelia-style vector art
Aesthetic Relationship to Vectordelia
Frutiger Aero Contemporary sibling; shares humanist typography, glossy surfaces, and optimistic tone but emphasizes nature imagery and skeuomorphism over abstract vector art
Flat Design Successor; the minimalist movement that displaced Vectordelia's maximalist vector abundance starting ~2013
Superflat Pop Sibling; shares bright colors and flat vector illustration but with more pop-art and Japanese influences
Four Colors Related; shares vivid CMYK-derived color palette and youthful energy
McBling Contemporary; shares the mid-2000s era and flashy, maximalist visual energy
Colorful Pop Related; shares vivid multi-color palettes and energetic visual character
Corporate Hippie Related; shares organic, flowing visual motifs but with a more corporate/wellness tone
Hands Up Related; shares the music/party visual culture and vivid colors of the same era
Indie Sleaze Contemporary; shares the mid-2000s to early-2010s cultural moment
New Rave Related; shares vivid neon colors and party/music culture
Vectorbloom Sibling; organic vector art from the same design lineage
Recession Pop Contemporary; a more subdued aesthetic that coexisted with Vectordelia's vibrancy

Quick-Start: Minimal Vectordelia Page Template

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vectordelia Page</title>
  <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&family=Nunito+Sans:wght@400;600&family=Comfortaa:wght@400;600;700&display=swap" rel="stylesheet">
  <style>
    :root {
      --vd-cyan: #00d4ff;
      --vd-magenta: #ff00ff;
      --vd-lime: #76ff03;
      --vd-orange: #ff6d00;
      --vd-hot-pink: #ff1493;
      --vd-purple: #9c27b0;
      --vd-yellow: #ffea00;
      --vd-black: #000000;
      --vd-white: #ffffff;
      --vd-gray-light: #cccccc;
      --vd-glass: rgba(0, 0, 0, 0.55);
      --vd-glass-border: rgba(255, 255, 255, 0.12);
    }

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

    body {
      background: #000000;
      color: #ffffff;
      font-family: 'Nunito Sans', 'Nunito', sans-serif;
      font-weight: 400;
      line-height: 1.65;
      overflow-x: hidden;
      -webkit-font-smoothing: antialiased;
    }

    h1, h2, h3 {
      font-family: 'Nunito', sans-serif;
      font-weight: 700;
      line-height: 1.15;
    }

    /* Bokeh background lights */
    .bokeh {
      position: fixed;
      border-radius: 50%;
      filter: blur(50px);
      opacity: 0.15;
      pointer-events: none;
      z-index: 0;
    }

    .bokeh--1 {
      width: 450px; height: 450px;
      background: var(--vd-cyan);
      top: -10%; left: -5%;
      animation: drift 10s ease-in-out infinite;
    }

    .bokeh--2 {
      width: 350px; height: 350px;
      background: var(--vd-magenta);
      top: 30%; right: -8%;
      animation: drift 12s ease-in-out infinite 2s;
    }

    .bokeh--3 {
      width: 300px; height: 300px;
      background: var(--vd-lime);
      bottom: 10%; left: 15%;
      animation: drift 14s ease-in-out infinite 4s;
    }

    .bokeh--4 {
      width: 200px; height: 200px;
      background: var(--vd-orange);
      top: 60%; right: 20%;
      animation: drift 8s ease-in-out infinite 1s;
    }

    @keyframes drift {
      0%, 100% { transform: translate(0, 0); }
      33% { transform: translate(15px, -12px); }
      66% { transform: translate(-10px, 8px); }
    }

    /* Halftone overlay */
    .halftone-overlay {
      position: fixed;
      inset: 0;
      background-image: radial-gradient(
        circle,
        rgba(255, 255, 255, 0.04) 1px,
        transparent 1px
      );
      background-size: 10px 10px;
      pointer-events: none;
      z-index: 1;
    }

    /* Decorative floating elements */
    .star {
      position: fixed;
      width: 14px;
      height: 14px;
      background: var(--vd-white);
      clip-path: polygon(
        50% 0%, 61% 35%, 98% 35%, 68% 57%,
        79% 91%, 50% 70%, 21% 91%, 32% 57%,
        2% 35%, 39% 35%
      );
      opacity: 0.4;
      pointer-events: none;
      z-index: 1;
      animation: twinkle 3s ease-in-out infinite;
    }

    .star--1 { top: 12%; left: 8%; animation-delay: 0s; }
    .star--2 { top: 25%; right: 15%; animation-delay: 1s; }
    .star--3 { bottom: 30%; left: 20%; animation-delay: 0.5s; }
    .star--4 { top: 55%; right: 10%; animation-delay: 1.8s; }
    .star--5 { bottom: 15%; right: 25%; animation-delay: 0.3s; background: var(--vd-cyan); }

    @keyframes twinkle {
      0%, 100% { opacity: 0.2; transform: scale(0.8); }
      50% { opacity: 0.7; transform: scale(1.15); }
    }

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

    /* Sunburst behind hero */
    .hero::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 800px;
      height: 800px;
      background: radial-gradient(
        circle,
        rgba(0, 212, 255, 0.18) 0%,
        rgba(255, 0, 255, 0.10) 30%,
        rgba(118, 255, 3, 0.05) 55%,
        transparent 70%
      );
      pointer-events: none;
    }

    .hero h1 {
      font-family: 'Nunito', sans-serif;
      font-size: clamp(3rem, 7vw, 6rem);
      font-weight: 900;
      letter-spacing: -0.01em;
      line-height: 1.05;
      position: relative;
      z-index: 1;
    }

    .hero h1 .cyan { color: var(--vd-cyan); }
    .hero h1 .magenta { color: var(--vd-magenta); }
    .hero h1 .lime { color: var(--vd-lime); }

    /* Gradient divider */
    .gradient-divider {
      width: 50%;
      margin: 2rem auto;
      border: none;
      height: 3px;
      background: linear-gradient(
        90deg,
        transparent,
        var(--vd-cyan) 20%,
        var(--vd-magenta) 50%,
        var(--vd-lime) 80%,
        transparent
      );
      border-radius: 2px;
      position: relative;
      z-index: 1;
    }

    .hero p {
      margin-top: 1.5rem;
      font-size: 1.15rem;
      color: var(--vd-gray-light);
      max-width: 600px;
      margin-left: auto;
      margin-right: auto;
      position: relative;
      z-index: 1;
    }

    /* Content section */
    section {
      max-width: 900px;
      margin: 0 auto;
      padding: 3rem 2rem;
      position: relative;
      z-index: 2;
    }

    /* Glass card on dark background */
    .glass-card {
      background: var(--vd-glass);
      backdrop-filter: blur(14px) saturate(1.3);
      -webkit-backdrop-filter: blur(14px) saturate(1.3);
      border: 1px solid var(--vd-glass-border);
      border-radius: 14px;
      padding: 2.5rem;
      position: relative;
      overflow: hidden;
      box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    }

    .glass-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 10%;
      right: 10%;
      height: 1px;
      background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.3),
        transparent
      );
    }

    .glass-card h2 {
      color: var(--vd-cyan);
      margin-bottom: 0.75rem;
    }

    .glass-card p {
      color: var(--vd-gray-light);
    }

    /* Gradient button */
    .btn {
      display: inline-block;
      padding: 0.85rem 2.5rem;
      margin-top: 1.5rem;
      border-radius: 30px;
      border: none;
      background: linear-gradient(135deg, var(--vd-cyan), var(--vd-magenta));
      color: var(--vd-white);
      font-family: 'Nunito', sans-serif;
      font-size: 0.95rem;
      font-weight: 700;
      cursor: pointer;
      text-decoration: none;
      position: relative;
      overflow: hidden;
      box-shadow:
        0 4px 16px rgba(0, 212, 255, 0.25),
        0 2px 8px rgba(255, 0, 255, 0.15);
      transition: all 0.3s ease;
    }

    .btn::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 50%;
      background: linear-gradient(180deg, rgba(255,255,255,0.30), rgba(255,255,255,0.02));
      border-radius: 30px 30px 0 0;
      pointer-events: none;
    }

    .btn:hover {
      transform: translateY(-2px);
      box-shadow:
        0 6px 24px rgba(0, 212, 255, 0.35),
        0 4px 12px rgba(255, 0, 255, 0.25);
    }

    /* Flourish blobs */
    .flourish {
      position: fixed;
      border-radius: 60% 40% 70% 30% / 50% 60% 40% 50%;
      pointer-events: none;
      z-index: 0;
    }

    .flourish--1 {
      width: 250px; height: 250px;
      background: linear-gradient(135deg, var(--vd-cyan), var(--vd-magenta));
      opacity: 0.12;
      top: 5%; right: -3%;
      animation: drift 16s ease-in-out infinite;
    }

    .flourish--2 {
      width: 200px; height: 200px;
      border-radius: 40% 60% 30% 70% / 60% 40% 60% 40%;
      background: linear-gradient(-45deg, var(--vd-orange), var(--vd-hot-pink));
      opacity: 0.1;
      bottom: 10%; left: -5%;
      animation: drift 20s ease-in-out infinite 3s;
    }

    @media (max-width: 768px) {
      .hero { padding: 6rem 1.5rem 4rem; }
      section { padding: 2rem 1.5rem; }
      .glass-card { padding: 1.5rem; }
    }
  </style>
</head>
<body>
  <!-- Bokeh background lights -->
  <div class="bokeh bokeh--1"></div>
  <div class="bokeh bokeh--2"></div>
  <div class="bokeh bokeh--3"></div>
  <div class="bokeh bokeh--4"></div>

  <!-- Halftone overlay -->
  <div class="halftone-overlay"></div>

  <!-- Decorative stars -->
  <div class="star star--1"></div>
  <div class="star star--2"></div>
  <div class="star star--3"></div>
  <div class="star star--4"></div>
  <div class="star star--5"></div>

  <!-- Flourish shapes -->
  <div class="flourish flourish--1"></div>
  <div class="flourish flourish--2"></div>

  <div class="hero">
    <h1><span class="cyan">Vector</span><span class="magenta">de</span><span class="lime">lia</span></h1>
    <hr class="gradient-divider">
    <p>Humanist maximalism in vivid vector form -- abstract flourishes, flowing shapes, and organized chaos on a digital canvas</p>
    <div style="margin-top: 2rem; position: relative; z-index: 1;">
      <a href="#" class="btn">Explore</a>
    </div>
  </div>

  <section>
    <div class="glass-card">
      <h2>Organized Chaos</h2>
      <p>Layered vector compositions radiate from a central point, gaining variety and complexity as they grow -- vivid CMYK colors, flowing flourishes, and glossy digital surfaces set against monochrome backdrops, capturing the optimistic energy of mid-2000s digital design.</p>
      <a href="#" class="btn">Discover More</a>
    </div>
  </section>
</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.