RétroFuturisteSombreVintage numérique

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>

← Retour aux designs