Agence WagnerAgence Wagner
FRENDEELS
Retour aux designs
OrganiqueMinimalisteClair
Aperçu

Organic Modern Design Reference

Overview

Organic Modern is a contemporary design aesthetic that harmonizes the clean, uncluttered lines of modern minimalism with the warmth, texture, and irregularity of the natural world. It emerged in the late 2010s as a reaction against cold, sterile minimalism and overly curated industrial interiors, drawing influence from Scandinavian functionalism, Japanese wabi-sabi philosophy, mid-century organic architecture (particularly the work of Frank Lloyd Wright and Alvar Aalto), and the broader biophilic design movement. The style prioritizes natural materials -- wood, stone, linen, clay, rattan, and wool -- and softens rigid modern geometry with curved silhouettes, organic shapes, and tactile surfaces that invite touch.

At its core, Organic Modern is about creating spaces and interfaces that feel both refined and lived-in: sophisticated enough to convey intentionality, yet warm enough to feel like a place you want to linger. Color palettes are drawn from the landscape -- warm sand, soft clay, weathered stone, dried sage, and muted terracotta -- layered with creamy whites and deep charcoals rather than harsh pure black or pure white. Typography is clean and humanist, favoring soft serifs and rounded sans-serifs over geometric or mechanical typefaces. Layouts breathe with generous whitespace, asymmetric compositions, and a preference for horizontal, grounded proportions over tall, dramatic structures.

On the web, Organic Modern translates into interfaces that combine the usability rigor of flat and minimal design with subtle textural depth, soft shadows, rounded corners, and nature-inspired imagery. It rejects ornamentation for its own sake but welcomes visual warmth through material-honest textures, muted gradients, and biophilic photography. Buttons feel smooth and tactile, cards sit gently on surfaces with barely-there shadows, and transitions are slow and deliberate rather than snappy or bouncy. The overall impression is one of quiet luxury -- a digital environment that feels handcrafted, grounded, and deeply connected to the physical world.

Visual Characteristics

Core Design Traits

  • Curved and organic silhouettes -- rounded edges, soft arcs, and flowing forms replace sharp corners and rigid rectangles; border-radius values are generous (12-24px) to evoke natural shapes
  • Natural material textures -- wood grain, linen weave, stone surfaces, and ceramic finishes appear as subtle background textures or photographic elements, grounding the digital experience in physicality
  • Warm neutral color dominance -- creamy whites, soft taupes, warm beiges, and muted clay tones form the base palette, with deeper earth tones and muted greens as accents
  • Biophilic integration -- indoor plants, botanical photography, and organic SVG illustrations create a persistent connection to nature throughout the interface
  • Tactile surfaces -- elements suggest physical texture through subtle gradients, fine noise overlays, and matte finishes rather than flat, uniform color fills
  • Asymmetric, flowing compositions -- layouts favor intentional imbalance over rigid symmetry, with off-center imagery and staggered grid placements that feel natural rather than mechanical
  • Generous negative space -- ample breathing room around elements creates a calm, uncluttered experience; whitespace is treated as an active design element, not wasted area
  • Low-contrast, grounded shadows -- box shadows are soft, warm-toned, and suggest weight rather than elevation; elements rest on surfaces rather than floating dramatically above them
  • Matte over glossy -- surfaces avoid high-shine effects, metallic gradients, or glass-like reflections in favor of muted, touchable finishes
  • Slow, deliberate motion -- transitions and animations are gentle, unhurried, and natural; ease-out curves, subtle fades, and smooth transforms replace bouncy or snappy effects
  • Imperfect details -- subtle irregularities in shapes, hand-drawn accents, or uneven textures convey authenticity and resist the sterility of machine precision

Design Principles

  • Warmth over coldness -- every design decision should move the experience toward warmth, comfort, and approachability; avoid clinical or sterile feelings
  • Material honesty -- textures and colors should reference real natural materials without artifice; if something looks like wood, it should feel like wood
  • Less but better -- embrace restraint in element count and decoration, but invest in quality, proportion, and tactile detail for what remains
  • Nature as blueprint -- curves, proportions, and color relationships found in nature guide layout, shape, and palette decisions
  • Function through beauty -- every element must serve a purpose, but that purpose is enhanced rather than compromised by aesthetic care
  • Grounded hierarchy -- visual hierarchy relies on scale, weight, and spatial proximity rather than loud colors or aggressive contrast
  • Sustainability of form -- design choices should feel timeless rather than trendy; avoid techniques that will date quickly
  • Human scale -- interfaces should feel intimate and personal, sized and spaced for comfortable human interaction rather than maximum information density

Color Palette

Organic Modern palettes are drawn directly from the natural landscape: the warm sand of a riverbed, the soft gray of weathered stone, the muted green of dried sage, the rich brown of raw clay. Colors are desaturated, warm-leaning, and tonal -- building depth through value shifts within a narrow hue range rather than through bold chromatic contrast. Avoid pure black (#000) and pure white (#FFF); substitute with deep charcoal-brown and warm off-white to maintain the organic warmth throughout.

Swatch Hex Role/Usage
#FAF6F0 #FAF6F0 Page background -- warm parchment white
#F0EBE3 #F0EBE3 Surface / card background -- soft linen
#E4DCD3 #E4DCD3 Alternate surface -- warm sand
#D4C9BD #D4C9BD Borders and dividers -- pale driftwood
#B8A99A #B8A99A Secondary text / muted elements -- river stone
#A47864 #A47864 Primary warm accent -- mocha clay
#8B6F5E #8B6F5E Warm brown -- walnut wood
#6B5445 #6B5445 Deep warm brown -- dark timber
#C2A68C #C2A68C Warm gold accent -- raw honey
#8A9A7B #8A9A7B Muted sage green -- dried herb
#6B7F5E #6B7F5E Deep sage -- forest moss
#BFA98F #BFA98F Soft terracotta -- sun-dried clay
#C4AE96 #C4AE96 Light warm tan -- sandstone
#3B332D #3B332D Primary text -- deep charcoal-brown
#5C534B #5C534B Secondary text -- warm dark gray

CSS Custom Properties

:root {
  /* Backgrounds */
  --om-bg-primary: #FAF6F0;
  --om-bg-surface: #F0EBE3;
  --om-bg-surface-alt: #E4DCD3;

  /* Neutrals */
  --om-sand: #D4C9BD;
  --om-stone: #B8A99A;
  --om-sandstone: #C4AE96;

  /* Warm browns */
  --om-clay: #A47864;
  --om-walnut: #8B6F5E;
  --om-timber: #6B5445;
  --om-honey: #C2A68C;
  --om-terracotta: #BFA98F;

  /* Greens */
  --om-sage: #8A9A7B;
  --om-moss: #6B7F5E;

  /* Text */
  --om-text-primary: #3B332D;
  --om-text-secondary: #5C534B;
  --om-text-muted: #B8A99A;

  /* Borders */
  --om-border: #D4C9BD;
  --om-border-light: #E4DCD3;

  /* Functional aliases */
  --om-accent: var(--om-clay);
  --om-accent-secondary: var(--om-sage);
  --om-heading: var(--om-timber);

  /* Radii */
  --om-radius-sm: 8px;
  --om-radius-md: 12px;
  --om-radius-lg: 20px;
  --om-radius-xl: 28px;
  --om-radius-pill: 50px;
  --om-radius-round: 50%;
}

Typography

Organic Modern typography is clean, humanist, and quietly warm. Headings use refined serifs or soft humanist sans-serifs that convey natural elegance without stiffness. Body text favors highly readable, open sans-serifs with generous x-heights and rounded terminals. The overall typographic tone is one of calm confidence -- neither cold and geometric nor overly decorative. Weight usage is restrained: light to regular for body, medium for headings, and bold used only sparingly for emphasis. Line heights are generous (1.6-1.8 for body) to create a spacious, breathable reading experience.

Font Style Usage
DM Serif Display Warm, refined serif Display headlines, hero text
Lora Humanist calligraphic serif Headlines, subheadings
Source Serif 4 Organic, warm serif Long-form body text, editorials
DM Sans Geometric humanist sans Body text, UI elements
Inter Neutral humanist sans Body text, interfaces
Outfit Soft geometric sans Headlines, navigation, labels
Nunito Rounded sans-serif Buttons, captions, friendly UI
Cormorant Garamond Elegant light serif Pull quotes, accent text
Josefin Sans Thin geometric sans Display text, uppercase labels
Caveat Casual handwritten Annotations, personal accents

Suggested Font Pairings

Heading Font Body Font Character
DM Serif Display DM Sans Warm elegance with clean readability
Lora Inter Classic organic warmth, modern body
Outfit Source Serif 4 Soft modern headings, rich readable body
Josefin Sans Nunito Airy minimal headings, friendly body text
Cormorant Garamond DM Sans Refined editorial display, clean UI body

Typography CSS Example

/* Import from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=DM+Sans:wght@300;400;500&family=Lora:ital,wght@0,400;0,500;1,400&family=Outfit:wght@300;400;500&family=Nunito:wght@400;600&display=swap');

/* Headings -- warm, organic serif */
h1, h2, h3 {
  font-family: 'DM Serif Display', 'Lora', Georgia, serif;
  color: var(--om-heading);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

h1 {
  font-size: clamp(2.5rem, 5vw, 4rem);
  line-height: 1.15;
}

h2 {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
}

h3 {
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  font-family: 'Outfit', 'DM Sans', sans-serif;
  font-weight: 500;
  letter-spacing: 0.01em;
}

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

/* Uppercase labels */
.label-organic {
  font-family: 'Outfit', 'DM Sans', sans-serif;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--om-text-muted);
}

/* Pull quote / accent text */
.organic-quote {
  font-family: 'Lora', 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 1.3rem;
  line-height: 1.6;
  color: var(--om-walnut);
}

Layout Principles

  • Generous breathing room -- use ample padding (4-8rem between major sections) and wide margins; content should feel spaciously arranged, like objects in a curated showroom
  • Grounded, horizontal compositions -- favor wide, calm layouts with landscape-oriented imagery and moderate section heights; avoid tall, dramatic hero sections that feel imposing rather than inviting
  • Asymmetric balance -- offset text and images in a natural, unhurried way; a 60/40 or 55/45 split feels more organic than rigid 50/50 symmetry
  • Moderate content width -- constrain text to 700-900px for readability; grid layouts can extend to 1100-1200px but should never stretch to full viewport width
  • Single-focus sections -- each scroll section should convey one primary idea, image, or message; avoid combining competing elements
  • Organic grid with soft structure -- grids should feel flexible rather than rigid; consider staggered card layouts, masonry grids, or overlapping elements that break strict row alignment
  • Rounded containers throughout -- cards, images, buttons, and input fields all use generous border-radius to maintain the soft, curved vocabulary
  • Nature-integrated imagery -- large, high-quality photography of natural materials, landscapes, or botanicals serves as both decoration and structural content
  • Subtle section transitions -- use soft gradients, gentle background color shifts, or organic SVG wave dividers between sections rather than hard lines
  • Vertical rhythm through scale -- establish hierarchy through element size and spacing rather than aggressive color contrast or decorative borders
  • Responsive flow -- on narrow screens, content naturally collapses to single-column; maintain generous padding and let images scale gracefully

CSS / Design Techniques

Card Component

/* Organic Modern card -- soft, grounded, tactile */
.om-card {
  background: var(--om-bg-surface);
  border: 1px solid var(--om-border-light);
  border-radius: var(--om-radius-lg);
  padding: 2rem;
  box-shadow:
    0 1px 3px rgba(59, 51, 45, 0.04),
    0 4px 16px rgba(59, 51, 45, 0.03);
  transition: box-shadow 0.4s ease, transform 0.4s ease;
}

.om-card:hover {
  box-shadow:
    0 2px 6px rgba(59, 51, 45, 0.06),
    0 8px 24px rgba(59, 51, 45, 0.05);
  transform: translateY(-2px);
}

/* Card with organic accent border */
.om-card--accent {
  border-left: 3px solid var(--om-clay);
  border-radius: 4px var(--om-radius-lg) var(--om-radius-lg) 4px;
}

/* Card with image -- rounded image top */
.om-card img {
  width: 100%;
  border-radius: var(--om-radius-md) var(--om-radius-md) 0 0;
  margin: -2rem -2rem 1.5rem -2rem;
  width: calc(100% + 4rem);
  object-fit: cover;
}

Button Styles

/* Primary button -- warm, tactile, rounded */
.om-btn {
  font-family: 'Outfit', 'DM Sans', sans-serif;
  font-weight: 500;
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  padding: 0.8rem 2rem;
  border: none;
  border-radius: var(--om-radius-pill);
  cursor: pointer;
  transition: all 0.35s ease;
}

.om-btn--primary {
  background: var(--om-timber);
  color: var(--om-bg-primary);
}

.om-btn--primary:hover {
  background: var(--om-clay);
  box-shadow: 0 4px 16px rgba(107, 84, 69, 0.2);
  transform: translateY(-1px);
}

/* Secondary button -- soft outline */
.om-btn--secondary {
  background: transparent;
  color: var(--om-timber);
  border: 1.5px solid var(--om-border);
}

.om-btn--secondary:hover {
  border-color: var(--om-clay);
  background: rgba(164, 120, 100, 0.06);
  color: var(--om-clay);
}

/* Subtle text button */
.om-btn--ghost {
  background: transparent;
  color: var(--om-clay);
  border: none;
  padding: 0.6rem 1rem;
  text-decoration: underline;
  text-decoration-color: var(--om-border);
  text-underline-offset: 4px;
}

.om-btn--ghost:hover {
  text-decoration-color: var(--om-clay);
}

/* Organic Modern navigation -- warm, understated, grounded */
.om-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 2.5rem;
  background: var(--om-bg-primary);
  border-bottom: 1px solid var(--om-border-light);
  font-family: 'Outfit', 'DM Sans', sans-serif;
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(12px);
  background: rgba(250, 246, 240, 0.9);
}

.om-nav__brand {
  font-family: 'DM Serif Display', serif;
  font-size: 1.4rem;
  color: var(--om-heading);
  text-decoration: none;
}

.om-nav__links {
  display: flex;
  gap: 2rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.om-nav__links a {
  color: var(--om-text-secondary);
  text-decoration: none;
  font-weight: 400;
  font-size: 0.9rem;
  letter-spacing: 0.03em;
  transition: color 0.3s ease;
  position: relative;
}

.om-nav__links a:hover {
  color: var(--om-clay);
}

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

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

Hero Section

/* Organic Modern hero -- calm, spacious, nature-grounded */
.om-hero {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  min-height: 70vh;
  padding: 6rem 2rem;
  text-align: center;
  position: relative;
  overflow: hidden;
  background: linear-gradient(
    170deg,
    var(--om-bg-primary) 0%,
    var(--om-bg-surface) 50%,
    rgba(138, 154, 123, 0.06) 100%
  );
}

/* Decorative organic blob */
.om-hero::before {
  content: '';
  position: absolute;
  width: 600px;
  height: 600px;
  border-radius: 47% 53% 61% 39% / 45% 51% 49% 55%;
  background: radial-gradient(
    ellipse at 30% 40%,
    rgba(164, 120, 100, 0.06) 0%,
    rgba(164, 120, 100, 0.02) 50%,
    transparent 70%
  );
  top: -150px;
  right: -100px;
  pointer-events: none;
  animation: organic-float 20s ease-in-out infinite;
}

.om-hero::after {
  content: '';
  position: absolute;
  width: 400px;
  height: 400px;
  border-radius: 53% 47% 39% 61% / 55% 45% 55% 45%;
  background: radial-gradient(
    ellipse at 60% 50%,
    rgba(138, 154, 123, 0.05) 0%,
    transparent 60%
  );
  bottom: -100px;
  left: -80px;
  pointer-events: none;
  animation: organic-float 25s ease-in-out infinite reverse;
}

@keyframes organic-float {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  33% { transform: translate(10px, -10px) rotate(2deg); }
  66% { transform: translate(-5px, 5px) rotate(-1deg); }
}

.om-hero h1 {
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  color: var(--om-heading);
  margin-bottom: 1.25rem;
  position: relative;
  z-index: 1;
}

.om-hero p {
  font-size: 1.15rem;
  color: var(--om-text-secondary);
  max-width: 540px;
  margin: 0 auto 2rem;
  position: relative;
  z-index: 1;
}

Organic Texture Overlay

/* Subtle linen texture for backgrounds */
.om-linen-texture {
  position: relative;
}

.om-linen-texture::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.02;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Crect width='1' height='1' x='0' y='0' fill='%235C534B' opacity='0.5'/%3E%3Crect width='1' height='1' x='4' y='4' fill='%235C534B' opacity='0.3'/%3E%3Crect width='1' height='1' x='2' y='6' fill='%235C534B' opacity='0.4'/%3E%3Crect width='1' height='1' x='6' y='2' fill='%235C534B' opacity='0.2'/%3E%3C/svg%3E");
  background-size: 8px 8px;
  pointer-events: none;
  border-radius: inherit;
}

Organic Shape Divider

/* Wavy SVG section divider */
.om-wave-divider {
  width: 100%;
  height: 60px;
  overflow: hidden;
  position: relative;
}

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

/* Simple CSS organic divider */
.om-organic-divider {
  border: none;
  height: auto;
  text-align: center;
  margin: 4rem auto;
}

.om-organic-divider::before {
  content: '';
  display: inline-block;
  width: 80px;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--om-sand) 30%,
    var(--om-clay) 50%,
    var(--om-sand) 70%,
    transparent 100%
  );
  border-radius: 2px;
}

Warm Gradient Backgrounds

/* Sunrise warmth -- default organic modern atmosphere */
.om-gradient-sunrise {
  background: linear-gradient(
    170deg,
    #FAF6F0 0%,
    #F0EBE3 40%,
    rgba(191, 169, 143, 0.12) 100%
  );
}

/* Forest breath -- subtle sage undertone */
.om-gradient-forest {
  background: linear-gradient(
    175deg,
    #FAF6F0 0%,
    rgba(138, 154, 123, 0.06) 50%,
    #F0EBE3 100%
  );
}

/* Clay earth -- warm grounded footer/section */
.om-gradient-earth {
  background: linear-gradient(
    180deg,
    #F0EBE3 0%,
    #E4DCD3 60%,
    rgba(164, 120, 100, 0.1) 100%
  );
}

Input Fields

/* Organic Modern form inputs */
.om-input {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.95rem;
  padding: 0.85rem 1.25rem;
  border: 1.5px solid var(--om-border);
  border-radius: var(--om-radius-md);
  background: var(--om-bg-primary);
  color: var(--om-text-primary);
  transition: all 0.3s ease;
  width: 100%;
}

.om-input:focus {
  outline: none;
  border-color: var(--om-clay);
  background: #FFFFFF;
  box-shadow: 0 0 0 4px rgba(164, 120, 100, 0.08);
}

.om-input::placeholder {
  color: var(--om-stone);
  letter-spacing: 0.02em;
}

/* Textarea with organic feel */
.om-textarea {
  min-height: 120px;
  resize: vertical;
  border-radius: var(--om-radius-lg);
}

Design Do's and Don'ts

Do's

  • Do use warm neutrals as your dominant palette -- creams, beiges, taupes, and warm grays should account for 70-80% of your color usage; let earthy accents do the rest
  • Do incorporate generous border-radius -- rounded corners on cards (16-24px), buttons (pill shapes or 12px+), and images soften the interface and reinforce the organic vocabulary
  • Do include natural photography -- high-quality images of wood textures, stone surfaces, botanical elements, linen fabrics, and natural landscapes ground the design in the physical world
  • Do favor asymmetric layouts -- offset content, staggered grids, and intentional imbalance feel more natural and alive than rigid, mirrored compositions
  • Do keep typography restrained -- use light to medium weights, generous line heights, and limit yourself to two font families; let the type breathe
  • Do add subtle texture -- fine noise overlays, linen-weave patterns, or barely-visible grain give surfaces a tactile quality that flat color alone cannot achieve
  • Do design with generous whitespace -- give every element room to exist; whitespace is the equivalent of sunlight in a room
  • Do use slow, gentle transitions -- ease-out curves with 300-500ms durations feel natural and calming

Don'ts

  • Don't use pure black or pure white -- substitute with deep charcoal-brown (#3B332D) and warm off-white (#FAF6F0) to maintain warmth throughout
  • Don't apply hard, dramatic shadows -- avoid deep, dark box shadows or neon-colored glows; shadows should be soft, warm-toned, and barely noticeable
  • Don't use sharp corners or rigid geometry -- square corners, harsh divider lines, and pixel-perfect geometric patterns break the organic feeling
  • Don't overcrowd the layout -- visual clutter and dense information architecture contradict the calm, spacious ethos of Organic Modern
  • Don't use neon, vibrant, or saturated accent colors -- bright blues, electric greens, or hot pinks will clash with the muted natural palette
  • Don't rely on glossy or metallic effects -- glass-like reflections, chrome gradients, and high-shine surfaces belong to other aesthetics entirely
  • Don't use snappy, bouncy animations -- elastic easing, spring physics, and fast transitions feel jarring in this context
  • Don't ignore mobile spacing -- on smaller screens, maintain proportional padding and avoid cramming elements together; the breathing room is non-negotiable
Aesthetic Relationship to Organic Modern
Japandi Closest sibling; shares warm neutrals, natural materials, and minimalism, but Japandi leans more toward Japanese-Scandinavian cultural fusion and wabi-sabi imperfection
Earth Tones Shares the warm brown/beige/green palette but Earth Tones is more retro (1970s), bolder, and uses supergraphic shapes
Hygge Overlapping warmth and comfort; Hygge is cozier and more textile-focused, while Organic Modern is cleaner and more architectural
Scandinavian Design The modern, functional foundation that Organic Modern softens with natural warmth and curved forms
Wabi-Sabi Philosophical ancestor; Organic Modern adopts the embrace of imperfection and natural materials but applies them in a more refined, contemporary framework
Biophilic Design Shares the commitment to nature integration; Biophilic is a broader architectural movement while Organic Modern is a specific visual aesthetic
Minimalism Organic Modern's structural skeleton; pure Minimalism is colder and more austere, while Organic Modern adds warmth and texture
Cottagecore Both celebrate natural materials and warmth, but Cottagecore is nostalgic, rural, and maximalist where Organic Modern is contemporary and restrained
Coastal Style Shares the calm, light, natural palette; Coastal is more blue/white and beach-specific, while Organic Modern is landlocked and earth-focused
Craftcore Overlapping appreciation for handmade textures and material honesty; Craftcore is more visibly artisanal and rustic
Mid-Century Modern Organic Modern borrows the organic furniture forms and clean lines of MCM but replaces its bold color confidence with warmer, more muted tones

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>Organic Modern</title>
  <link href="https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=DM+Sans:wght@300;400;500&family=Outfit:wght@300;400;500&family=Lora:ital,wght@0,400;1,400&display=swap" rel="stylesheet">
  <style>
    /* ============================================
       ORGANIC MODERN -- Quick-Start Template
       ============================================ */

    :root {
      /* Backgrounds */
      --om-bg-primary: #FAF6F0;
      --om-bg-surface: #F0EBE3;
      --om-bg-surface-alt: #E4DCD3;

      /* Neutrals */
      --om-sand: #D4C9BD;
      --om-stone: #B8A99A;
      --om-sandstone: #C4AE96;

      /* Warm browns */
      --om-clay: #A47864;
      --om-walnut: #8B6F5E;
      --om-timber: #6B5445;
      --om-honey: #C2A68C;
      --om-terracotta: #BFA98F;

      /* Greens */
      --om-sage: #8A9A7B;
      --om-moss: #6B7F5E;

      /* Text */
      --om-text-primary: #3B332D;
      --om-text-secondary: #5C534B;
      --om-text-muted: #B8A99A;

      /* Borders */
      --om-border: #D4C9BD;
      --om-border-light: #E4DCD3;

      /* Aliases */
      --om-accent: var(--om-clay);
      --om-heading: var(--om-timber);

      /* Radii */
      --om-radius-sm: 8px;
      --om-radius-md: 12px;
      --om-radius-lg: 20px;
      --om-radius-xl: 28px;
      --om-radius-pill: 50px;
    }

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

    /* ---- Base ---- */
    html {
      scroll-behavior: smooth;
    }

    body {
      font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
      font-weight: 400;
      font-size: 1rem;
      line-height: 1.75;
      color: var(--om-text-primary);
      background: var(--om-bg-primary);
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    h1, h2, h3 {
      font-family: 'DM Serif Display', 'Lora', Georgia, serif;
      font-weight: 400;
      color: var(--om-heading);
      line-height: 1.2;
    }

    h1 { font-size: clamp(2.5rem, 5vw, 4rem); }
    h2 { font-size: clamp(1.75rem, 3.5vw, 2.5rem); margin-bottom: 1rem; }
    h3 { font-size: 1.25rem; font-family: 'Outfit', sans-serif; font-weight: 500; }

    p {
      max-width: 38em;
      margin-bottom: 1.5em;
      color: var(--om-text-secondary);
    }

    a {
      color: var(--om-clay);
      text-decoration: underline;
      text-decoration-color: var(--om-sand);
      text-underline-offset: 3px;
      transition: color 0.3s ease, text-decoration-color 0.3s ease;
    }

    a:hover {
      color: var(--om-timber);
      text-decoration-color: var(--om-clay);
    }

    img {
      max-width: 100%;
      height: auto;
      display: block;
    }

    /* ---- Navigation ---- */
    .nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 1.25rem 2.5rem;
      background: rgba(250, 246, 240, 0.92);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border-bottom: 1px solid var(--om-border-light);
      position: sticky;
      top: 0;
      z-index: 100;
    }

    .nav__brand {
      font-family: 'DM Serif Display', serif;
      font-size: 1.4rem;
      color: var(--om-heading);
      text-decoration: none;
    }

    .nav__links {
      display: flex;
      gap: 2rem;
      list-style: none;
    }

    .nav__links a {
      color: var(--om-text-secondary);
      text-decoration: none;
      font-family: 'Outfit', sans-serif;
      font-size: 0.9rem;
      font-weight: 400;
      letter-spacing: 0.03em;
      transition: color 0.3s ease;
    }

    .nav__links a:hover {
      color: var(--om-clay);
    }

    /* ---- Hero Section ---- */
    .hero {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      text-align: center;
      min-height: 75vh;
      padding: 6rem 2rem;
      position: relative;
      overflow: hidden;
      background: linear-gradient(
        170deg,
        var(--om-bg-primary) 0%,
        var(--om-bg-surface) 50%,
        rgba(138, 154, 123, 0.05) 100%
      );
    }

    /* Decorative organic blobs */
    .hero::before {
      content: '';
      position: absolute;
      width: 550px;
      height: 550px;
      border-radius: 47% 53% 61% 39% / 45% 51% 49% 55%;
      background: radial-gradient(
        ellipse at 30% 40%,
        rgba(164, 120, 100, 0.06) 0%,
        rgba(164, 120, 100, 0.02) 50%,
        transparent 70%
      );
      top: -120px;
      right: -80px;
      pointer-events: none;
      animation: blob-drift 22s ease-in-out infinite;
    }

    .hero::after {
      content: '';
      position: absolute;
      width: 400px;
      height: 400px;
      border-radius: 53% 47% 39% 61% / 55% 45% 55% 45%;
      background: radial-gradient(
        ellipse at 60% 50%,
        rgba(138, 154, 123, 0.05) 0%,
        transparent 60%
      );
      bottom: -80px;
      left: -60px;
      pointer-events: none;
      animation: blob-drift 28s ease-in-out infinite reverse;
    }

    @keyframes blob-drift {
      0%, 100% { transform: translate(0, 0) rotate(0deg); }
      33% { transform: translate(12px, -8px) rotate(2deg); }
      66% { transform: translate(-6px, 6px) rotate(-1deg); }
    }

    .hero h1 {
      margin-bottom: 1.25rem;
      position: relative;
      z-index: 1;
    }

    .hero p {
      font-size: 1.15rem;
      max-width: 520px;
      margin: 0 auto 2.5rem;
      position: relative;
      z-index: 1;
    }

    .hero__label {
      font-family: 'Outfit', sans-serif;
      font-size: 0.75rem;
      font-weight: 500;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--om-text-muted);
      margin-bottom: 1.5rem;
      position: relative;
      z-index: 1;
    }

    .hero__actions {
      display: flex;
      gap: 1rem;
      position: relative;
      z-index: 1;
    }

    /* ---- Buttons ---- */
    .btn {
      font-family: 'Outfit', sans-serif;
      font-weight: 500;
      font-size: 0.9rem;
      letter-spacing: 0.04em;
      padding: 0.8rem 2rem;
      border: none;
      border-radius: var(--om-radius-pill);
      cursor: pointer;
      transition: all 0.35s ease;
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
    }

    .btn--primary {
      background: var(--om-timber);
      color: var(--om-bg-primary);
    }

    .btn--primary:hover {
      background: var(--om-clay);
      box-shadow: 0 4px 16px rgba(107, 84, 69, 0.2);
      transform: translateY(-1px);
    }

    .btn--secondary {
      background: transparent;
      color: var(--om-timber);
      border: 1.5px solid var(--om-border);
    }

    .btn--secondary:hover {
      border-color: var(--om-clay);
      background: rgba(164, 120, 100, 0.06);
      color: var(--om-clay);
    }

    /* ---- Section ---- */
    .section {
      max-width: 1100px;
      margin: 0 auto;
      padding: 5rem 2rem;
    }

    .section--narrow {
      max-width: 800px;
    }

    .section__label {
      font-family: 'Outfit', sans-serif;
      font-size: 0.75rem;
      font-weight: 500;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--om-text-muted);
      margin-bottom: 0.75rem;
    }

    .section__header {
      margin-bottom: 3rem;
    }

    /* ---- Organic Divider ---- */
    .divider {
      border: none;
      text-align: center;
      margin: 0;
      padding: 2rem 0;
    }

    .divider::before {
      content: '';
      display: inline-block;
      width: 80px;
      height: 2px;
      background: linear-gradient(
        90deg,
        transparent 0%,
        var(--om-sand) 30%,
        var(--om-clay) 50%,
        var(--om-sand) 70%,
        transparent 100%
      );
      border-radius: 2px;
    }

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

    .card {
      background: var(--om-bg-surface);
      border: 1px solid var(--om-border-light);
      border-radius: var(--om-radius-lg);
      padding: 2rem;
      box-shadow:
        0 1px 3px rgba(59, 51, 45, 0.04),
        0 4px 16px rgba(59, 51, 45, 0.03);
      transition: box-shadow 0.4s ease, transform 0.4s ease;
    }

    .card:hover {
      box-shadow:
        0 2px 6px rgba(59, 51, 45, 0.06),
        0 8px 24px rgba(59, 51, 45, 0.05);
      transform: translateY(-2px);
    }

    .card__icon {
      width: 48px;
      height: 48px;
      border-radius: var(--om-radius-md);
      background: var(--om-bg-surface-alt);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.4rem;
      margin-bottom: 1.25rem;
      color: var(--om-clay);
    }

    .card h3 {
      margin-bottom: 0.75rem;
      color: var(--om-timber);
    }

    .card p {
      font-size: 0.95rem;
      margin-bottom: 0;
      color: var(--om-text-secondary);
    }

    /* ---- Split Section (Asymmetric) ---- */
    .split {
      display: grid;
      grid-template-columns: 1fr 1.2fr;
      gap: 4rem;
      align-items: center;
      max-width: 1100px;
      margin: 0 auto;
      padding: 5rem 2rem;
    }

    .split--reverse {
      grid-template-columns: 1.2fr 1fr;
    }

    .split__image {
      border-radius: var(--om-radius-xl);
      overflow: hidden;
      background: var(--om-bg-surface-alt);
      aspect-ratio: 4 / 3;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--om-stone);
      font-family: 'Outfit', sans-serif;
      font-size: 0.85rem;
      letter-spacing: 0.06em;
    }

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

    /* ---- Testimonial / Quote ---- */
    .quote-section {
      background: var(--om-bg-surface);
      padding: 5rem 2rem;
      text-align: center;
    }

    .quote {
      font-family: 'Lora', Georgia, serif;
      font-style: italic;
      font-size: clamp(1.2rem, 2.5vw, 1.6rem);
      line-height: 1.7;
      color: var(--om-walnut);
      max-width: 640px;
      margin: 0 auto 1.5rem;
    }

    .quote-author {
      font-family: 'Outfit', sans-serif;
      font-size: 0.8rem;
      font-weight: 500;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--om-text-muted);
    }

    /* ---- Contact / Form Section ---- */
    .form-section {
      max-width: 600px;
      margin: 0 auto;
      padding: 5rem 2rem;
      text-align: center;
    }

    .form-section form {
      display: flex;
      flex-direction: column;
      gap: 1.25rem;
      margin-top: 2rem;
      text-align: left;
    }

    .form-section label {
      font-family: 'Outfit', sans-serif;
      font-size: 0.8rem;
      font-weight: 500;
      letter-spacing: 0.06em;
      color: var(--om-text-secondary);
      margin-bottom: 0.25rem;
      display: block;
    }

    .form-section input,
    .form-section textarea {
      font-family: 'DM Sans', sans-serif;
      font-size: 0.95rem;
      padding: 0.85rem 1.25rem;
      border: 1.5px solid var(--om-border);
      border-radius: var(--om-radius-md);
      background: var(--om-bg-primary);
      color: var(--om-text-primary);
      transition: all 0.3s ease;
      width: 100%;
    }

    .form-section input:focus,
    .form-section textarea:focus {
      outline: none;
      border-color: var(--om-clay);
      box-shadow: 0 0 0 4px rgba(164, 120, 100, 0.08);
    }

    .form-section input::placeholder,
    .form-section textarea::placeholder {
      color: var(--om-stone);
    }

    .form-section textarea {
      min-height: 120px;
      resize: vertical;
      border-radius: var(--om-radius-lg);
    }

    .form-section button {
      align-self: flex-start;
    }

    /* ---- Footer ---- */
    .footer {
      background: var(--om-bg-surface);
      border-top: 1px solid var(--om-border-light);
      padding: 3rem 2rem;
      text-align: center;
    }

    .footer__inner {
      max-width: 1100px;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .footer__brand {
      font-family: 'DM Serif Display', serif;
      font-size: 1.2rem;
      color: var(--om-heading);
    }

    .footer__links {
      display: flex;
      gap: 1.5rem;
      list-style: none;
    }

    .footer__links a {
      color: var(--om-text-muted);
      text-decoration: none;
      font-family: 'Outfit', sans-serif;
      font-size: 0.85rem;
      transition: color 0.3s ease;
    }

    .footer__links a:hover {
      color: var(--om-clay);
    }

    .footer__copy {
      font-size: 0.8rem;
      color: var(--om-text-muted);
      margin-top: 2rem;
    }

    /* ---- Linen Texture Overlay ---- */
    .linen-bg {
      position: relative;
    }

    .linen-bg::after {
      content: '';
      position: absolute;
      inset: 0;
      opacity: 0.02;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Crect width='1' height='1' x='0' y='0' fill='%235C534B' opacity='0.5'/%3E%3Crect width='1' height='1' x='4' y='4' fill='%235C534B' opacity='0.3'/%3E%3Crect width='1' height='1' x='2' y='6' fill='%235C534B' opacity='0.4'/%3E%3Crect width='1' height='1' x='6' y='2' fill='%235C534B' opacity='0.2'/%3E%3C/svg%3E");
      background-size: 8px 8px;
      pointer-events: none;
    }

    /* ---- Responsive ---- */
    @media (max-width: 768px) {
      .nav {
        padding: 1rem 1.5rem;
      }

      .nav__links {
        gap: 1.25rem;
      }

      .nav__links a {
        font-size: 0.8rem;
      }

      .hero {
        min-height: 60vh;
        padding: 4rem 1.5rem;
      }

      .hero__actions {
        flex-direction: column;
        align-items: center;
      }

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

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

      .split__image {
        order: -1;
      }

      .footer__inner {
        flex-direction: column;
        gap: 1.5rem;
      }
    }
  </style>
</head>
<body>

  <!-- ====== Navigation ====== -->
  <nav class="nav">
    <a href="#" class="nav__brand">Terraverde</a>
    <ul class="nav__links">
      <li><a href="#about">About</a></li>
      <li><a href="#features">Features</a></li>
      <li><a href="#philosophy">Philosophy</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
  </nav>

  <!-- ====== Hero ====== -->
  <section class="hero linen-bg">
    <span class="hero__label">Organic Modern Living</span>
    <h1>Rooted in Nature,<br>Refined by Design</h1>
    <p>
      We create spaces where clean modern lines meet the warmth of
      natural materials -- wood, stone, linen, and light working
      in quiet harmony.
    </p>
    <div class="hero__actions">
      <a href="#features" class="btn btn--primary">Explore</a>
      <a href="#contact" class="btn btn--secondary">Get in Touch</a>
    </div>
  </section>

  <!-- ====== Divider ====== -->
  <hr class="divider">

  <!-- ====== About / Split ====== -->
  <div class="split" id="about">
    <div class="split__image">
      [ Natural wood + stone photograph ]
    </div>
    <div class="split__content">
      <span class="section__label">Our Approach</span>
      <h2>Design That Breathes</h2>
      <p>
        Organic Modern is born from the belief that beautiful spaces
        do not need to choose between warmth and sophistication. We
        pair the clarity of minimalist architecture with the tactile
        richness of natural materials -- raw timber, hand-thrown
        ceramics, woven linen, and living greenery.
      </p>
      <p>
        Every curve is intentional. Every texture is honest. The
        result is an environment that feels both curated and
        effortlessly inviting.
      </p>
    </div>
  </div>

  <!-- ====== Features / Cards ====== -->
  <section class="section" id="features">
    <div class="section__header">
      <span class="section__label">What Defines Us</span>
      <h2>Core Principles</h2>
    </div>
    <div class="card-grid">
      <div class="card">
        <div class="card__icon">&#9675;</div>
        <h3>Organic Forms</h3>
        <p>
          Curved silhouettes and flowing shapes replace rigid geometry,
          creating spaces that mirror the gentle irregularity of nature.
        </p>
      </div>
      <div class="card">
        <div class="card__icon">&#9652;</div>
        <h3>Natural Materials</h3>
        <p>
          Wood, stone, clay, and linen are celebrated in their honest
          state -- unvarnished, tactile, and beautifully imperfect.
        </p>
      </div>
      <div class="card">
        <div class="card__icon">&#10023;</div>
        <h3>Warm Minimalism</h3>
        <p>
          A restrained palette of warm neutrals creates calm without
          coldness. Every element earns its place through purpose and craft.
        </p>
      </div>
      <div class="card">
        <div class="card__icon">&#9702;</div>
        <h3>Biophilic Connection</h3>
        <p>
          Indoor plants, natural light, and earth-toned palettes create
          a persistent connection to the living world beyond the walls.
        </p>
      </div>
      <div class="card">
        <div class="card__icon">&#8942;</div>
        <h3>Tactile Surfaces</h3>
        <p>
          Textures you want to touch -- handwoven fabrics, rough-hewn
          stone, soft matte ceramics -- bring depth and sensory richness.
        </p>
      </div>
      <div class="card">
        <div class="card__icon">&#9711;</div>
        <h3>Quiet Luxury</h3>
        <p>
          Sophistication expressed through quality materials and careful
          proportions rather than ornamentation or visible branding.
        </p>
      </div>
    </div>
  </section>

  <!-- ====== Quote ====== -->
  <section class="quote-section">
    <p class="quote">
      "The best designs are the ones you feel before you see --
      spaces that settle you, surfaces that invite your hand,
      light that warms without glare."
    </p>
    <span class="quote-author">Design Philosophy</span>
  </section>

  <!-- ====== Split Reverse ====== -->
  <div class="split split--reverse" id="philosophy">
    <div class="split__content">
      <span class="section__label">Philosophy</span>
      <h2>Less, but Warmer</h2>
      <p>
        We believe minimalism should not mean austerity. By layering
        natural textures, softening geometric lines with curves, and
        grounding every surface in an earthy palette, we create spaces
        that are both uncluttered and deeply comforting.
      </p>
      <a href="#contact" class="btn btn--secondary">Learn More</a>
    </div>
    <div class="split__image">
      [ Ceramic vessels + dried botanicals ]
    </div>
  </div>

  <!-- ====== Divider ====== -->
  <hr class="divider">

  <!-- ====== Contact Form ====== -->
  <section class="form-section" id="contact">
    <span class="section__label">Say Hello</span>
    <h2>Get in Touch</h2>
    <p style="margin: 0 auto;">
      Interested in bringing organic warmth to your next project?
      We would love to hear from you.
    </p>
    <form>
      <div>
        <label for="name">Name</label>
        <input type="text" id="name" placeholder="Your name">
      </div>
      <div>
        <label for="email">Email</label>
        <input type="email" id="email" placeholder="you@example.com">
      </div>
      <div>
        <label for="message">Message</label>
        <textarea id="message" placeholder="Tell us about your project..."></textarea>
      </div>
      <button type="submit" class="btn btn--primary">Send Message</button>
    </form>
  </section>

  <!-- ====== Footer ====== -->
  <footer class="footer">
    <div class="footer__inner">
      <span class="footer__brand">Terraverde</span>
      <ul class="footer__links">
        <li><a href="#about">About</a></li>
        <li><a href="#features">Features</a></li>
        <li><a href="#philosophy">Philosophy</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </div>
    <p class="footer__copy">Handcrafted with natural intention.</p>
  </footer>

</body>
</html>

Implementation Tips

  • Start with the warm neutral base -- set background: #FAF6F0 on body and color: #3B332D for text before adding any other styling; this single step immediately establishes the Organic Modern atmosphere
  • Use CSS custom properties consistently -- define your entire palette as CSS variables (the --om- tokens above) so that tweaking warmth, saturation, or accent colors propagates globally without searching through individual rules
  • Layer subtle textures with pseudo-elements -- use ::after overlays with fine SVG noise patterns at very low opacity (0.02-0.04) to give flat surfaces a tactile, material quality without impacting load times
  • Test border-radius proportionally -- larger elements (hero sections, full-width images) can handle 24-32px radius, while smaller elements (buttons, tags) look best at 8-12px or pill-shaped; avoid a single radius value everywhere
  • Prefer ease-out transitions at 300-400ms -- this timing curve feels natural and unhurried; faster durations feel snappy and mechanical, which breaks the organic calm
  • Use clamp() for responsive typography -- expressions like font-size: clamp(2rem, 4vw, 3.5rem) ensure headings scale gracefully between mobile and desktop without jarring breakpoint jumps
  • Incorporate real photography early -- Organic Modern relies heavily on natural imagery (wood grain, stone, botanicals, linen) for emotional impact; placeholder boxes cannot convey the warmth this aesthetic requires
  • Audit for pure black/white -- search your CSS for #000, #fff, #000000, and #ffffff and replace them with the charcoal-brown and warm off-white equivalents; even small amounts of pure black or white can feel cold and break the cohesion
← Retour aux designs
Agence WagnerAgence Wagner

© 2026 Agence Wagner. Tous droits réservés.

Designs issus de chrislemke/website_designs, sous licence MIT.