website_designs

Rustic Modern Design Reference

Overview

Rustic Modern is a design aesthetic that harmonizes the warmth and character of traditional rustic craftsmanship with the clean lines and restrained geometry of contemporary modernism. At its core, the style is defined by the juxtaposition of raw, natural materials – reclaimed wood, exposed brick, rough-hewn stone, hand-forged iron – against sleek, minimal forms: flat planes, open floor plans, and deliberate negative space. The result is a visual language that feels simultaneously grounded and refined, aged and current, tactile and composed.

The aesthetic emerged from the broader farmhouse and industrial revival movements of the 2010s, but distinguishes itself through restraint. Where pure rustic design can lean toward clutter and nostalgia, and pure modernism can feel sterile and cold, Rustic Modern occupies the tension between the two. Every weathered beam is set against a clean white wall. Every steel bracket is hand-finished. Every imperfect grain pattern is framed by precise geometry. The interplay of textures – rough woods juxtaposed with sleek metals, soft leathers against coarse fabrics, matte stone beside polished concrete – creates depth and visual interest without relying on ornament.

In web and UI design, Rustic Modern translates into warm, earthy color palettes drawn from natural materials (walnut, clay, sandstone, charcoal, iron), combined with generous whitespace, strong typographic hierarchy, and subtle texture overlays that reference wood grain, linen weave, and raw concrete. Typography pairs sturdy, characterful serif or slab-serif headings with clean, humanist sans-serif body text – legible and modern, but never cold. Layouts are open and grid-based, with cards and containers that suggest the honest construction of a well-built cabinet: visible structure, functional beauty, no decorative excess. Photography and imagery lean toward muted, desaturated tones with warm light, capturing the feeling of morning sun on a barn door or the patina of a hand-worn leather surface.

The philosophy behind Rustic Modern is material honesty. Surfaces look like what they are. Wood is wood, not a glossy veneer. Metal is brushed and raw, not chrome-polished to a mirror shine. This extends to digital design: avoid excessive gradients, artificial gloss, or hyperreal effects. Let the warmth come from color, texture, and spacing. Let the modernity come from structure, restraint, and clarity. The best Rustic Modern designs feel like a well-renovated farmhouse – every original imperfection preserved with intention, every modern intervention seamlessly integrated.

Visual Characteristics

Core Design Traits

Reclaimed wood textures: Weathered, distressed wood grain used as backgrounds, card surfaces, and decorative accents – warm, unpolished, and imperfect
Exposed brick and stone references: Rough, matte textures at low opacity suggesting masonry walls, fireplaces, and foundation materials
Steel and iron accents: Dark metal tones used for borders, dividers, icon strokes, and structural UI elements – brushed, not polished
Warm-cool material contrast: The core visual tension between warm wood/brick/leather and cool steel/concrete/glass, creating depth and balance
Clean geometric structure: Modern grid layouts, straight lines, and precise alignment that frame and organize the raw, organic elements
Generous negative space: Open, breathing layouts that give each element room, reflecting the open floor plans of modern loft spaces
Muted, desaturated photography: Images treated with warm, low-saturation filters that evoke natural light and aged surfaces
Visible construction details: UI elements that reveal their structure – visible borders, defined edges, clear container boundaries, like exposed joinery in furniture
Subtle noise and grain overlays: Fine-grained texture applied to flat surfaces at very low opacity, preventing the sterile flatness of pure modernism
Hand-finished quality: Slight imperfections, organic line weights, and warm rounding that suggest craft rather than factory production

Design Principles

Material honesty: Every texture, color, and surface should reference a real material without artificial embellishment or synthetic sheen
Tension between raw and refined: The aesthetic lives in the contrast between rough natural elements and clean modern geometry; neither side should dominate
Warmth through restraint: Fewer elements, more warmth; let earthy colors and rich textures create coziness rather than visual clutter
Functional beauty: Every design element should serve a purpose; decoration without function violates the modern half of the equation
Patina over perfection: Embrace the visual character of age, wear, and use; imperfection communicates authenticity and human touch
Structural clarity: The underlying grid, hierarchy, and information architecture should be immediately legible, like the exposed beams of a well-built structure
Grounded weight: Elements should feel anchored and substantial, not floating or ethereal; shadows suggest resting weight, not hovering elevation
Sustainable simplicity: Design choices should feel timeless and durable, not trend-chasing; a Rustic Modern interface should age as gracefully as the materials it references

Color Palette

The Rustic Modern palette draws directly from its material vocabulary: warm browns from walnut, oak, and reclaimed timber; deep reds and oranges from exposed brick and terracotta; cool grays from brushed steel, concrete, and river stone; and muted greens from weathered copper, moss, and natural foliage. The palette is earthy, desaturated, and layered – never bright or synthetic. Pure black and pure white are avoided in favor of charcoal and warm cream, keeping the overall tone organic and inviting.

Swatch	Hex	Role/Usage
Reclaimed Walnut	`#5C4033`	Primary dark accent, headings, deep containers
Barn Wood	`#8B6F4E`	Secondary warm brown, card accents, borders
Weathered Oak	`#A68B6B`	Mid-tone warm neutral, interactive elements
Sandstone	`#C4A882`	Surface backgrounds, card fills, warm panels
Raw Linen	`#E8DCC8`	Light backgrounds, content areas
Warm Cream	`#F5EDE0`	Page backgrounds, primary surface color
Exposed Brick	`#9E5A42`	Accent color, call-to-action, emphasis
Fired Clay	`#B87353`	Secondary accent, hover states, warm highlights
Brushed Steel	`#6B7B86`	Cool accent, metallic UI elements, icons
Iron Gray	`#4A5259`	Cool dark tone, navigation, structural borders
Patina Green	`#6B7F5E`	Tertiary accent, success states, organic touches
Aged Copper	`#7A8E6D`	Secondary green, subtle highlights
Raw Concrete	`#B0A99F`	Neutral mid-tone, disabled states, subtle borders
Poured Cement	`#D5CEC4`	Light neutral, dividers, secondary surfaces
Deep Charcoal	`#2C2A28`	Primary text, near-black for maximum readability

CSS Custom Properties

:root {
  /* Warm woods */
  --rustic-walnut: #5C4033;
  --rustic-barn-wood: #8B6F4E;
  --rustic-oak: #A68B6B;
  --rustic-sandstone: #C4A882;

  /* Light neutrals */
  --rustic-linen: #E8DCC8;
  --rustic-cream: #F5EDE0;
  --rustic-parchment: #FAF6F0;

  /* Brick and clay */
  --rustic-brick: #9E5A42;
  --rustic-clay: #B87353;
  --rustic-terracotta: #C67B5C;

  /* Steel and iron */
  --rustic-steel: #6B7B86;
  --rustic-iron: #4A5259;
  --rustic-iron-dark: #363D42;

  /* Greens */
  --rustic-patina: #6B7F5E;
  --rustic-copper: #7A8E6D;

  /* Concrete and stone */
  --rustic-concrete: #B0A99F;
  --rustic-cement: #D5CEC4;
  --rustic-stone: #9A9590;

  /* Text */
  --rustic-text: #2C2A28;
  --rustic-text-light: #6B6560;
  --rustic-text-muted: #8A847E;

  /* Functional mappings */
  --rustic-bg-primary: var(--rustic-cream);
  --rustic-bg-secondary: var(--rustic-linen);
  --rustic-bg-dark: var(--rustic-walnut);
  --rustic-bg-card: var(--rustic-parchment);
  --rustic-accent: var(--rustic-brick);
  --rustic-accent-secondary: var(--rustic-clay);
  --rustic-border: var(--rustic-cement);
  --rustic-border-strong: var(--rustic-sandstone);
  --rustic-heading: var(--rustic-walnut);
}

Typography

Rustic Modern typography pairs the warmth and character of serif or slab-serif headings with the clarity and readability of clean, humanist sans-serif body text. Heading fonts should feel sturdy and grounded – like a hand-painted sign on a barn or the engraving on a cast-iron tool – without being overly decorative. Body fonts should be warm, open, and highly legible, with generous x-heights and comfortable letter spacing. The overall typographic rhythm is unhurried, spacious, and confident.

Recommended Google Fonts

Font	Weight(s)	Style	Usage
Playfair Display	400, 700, 900	High-contrast transitional serif	Hero headlines, editorial display
Lora	400, 500, 600, 700	Warm calligraphic serif	Headlines, subheadings, pull quotes
Merriweather	300, 400, 700	Sturdy, readable slab-influenced serif	Headlines, long-form headings
Roboto Slab	300, 400, 500, 700	Geometric slab serif	Display headings, bold accents
Source Sans 3	300, 400, 600	Clean humanist sans-serif	Body text, UI elements
Work Sans	300, 400, 500, 600	Warm geometric sans-serif	Body text, navigation, labels
Inter	300, 400, 500	Neutral, highly legible sans	Body text, small text, captions
Cabin	400, 500, 600, 700	Warm humanist sans-serif	Buttons, navigation, UI elements

Font Pairing Suggestions

Heading	Body	Mood
Playfair Display 700	Source Sans 3 400	Refined editorial, modern warmth
Lora 600	Work Sans 400	Organic warmth, approachable craft
Merriweather 700	Inter 400	Sturdy and grounded, maximum readability
Roboto Slab 500	Cabin 400	Bold structural headings, friendly body
Lora 500 Italic	Source Sans 3 300	Gentle, artisanal, contemplative

CSS Example

@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Source+Sans+3:wght@300;400;600&family=Cabin:wght@400;500;600;700&display=swap');

body {
  font-family: 'Source Sans 3', 'Cabin', sans-serif;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.75;
  letter-spacing: 0.01em;
  color: var(--rustic-text);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: 'Lora', Georgia, serif;
  font-weight: 600;
  line-height: 1.25;
  color: var(--rustic-heading);
  letter-spacing: 0.01em;
}

h1 {
  font-size: clamp(2.25rem, 5vw, 4rem);
  font-weight: 700;
  letter-spacing: -0.01em;
}

h2 {
  font-size: clamp(1.5rem, 3vw, 2.25rem);
}

h3 {
  font-size: clamp(1.125rem, 2vw, 1.5rem);
}

/* Rustic label -- small caps, wide tracking */
.rustic-label {
  font-family: 'Cabin', 'Source Sans 3', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rustic-text-muted);
}

/* Display text with hand-crafted character */
.rustic-display {
  font-family: 'Lora', Georgia, serif;
  font-size: clamp(2.5rem, 6vw, 5rem);
  font-weight: 700;
  line-height: 1.1;
  color: var(--rustic-walnut);
}

Layout Principles

Open floor plan composition: Layouts should feel spacious and uncluttered, with clear sightlines through the content hierarchy – inspired by the open, connected spaces of modern loft renovations
Strong grid foundation: Use clean, consistent grids (12-column or simple 2-3 column) as the structural framework, like the exposed beams and joists of a timber-frame building
Generous vertical rhythm: Ample spacing between sections (4-6rem) and within content (1.5-2rem), giving each element room to breathe and be appreciated
Asymmetric balance: Content need not be perfectly centered; a 60/40 or 65/35 split between image and text creates natural, dynamic compositions
Wide content areas, narrow text measure: Overall containers can span 1100-1200px, but body text should be constrained to 650-750px for comfortable reading
Full-bleed imagery with contained text: Large, atmospheric photographs extend edge-to-edge, while text content is contained within structured containers
Card-based content organization: Use well-defined card components with visible borders and subtle shadows, like display shelves or material samples in a workshop
Horizontal grounding lines: Thin borders and dividers that suggest floor lines, shelving, and the horizontal emphasis of built structures
Single-column mobile flow: On narrow screens, collapse to a single column with increased vertical spacing, maintaining the open, unhurried feel
Anchored navigation: Navigation elements should feel fixed and substantial, like a steel support beam, not floating or translucent

CSS / Design Techniques

Rustic Card Component

.rustic-card {
  background: var(--rustic-parchment);
  border: 1px solid var(--rustic-cement);
  border-radius: 4px;
  padding: 2rem;
  position: relative;
  box-shadow:
    0 2px 4px rgba(44, 42, 40, 0.06),
    0 4px 12px rgba(44, 42, 40, 0.04);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

/* Subtle wood-grain top accent */
.rustic-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(
    90deg,
    var(--rustic-barn-wood),
    var(--rustic-oak),
    var(--rustic-barn-wood)
  );
  border-radius: 4px 4px 0 0;
}

.rustic-card:hover {
  box-shadow:
    0 4px 8px rgba(44, 42, 40, 0.08),
    0 8px 24px rgba(44, 42, 40, 0.06);
  transform: translateY(-2px);
}

/* Card variant with steel-frame left accent */
.rustic-card--steel {
  border-left: 3px solid var(--rustic-iron);
  border-radius: 0 4px 4px 0;
}

.rustic-card--steel::before {
  display: none;
}

Rustic Button Component

/* Primary button -- warm, solid, grounded */
.rustic-btn {
  display: inline-block;
  font-family: 'Cabin', 'Source Sans 3', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.8rem 2rem;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.25s ease;
}

.rustic-btn--primary {
  background: var(--rustic-brick);
  color: var(--rustic-cream);
  box-shadow: 0 2px 6px rgba(158, 90, 66, 0.25);
}

.rustic-btn--primary:hover {
  background: var(--rustic-walnut);
  box-shadow: 0 4px 12px rgba(92, 64, 51, 0.3);
  transform: translateY(-1px);
}

/* Secondary button -- steel outline */
.rustic-btn--secondary {
  background: transparent;
  color: var(--rustic-iron);
  border: 2px solid var(--rustic-iron);
}

.rustic-btn--secondary:hover {
  background: var(--rustic-iron);
  color: var(--rustic-cream);
}

/* Tertiary button -- warm understated */
.rustic-btn--tertiary {
  background: var(--rustic-linen);
  color: var(--rustic-walnut);
  border: 1px solid var(--rustic-sandstone);
}

.rustic-btn--tertiary:hover {
  background: var(--rustic-sandstone);
  color: var(--rustic-walnut);
}

.rustic-nav {
  background: var(--rustic-walnut);
  padding: 1rem 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 3px solid var(--rustic-iron);
}

.rustic-nav__brand {
  font-family: 'Lora', Georgia, serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--rustic-cream);
  text-decoration: none;
  letter-spacing: 0.02em;
}

.rustic-nav__links {
  display: flex;
  align-items: center;
  gap: 2rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.rustic-nav__links a {
  color: var(--rustic-linen);
  font-family: 'Cabin', sans-serif;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color 0.25s ease;
  position: relative;
}

.rustic-nav__links a::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--rustic-clay);
  transition: width 0.25s ease;
}

.rustic-nav__links a:hover {
  color: var(--rustic-sandstone);
}

.rustic-nav__links a:hover::after {
  width: 100%;
}

Hero Section

.rustic-hero {
  position: relative;
  padding: 8rem 2rem 6rem;
  text-align: center;
  background: var(--rustic-linen);
  overflow: hidden;
}

/* Subtle wood-grain texture overlay */
.rustic-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.03;
  background-image:
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 2px,
      rgba(92, 64, 51, 0.3) 2px,
      rgba(92, 64, 51, 0.3) 3px
    ),
    repeating-linear-gradient(
      0deg,
      transparent,
      rgba(139, 111, 78, 0.15) 60px,
      transparent 120px
    );
  pointer-events: none;
}

/* Warm gradient wash */
.rustic-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at 50% 80%,
    rgba(196, 168, 130, 0.15) 0%,
    transparent 60%
  );
  pointer-events: none;
}

.rustic-hero h1 {
  font-family: 'Lora', Georgia, serif;
  font-size: clamp(2.5rem, 6vw, 5rem);
  font-weight: 700;
  color: var(--rustic-walnut);
  position: relative;
  z-index: 1;
  line-height: 1.1;
}

.rustic-hero p {
  font-family: 'Source Sans 3', sans-serif;
  font-size: 1.15rem;
  color: var(--rustic-text-light);
  max-width: 600px;
  margin: 1.5rem auto 2rem;
  position: relative;
  z-index: 1;
}

Wood Grain Texture Overlay

/* Subtle wood grain applied to any surface */
.rustic-wood-texture {
  position: relative;
}

.rustic-wood-texture::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.035;
  background-image:
    repeating-linear-gradient(
      85deg,
      transparent,
      transparent 1px,
      rgba(92, 64, 51, 0.4) 1px,
      rgba(92, 64, 51, 0.4) 2px
    ),
    repeating-linear-gradient(
      0deg,
      transparent,
      rgba(139, 111, 78, 0.12) 50px,
      transparent 100px
    );
  pointer-events: none;
}

Exposed Brick Texture

/* Brick-pattern background using SVG */
.rustic-brick-bg {
  background-color: var(--rustic-walnut);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='42' height='22'%3E%3Crect width='42' height='22' fill='%235C4033'/%3E%3Crect x='1' y='1' width='18' height='9' rx='1' fill='%23704D3A' opacity='0.5'/%3E%3Crect x='22' y='1' width='18' height='9' rx='1' fill='%23654536' opacity='0.45'/%3E%3Crect x='11' y='12' width='18' height='9' rx='1' fill='%236B4A38' opacity='0.48'/%3E%3Crect x='32' y='12' width='9' height='9' rx='1' fill='%23704D3A' opacity='0.42'/%3E%3Crect x='0' y='12' width='8' height='9' rx='1' fill='%23654536' opacity='0.44'/%3E%3C/svg%3E");
  background-size: 42px 22px;
}

Steel Dividers and Borders

/* Steel-beam horizontal divider */
.rustic-divider {
  border: none;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--rustic-iron) 15%,
    var(--rustic-steel) 50%,
    var(--rustic-iron) 85%,
    transparent 100%
  );
  margin: 4rem auto;
  max-width: 60%;
}

/* Rivet-accented divider */
.rustic-divider--rivets {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 3rem auto;
  max-width: 300px;
}

.rustic-divider--rivets::before,
.rustic-divider--rivets::after {
  content: '';
  flex: 1;
  height: 2px;
  background: var(--rustic-iron);
}

.rustic-divider--rivets span {
  width: 8px;
  height: 8px;
  background: radial-gradient(
    circle at 35% 35%,
    var(--rustic-steel),
    var(--rustic-iron)
  );
  border-radius: 50%;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.15);
}

Full Page Scaffold

:root {
  --rustic-walnut: #5C4033;
  --rustic-barn-wood: #8B6F4E;
  --rustic-oak: #A68B6B;
  --rustic-sandstone: #C4A882;
  --rustic-linen: #E8DCC8;
  --rustic-cream: #F5EDE0;
  --rustic-parchment: #FAF6F0;
  --rustic-brick: #9E5A42;
  --rustic-clay: #B87353;
  --rustic-steel: #6B7B86;
  --rustic-iron: #4A5259;
  --rustic-patina: #6B7F5E;
  --rustic-concrete: #B0A99F;
  --rustic-cement: #D5CEC4;
  --rustic-text: #2C2A28;
  --rustic-text-light: #6B6560;
  --rustic-text-muted: #8A847E;
  --rustic-border: var(--rustic-cement);
  --rustic-radius: 4px;
}

* {
  box-sizing: border-box;
}

body {
  font-family: 'Source Sans 3', 'Inter', sans-serif;
  background-color: var(--rustic-cream);
  color: var(--rustic-text);
  line-height: 1.75;
  margin: 0;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: 'Lora', Georgia, serif;
  font-weight: 600;
  line-height: 1.25;
  color: var(--rustic-walnut);
}

h1 { font-size: clamp(2.25rem, 5vw, 4rem); font-weight: 700; }
h2 { font-size: clamp(1.5rem, 3vw, 2.25rem); }
h3 { font-size: clamp(1.125rem, 2vw, 1.5rem); }

p {
  max-width: 40em;
  margin-bottom: 1.5em;
}

a {
  color: var(--rustic-brick);
  text-decoration: underline;
  text-decoration-color: var(--rustic-cement);
  text-underline-offset: 3px;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

a:hover {
  color: var(--rustic-walnut);
  text-decoration-color: var(--rustic-walnut);
}

.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 2rem;
}

section {
  padding: 5rem 0;
}

Design Do’s and Don’ts

Do

Use warm, earthy color palettes drawn from real materials – walnut, brick, sandstone, iron
Pair sturdy serif headings with clean sans-serif body text for readable warmth
Apply subtle texture overlays (wood grain, linen, noise) at very low opacity to prevent flat sterility
Use visible, well-defined card borders and container edges that suggest honest construction
Employ generous whitespace and breathing room between elements
Create contrast between warm wood/brick tones and cool steel/concrete tones
Use full-bleed, desaturated photography with warm natural lighting
Keep border-radius minimal (2-4px) for a precise, crafted feel

Don’t

Apply glossy, synthetic, or hyperreal surface effects – no chrome shine, no plastic gradients
Use bright, saturated, or neon colors that feel artificial and contradict the natural palette
Clutter layouts with excessive decorative elements, ornate borders, or novelty fonts
Mix rustic textures with ultra-futuristic or high-tech UI patterns (glass, holographic, neon)
Use rounded, pillowy border-radius values (20px+) that contradict the angular, constructed quality
Apply heavy drop shadows or elevation effects – shadows should suggest resting weight, not floating
Set all text in decorative, distressed, or novelty “barn” fonts; reserve character for headings only
Overload with texture – a single subtle overlay is sufficient; layering multiple textures creates mud

Aesthetic	Relationship to Rustic Modern
Earth Tones	Shares the warm, brown-dominant color palette and natural material references; Earth Tones is more retro-1970s in character while Rustic Modern is contemporary
Industrial Gothic	Shares exposed steel, iron, and raw construction elements; Industrial Gothic is darker, grittier, and more urban while Rustic Modern adds warmth through wood and brick
Japandi	Both value material honesty, restraint, and craft; Japandi is lighter, more minimal, and influenced by Japanese aesthetics while Rustic Modern is warmer and more textured
Craftcore	Shares the celebration of handmade quality and visible construction; Craftcore is more colorful, pattern-heavy, and folk-art influenced
Cottagecore	Both reference rural, pastoral materials; Cottagecore is softer, more romantic, and more decorative while Rustic Modern maintains modern restraint
Hygge	Shares the emphasis on warmth, comfort, and natural materials; Hygge is cozier and more textile-focused while Rustic Modern is more structured and architectural
Arts and Crafts	Shares the philosophy of material honesty and visible craftsmanship; Arts and Crafts is more ornamental and pattern-rich while Rustic Modern is cleaner
Minimalism	Shares the clean lines, generous whitespace, and structural clarity; Minimalism is cooler and more austere while Rustic Modern adds warmth through material textures

Quick-Start HTML Template

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Rustic Modern</title>
  <link href="https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Source+Sans+3:wght@300;400;600&family=Cabin:wght@400;500;600;700&display=swap" rel="stylesheet">
  <style>
    :root {
      /* Warm woods */
      --rustic-walnut: #5C4033;
      --rustic-barn-wood: #8B6F4E;
      --rustic-oak: #A68B6B;
      --rustic-sandstone: #C4A882;

      /* Light neutrals */
      --rustic-linen: #E8DCC8;
      --rustic-cream: #F5EDE0;
      --rustic-parchment: #FAF6F0;

      /* Brick and clay */
      --rustic-brick: #9E5A42;
      --rustic-clay: #B87353;
      --rustic-terracotta: #C67B5C;

      /* Steel and iron */
      --rustic-steel: #6B7B86;
      --rustic-iron: #4A5259;

      /* Greens */
      --rustic-patina: #6B7F5E;
      --rustic-copper: #7A8E6D;

      /* Concrete and stone */
      --rustic-concrete: #B0A99F;
      --rustic-cement: #D5CEC4;

      /* Text */
      --rustic-text: #2C2A28;
      --rustic-text-light: #6B6560;
      --rustic-text-muted: #8A847E;
    }

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

    body {
      background: var(--rustic-cream);
      color: var(--rustic-text);
      font-family: 'Source Sans 3', sans-serif;
      font-weight: 400;
      font-size: 1rem;
      line-height: 1.75;
      letter-spacing: 0.01em;
      -webkit-font-smoothing: antialiased;
    }

    h1, h2, h3 {
      font-family: 'Lora', Georgia, serif;
      font-weight: 600;
      line-height: 1.25;
      color: var(--rustic-walnut);
    }

    /* ===================== */
    /* NAVIGATION            */
    /* ===================== */
    nav {
      background: var(--rustic-walnut);
      border-bottom: 3px solid var(--rustic-iron);
      padding: 0 2rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: sticky;
      top: 0;
      z-index: 100;
      height: 60px;
    }

    .nav-brand {
      font-family: 'Lora', Georgia, serif;
      font-size: 1.2rem;
      font-weight: 700;
      color: var(--rustic-cream);
      text-decoration: none;
    }

    .nav-links {
      display: flex;
      align-items: center;
      gap: 2rem;
      list-style: none;
    }

    .nav-links a {
      color: var(--rustic-linen);
      font-family: 'Cabin', sans-serif;
      font-size: 0.78rem;
      font-weight: 600;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      text-decoration: none;
      position: relative;
      transition: color 0.25s ease;
    }

    .nav-links a::after {
      content: '';
      position: absolute;
      bottom: -4px;
      left: 0;
      width: 0;
      height: 2px;
      background: var(--rustic-clay);
      transition: width 0.25s ease;
    }

    .nav-links a:hover {
      color: var(--rustic-sandstone);
    }

    .nav-links a:hover::after {
      width: 100%;
    }

    /* ===================== */
    /* HERO SECTION          */
    /* ===================== */
    .hero {
      position: relative;
      padding: 7rem 2rem 5rem;
      text-align: center;
      background: var(--rustic-linen);
      overflow: hidden;
    }

    /* Subtle wood grain texture */
    .hero::before {
      content: '';
      position: absolute;
      inset: 0;
      opacity: 0.03;
      background-image:
        repeating-linear-gradient(
          90deg,
          transparent,
          transparent 2px,
          rgba(92, 64, 51, 0.3) 2px,
          rgba(92, 64, 51, 0.3) 3px
        ),
        repeating-linear-gradient(
          0deg,
          transparent,
          rgba(139, 111, 78, 0.15) 60px,
          transparent 120px
        );
      pointer-events: none;
    }

    /* Warm radial glow */
    .hero::after {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(
        ellipse at 50% 80%,
        rgba(196, 168, 130, 0.15) 0%,
        transparent 60%
      );
      pointer-events: none;
    }

    .hero .label {
      font-family: 'Cabin', sans-serif;
      font-size: 0.72rem;
      font-weight: 600;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--rustic-text-muted);
      position: relative;
      z-index: 1;
      margin-bottom: 1rem;
      display: block;
    }

    .hero h1 {
      font-size: clamp(2.5rem, 6vw, 4.5rem);
      font-weight: 700;
      color: var(--rustic-walnut);
      position: relative;
      z-index: 1;
      line-height: 1.1;
    }

    .hero p {
      font-size: 1.15rem;
      color: var(--rustic-text-light);
      max-width: 580px;
      margin: 1.25rem auto 2rem;
      position: relative;
      z-index: 1;
    }

    .hero .btn-group {
      display: flex;
      gap: 1rem;
      justify-content: center;
      position: relative;
      z-index: 1;
    }

    /* ===================== */
    /* BUTTONS               */
    /* ===================== */
    .btn {
      display: inline-block;
      font-family: 'Cabin', sans-serif;
      font-size: 0.82rem;
      font-weight: 600;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      text-decoration: none;
      padding: 0.8rem 2rem;
      border: none;
      border-radius: 3px;
      cursor: pointer;
      transition: all 0.25s ease;
    }

    .btn--primary {
      background: var(--rustic-brick);
      color: var(--rustic-cream);
      box-shadow: 0 2px 6px rgba(158, 90, 66, 0.25);
    }

    .btn--primary:hover {
      background: var(--rustic-walnut);
      box-shadow: 0 4px 12px rgba(92, 64, 51, 0.3);
      transform: translateY(-1px);
    }

    .btn--secondary {
      background: transparent;
      color: var(--rustic-iron);
      border: 2px solid var(--rustic-iron);
    }

    .btn--secondary:hover {
      background: var(--rustic-iron);
      color: var(--rustic-cream);
    }

    /* ===================== */
    /* DIVIDER               */
    /* ===================== */
    .divider {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      margin: 3rem auto;
      max-width: 260px;
    }

    .divider::before,
    .divider::after {
      content: '';
      flex: 1;
      height: 2px;
      background: var(--rustic-iron);
    }

    .divider .rivet {
      width: 8px;
      height: 8px;
      background: radial-gradient(
        circle at 35% 35%,
        var(--rustic-steel),
        var(--rustic-iron)
      );
      border-radius: 50%;
      box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.15);
    }

    /* ===================== */
    /* CONTENT SECTION       */
    /* ===================== */
    .content-section {
      max-width: 1100px;
      margin: 0 auto;
      padding: 4rem 2rem;
    }

    .content-section h2 {
      text-align: center;
      margin-bottom: 0.5rem;
    }

    .content-section .subtitle {
      text-align: center;
      color: var(--rustic-text-muted);
      font-size: 0.95rem;
      margin-bottom: 3rem;
    }

    /* ===================== */
    /* CARD GRID             */
    /* ===================== */
    .card-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 2rem;
    }

    .card {
      background: var(--rustic-parchment);
      border: 1px solid var(--rustic-cement);
      border-radius: 4px;
      padding: 2rem;
      position: relative;
      box-shadow:
        0 2px 4px rgba(44, 42, 40, 0.06),
        0 4px 12px rgba(44, 42, 40, 0.04);
      transition: box-shadow 0.3s ease, transform 0.3s ease;
    }

    .card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 3px;
      background: linear-gradient(
        90deg,
        var(--rustic-barn-wood),
        var(--rustic-oak),
        var(--rustic-barn-wood)
      );
      border-radius: 4px 4px 0 0;
    }

    .card:hover {
      box-shadow:
        0 4px 8px rgba(44, 42, 40, 0.08),
        0 8px 24px rgba(44, 42, 40, 0.06);
      transform: translateY(-2px);
    }

    .card .card-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 44px;
      height: 44px;
      background: var(--rustic-linen);
      border: 1px solid var(--rustic-cement);
      border-radius: 3px;
      color: var(--rustic-brick);
      font-size: 1.25rem;
      margin-bottom: 1rem;
    }

    .card h3 {
      font-size: 1.15rem;
      margin-bottom: 0.75rem;
    }

    .card p {
      color: var(--rustic-text-light);
      font-size: 0.92rem;
      line-height: 1.7;
    }

    /* ===================== */
    /* SPLIT SECTION         */
    /* ===================== */
    .split {
      max-width: 1100px;
      margin: 0 auto;
      padding: 4rem 2rem;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 4rem;
      align-items: center;
    }

    .split__image {
      width: 100%;
      aspect-ratio: 4 / 3;
      background: var(--rustic-linen);
      border: 1px solid var(--rustic-cement);
      border-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--rustic-text-muted);
      font-family: 'Cabin', sans-serif;
      font-size: 0.85rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      position: relative;
      overflow: hidden;
    }

    /* Subtle grain on image placeholder */
    .split__image::after {
      content: '';
      position: absolute;
      inset: 0;
      opacity: 0.04;
      background-image:
        repeating-linear-gradient(
          85deg,
          transparent,
          transparent 1px,
          rgba(92, 64, 51, 0.4) 1px,
          rgba(92, 64, 51, 0.4) 2px
        );
      pointer-events: none;
    }

    .split__content h2 {
      text-align: left;
      margin-bottom: 1rem;
    }

    .split__content p {
      color: var(--rustic-text-light);
      margin-bottom: 1.5rem;
    }

    /* ===================== */
    /* MATERIALS STRIP       */
    /* ===================== */
    .materials {
      background: var(--rustic-walnut);
      padding: 4rem 2rem;
      color: var(--rustic-linen);
    }

    .materials h2 {
      text-align: center;
      color: var(--rustic-cream);
      margin-bottom: 2.5rem;
    }

    .materials-grid {
      max-width: 1100px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 1.5rem;
    }

    .material-swatch {
      background: rgba(255, 255, 255, 0.06);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 4px;
      padding: 1.5rem;
      text-align: center;
      transition: background 0.3s ease;
    }

    .material-swatch:hover {
      background: rgba(255, 255, 255, 0.1);
    }

    .material-swatch .swatch-color {
      width: 48px;
      height: 48px;
      border-radius: 3px;
      margin: 0 auto 1rem;
      border: 1px solid rgba(255, 255, 255, 0.12);
    }

    .material-swatch .swatch-name {
      font-family: 'Cabin', sans-serif;
      font-size: 0.8rem;
      font-weight: 600;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--rustic-cream);
      margin-bottom: 0.25rem;
    }

    .material-swatch .swatch-hex {
      font-family: 'Source Sans 3', monospace;
      font-size: 0.78rem;
      color: var(--rustic-concrete);
    }

    /* ===================== */
    /* TESTIMONIAL / QUOTE   */
    /* ===================== */
    .quote-section {
      max-width: 750px;
      margin: 0 auto;
      padding: 4rem 2rem;
      text-align: center;
    }

    blockquote {
      font-family: 'Lora', Georgia, serif;
      font-size: 1.4rem;
      font-style: italic;
      font-weight: 400;
      color: var(--rustic-walnut);
      line-height: 1.6;
      position: relative;
      padding: 0 2rem;
    }

    blockquote::before {
      content: '\201C';
      font-size: 4rem;
      color: var(--rustic-sandstone);
      position: absolute;
      top: -1.5rem;
      left: -0.5rem;
      line-height: 1;
    }

    .quote-attribution {
      font-family: 'Cabin', sans-serif;
      font-size: 0.82rem;
      font-weight: 600;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--rustic-text-muted);
      margin-top: 1.5rem;
    }

    /* ===================== */
    /* FOOTER                */
    /* ===================== */
    footer {
      background: var(--rustic-iron);
      border-top: 3px solid var(--rustic-walnut);
      color: var(--rustic-concrete);
      padding: 3rem 2rem;
      text-align: center;
    }

    footer .footer-brand {
      font-family: 'Lora', Georgia, serif;
      font-size: 1.1rem;
      font-weight: 700;
      color: var(--rustic-cream);
      margin-bottom: 0.5rem;
    }

    footer p {
      font-size: 0.85rem;
      color: var(--rustic-concrete);
      margin: 0 auto;
    }

    footer a {
      color: var(--rustic-sandstone);
      text-decoration: none;
      transition: color 0.25s ease;
    }

    footer a:hover {
      color: var(--rustic-cream);
    }

    /* ===================== */
    /* RESPONSIVE            */
    /* ===================== */
    @media (max-width: 768px) {
      nav {
        flex-direction: column;
        height: auto;
        padding: 1rem;
        gap: 0.75rem;
      }

      .nav-links {
        gap: 1.25rem;
      }

      .hero {
        padding: 5rem 1.5rem 3.5rem;
      }

      .hero .btn-group {
        flex-direction: column;
        align-items: center;
      }

      .split {
        grid-template-columns: 1fr;
        gap: 2rem;
      }

      .card-grid {
        grid-template-columns: 1fr;
      }

      .materials-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }
  </style>
</head>
<body>

  <!-- Navigation -->
  <nav>
    <a href="#" class="nav-brand">Timber &amp; Steel</a>
    <ul class="nav-links">
      <li><a href="#">Home</a></li>
      <li><a href="#">Work</a></li>
      <li><a href="#">Materials</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>

  <!-- Hero Section -->
  <section class="hero">
    <span class="label">Crafted with care</span>
    <h1>Where Raw Meets Refined</h1>
    <p>
      We build at the intersection of reclaimed warmth and modern precision.
      Honest materials, clean forms, lasting quality.
    </p>
    <div class="btn-group">
      <a href="#" class="btn btn--primary">Explore Our Work</a>
      <a href="#" class="btn btn--secondary">Learn More</a>
    </div>
  </section>

  <!-- Divider -->
  <div class="divider">
    <span class="rivet"></span>
    <span class="rivet"></span>
    <span class="rivet"></span>
  </div>

  <!-- Cards Section -->
  <section class="content-section">
    <h2>What We Do</h2>
    <p class="subtitle">Honest craft meets modern clarity in every detail</p>
    <div class="card-grid">
      <div class="card">
        <div class="card-icon">&#9656;</div>
        <h3>Reclaimed Timber</h3>
        <p>
          Every board has a story. We source weathered wood from old barns,
          warehouses, and bridges, giving each piece a second life within
          modern, purpose-driven designs.
        </p>
      </div>
      <div class="card">
        <div class="card-icon">&#9670;</div>
        <h3>Steel Framework</h3>
        <p>
          Brushed and blackened steel provides the structural backbone.
          Clean lines, exposed fasteners, and honest joinery reveal the
          strength behind the surface.
        </p>
      </div>
      <div class="card">
        <div class="card-icon">&#9673;</div>
        <h3>Natural Stone</h3>
        <p>
          From rough-cut fieldstone to honed concrete counters, mineral
          surfaces anchor every space with permanence and quiet gravity.
        </p>
      </div>
    </div>
  </section>

  <!-- Split Section -->
  <section class="split">
    <div class="split__image">
      Image Placeholder
    </div>
    <div class="split__content">
      <h2>Built to Last</h2>
      <p>
        We believe the best design ages gracefully. Our approach draws from
        materials that develop character over time -- wood that patinas, steel
        that weathers, stone that smooths with wear. Each project is built
        with longevity as the first principle.
      </p>
      <p>
        Modern construction techniques meet time-tested materials. The result
        is spaces that feel both fresh and familiar, precise and warm.
      </p>
      <a href="#" class="btn btn--primary">Our Process</a>
    </div>
  </section>

  <!-- Materials Strip -->
  <section class="materials">
    <h2>Material Palette</h2>
    <div class="materials-grid">
      <div class="material-swatch">
        <div class="swatch-color" style="background: #5C4033;"></div>
        <div class="swatch-name">Walnut</div>
        <div class="swatch-hex">#5C4033</div>
      </div>
      <div class="material-swatch">
        <div class="swatch-color" style="background: #9E5A42;"></div>
        <div class="swatch-name">Brick</div>
        <div class="swatch-hex">#9E5A42</div>
      </div>
      <div class="material-swatch">
        <div class="swatch-color" style="background: #6B7B86;"></div>
        <div class="swatch-name">Steel</div>
        <div class="swatch-hex">#6B7B86</div>
      </div>
      <div class="material-swatch">
        <div class="swatch-color" style="background: #C4A882;"></div>
        <div class="swatch-name">Sandstone</div>
        <div class="swatch-hex">#C4A882</div>
      </div>
      <div class="material-swatch">
        <div class="swatch-color" style="background: #6B7F5E;"></div>
        <div class="swatch-name">Patina</div>
        <div class="swatch-hex">#6B7F5E</div>
      </div>
    </div>
  </section>

  <!-- Quote Section -->
  <section class="quote-section">
    <blockquote>
      The beauty of wood is that it tells you its own history.
      Every crack, every ring, every change in color is a chapter
      in a story that only time could write.
    </blockquote>
    <div class="quote-attribution">-- A builder's reflection</div>
  </section>

  <!-- Divider -->
  <div class="divider">
    <span class="rivet"></span>
    <span class="rivet"></span>
    <span class="rivet"></span>
  </div>

  <!-- Footer -->
  <footer>
    <div class="footer-brand">Timber &amp; Steel</div>
    <p>
      Honest materials. Clean forms. Lasting craft.<br>
      <a href="#">Contact us</a> &middot; <a href="#">Our story</a>
    </p>
  </footer>

</body>
</html>

Implementation Tips

Start with the warm cream background (#F5EDE0) and build outward; this single decision anchors the entire Rustic Modern feel and prevents the coldness of pure white
Apply wood-grain or noise textures at 2-4% opacity maximum; the goal is to break up flat digital surfaces just enough to suggest materiality without creating visual noise or reducing readability
Use the steel/iron palette sparingly for structural elements – navigation bars, dividers, borders, and icon strokes – to maintain the warm-cool tension that defines the aesthetic
Keep border-radius between 2-6px across the entire interface; tight, precise rounding suggests crafted joinery and tool-finished edges, unlike the soft, pillowy curves of friendlier aesthetics
Pair one warm accent (brick or clay) with one cool accent (steel or patina) per section to maintain material contrast without creating palette chaos
Use box-shadow that suggests resting weight, not floating elevation: short vertical offsets (2-4px), moderate blur (8-16px), and warm-tinted RGBA values rather than pure black
Test typography at natural sizes before scaling up; Lora and Source Sans 3 are designed for comfortable reading at 16-18px body size, and forcing them into extreme scales can break their proportional balance
For dark sections, invert to the walnut/iron background with cream text – avoid pure black (#000) backgrounds, which feel synthetic and disconnect from the material palette

This site is open source. Improve this page.