Agence WagnerAgence Wagner
FRENDEELS
Zurück zu den Designs
IndustrielBrutalisteSombreTexture
Vorschau

Raw Industrial Design Reference

Raw Industrial is an interior design and visual aesthetic that draws inspiration from old factories, warehouses, and industrial spaces -- particularly those converted into residential or commercial use. Gaining popularity in the late 2000s and throughout the 2010s, it incorporates elements such as exposed brick, weathered wood, visible building systems, industrial lighting fixtures, and concrete. The result is an environment that celebrates rawness, functionality, urbanity, repurposed spaces, and industrial heritage -- creating an unfinished or warehouse-like atmosphere where structural honesty is the primary decorative principle. Unlike polished minimalism, Raw Industrial finds beauty in the imperfect, the utilitarian, and the visibly aged -- surfaces that show their history and construction that refuses to hide behind drywall.

Visual Characteristics

Core Motifs and Elements

  • Exposed brick walls -- the signature Raw Industrial surface; aged, irregular, warm-toned masonry left uncovered as a feature wall or throughout the space
  • Visible pipes, ductwork, and building systems -- plumbing, HVAC, conduits, and structural elements displayed rather than concealed; function becomes ornament
  • Concrete surfaces -- raw or polished concrete flooring, walls, and countertops with natural variation, patching, and subtle imperfections
  • Weathered and reclaimed wood -- rough-sawn timber, salvaged planks, and aged lumber with visible grain, nail holes, and patina
  • Metal fixtures and accents -- iron, steel, copper, and brushed metal in lighting, hardware, shelving, and structural elements
  • Exposed overhead beams -- wooden or steel structural beams left visible, emphasizing the skeletal framework of the space
  • Large, unadorned windows -- oversized factory-style windows with thin metal frames, flooding the space with natural light
  • Open shelving and metal racks -- wire shelving, pipe-and-board shelving, industrial racking used as storage and display
  • Industrial lighting fixtures -- pendant lights with metal shades, Edison bulbs, cage lights, gooseneck lamps, and bare-filament fixtures
  • Open floor plans -- expansive, loft-like layouts with minimal partition walls; distinct areas defined by furniture placement rather than walls

Lighting and Atmosphere

  • Natural light as primary illumination -- large windows and skylights provide abundant daylight
  • Warm artificial lighting -- Edison-style filament bulbs, warm-white LEDs in metal housings
  • Exposed fixture hardware -- visible wiring, conduit-mounted fixtures, pulley-adjustable pendants
  • Dramatic pendant lighting -- oversized metal dome or cage pendants as focal points
  • Atmospheric warmth within cool structure -- warm lighting counterbalances the coolness of concrete and metal surfaces
  • Shadow play -- directional fixtures create pools of light against textured surfaces, emphasizing material depth

Design Principles

  • Structural honesty -- never conceal what was meant to be hidden; celebrate pipes, beams, wiring, and raw surfaces
  • Material authenticity -- use real materials (actual brick, genuine wood, true metal) or faithfully simulate their aged, imperfect character
  • Rawness over refinement -- surfaces should show grain, wear, patina, and imperfection; nothing should look freshly manufactured
  • Functionality as beauty -- utilitarian objects and industrial hardware serve as decoration; form follows function literally
  • Open spatial flow -- minimal barriers between zones; furniture and lighting define areas within large open volumes
  • Warm-cool tension -- warm wood and brick tones balance cold concrete and metal for visual and emotional equilibrium
  • Restrained color palette -- let materials speak through their natural tones rather than applied color
  • Heritage and repurposing -- honor the industrial past of a space or material; show the history of use and age
  • Minimalism of decoration, maximalism of texture -- few decorative objects, but every surface is richly tactile

Color Palette

Primary Scheme

Raw Industrial uses a natural, material-driven palette built from the inherent colors of its core materials: brick, concrete, wood, and metal. The palette is muted, earthy, and neutral -- dominated by grays, warm browns, and blacks with metallic accents. Color is never applied decoratively; it emerges from the materials themselves. The overall effect is subdued and grounded, with warmth coming from wood and brick elements against a cooler concrete-and-metal foundation.

Role Colors
Dominant base Concrete grays, cool mid-grays, warm off-whites
Warm structure Brick red-browns, terra cotta, aged mortar tan
Organic warmth Weathered wood browns, warm umber, honey oak
Metal tones Gunmetal, brushed steel, matte black, aged copper
Deep anchors Charcoal, near-black, dark iron
Light relief Warm cream, aged linen, dusty white

Detailed Color Table

Color Hex Usage
Raw Concrete #A8A29E Primary background, large surface areas
Pale Concrete #C4BFB9 Light backgrounds, content areas
Warm Concrete #8D8680 Secondary backgrounds, muted panels
Charcoal #2C2C2C Deep backgrounds, text, dark accents
Dark Iron #1E1E1E Near-black backgrounds, metal elements
Exposed Brick #9B4B3A Primary warm accent, feature elements
Aged Brick #7A3F32 Secondary warm accent, deeper brick tones
Mortar Tan #C4AA8D Neutral warm midtone, mortar lines, borders
Weathered Oak #8B6F4E Wood surfaces, organic warm element
Honey Timber #A67C52 Lighter wood tones, warm highlights
Reclaimed Plank #5E4B3B Dark wood, aged timber accents
Gunmetal #4A4A4F Metal fixtures, borders, structural elements
Brushed Steel #6E6E73 Secondary metal, light fixtures
Aged Copper #8B6B4A Warm metallic accent, pipe details
Patina Green #5C7A6B Oxidized copper accent, sparse decorative use
Dusty White #E8E3DD Primary text on dark backgrounds, light relief
Warm Cream #F0EBE3 High-emphasis text, hero backgrounds
Linen #D9D0C5 Soft neutral, muted text on dark surfaces
Edison Amber #D4A44C Warm light glow, highlight accent

Suggested CSS Custom Properties

:root {
  /* Concrete tones */
  --ri-concrete: #a8a29e;
  --ri-concrete-light: #c4bfb9;
  --ri-concrete-warm: #8d8680;

  /* Dark tones */
  --ri-charcoal: #2c2c2c;
  --ri-dark-iron: #1e1e1e;

  /* Brick tones */
  --ri-brick: #9b4b3a;
  --ri-brick-aged: #7a3f32;
  --ri-mortar: #c4aa8d;

  /* Wood tones */
  --ri-oak: #8b6f4e;
  --ri-timber: #a67c52;
  --ri-plank: #5e4b3b;

  /* Metal tones */
  --ri-gunmetal: #4a4a4f;
  --ri-steel: #6e6e73;
  --ri-copper: #8b6b4a;
  --ri-patina: #5c7a6b;

  /* Light tones */
  --ri-dusty-white: #e8e3dd;
  --ri-cream: #f0ebe3;
  --ri-linen: #d9d0c5;

  /* Accent */
  --ri-edison: #d4a44c;

  /* Functional assignments */
  --ri-bg-primary: var(--ri-cream);
  --ri-bg-secondary: var(--ri-concrete-light);
  --ri-bg-surface: var(--ri-concrete);
  --ri-bg-dark: var(--ri-charcoal);
  --ri-bg-deep: var(--ri-dark-iron);
  --ri-text-primary: var(--ri-charcoal);
  --ri-text-secondary: var(--ri-gunmetal);
  --ri-text-muted: var(--ri-concrete-warm);
  --ri-text-on-dark: var(--ri-dusty-white);
  --ri-accent-warm: var(--ri-brick);
  --ri-accent-wood: var(--ri-oak);
  --ri-accent-metal: var(--ri-steel);
  --ri-accent-glow: var(--ri-edison);
  --ri-border: var(--ri-mortar);
  --ri-border-dark: var(--ri-gunmetal);
}

Color Approaches

  • Material-first palette -- every color should map to a real material: concrete gray, brick red, wood brown, metal dark
  • Neutral-dominant with warm undertones -- the base is cool gray, but warmth bleeds through from brick, wood, and amber lighting
  • No saturated or synthetic colors -- nothing that could not plausibly exist in an old factory; everything is muted, aged, and natural
  • Tonal variation over color variety -- create richness through many shades of gray-brown rather than introducing new hue families
  • Dark-and-light zones -- contrast between dark structural elements (iron, charcoal) and lighter open spaces (concrete, cream)
  • Warm accent restraint -- brick and wood tones are warm but never hot; copper and amber are used sparingly for glow

Typography

Typeface Characteristics

Raw Industrial typography draws from factory signage, utilitarian labeling, and engineering documentation. The type should feel practical, functional, and slightly worn -- as if stamped into metal, stenciled onto crates, or printed on warehouse manifests. There is no decorative flourish; every letterform earns its place through clarity and directness.

Key characteristics:

  • Clean, geometric sans-serifs for body text -- functional and unpretentious
  • Condensed, industrial sans-serifs for headings -- tall, narrow forms evoking factory signage
  • Monospaced or slab-serif accents for labels and metadata -- mechanical, stamped, utilitarian
  • Medium-to-heavy weights -- nothing thin or delicate; type should feel solid and grounded
  • Uppercase for labels and navigation -- functional, warehouse-manifest style capitalization
  • Mixed case for body text -- readable and practical, never ornamental
  • Generous line height -- open, airy text blocks reflecting the open floor plans of the spaces
  • Minimal letter-spacing variation -- tight for headlines, standard for body; no extreme tracking
Font Style Usage Why it fits
Barlow Geometric sans-serif Primary body text, UI Clean, slightly condensed, industrial precision
Barlow Condensed Condensed sans-serif Headlines, section titles Tall, narrow factory-signage proportions
DM Sans Geometric sans-serif Body text, descriptions Clean, modern, functional readability
Oswald Condensed gothic sans Display headlines, feature text Bold, narrow, industrial poster feel
Roboto Condensed Condensed sans-serif Subheadings, captions Versatile, utilitarian, structured
IBM Plex Mono Monospaced, technical Labels, metadata, technical text Engineering-document clarity, mechanical spacing
Roboto Slab Slab serif Accent headings, callout text Solid, grounded, stamped-label feeling
Source Code Pro Monospaced Data, specifications, code Technical utility, warehouse-manifest precision
Work Sans Geometric sans-serif Alternative body text Clean, functional, slightly warm geometry
Archivo Grotesque sans-serif Versatile heading/body Strong, structural, industrial legibility

Font Pairing Suggestions

Heading Font Body Font Character
Barlow Condensed (600) Barlow (400) Cohesive industrial family, signage-to-document feel
Oswald (600) DM Sans (400) Bold factory headers, clean modern body
Archivo (700) Work Sans (400) Strong structural headings, warm readable body
Roboto Condensed (700) IBM Plex Mono (400) Utilitarian headlines, technical-document body

Typography CSS Example

@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600;700&family=Barlow+Condensed:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&family=DM+Sans:wght@400;500;600&display=swap');

/* Hero / Display text */
.ri-display {
  font-family: 'Barlow Condensed', 'Oswald', sans-serif;
  font-size: clamp(2.5rem, 7vw, 6rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1.0;
  color: var(--ri-charcoal);
}

/* Primary headlines */
h1, h2 {
  font-family: 'Barlow Condensed', 'Roboto Condensed', sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1.1;
  color: var(--ri-charcoal);
}

/* Section labels and subheadings */
h3, h4 {
  font-family: 'Barlow', 'DM Sans', sans-serif;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ri-gunmetal);
}

/* Body text */
body {
  font-family: 'Barlow', 'DM Sans', sans-serif;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.75;
  letter-spacing: 0.01em;
  color: var(--ri-text-primary);
}

/* Labels, metadata, technical text */
.ri-label {
  font-family: 'IBM Plex Mono', 'Source Code Pro', monospace;
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ri-concrete-warm);
}

/* Statistic / feature number */
.ri-stat {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(2.5rem, 6vw, 5rem);
  font-weight: 700;
  color: var(--ri-brick);
  letter-spacing: 0.02em;
}

Layout Principles

Grid and Structure

  • Open, expansive layouts -- reflect the loft-like open floor plans; generous whitespace and breathing room around content
  • Wide content areas -- content can stretch wider than typical web layouts (up to 1100--1400px) to evoke warehouse scale
  • Simple structural grid -- clean 12-column or modular grid; the grid itself is utilitarian and unadorned
  • Full-bleed material sections -- background textures (concrete, brick) extend edge-to-edge to immerse the viewer
  • Horizontal zoning -- distinct sections stacked vertically, each with its own material surface, mirroring how industrial spaces have different functional zones
  • Generous vertical padding -- sections breathe with ample top and bottom spacing, suggesting the tall ceilings of converted warehouses
  • Asymmetric content placement -- content offset from center, creating the feel of furniture arranged in an open loft rather than a rigid symmetrical composition

Section Organization

  • Use material-change dividers between sections -- shifting from concrete to wood to brick backgrounds creates natural breaks without decorative separators
  • Apply exposed-structure dividers -- thin metal pipe lines, bolt-head accents, or visible beam elements as section separators
  • Create hierarchy through material weight -- heavier, darker materials (dark iron, charcoal) for primary sections; lighter materials (concrete, cream) for supporting content
  • Employ panel-based content areas -- content blocks that feel like steel plates or reclaimed-wood boards mounted to the wall
  • Use grid-card layouts for features and details -- items arranged on metal shelving or in industrial rack formations
  • Maintain visible negative space -- empty areas are not wasted; they represent the openness and scale of the industrial source environment

Spatial Characteristics

  • Light-dominant overall -- unlike Industrial Gothic or Corporate Grunge, Raw Industrial tends toward lighter tones; concrete and cream dominate over black
  • Textured but not distressed -- surfaces have character (grain, variation, patina) but are not deliberately damaged or decayed
  • Warm pockets within cool expanses -- brick and wood sections provide warmth inside the larger cool concrete framework
  • Minimal rounded corners -- prefer square or slightly rounded (2-4px) corners on elements; sharp angles reflect industrial construction
  • Visible borders and edges -- elements have clear boundaries, like metal frames or mortar lines, rather than bleeding into each other
  • Depth through layering -- subtle shadows and material overlap suggest physical depth without dramatic drop shadows

CSS/Design Techniques

Concrete Surface Background

.ri-concrete-bg {
  background-color: var(--ri-concrete-light);
  background-image:
    /* Subtle aggregate noise */
    url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E"),
    /* Subtle tonal variation */
    radial-gradient(circle at 30% 70%, rgba(139, 111, 78, 0.03) 0%, transparent 50%),
    radial-gradient(circle at 70% 30%, rgba(74, 74, 79, 0.03) 0%, transparent 50%);
}

Exposed Brick Texture

.ri-brick-bg {
  background-color: #8B5C4A;
  background-image:
    /* Horizontal mortar lines */
    repeating-linear-gradient(
      0deg,
      transparent 0px,
      transparent 28px,
      var(--ri-mortar) 28px,
      var(--ri-mortar) 32px
    ),
    /* Vertical mortar lines (offset every other row) */
    repeating-linear-gradient(
      90deg,
      transparent 0px,
      transparent 60px,
      var(--ri-mortar) 60px,
      var(--ri-mortar) 64px
    ),
    /* Subtle color variation in bricks */
    radial-gradient(ellipse at 20% 50%, rgba(155, 75, 58, 0.4) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 30%, rgba(122, 63, 50, 0.3) 0%, transparent 50%),
    /* Noise for texture */
    url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E");
}

Weathered Wood Surface

.ri-wood-bg {
  background-color: var(--ri-oak);
  background-image:
    /* Wood grain lines */
    repeating-linear-gradient(
      90deg,
      transparent 0px,
      transparent 3px,
      rgba(255, 255, 255, 0.03) 3px,
      rgba(255, 255, 255, 0.03) 4px,
      transparent 4px,
      transparent 10px
    ),
    /* Broader grain pattern */
    repeating-linear-gradient(
      88deg,
      transparent 0px,
      transparent 20px,
      rgba(0, 0, 0, 0.04) 20px,
      rgba(0, 0, 0, 0.04) 22px,
      transparent 22px,
      transparent 50px
    ),
    /* Tonal variation */
    linear-gradient(
      90deg,
      rgba(166, 124, 82, 0.3) 0%,
      rgba(139, 111, 78, 0.1) 30%,
      rgba(166, 124, 82, 0.2) 60%,
      rgba(94, 75, 59, 0.15) 100%
    );
}

Metal Pipe Divider

.ri-pipe-divider {
  height: 8px;
  margin: 3rem 0;
  position: relative;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.1) 0%,
    var(--ri-steel) 20%,
    var(--ri-gunmetal) 50%,
    #363636 80%,
    rgba(0, 0, 0, 0.2) 100%
  );
  border-radius: 4px;
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.15),
    0 -1px 0 rgba(255, 255, 255, 0.05);
}

/* Pipe joint bolts */
.ri-pipe-divider::before,
.ri-pipe-divider::after {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  background: radial-gradient(
    circle at 40% 40%,
    var(--ri-linen),
    var(--ri-steel) 50%,
    var(--ri-gunmetal)
  );
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.2);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.ri-pipe-divider::before { left: 20%; }
.ri-pipe-divider::after { right: 20%; }

Industrial Panel / Card

.ri-panel {
  background: var(--ri-cream);
  border: 1px solid var(--ri-mortar);
  padding: 2rem;
  position: relative;
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

/* Bolt-head corner accents */
.ri-panel::before,
.ri-panel::after {
  content: '';
  position: absolute;
  width: 8px;
  height: 8px;
  background: radial-gradient(
    circle at 35% 35%,
    var(--ri-linen),
    var(--ri-steel) 60%,
    var(--ri-gunmetal)
  );
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.15);
}

.ri-panel::before { top: 12px; left: 12px; }
.ri-panel::after { top: 12px; right: 12px; }

Industrial Panel (Dark Variant)

.ri-panel-dark {
  background: var(--ri-charcoal);
  border: 1px solid var(--ri-gunmetal);
  padding: 2rem;
  color: var(--ri-dusty-white);
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.ri-panel-dark h3 {
  color: var(--ri-dusty-white);
}

.ri-panel-dark p {
  color: var(--ri-linen);
}

Edison Bulb Glow Effect

.ri-glow {
  position: relative;
}

.ri-glow::before {
  content: '';
  position: absolute;
  top: -10%;
  left: 30%;
  width: 40%;
  height: 50%;
  background: radial-gradient(
    ellipse at center,
    rgba(212, 164, 76, 0.1) 0%,
    rgba(212, 164, 76, 0.04) 40%,
    transparent 70%
  );
  pointer-events: none;
}

/* Edison-warm text highlight */
.ri-edison-text {
  color: var(--ri-edison);
  text-shadow: 0 0 20px rgba(212, 164, 76, 0.15);
}

Mortar-Line Border

/* Horizontal mortar line (simulating brick mortar joints) */
.ri-mortar-divider {
  border: none;
  height: 2px;
  background: var(--ri-mortar);
  opacity: 0.5;
  margin: 2.5rem 0;
}

/* Mortar-line card border */
.ri-mortar-border {
  border: 2px solid var(--ri-mortar);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

Metal Shelf Rack Layout

.ri-rack {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 0;
  border: 2px solid var(--ri-gunmetal);
}

.ri-rack-item {
  padding: 2rem;
  border: 1px solid var(--ri-gunmetal);
  background: var(--ri-cream);
  position: relative;
}

/* Shelf bracket accent */
.ri-rack-item::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(
    180deg,
    var(--ri-steel) 0%,
    var(--ri-gunmetal) 100%
  );
}

Industrial Button

.ri-button {
  display: inline-block;
  padding: 0.75rem 2rem;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 600;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ri-dusty-white);
  background: var(--ri-charcoal);
  border: 1px solid var(--ri-gunmetal);
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.ri-button:hover {
  background: var(--ri-brick);
  border-color: var(--ri-brick-aged);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
}

.ri-button:active {
  transform: translateY(1px);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

/* Light variant */
.ri-button--light {
  background: var(--ri-cream);
  color: var(--ri-charcoal);
  border-color: var(--ri-mortar);
}

.ri-button--light:hover {
  background: var(--ri-dusty-white);
  border-color: var(--ri-brick);
  color: var(--ri-brick);
}

Window / Factory Glass Frame

.ri-window-frame {
  border: 3px solid var(--ri-charcoal);
  padding: 1rem;
  background: var(--ri-cream);
  position: relative;
}

/* Mullion bars (window dividers) */
.ri-window-frame::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 3px;
  height: 100%;
  background: var(--ri-charcoal);
}

.ri-window-frame::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 100%;
  height: 3px;
  background: var(--ri-charcoal);
}

Materials and Textures (Visual Metaphors for Web)

Physical Material Web Equivalent
Exposed brick wall Warm brown-red background with CSS repeating gradient mortar lines and noise overlay
Poured concrete Cool gray background with subtle fractal noise texture at low opacity
Weathered wood planks Warm brown background with fine linear gradient grain lines
Steel pipe Narrow rounded div with cylindrical gradient (highlight-to-shadow)
Metal bolt/rivet Small radial-gradient circle with offset highlight and border
Reclaimed wood shelf Card element with wood-grain background, darker bottom border as shadow
Metal racking Grid layout with gunmetal borders on all cells
Edison bulb Amber radial gradient glow positioned at the top of sections
Factory window Thick-bordered frame with internal mullion lines dividing the pane
Corrugated metal Tight repeating linear-gradient alternating light and dark strips
Aged copper patina Subtle green-tinted metallic accent on borders or decorative elements
Concrete seam Thin dark gray horizontal line, slightly irregular, between sections
Metal nameplate Small panel with dark background, monospaced uppercase text, thin border

Influences and Design Lineage

Influence What Raw Industrial borrows
Warehouse and factory architecture Open floor plans, exposed structure, large windows, functional spaces
Loft living movement Residential conversion of industrial spaces; living within raw architecture
Utilitarian design philosophy Function dictates form; beauty in practical objects and honest materials
Arts and Crafts movement Celebration of material authenticity and visible craftsmanship
Scandinavian minimalism Restraint, functionality, and natural materials (filtered through industrial lens)
Reclamation and sustainability Repurposed materials, salvaged fixtures, honoring the history of objects
Urban renewal Converting derelict spaces into desirable ones; finding potential in decay
Aesthetic Relationship to Raw Industrial
Brutalism Shares the celebration of raw concrete and structural honesty, but Brutalism is more imposing and monolithic; Raw Industrial is warmer and more habitable
Corporate Grunge Both use rough textures and earthy tones, but Corporate Grunge is deliberately distressed and dark; Raw Industrial is naturally aged and lighter
Graffiti Pop Can coexist in urban spaces; Graffiti Pop adds color and street art energy to Raw Industrial's neutral structural canvas
Industrial Decay Close sibling focused on abandonment and deterioration; Raw Industrial celebrates the same materials but in a restored, livable state
Industrial Gothic Shares industrial vocabulary but Industrial Gothic is dark, menacing, and atmospheric; Raw Industrial is functional and grounded
Shabby Chic Both value aged, imperfect surfaces, but Shabby Chic is feminine and decorative; Raw Industrial is masculine and utilitarian
Urbancore Shares the urban setting and industrial references; Urbancore is broader and includes street culture elements
Japandi Both value natural materials, restraint, and functional beauty, but Japandi adds Japanese minimalism and softer forms

Quick-Start: Minimal Raw Industrial Page Template

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Raw Industrial Page</title>
  <link href="https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600;700&family=Barlow+Condensed:wght@400;600;700&family=IBM+Plex+Mono:wght@400;500&family=DM+Sans:wght@400;500&display=swap" rel="stylesheet">
  <style>
    :root {
      --ri-concrete: #a8a29e;
      --ri-concrete-light: #c4bfb9;
      --ri-concrete-warm: #8d8680;
      --ri-charcoal: #2c2c2c;
      --ri-dark-iron: #1e1e1e;
      --ri-brick: #9b4b3a;
      --ri-brick-aged: #7a3f32;
      --ri-mortar: #c4aa8d;
      --ri-oak: #8b6f4e;
      --ri-timber: #a67c52;
      --ri-plank: #5e4b3b;
      --ri-gunmetal: #4a4a4f;
      --ri-steel: #6e6e73;
      --ri-copper: #8b6b4a;
      --ri-dusty-white: #e8e3dd;
      --ri-cream: #f0ebe3;
      --ri-linen: #d9d0c5;
      --ri-edison: #d4a44c;
    }

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

    body {
      background: var(--ri-cream);
      color: var(--ri-charcoal);
      font-family: 'Barlow', 'DM Sans', sans-serif;
      font-weight: 400;
      line-height: 1.75;
    }

    /* Global subtle texture */
    body::before {
      content: '';
      position: fixed;
      inset: 0;
      opacity: 0.03;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
      background-size: 256px 256px;
      pointer-events: none;
      z-index: 9999;
    }

    h1, h2 {
      font-family: 'Barlow Condensed', sans-serif;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      line-height: 1.1;
      color: var(--ri-charcoal);
    }

    h3, h4 {
      font-family: 'Barlow', sans-serif;
      font-weight: 600;
      color: var(--ri-gunmetal);
    }

    /* Hero */
    .hero {
      text-align: center;
      padding: 6rem 2rem;
      background: var(--ri-charcoal);
      position: relative;
      overflow: hidden;
    }

    /* Edison glow on hero */
    .hero::before {
      content: '';
      position: absolute;
      top: -20%;
      left: 25%;
      width: 50%;
      height: 60%;
      background: radial-gradient(
        ellipse at center,
        rgba(212, 164, 76, 0.08) 0%,
        rgba(212, 164, 76, 0.03) 40%,
        transparent 70%
      );
      pointer-events: none;
    }

    .hero h1 {
      font-size: clamp(2.5rem, 7vw, 5.5rem);
      color: var(--ri-dusty-white);
      position: relative;
      z-index: 1;
      margin-bottom: 1rem;
    }

    .hero p {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 0.8rem;
      text-transform: uppercase;
      letter-spacing: 0.15em;
      color: var(--ri-concrete-warm);
      position: relative;
      z-index: 1;
    }

    /* Pipe divider */
    .pipe-divider {
      height: 8px;
      background: linear-gradient(
        180deg,
        rgba(255,255,255,0.08) 0%,
        var(--ri-steel) 20%,
        var(--ri-gunmetal) 50%,
        #363636 80%,
        rgba(0,0,0,0.15) 100%
      );
      border-radius: 4px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }

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

    section h2 {
      font-size: 1.8rem;
      margin-bottom: 0.25rem;
    }

    .section-label {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 0.7rem;
      text-transform: uppercase;
      letter-spacing: 0.15em;
      color: var(--ri-concrete-warm);
      margin-bottom: 1.5rem;
    }

    section p {
      color: var(--ri-gunmetal);
      margin-bottom: 1rem;
    }

    /* Industrial panel */
    .ri-panel {
      background: var(--ri-cream);
      border: 1px solid var(--ri-mortar);
      padding: 2rem;
      margin: 2rem 0;
      position: relative;
      box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    }

    .ri-panel::before,
    .ri-panel::after {
      content: '';
      position: absolute;
      width: 8px;
      height: 8px;
      background: radial-gradient(circle at 35% 35%, var(--ri-linen), var(--ri-steel) 60%, var(--ri-gunmetal));
      border-radius: 50%;
      border: 1px solid rgba(0,0,0,0.12);
    }

    .ri-panel::before { top: 10px; left: 10px; }
    .ri-panel::after { top: 10px; right: 10px; }

    .ri-panel h3 {
      color: var(--ri-brick);
      margin-bottom: 0.75rem;
      font-size: 1.1rem;
    }

    .ri-panel p {
      color: var(--ri-gunmetal);
      font-size: 0.95rem;
    }

    /* Brick accent section */
    .brick-section {
      background-color: #8B5C4A;
      background-image:
        repeating-linear-gradient(
          0deg,
          transparent 0px, transparent 28px,
          var(--ri-mortar) 28px, var(--ri-mortar) 32px
        ),
        repeating-linear-gradient(
          90deg,
          transparent 0px, transparent 60px,
          var(--ri-mortar) 60px, var(--ri-mortar) 64px
        );
      padding: 4rem 2rem;
      text-align: center;
    }

    .brick-section h2 {
      color: var(--ri-cream);
    }

    .brick-section p {
      color: var(--ri-linen);
      max-width: 600px;
      margin: 1rem auto;
    }

    /* Mortar divider */
    .mortar-divider {
      border: none;
      height: 2px;
      background: var(--ri-mortar);
      opacity: 0.4;
      margin: 0;
    }

    /* Button */
    .btn {
      display: inline-block;
      padding: 0.75rem 2rem;
      font-family: 'Barlow Condensed', sans-serif;
      font-weight: 600;
      font-size: 0.9rem;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: var(--ri-dusty-white);
      background: var(--ri-charcoal);
      border: 1px solid var(--ri-gunmetal);
      cursor: pointer;
      text-decoration: none;
      transition: all 0.2s ease;
      box-shadow: 0 2px 4px rgba(0,0,0,0.12);
    }

    .btn:hover {
      background: var(--ri-brick);
      border-color: var(--ri-brick-aged);
    }

    /* Footer */
    footer {
      text-align: center;
      padding: 3rem 2rem;
      background: var(--ri-dark-iron);
      border-top: 1px solid var(--ri-gunmetal);
    }

    footer p {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 0.7rem;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--ri-concrete-warm);
    }

    a { color: var(--ri-brick); text-decoration: none; border-bottom: 1px solid rgba(155, 75, 58, 0.3); transition: color 0.2s; }
    a:hover { color: var(--ri-brick-aged); }
  </style>
</head>
<body>
  <div class="hero">
    <h1>Title Here</h1>
    <p>Built from raw materials / honest structure</p>
  </div>

  <div class="pipe-divider"></div>

  <section>
    <p class="section-label">Section 01 -- Overview</p>
    <h2>Section Heading</h2>
    <p>Content presented within the open, light-filled space of the industrial environment. Material textures provide richness while the palette stays grounded and natural.</p>

    <div class="ri-panel">
      <h3>Panel Heading</h3>
      <p>Information framed within a structurally honest container. Bolt-head accents and mortar-line borders reinforce the industrial material language.</p>
    </div>
  </section>

  <hr class="mortar-divider">

  <div class="brick-section">
    <h2>Accent Section</h2>
    <p>Exposed brick provides warmth and texture against the broader concrete-and-metal palette.</p>
    <br>
    <a href="#" class="btn" style="background: var(--ri-cream); color: var(--ri-charcoal); border-color: var(--ri-mortar);">Learn More</a>
  </div>

  <div class="pipe-divider"></div>

  <footer>
    <p>Structural integrity / material honesty</p>
  </footer>
</body>
</html>
← Zurück zu den Designs
Agence WagnerAgence Wagner

© 2026 Agence Wagner. Alle Rechte vorbehalten.

Designs von chrislemke/website_designs, lizenziert unter MIT.