Agence WagnerAgence Wagner
FRENDEELS
Zurück zu den Designs
RétroFuturisteSombreVintage numérique
Vorschau

Metalheart Design Reference

Metalheart (also known as Depthcore or Trendwhore) is a futuristic aesthetic popular from the late 1990s to the early-mid 2000s, succeeding the Early Cyber/Cyberdelia styles of the mid-1990s. It is a darker and "edgier" offshoot of Y2K Futurism with a more abstract and mechanical feeling. The style is characterized by deformed abstract shapes -- rendered as 3D metallic forms with bead-blast and chrome textures, or as 2D geometric flat shapes -- presented alongside blurry dark backgrounds, futuristic UIs and fonts, minimalist iconography, abstract lines and lights, grids, and coding text. Over time, Metalheart evolved into the McBling/Vectordelia/UrBling vector graphics movement.

Visual Characteristics

Core Motifs and Patterns

  • Deformed abstract shapes -- twisted, warped, and distorted 3D forms that feel mechanical and alien; the signature visual element
  • 3D metallic surfaces -- chrome, bead-blasted, and polished metal textures on abstract sculptural objects
  • 2D geometric flat shapes -- clean, hard-edged geometric compositions used alongside or instead of 3D forms
  • Blurry dark backgrounds -- out-of-focus dark fields that push metallic foreground elements forward with dramatic depth
  • Futuristic UI elements -- HUD-like interface overlays, data readouts, and technical dashboard components
  • Minimalist iconography -- stripped-down, geometric icons conveying technical precision
  • Abstract lines and lights -- thin luminous lines, light trails, and lens-flare-style streaks cutting through dark space
  • Grids -- wireframe grids, perspective grids, and matrix-like patterns suggesting digital space
  • Coding text -- monospaced code fragments, data strings, and terminal-style text used as decorative elements
  • Mechanical precision -- everything conveys engineered exactness, industrial tolerances, and machine-made perfection

Design Principles

  • Dark-dominant compositions -- near-black backgrounds are the canvas; content elements emerge from darkness
  • Abstract over representational -- shapes and forms are non-figurative, evoking machinery without depicting specific objects
  • Mechanical coldness -- design conveys industrial detachment and inhuman precision, not warmth or approachability
  • Depth through blur -- background blur (bokeh, gaussian) creates spatial separation between layers
  • High contrast metallic highlights -- bright chrome reflections against deep dark surroundings
  • Information density as decoration -- technical data, grids, and code serve aesthetic rather than informational purposes
  • Asymmetric, dynamic compositions -- off-center layouts with diagonal energy suggesting motion and instability
  • Layered complexity -- multiple overlapping visual planes create a dense, rich visual field

Color Palette

Primary Scheme

Role Colors
Base Black, near-black, deep charcoal
Primary surface Chrome silver, steel gray, metallic mid-tones
Neutral White (used sparingly for highlights and text)
Accents Blue, green, red, yellow -- cold and saturated against dark backgrounds

Detailed Palette

Color Hex (suggested) Usage
Void Black #050508, #0A0A0F Primary backgrounds, deep space
Dark Steel #141418, #1A1A20 Secondary backgrounds, panels
Gunmetal #2A2A32, #33333D Surface elements, card backgrounds
Bead-Blast Gray #606068, #70707A Muted metallic surfaces, borders
Chrome Silver #A0A0A8, #B8B8C0 Primary metallic surfaces, text
Bright Chrome #D0D0D8, #E0E0E8 Metallic highlights, headings
Glint White #F0F0F5, #FFFFFF Specular highlights, maximum contrast points
Circuit Blue #0066CC, #0088FF Primary accent, tech elements, active states
Terminal Green #00CC44, #00FF66 Code text, data readouts, matrix elements
Alert Red #CC0033, #FF1144 Warning states, aggressive accents
Signal Yellow #CCAA00, #FFCC11 Highlights, caution indicators
Deep Blue Glow rgba(0, 102, 204, 0.3) Ambient glow, background light effects

Suggested CSS Custom Properties

:root {
  /* Dark base tones */
  --mh-void: #050508;
  --mh-black: #0a0a0f;
  --mh-dark-steel: #141418;
  --mh-gunmetal: #2a2a32;
  --mh-gunmetal-light: #33333d;

  /* Metallic tones */
  --mh-bead-blast: #606068;
  --mh-chrome: #a0a0a8;
  --mh-chrome-bright: #d0d0d8;
  --mh-chrome-light: #e0e0e8;
  --mh-glint: #f0f0f5;

  /* Accent colors */
  --mh-blue: #0066cc;
  --mh-blue-light: #0088ff;
  --mh-green: #00cc44;
  --mh-green-light: #00ff66;
  --mh-red: #cc0033;
  --mh-red-light: #ff1144;
  --mh-yellow: #ccaa00;
  --mh-yellow-light: #ffcc11;

  /* Glow / transparency */
  --mh-glow-blue: rgba(0, 102, 204, 0.3);
  --mh-glow-green: rgba(0, 204, 68, 0.25);
  --mh-glow-red: rgba(204, 0, 51, 0.25);
  --mh-glow-yellow: rgba(204, 170, 0, 0.2);
  --mh-glass: rgba(160, 160, 168, 0.06);
  --mh-glass-border: rgba(160, 160, 168, 0.12);

  /* Functional mappings */
  --mh-bg-primary: var(--mh-void);
  --mh-bg-secondary: var(--mh-dark-steel);
  --mh-bg-surface: var(--mh-gunmetal);
  --mh-text-primary: var(--mh-chrome-light);
  --mh-text-secondary: var(--mh-chrome);
  --mh-text-muted: var(--mh-bead-blast);
  --mh-accent: var(--mh-blue);
  --mh-border: var(--mh-gunmetal-light);
}

Approaches

  • Near-black backgrounds dominate -- the palette starts from darkness and builds upward through metallic grays
  • Chrome gradients simulate 3D metal -- multi-stop silver gradients on abstract shapes and text
  • Cold, saturated accent colors -- blue, green, red, and yellow are used in their pure, electric forms against dark fields
  • Accent glow bleeds -- colored elements radiate soft glow into their surroundings via box-shadow and radial gradients
  • Minimal warm tones -- the palette is overwhelmingly cool, with yellow as the only warm accent used sparingly

Typography

Typeface Characteristics

Metalheart typography is futuristic, technical, and mechanical:

  • Futuristic display typefaces -- angular, geometric, and tech-forward fonts for headlines and UI elements
  • Monospaced / code-style fonts -- used as decorative elements and for data/grid overlays
  • Tight or geometric letterspacing -- precise, engineered feel; not casual or organic
  • All-caps for labels and UI -- technical labels, data readouts, and navigation use uppercase
  • Chrome/metallic text effects -- display text rendered with metallic gradients
  • Glowing text on dark backgrounds -- colored text with matching text-shadow for luminous effect
  • Small, dense technical annotations -- tiny monospaced text used decoratively to suggest data and code

Recommended Web Fonts (Google Fonts / Free)

Font Style Usage
Orbitron Geometric, square, tech-forward Hero titles, display headings
Chakra Petch Tech-angular, semi-condensed Headlines, UI labels
Rajdhani Light, technical, semi-condensed Subheadings, navigation
Exo 2 Geometric, futuristic sans Headlines, section titles
Share Tech Mono Monospaced, technical Code overlays, data text, grid labels
Space Mono Monospaced, editorial Decorative code blocks, annotations
Inter Clean, neutral, modern Body text, paragraphs
IBM Plex Sans Technical, precise Body copy, data readouts
Bruno Ace Futuristic, mechanical Display headlines, branding
Audiowide Wide, futuristic, mechanical Large display text, hero titles

Typography CSS Example

/* Headlines */
h1, h2, h3 {
  font-family: 'Chakra Petch', 'Exo 2', sans-serif;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--mh-chrome-light);
  text-transform: uppercase;
}

/* Display / Hero text with metallic gradient */
.mh-display {
  font-family: 'Orbitron', 'Audiowide', sans-serif;
  font-size: clamp(2.5rem, 7vw, 6rem);
  letter-spacing: 0.15em;
  line-height: 1.05;
  text-transform: uppercase;
  background: linear-gradient(
    180deg,
    #f0f0f5 0%,
    #a0a0a8 35%,
    #606068 50%,
    #a0a0a8 65%,
    #d0d0d8 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Body text */
body {
  font-family: 'Inter', 'IBM Plex Sans', sans-serif;
  font-weight: 300;
  letter-spacing: 0.02em;
  line-height: 1.65;
  color: var(--mh-text-secondary);
}

/* Technical label / UI text */
.mh-label {
  font-family: 'Rajdhani', 'Chakra Petch', sans-serif;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  color: var(--mh-bead-blast);
}

/* Decorative code / data overlay text */
.mh-code {
  font-family: 'Share Tech Mono', 'Space Mono', monospace;
  font-size: 0.65rem;
  letter-spacing: 0.05em;
  color: var(--mh-green);
  opacity: 0.4;
  line-height: 1.8;
}

/* Glowing accent text */
.mh-glow-text {
  color: var(--mh-blue-light);
  text-shadow:
    0 0 8px var(--mh-glow-blue),
    0 0 30px rgba(0, 102, 204, 0.15);
}

Layout Principles

Grid and Structure

  • Dark, immersive full-bleed backgrounds -- the page is a void from which elements emerge
  • Asymmetric, off-center compositions -- content is not neatly centered; it occupies dynamic, unconventional positions
  • Grid overlays as visual texture -- perspective grids and wireframes used decoratively behind content
  • Layered depth with blur separation -- foreground content is sharp; background elements are blurred for z-axis depth
  • Dense information panels -- tight clusters of UI-style elements, data readouts, and labels
  • Diagonal and angular energy -- elements placed on angles, with rotated containers and skewed lines suggesting motion
  • Generous dark negative space -- large areas of near-black create tension and draw focus to metallic elements

Section Organization

  • Use thin luminous accent lines as dividers (single-pixel lines with colored glow)
  • Apply semi-transparent dark panels for content grouping (glass-like containers on dark backgrounds)
  • Create hierarchy through metallic brightness -- brighter chrome = more important content
  • Employ angular/clipped containers -- use clip-path for non-rectangular section shapes
  • Add decorative grid and code overlays -- low-opacity technical patterns behind content sections
  • Use data-style annotations -- small monospaced labels at corners and edges of containers
  • Layer abstract 3D metallic shapes as decorative accents (via images, SVG, or CSS-generated forms)

CSS/Design Techniques

Blurred Dark Background

/* The signature Metalheart blurred dark backdrop */
.mh-backdrop {
  background: var(--mh-void);
  position: relative;
  overflow: hidden;
}

.mh-backdrop::before {
  content: '';
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(ellipse 40% 40% at 25% 35%, rgba(0, 102, 204, 0.08) 0%, transparent 70%),
    radial-gradient(ellipse 30% 30% at 70% 55%, rgba(160, 160, 168, 0.04) 0%, transparent 60%),
    radial-gradient(ellipse 50% 50% at 50% 50%, rgba(0, 0, 0, 0.6) 0%, transparent 100%);
  filter: blur(60px);
  pointer-events: none;
  z-index: 0;
}

Chrome Metallic Surface

/* 3D chrome surface simulation */
.mh-chrome-surface {
  background: linear-gradient(
    180deg,
    #d0d0d8 0%,
    #a0a0a8 20%,
    #606068 45%,
    #70707a 55%,
    #b8b8c0 80%,
    #e0e0e8 100%
  );
  border-radius: 4px;
}

/* Horizontal chrome band */
.mh-chrome-band {
  background: linear-gradient(
    90deg,
    #606068 0%,
    #a0a0a8 15%,
    #d0d0d8 30%,
    #e0e0e8 50%,
    #d0d0d8 70%,
    #a0a0a8 85%,
    #606068 100%
  );
  height: 3px;
}

/* Bead-blast matte metal texture */
.mh-bead-blast {
  background:
    repeating-linear-gradient(
      135deg,
      transparent,
      transparent 1px,
      rgba(255, 255, 255, 0.02) 1px,
      rgba(255, 255, 255, 0.02) 2px
    ),
    linear-gradient(
      180deg,
      #606068 0%,
      #505058 50%,
      #5a5a62 100%
    );
}

Chrome Text Effect

/* Metallic gradient text -- the Metalheart signature */
.mh-chrome-text {
  background: linear-gradient(
    180deg,
    #f0f0f5 0%,
    #b8b8c0 30%,
    #606068 50%,
    #a0a0a8 70%,
    #e0e0e8 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Dark chrome text variant */
.mh-dark-chrome-text {
  background: linear-gradient(
    180deg,
    #a0a0a8 0%,
    #606068 40%,
    #33333d 55%,
    #606068 70%,
    #a0a0a8 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

Abstract Light Streaks

/* Diagonal light streak accent */
.mh-light-streak {
  position: absolute;
  width: 200%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0, 136, 255, 0.0) 20%,
    rgba(0, 136, 255, 0.6) 50%,
    rgba(0, 136, 255, 0.0) 80%,
    transparent 100%
  );
  transform: rotate(-15deg);
  pointer-events: none;
}

/* Animated sweep effect */
@keyframes mh-streak-sweep {
  0% { transform: rotate(-15deg) translateX(-100%); opacity: 0; }
  40% { opacity: 1; }
  100% { transform: rotate(-15deg) translateX(100%); opacity: 0; }
}

.mh-light-streak--animated {
  animation: mh-streak-sweep 4s ease-in-out infinite;
}

Grid Overlay (Decorative)

/* Perspective wireframe grid overlay */
.mh-grid-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      rgba(0, 102, 204, 0.06) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(0, 102, 204, 0.06) 1px,
      transparent 1px
    );
  background-size: 60px 60px;
  perspective: 600px;
  transform: rotateX(60deg);
  transform-origin: bottom center;
  mask-image: linear-gradient(to top, rgba(0,0,0,0.4), transparent 70%);
  -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,0.4), transparent 70%);
  pointer-events: none;
}

/* Flat grid overlay (no perspective) */
.mh-grid-flat {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      rgba(160, 160, 168, 0.04) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(160, 160, 168, 0.04) 1px,
      transparent 1px
    );
  background-size: 40px 40px;
  pointer-events: none;
}

Code/Data Overlay (Decorative)

/* Animated code-rain column (Matrix-inspired) */
.mh-code-rain {
  position: absolute;
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.6rem;
  color: var(--mh-green);
  opacity: 0.15;
  writing-mode: vertical-rl;
  line-height: 2;
  letter-spacing: 0.3em;
  overflow: hidden;
  pointer-events: none;
}

/* Static data annotation at container corners */
.mh-data-tag {
  position: absolute;
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.55rem;
  color: var(--mh-bead-blast);
  opacity: 0.5;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.mh-data-tag--top-left { top: 0.75rem; left: 1rem; }
.mh-data-tag--top-right { top: 0.75rem; right: 1rem; }
.mh-data-tag--bottom-left { bottom: 0.75rem; left: 1rem; }
.mh-data-tag--bottom-right { bottom: 0.75rem; right: 1rem; }

Futuristic UI Panel / Card

.mh-panel {
  background: linear-gradient(
    160deg,
    rgba(42, 42, 50, 0.85) 0%,
    rgba(20, 20, 24, 0.95) 100%
  );
  border: 1px solid var(--mh-glass-border);
  border-radius: 2px;
  padding: 2rem;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 4px 24px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

/* Angular clip variant (non-rectangular) */
.mh-panel--clipped {
  clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px));
}

/* Top accent line */
.mh-panel::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    var(--mh-blue) 0%,
    var(--mh-blue-light) 30%,
    transparent 100%
  );
}

/* Corner bracket decorations */
.mh-panel::after {
  content: '';
  position: absolute;
  top: 8px;
  right: 8px;
  width: 16px;
  height: 16px;
  border-top: 1px solid var(--mh-bead-blast);
  border-right: 1px solid var(--mh-bead-blast);
  opacity: 0.4;
  pointer-events: none;
}

Deformed Abstract Shape (CSS-generated)

/* Abstract metallic blob shape using border-radius deformation */
.mh-abstract-shape {
  width: 300px;
  height: 300px;
  border-radius: 42% 56% 72% 28% / 42% 42% 56% 48%;
  background: linear-gradient(
    135deg,
    #e0e0e8 0%,
    #a0a0a8 25%,
    #606068 50%,
    #33333d 75%,
    #1a1a20 100%
  );
  box-shadow:
    0 0 60px rgba(0, 0, 0, 0.5),
    inset 0 -20px 40px rgba(0, 0, 0, 0.3),
    inset 0 20px 40px rgba(255, 255, 255, 0.1);
  position: relative;
}

/* Glossy highlight on the shape */
.mh-abstract-shape::before {
  content: '';
  position: absolute;
  top: 10%;
  left: 15%;
  width: 40%;
  height: 35%;
  border-radius: 50%;
  background: radial-gradient(
    ellipse,
    rgba(255, 255, 255, 0.3) 0%,
    rgba(255, 255, 255, 0.05) 60%,
    transparent 100%
  );
  transform: rotate(-20deg);
}

/* Animated shape morphing */
@keyframes mh-morph {
  0%   { border-radius: 42% 56% 72% 28% / 42% 42% 56% 48%; }
  25%  { border-radius: 56% 42% 28% 72% / 48% 56% 42% 42%; }
  50%  { border-radius: 28% 72% 42% 56% / 56% 28% 48% 42%; }
  75%  { border-radius: 72% 28% 56% 42% / 42% 48% 42% 56%; }
  100% { border-radius: 42% 56% 72% 28% / 42% 42% 56% 48%; }
}

.mh-abstract-shape--animated {
  animation: mh-morph 12s ease-in-out infinite;
}

Glow Accent Effects

/* Blue accent glow for interactive elements */
.mh-glow-blue {
  box-shadow:
    0 0 8px var(--mh-glow-blue),
    0 0 24px rgba(0, 102, 204, 0.12);
}

/* Green data/terminal glow */
.mh-glow-green {
  box-shadow:
    0 0 8px var(--mh-glow-green),
    0 0 24px rgba(0, 204, 68, 0.1);
}

/* Red alert glow */
.mh-glow-red {
  box-shadow:
    0 0 8px var(--mh-glow-red),
    0 0 24px rgba(204, 0, 51, 0.1);
}

/* Neon accent line (horizontal divider) */
.mh-accent-line {
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--mh-blue) 15%,
    var(--mh-blue-light) 50%,
    var(--mh-blue) 85%,
    transparent
  );
  box-shadow: 0 0 10px var(--mh-glow-blue);
}

Metalheart Button

.mh-button {
  display: inline-block;
  padding: 0.6rem 2rem;
  border: 1px solid var(--mh-bead-blast);
  border-radius: 2px;
  background: linear-gradient(
    180deg,
    rgba(96, 96, 104, 0.3) 0%,
    rgba(42, 42, 50, 0.6) 100%
  );
  color: var(--mh-chrome);
  font-family: 'Rajdhani', 'Chakra Petch', sans-serif;
  font-size: 0.8rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 2px 8px rgba(0, 0, 0, 0.4);
  transition: all 0.2s ease;
}

.mh-button:hover {
  border-color: var(--mh-blue);
  color: var(--mh-chrome-light);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 12px var(--mh-glow-blue),
    0 2px 8px rgba(0, 0, 0, 0.4);
}

/* Sweep highlight on hover */
.mh-button::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.06),
    transparent
  );
  transition: left 0.4s ease;
}

.mh-button:hover::after {
  left: 100%;
}

/* Clipped-corner button variant */
.mh-button--clipped {
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
  border-radius: 0;
}

Materials and Textures (Visual Metaphors for Web)

Physical Metalheart materials and their web equivalents:

Physical Material Web Equivalent
Chrome / polished metal Multi-stop silver linear gradient with specular highlight band
Bead-blasted metal Matte silver-gray with fine repeating-linear-gradient noise texture
Deformed 3D metal shapes Organic border-radius deformation + metallic gradient + inset shadows
Dark blurred background Near-black base + low-opacity radial-gradient blobs + filter: blur()
Wireframe grid CSS grid lines via background with linear-gradient, optionally perspective-transformed
Lens flare / light streaks Thin, rotated gradient elements with bright center and transparent edges
Terminal / coding text Monospaced font, green tint, low opacity, used as decorative overlay
Futuristic UI panels Dark glass panels with angular borders, accent lines, corner brackets
Geometric flat shapes Hard-edged clip-path polygons or SVG shapes with flat metallic fills
Abstract light effects Multiple overlapping radial-gradient layers with colored glow at low opacity

Cultural References and Influences

The following media and creators define the Metalheart visual language:

  • 2Advanced Studios (web design) -- the pioneering studio whose Flash websites defined the aesthetic
  • DeviantArt community -- Depthcore and related digital art collectives
  • The Matrix (1999) -- green code rain, dark environments, metallic surfaces
  • Video games -- Metal Gear Solid, Need for Speed (Underground era), Halo -- dark, metallic, technical UI design
  • Music -- Amon Tobin, Celldweller -- industrial, electronic, and mechanical sonic textures
  • Television -- Robot Wars -- exposed metal, mechanical engineering, arena-style presentation
Aesthetic Relationship to Metalheart
Y2K Futurism Parent aesthetic; Metalheart is the darker, more abstract offshoot
Early Cyber Predecessor; mid-1990s digital aesthetic that Metalheart succeeded
Cyberdelic Predecessor; psychedelic digital art that fed into Metalheart's abstract forms
Chromecore Sibling; shares chrome textures but is brighter, more consumer-product oriented
Abstract Tech Related; shares abstract digital motifs and dark backgrounds
Cybersigilism Related; shares angular, dark, mechanical design language
Corporate Grunge Related; shares dark, textured, industrial design sensibility
Cyberpunk Related; shares dystopian darkness and technological emphasis
Dark Aero Related; shares dark metallic surfaces and technological heaviness
Hexatron Related; shares geometric precision and dark technological futurism
Hipness Purgatory Related; shares early-2000s digital design culture context
McBling Successor; Metalheart evolved into McBling's vector graphics movement
Vectorheart Sibling; the 2D flat-shape counterpart to Metalheart's 3D forms
Vectorbloom Related; organic vector art that emerged from the same design communities
UrBling Successor; urban-influenced vector graphics that evolved from Metalheart
Nu-Metal Related; shares aggressive, dark, mechanical aesthetic sensibility
Silicon Dreams Related; shares digital futurism and technological abstraction
Gen X Soft Club Related; overlapping era, different tonal approach
90s Cool Related; shares the pre-Y2K technological coolness
Med-Tech Visions Related; shares clinical, technological precision
Webcore Related; shares early web-era digital design characteristics

Quick-Start: Minimal Metalheart Page Template

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Metalheart Page</title>
  <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=Chakra+Petch:wght@400;600&family=Rajdhani:wght@400;500;600&family=Inter:wght@300;400&family=Share+Tech+Mono&display=swap" rel="stylesheet">
  <style>
    :root {
      --mh-void: #050508;
      --mh-black: #0a0a0f;
      --mh-dark-steel: #141418;
      --mh-gunmetal: #2a2a32;
      --mh-bead-blast: #606068;
      --mh-chrome: #a0a0a8;
      --mh-chrome-bright: #d0d0d8;
      --mh-chrome-light: #e0e0e8;
      --mh-glint: #f0f0f5;
      --mh-blue: #0066cc;
      --mh-blue-light: #0088ff;
      --mh-green: #00cc44;
      --mh-glow-blue: rgba(0, 102, 204, 0.3);
      --mh-glass-border: rgba(160, 160, 168, 0.12);
    }

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

    body {
      background: var(--mh-void);
      color: var(--mh-chrome);
      font-family: 'Inter', sans-serif;
      font-weight: 300;
      letter-spacing: 0.02em;
      line-height: 1.65;
      min-height: 100vh;
      overflow-x: hidden;
    }

    h1, h2, h3 {
      font-family: 'Chakra Petch', sans-serif;
      font-weight: 600;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--mh-chrome-light);
    }

    /* Hero section with blurred dark background */
    .hero {
      text-align: center;
      padding: 8rem 2rem 6rem;
      position: relative;
      overflow: hidden;
    }

    /* Blurred ambient light blobs */
    .hero::before {
      content: '';
      position: absolute;
      inset: -20%;
      background:
        radial-gradient(ellipse 35% 35% at 30% 40%, rgba(0, 102, 204, 0.08) 0%, transparent 70%),
        radial-gradient(ellipse 25% 25% at 65% 55%, rgba(160, 160, 168, 0.04) 0%, transparent 60%);
      filter: blur(40px);
      pointer-events: none;
    }

    /* Grid overlay */
    .hero::after {
      content: '';
      position: absolute;
      inset: 0;
      background:
        linear-gradient(rgba(0, 102, 204, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 102, 204, 0.04) 1px, transparent 1px);
      background-size: 60px 60px;
      mask-image: radial-gradient(ellipse 60% 60% at center, rgba(0,0,0,0.3), transparent);
      -webkit-mask-image: radial-gradient(ellipse 60% 60% at center, rgba(0,0,0,0.3), transparent);
      pointer-events: none;
    }

    .hero h1 {
      font-family: 'Orbitron', sans-serif;
      font-size: clamp(2.5rem, 7vw, 5.5rem);
      letter-spacing: 0.15em;
      background: linear-gradient(
        180deg,
        #f0f0f5 0%,
        #a0a0a8 35%,
        #606068 50%,
        #a0a0a8 65%,
        #d0d0d8 100%
      );
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      position: relative;
      z-index: 1;
    }

    .hero p {
      margin-top: 1.5rem;
      font-size: 1rem;
      color: var(--mh-bead-blast);
      letter-spacing: 0.15em;
      text-transform: uppercase;
      font-family: 'Rajdhani', sans-serif;
      position: relative;
      z-index: 1;
    }

    /* Accent line divider */
    .accent-line {
      width: 35%;
      margin: 2.5rem auto;
      border: none;
      height: 1px;
      background: linear-gradient(
        90deg,
        transparent,
        var(--mh-blue) 15%,
        var(--mh-blue-light) 50%,
        var(--mh-blue) 85%,
        transparent
      );
      box-shadow: 0 0 10px var(--mh-glow-blue);
      position: relative;
      z-index: 1;
    }

    section {
      max-width: 900px;
      margin: 0 auto;
      padding: 4rem 2rem;
      position: relative;
      z-index: 1;
    }

    /* Angular UI panel */
    .panel {
      background: linear-gradient(
        160deg,
        rgba(42, 42, 50, 0.85) 0%,
        rgba(20, 20, 24, 0.95) 100%
      );
      border: 1px solid var(--mh-glass-border);
      border-radius: 2px;
      padding: 2.5rem;
      position: relative;
      overflow: hidden;
      box-shadow:
        0 4px 24px rgba(0, 0, 0, 0.6),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
    }

    /* Top accent bar on panel */
    .panel::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 2px;
      background: linear-gradient(
        90deg,
        var(--mh-blue) 0%,
        var(--mh-blue-light) 30%,
        transparent 100%
      );
    }

    /* Corner bracket decoration */
    .panel::after {
      content: '';
      position: absolute;
      top: 8px;
      right: 8px;
      width: 14px;
      height: 14px;
      border-top: 1px solid var(--mh-bead-blast);
      border-right: 1px solid var(--mh-bead-blast);
      opacity: 0.35;
    }

    /* Data annotation tag */
    .data-tag {
      font-family: 'Share Tech Mono', monospace;
      font-size: 0.55rem;
      color: var(--mh-bead-blast);
      opacity: 0.45;
      letter-spacing: 0.1em;
      text-transform: uppercase;
    }

    /* Decorative abstract metallic shape */
    .abstract-shape {
      position: fixed;
      width: 250px;
      height: 250px;
      border-radius: 42% 56% 72% 28% / 42% 42% 56% 48%;
      background: linear-gradient(
        135deg,
        #d0d0d8 0%,
        #a0a0a8 25%,
        #606068 50%,
        #33333d 75%,
        #141418 100%
      );
      opacity: 0.08;
      filter: blur(2px);
      pointer-events: none;
      z-index: 0;
      top: 15%;
      right: -5%;
      animation: morph 12s ease-in-out infinite;
    }

    @keyframes morph {
      0%   { border-radius: 42% 56% 72% 28% / 42% 42% 56% 48%; }
      50%  { border-radius: 56% 42% 28% 72% / 48% 56% 42% 42%; }
      100% { border-radius: 42% 56% 72% 28% / 42% 42% 56% 48%; }
    }
  </style>
</head>
<body>
  <!-- Decorative abstract shape -->
  <div class="abstract-shape"></div>

  <div class="hero">
    <h1>Title Here</h1>
    <hr class="accent-line">
    <p>Subtitle with mechanical precision</p>
    <span class="data-tag" style="position: absolute; bottom: 2rem; right: 2rem;">sys.ref // 001.0a</span>
  </div>

  <section>
    <div class="panel">
      <span class="data-tag" style="margin-bottom: 1rem; display: block;">module :: overview</span>
      <h2>Section Heading</h2>
      <p style="margin-top: 1rem;">Content rendered on a dark angular panel with chrome metallic accents, grid overlays, and the mechanical precision of the Metalheart aesthetic.</p>
    </div>
  </section>
</body>
</html>
← Zurück zu den Designs
Agence WagnerAgence Wagner

© 2026 Agence Wagner. Alle Rechte vorbehalten.

Designs von chrislemke/website_designs, lizenziert unter MIT.