Agence WagnerAgence Wagner
FRENDEELS
Zurück zu den Designs
MinimalisteGéométriqueMonochrome
Vorschau

Monoline Illustration Design Reference

Overview

Monoline Illustration is a design aesthetic built on one foundational constraint: every line in a composition shares the same stroke weight. There are no thick-to-thin transitions, no tapered calligraphic strokes, no variable pressure marks. Instead, a single, consistent line width defines every contour, detail, and decorative element across the entire piece. This deliberate limitation produces artwork that feels simultaneously precise and effortless, balancing geometric rigor with organic fluidity.

The technique has its roots in early twentieth-century modernist principles, when designers and typographers began exploring how stripped-down, uniform-weight linework could communicate form with maximum clarity. Technical pens, ruling pens, and later Rapidograph instruments made constant-weight lines a practical reality, and the resulting aesthetic became a hallmark of mid-century branding, signage, and architectural illustration. With the rise of vector-based digital tools such as Adobe Illustrator and Figma, monoline illustration has evolved into one of the most versatile and scalable approaches in contemporary graphic design.

What sets monoline apart from other line-based styles is its relationship with negative space and geometric construction. Because the line itself cannot vary in weight to suggest depth, shadow, or emphasis, the designer must rely instead on the interplay between drawn and undrawn space, on the careful arrangement of curves and angles, and on the strategic use of continuous or near-continuous paths. Many monoline compositions use a single unbroken line to form an entire illustration, creating a visual puzzle that rewards close inspection. Others use discrete strokes of identical weight to build up complex scenes that remain readable at any scale.

The style is widely employed across logo design, icon systems, editorial illustration, packaging, branding, wayfinding, and web interfaces. Its inherent scalability means that a monoline icon renders just as crisply on a 16-pixel favicon as on a billboard. The aesthetic aligns naturally with minimalism and flat design, yet it also draws on the ornamental intricacy of Art Deco and the narrative clarity of Ligne Claire comics. It can be warm and hand-drawn or cold and geometric, depending on how curves are handled and whether the line remains strictly mechanical or takes on a more organic, sketched character.

In web design, the monoline approach translates into SVG-driven illustrations, uniform-weight borders, icon sets built on consistent stroke widths, and typographic choices that echo the equal-weight philosophy through monolinear typefaces. The result is an interface that feels crafted, intentional, and visually harmonious without relying on shadows, gradients, or photographic textures.

Visual Characteristics

Core Design Traits

  • Uniform stroke weight -- every line in the composition uses exactly the same thickness, typically between 1.5px and 3px depending on scale; no thick-thin contrast anywhere
  • Continuous-line construction -- many compositions are drawn as a single unbroken path, creating fluid, connected forms that guide the eye smoothly through the artwork
  • Geometric precision -- shapes are built from clean arcs, straight segments, and mathematically defined curves, giving illustrations a structured, engineered quality
  • Negative space as a design element -- because the line cannot vary to create depth, the empty space between and around strokes carries equal visual weight and meaning
  • No fills or minimal fills -- the default state is stroke-only; when fills are used, they are flat, solid colors placed behind the linework rather than within it
  • Rounded stroke caps and joins -- line endpoints and corners are typically rounded rather than squared, softening the overall impression and reinforcing the hand-drawn feeling
  • Scalability across all sizes -- the consistent stroke weight means illustrations hold their integrity from favicon (16px) to billboard, with no detail lost at extremes
  • Symmetry and balance -- compositions frequently employ bilateral or radial symmetry, using the uniform line to create patterns that feel orderly and intentional
  • Minimal detail, maximum recognition -- subjects are reduced to their most essential contours, relying on silhouette and proportion rather than interior detail for identification
  • Path-based thinking -- every element is conceptualized as a path (open or closed) rather than as a shape with fill; the stroke is the artwork itself
  • Ornamental potential -- despite its minimalism, monoline easily supports intricate decorative patterns, flourishes, and border work through repetition and geometric tiling
  • Hand-drawn warmth within digital precision -- even when executed digitally, the style retains an approachable, craft-oriented quality that purely geometric design often lacks

Design Principles

  • Constraint breeds elegance: limiting yourself to one stroke weight forces creative problem-solving that produces more refined outcomes
  • The line is the design: every visual decision flows from how the single-weight stroke is directed, curved, and arranged
  • Clarity over complexity: if a form cannot be communicated with uniform-weight lines alone, it needs further simplification
  • Negative space is active space: the areas between strokes are deliberately shaped and considered, not merely leftover
  • Consistency builds trust: the uniform stroke creates a visual language that feels reliable, considered, and professional
  • Scale independence is a requirement: every composition must function at the smallest and largest intended reproduction sizes
  • Curves carry character: the degree of roundness, the radius of arcs, and the flow between straight and curved segments define the personality of the work
  • Structure supports storytelling: geometric construction and symmetry provide the framework, but the path of the line tells the story

Color Palette

Monoline Illustration Palette

The monoline palette is deliberately restrained. Because the linework itself carries the design, color serves a supporting role: providing contrast for the stroke, establishing mood, and creating visual hierarchy through background and accent tones. The default mode is a single dark stroke on a light background, with accent colors introduced sparingly. Warm neutrals and muted tones complement the handcrafted quality of the linework, while a few carefully chosen saturated accents add focal energy.

Swatch Hex Role / Usage
Ink Black #2C2C2C Primary stroke color; all linework, borders, text headings
Warm White #FAF8F5 Page background; the canvas that lets the line breathe
Parchment #F0EBE1 Card and panel backgrounds; warmer alternative to pure white
Graphite #5C5C5C Secondary text; caption and metadata color
Warm Grey #9E9A93 Tertiary text; placeholder and disabled states
Terracotta #C75C3A Primary accent; call-to-action elements, key highlights
Deep Teal #2A7B72 Secondary accent; links, interactive states, success indicators
Dusty Gold #C9A84C Tertiary accent; badges, premium indicators, warm highlights
Soft Navy #3A4F6A Dark accent; dark-mode backgrounds, footer, contrast sections
Blush #E8C4B8 Decorative fill; soft backgrounds behind illustrations
Sage #B5C4A8 Decorative fill; nature-themed sections, secondary backgrounds
Slate Blue #8FA3BF Decorative fill; cool-toned feature sections, info panels
Cream #F5E6C8 Warm highlight backgrounds; testimonial sections, callouts
Charcoal #3D3D3D Dark text on colored backgrounds; alternative stroke color
Rust #A04420 Hover/active state for terracotta; darker accent variant

CSS Custom Properties

:root {
  /* Stroke */
  --ml-stroke: #2c2c2c;
  --ml-stroke-light: #5c5c5c;
  --ml-stroke-width: 2px;

  /* Backgrounds */
  --ml-bg-page: #faf8f5;
  --ml-bg-card: #f0ebe1;
  --ml-bg-dark: #3a4f6a;
  --ml-bg-blush: #e8c4b8;
  --ml-bg-sage: #b5c4a8;
  --ml-bg-slate: #8fa3bf;
  --ml-bg-cream: #f5e6c8;

  /* Accents */
  --ml-accent-primary: #c75c3a;
  --ml-accent-primary-hover: #a04420;
  --ml-accent-secondary: #2a7b72;
  --ml-accent-tertiary: #c9a84c;

  /* Text */
  --ml-text-primary: #2c2c2c;
  --ml-text-secondary: #5c5c5c;
  --ml-text-tertiary: #9e9a93;
  --ml-text-inverse: #faf8f5;

  /* Neutrals */
  --ml-warm-white: #faf8f5;
  --ml-parchment: #f0ebe1;
  --ml-charcoal: #3d3d3d;
  --ml-soft-navy: #3a4f6a;
}

Typography

Typeface Philosophy

Monoline Illustration typography mirrors the aesthetic's core rule: uniform stroke weight. Typefaces chosen for this style are monolinear -- meaning their letterforms maintain consistent thickness across all strokes, with minimal or no contrast between thick and thin parts. Google Fonts defines "monolinear" as typefaces where the stroke width remains uniform throughout each character. This creates a natural visual harmony between the illustration linework and the text, making the entire design feel cohesive. Sans-serif faces dominate, though occasional geometric slab-serifs with low contrast can work for accent text. The overall typographic tone is clean, contemporary, and approachable.

Font Style Best For
Quicksand Rounded geometric sans Headlines -- soft curves echo monoline illustration personality
Nunito Rounded geometric sans Body text -- excellent readability with monolinear strokes
Josefin Sans Geometric, elegant sans Display headlines -- Art Deco geometric quality complements monoline intricacy
Poppins Geometric sans, uniform strokes UI elements, nav labels -- clean and neutral with consistent weight
Comfortaa Rounded geometric, modern Display titles -- distinctive rounded character matches line-art warmth
Varela Round Simple rounded sans Body text -- unassuming, highly legible, monolinear construction
Outfit Modern geometric sans Navigation, labels -- crisp and contemporary
Lexend Optimized readability Long-form body text -- maximum legibility for extended reading
DM Sans Low-contrast geometric sans Versatile body and UI -- subtle geometric quality, excellent screen rendering
Cabin Humanist sans, low contrast Body text alternative -- slightly warmer than pure geometric faces

Font Pairing Suggestions

Heading Font Body Font Character
Quicksand (600) Nunito (400) Warm, rounded, approachable -- the quintessential monoline pairing
Josefin Sans (600) DM Sans (400) Elegant geometry for headers, clean neutrality for body
Comfortaa (700) Varela Round (400) Maximum roundness, playful yet refined
Outfit (600) Lexend (400) Contemporary precision, optimized readability
Poppins (600) Cabin (400) Geometric headings with humanist warmth in body text

Typography CSS Example

/* Import fonts */
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;600;700&family=Nunito:wght@400;500;600;700&display=swap');

/* Headings -- geometric, monolinear */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Quicksand', 'Nunito', sans-serif;
  font-weight: 600;
  color: var(--ml-text-primary);
  line-height: 1.2;
  letter-spacing: 0.01em;
}

/* Display / Hero text */
.ml-display {
  font-family: 'Quicksand', sans-serif;
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.08;
}

/* Body text */
body {
  font-family: 'Nunito', 'Varela Round', sans-serif;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.75;
  color: var(--ml-text-primary);
}

/* Caption / secondary text */
.ml-caption {
  font-family: 'Nunito', sans-serif;
  font-weight: 400;
  font-size: 0.85rem;
  color: var(--ml-text-tertiary);
  line-height: 1.5;
  letter-spacing: 0.02em;
}

/* Label / tag text */
.ml-label {
  font-family: 'Quicksand', sans-serif;
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ml-text-secondary);
}

Layout Principles

  • Generous whitespace -- the single-weight line needs room to breathe; ample margins and padding prevent the interface from feeling cluttered and let the linework command attention
  • Grid-based structure -- content is organized on a clear, predictable grid (typically 12-column) that mirrors the precision of the monoline aesthetic itself
  • Maximum width constraint -- content areas are capped at 1100-1200px to maintain comfortable reading widths and prevent illustrations from scaling beyond their optimal range
  • Illustration as hero -- monoline illustrations are given prominent placement and generous sizing; they are the focal point, not decoration
  • Consistent spacing scale -- a harmonious spacing system (8px base unit: 8, 16, 24, 32, 48, 64, 96) reinforces the precision and orderliness of the style
  • Flat visual hierarchy -- depth is communicated through spacing, size, and color, never through shadows or elevation; the interface exists on a single plane
  • Border-defined containers -- cards, panels, and sections are delineated by uniform-weight borders that match the illustration stroke weight, creating visual unity
  • Asymmetric balance -- layouts combine large illustration areas with compact text blocks, creating dynamic compositions that avoid rigid symmetry without feeling chaotic
  • Responsive stacking -- multi-column layouts collapse to single columns on mobile while maintaining stroke weights and padding ratios; the line never thins
  • SVG-first imagery -- all illustrations and icons are delivered as SVG to maintain crisp strokes at any resolution, honoring the scale-independence principle
  • Soft radius corners -- border-radius values are moderate (4-8px), echoing the rounded stroke caps of monoline illustration without going fully pill-shaped
  • Content breathing room -- paragraphs, headings, and interactive elements are separated by at least 24px, and sections by at least 64px, preventing visual collision

CSS / Design Techniques

Monoline Card Component

.ml-card {
  background: var(--ml-bg-card);
  border: var(--ml-stroke-width) solid var(--ml-stroke);
  border-radius: 8px;
  padding: 32px;
  position: relative;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

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

/* Card with illustration header */
.ml-card__illustration {
  width: 100%;
  aspect-ratio: 16 / 10;
  margin: -32px -32px 24px -32px;
  padding: 32px;
  width: calc(100% + 64px);
  border-bottom: var(--ml-stroke-width) solid var(--ml-stroke);
  border-radius: 6px 6px 0 0;
  background: var(--ml-warm-white);
  display: flex;
  align-items: center;
  justify-content: center;
}

.ml-card__illustration svg {
  max-width: 100%;
  max-height: 100%;
}

.ml-card__title {
  font-family: 'Quicksand', sans-serif;
  font-weight: 600;
  font-size: 1.25rem;
  margin-bottom: 8px;
}

.ml-card__text {
  font-size: 0.95rem;
  color: var(--ml-text-secondary);
  line-height: 1.7;
}

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

Monoline Button

.ml-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--ml-accent-primary);
  color: var(--ml-text-inverse);
  border: var(--ml-stroke-width) solid var(--ml-stroke);
  border-radius: 6px;
  padding: 12px 28px;
  font-family: 'Quicksand', sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.2s ease, transform 0.15s ease;
}

.ml-button:hover {
  background: var(--ml-accent-primary-hover);
  transform: translateY(-1px);
}

.ml-button:active {
  transform: translateY(0);
}

/* Secondary / outline variant */
.ml-button--outline {
  background: transparent;
  color: var(--ml-text-primary);
}

.ml-button--outline:hover {
  background: var(--ml-parchment);
}

/* Teal variant */
.ml-button--teal {
  background: var(--ml-accent-secondary);
}

.ml-button--teal:hover {
  background: #1f5f58;
}

/* Button with inline SVG icon */
.ml-button svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  stroke-width: 2px;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ml-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 40px;
  border-bottom: var(--ml-stroke-width) solid var(--ml-stroke);
  background: var(--ml-bg-page);
}

.ml-nav__logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Quicksand', sans-serif;
  font-weight: 700;
  font-size: 1.4rem;
  color: var(--ml-text-primary);
  text-decoration: none;
}

.ml-nav__logo svg {
  width: 32px;
  height: 32px;
  stroke: var(--ml-stroke);
  stroke-width: 2px;
  fill: none;
}

.ml-nav__links {
  display: flex;
  gap: 32px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.ml-nav__links a {
  font-family: 'Quicksand', sans-serif;
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--ml-text-secondary);
  text-decoration: none;
  padding: 4px 0;
  position: relative;
  transition: color 0.2s ease;
}

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

.ml-nav__links a:hover {
  color: var(--ml-accent-primary);
}

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

.ml-nav__links a.active {
  color: var(--ml-accent-primary);
}

.ml-nav__links a.active::after {
  width: 100%;
}

@media (max-width: 768px) {
  .ml-nav {
    padding: 16px 20px;
  }

  .ml-nav__links {
    gap: 20px;
  }
}

Hero Section

.ml-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
  padding: 80px 40px;
  gap: 64px;
}

.ml-hero__content {
  flex: 1;
  max-width: 500px;
}

.ml-hero__content h1 {
  font-size: clamp(2.2rem, 5vw, 3.8rem);
  font-weight: 700;
  margin-bottom: 1.25rem;
  line-height: 1.08;
}

.ml-hero__content p {
  font-size: 1.1rem;
  color: var(--ml-text-secondary);
  margin-bottom: 2rem;
  line-height: 1.75;
}

.ml-hero__actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.ml-hero__visual {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.ml-hero__illustration {
  width: 100%;
  max-width: 480px;
}

.ml-hero__illustration svg {
  width: 100%;
  height: auto;
}

@media (max-width: 768px) {
  .ml-hero {
    flex-direction: column-reverse;
    text-align: center;
    padding: 48px 20px;
    gap: 40px;
  }

  .ml-hero__actions {
    justify-content: center;
  }

  .ml-hero__illustration {
    max-width: 320px;
  }
}

SVG Line Drawing Animation

/* Monoline SVG stroke drawing animation */
.ml-draw-in {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: ml-draw 2s ease-in-out forwards;
}

@keyframes ml-draw {
  to {
    stroke-dashoffset: 0;
  }
}

/* Staggered drawing for multi-path illustrations */
.ml-draw-in:nth-child(1) { animation-delay: 0s; }
.ml-draw-in:nth-child(2) { animation-delay: 0.3s; }
.ml-draw-in:nth-child(3) { animation-delay: 0.6s; }
.ml-draw-in:nth-child(4) { animation-delay: 0.9s; }
.ml-draw-in:nth-child(5) { animation-delay: 1.2s; }

/* Hover reveal -- line draws on hover */
.ml-hover-draw svg path {
  stroke-dasharray: 500;
  stroke-dashoffset: 500;
  transition: stroke-dashoffset 0.8s ease;
}

.ml-hover-draw:hover svg path {
  stroke-dashoffset: 0;
}

Monoline Icon System

/* Base icon styling -- uniform stroke, no fill */
.ml-icon {
  display: inline-block;
  width: 24px;
  height: 24px;
  stroke: var(--ml-stroke);
  stroke-width: 2px;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: middle;
}

/* Icon size variants */
.ml-icon--sm { width: 16px; height: 16px; }
.ml-icon--md { width: 24px; height: 24px; }
.ml-icon--lg { width: 32px; height: 32px; }
.ml-icon--xl { width: 48px; height: 48px; }

/* Icon in a circular container */
.ml-icon-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: var(--ml-stroke-width) solid var(--ml-stroke);
  background: var(--ml-warm-white);
  transition: background 0.2s ease;
}

.ml-icon-circle:hover {
  background: var(--ml-bg-cream);
}

/* Icon with colored background */
.ml-icon-circle--blush { background: var(--ml-bg-blush); }
.ml-icon-circle--sage { background: var(--ml-bg-sage); }
.ml-icon-circle--slate { background: var(--ml-bg-slate); }

Section Divider (Decorative Monoline Rule)

/* Decorative monoline divider using SVG pattern */
.ml-divider {
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 64px 0;
}

.ml-divider svg {
  width: 200px;
  height: 20px;
  stroke: var(--ml-stroke);
  stroke-width: 2px;
  fill: none;
  stroke-linecap: round;
}

/* Simple horizontal rule variant */
.ml-rule {
  border: none;
  border-top: var(--ml-stroke-width) solid var(--ml-stroke);
  margin: 48px 0;
  opacity: 0.2;
}

Feature Row (Icon + Text Strip)

.ml-feature-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0;
  border: var(--ml-stroke-width) solid var(--ml-stroke);
  border-radius: 8px;
  overflow: hidden;
}

.ml-feature-cell {
  padding: 32px 24px;
  text-align: center;
  border-right: var(--ml-stroke-width) solid var(--ml-stroke);
  background: var(--ml-warm-white);
}

.ml-feature-cell:last-child {
  border-right: none;
}

.ml-feature-cell .ml-icon-circle {
  margin-bottom: 16px;
}

.ml-feature-cell h3 {
  font-family: 'Quicksand', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 8px;
}

.ml-feature-cell p {
  font-size: 0.9rem;
  color: var(--ml-text-secondary);
  line-height: 1.6;
}

@media (max-width: 768px) {
  .ml-feature-row {
    grid-template-columns: 1fr;
  }

  .ml-feature-cell {
    border-right: none;
    border-bottom: var(--ml-stroke-width) solid var(--ml-stroke);
  }

  .ml-feature-cell:last-child {
    border-bottom: none;
  }
}

Design Do's and Don'ts

Do

  • Maintain a single stroke weight everywhere -- illustrations, icons, borders, and decorative elements should all use the same stroke width for complete visual unity
  • Use SVG for all illustrations and icons -- vector formats guarantee crisp rendering at every scale and allow CSS-driven animation of the linework
  • Embrace generous whitespace -- the single-weight line communicates best when surrounded by ample breathing room; cramped layouts undermine the aesthetic
  • Round your stroke caps and joins -- stroke-linecap: round and stroke-linejoin: round give the characteristic soft, approachable quality that defines most monoline work
  • Choose monolinear typefaces -- fonts with uniform stroke weight (Quicksand, Nunito, Poppins) create natural harmony between text and illustration
  • Design with path continuity in mind -- wherever possible, construct illustrations from continuous or near-continuous paths that flow naturally from one element to the next
  • Keep color palettes restrained -- the linework is the hero; color should support, not compete, using muted tones and strategic accent placement
  • Test at multiple scales -- verify that every illustration reads clearly at both small (32px) and large (800px+) sizes without losing legibility

Don't

  • Vary stroke weight for emphasis -- the moment you introduce thick and thin strokes, you break the foundational rule of the entire aesthetic
  • Use gradients or textured fills inside linework -- monoline illustrations rely on flat color or no fill at all; gradients undermine the style's clarity
  • Add drop shadows or depth effects -- the aesthetic exists on a single visual plane; shadow effects conflict with the flat, line-driven philosophy
  • Choose high-contrast serif typefaces -- fonts with dramatic thick-thin stroke variation (like Didot or Bodoni) clash with the uniform-weight principle
  • Crowd illustrations together -- monoline linework needs negative space to remain legible; overlapping or densely packed elements create visual noise
  • Use raster images for monoline elements -- bitmap illustrations lose crispness when scaled and cannot be animated with CSS stroke properties
  • Rely on color alone to differentiate elements -- because the style uses restrained palettes, shape and position must carry the primary information load
  • Animate with bounce or elastic easing -- the refined, precise nature of monoline work calls for smooth, linear, or ease-in-out timing functions, not playful physics
Aesthetic Relationship to Monoline Illustration
Ligne Claire Direct ancestor; shares uniform-weight outlines and clarity-first principles, but Ligne Claire adds flat color fills and narrative panel structures from comic-book tradition
Flat Design Fellow minimalist approach; both reject shadows and gradients, but Flat Design uses filled shapes as primary elements while Monoline foregrounds the stroke itself
Line Art Broader category that includes monoline; Line Art encompasses varying stroke weights and hatching techniques that monoline specifically excludes
Art Deco Shares geometric precision, symmetry, and ornamental pattern-making; monoline illustration frequently borrows Art Deco's decorative vocabulary and structural formalism
Geometric Design Overlapping emphasis on mathematical construction, clean arcs, and precise angles; geometric design may use fills and variable weights that monoline avoids
Minimalism Shared philosophy of reduction and essentialism; monoline is minimalism applied specifically to the act of drawing with a single stroke weight
Corporate Memphis Both use simplified illustration with uniform outlines, but Corporate Memphis introduces filled geometric shapes, exaggerated proportions, and bright saturated palettes
Bauhaus Common root in modernist principle of form following function; Bauhaus's geometric rigor and typography-illustration integration inform monoline's structured approach
Wireframe / Blueprint Technical drafting tradition that originally demanded uniform-weight lines; monoline illustration elevates this functional constraint into an expressive aesthetic choice

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>Monoline Illustration</title>
  <link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;600;700&family=Nunito:wght@400;500;600;700&display=swap" rel="stylesheet">
  <style>
    :root {
      --ml-stroke: #2c2c2c;
      --ml-stroke-light: #5c5c5c;
      --ml-stroke-width: 2px;
      --ml-bg-page: #faf8f5;
      --ml-bg-card: #f0ebe1;
      --ml-bg-dark: #3a4f6a;
      --ml-bg-blush: #e8c4b8;
      --ml-bg-sage: #b5c4a8;
      --ml-bg-cream: #f5e6c8;
      --ml-accent-primary: #c75c3a;
      --ml-accent-primary-hover: #a04420;
      --ml-accent-secondary: #2a7b72;
      --ml-accent-tertiary: #c9a84c;
      --ml-text-primary: #2c2c2c;
      --ml-text-secondary: #5c5c5c;
      --ml-text-tertiary: #9e9a93;
      --ml-text-inverse: #faf8f5;
      --ml-warm-white: #faf8f5;
      --ml-parchment: #f0ebe1;
    }

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

    body {
      background: var(--ml-bg-page);
      color: var(--ml-text-primary);
      font-family: 'Nunito', sans-serif;
      font-weight: 400;
      line-height: 1.75;
    }

    h1, h2, h3, h4 {
      font-family: 'Quicksand', sans-serif;
      font-weight: 600;
      line-height: 1.2;
    }

    a { color: var(--ml-accent-secondary); }

    /* ── Navigation ── */
    nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      max-width: 1200px;
      margin: 0 auto;
      padding: 20px 40px;
      border-bottom: var(--ml-stroke-width) solid var(--ml-stroke);
    }

    .logo {
      display: flex;
      align-items: center;
      gap: 10px;
      font-family: 'Quicksand', sans-serif;
      font-weight: 700;
      font-size: 1.4rem;
      color: var(--ml-text-primary);
      text-decoration: none;
    }

    .logo svg {
      width: 32px;
      height: 32px;
    }

    nav ul {
      display: flex;
      gap: 28px;
      list-style: none;
    }

    nav ul a {
      font-family: 'Quicksand', sans-serif;
      font-weight: 500;
      font-size: 0.95rem;
      color: var(--ml-text-secondary);
      text-decoration: none;
      position: relative;
      transition: color 0.2s;
    }

    nav ul a::after {
      content: '';
      position: absolute;
      bottom: -4px;
      left: 0;
      width: 0;
      height: 2px;
      background: var(--ml-accent-primary);
      transition: width 0.25s ease;
    }

    nav ul a:hover { color: var(--ml-accent-primary); }
    nav ul a:hover::after { width: 100%; }

    /* ── Hero ── */
    .hero {
      display: flex;
      align-items: center;
      justify-content: space-between;
      max-width: 1200px;
      margin: 0 auto;
      padding: 80px 40px;
      gap: 64px;
    }

    .hero-content { flex: 1; max-width: 480px; }

    .hero h1 {
      font-size: clamp(2.2rem, 5vw, 3.6rem);
      font-weight: 700;
      margin-bottom: 1.25rem;
      line-height: 1.08;
    }

    .hero p {
      font-size: 1.05rem;
      color: var(--ml-text-secondary);
      margin-bottom: 2rem;
    }

    .hero-actions {
      display: flex;
      gap: 16px;
      flex-wrap: wrap;
    }

    .hero-visual {
      flex: 1;
      display: flex;
      justify-content: center;
    }

    .hero-visual svg {
      width: 100%;
      max-width: 460px;
      height: auto;
    }

    /* ── Buttons ── */
    .btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 12px 28px;
      border: var(--ml-stroke-width) solid var(--ml-stroke);
      border-radius: 6px;
      font-family: 'Quicksand', sans-serif;
      font-weight: 600;
      font-size: 0.95rem;
      letter-spacing: 0.02em;
      cursor: pointer;
      text-decoration: none;
      transition: background 0.2s, transform 0.15s;
    }

    .btn-primary {
      background: var(--ml-accent-primary);
      color: var(--ml-text-inverse);
    }

    .btn-primary:hover {
      background: var(--ml-accent-primary-hover);
      transform: translateY(-1px);
    }

    .btn-outline {
      background: transparent;
      color: var(--ml-text-primary);
    }

    .btn-outline:hover {
      background: var(--ml-parchment);
      transform: translateY(-1px);
    }

    /* ── Features ── */
    .features {
      border-top: var(--ml-stroke-width) solid var(--ml-stroke);
      padding: 80px 40px;
      max-width: 1200px;
      margin: 0 auto;
    }

    .features h2 {
      text-align: center;
      font-size: 1.8rem;
      margin-bottom: 48px;
    }

    .feature-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 0;
      border: var(--ml-stroke-width) solid var(--ml-stroke);
      border-radius: 8px;
      overflow: hidden;
    }

    .feature-cell {
      padding: 36px 28px;
      text-align: center;
      border-right: var(--ml-stroke-width) solid var(--ml-stroke);
      background: var(--ml-warm-white);
    }

    .feature-cell:last-child { border-right: none; }

    .feature-icon {
      width: 56px;
      height: 56px;
      border-radius: 50%;
      border: var(--ml-stroke-width) solid var(--ml-stroke);
      margin: 0 auto 20px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .feature-icon svg {
      width: 24px;
      height: 24px;
      stroke: var(--ml-stroke);
      stroke-width: 2px;
      fill: none;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .feature-cell h3 {
      font-size: 1.05rem;
      margin-bottom: 8px;
    }

    .feature-cell p {
      font-size: 0.9rem;
      color: var(--ml-text-secondary);
      line-height: 1.6;
    }

    /* ── Cards Section ── */
    .showcase {
      padding: 80px 40px;
      max-width: 1200px;
      margin: 0 auto;
      border-top: var(--ml-stroke-width) solid var(--ml-stroke);
    }

    .showcase h2 {
      text-align: center;
      font-size: 1.8rem;
      margin-bottom: 16px;
    }

    .showcase > p {
      text-align: center;
      color: var(--ml-text-secondary);
      max-width: 560px;
      margin: 0 auto 48px;
    }

    .card-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 24px;
    }

    .card {
      background: var(--ml-bg-card);
      border: var(--ml-stroke-width) solid var(--ml-stroke);
      border-radius: 8px;
      overflow: hidden;
      transition: transform 0.2s, box-shadow 0.2s;
    }

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

    .card-illustration {
      width: 100%;
      aspect-ratio: 16 / 10;
      border-bottom: var(--ml-stroke-width) solid var(--ml-stroke);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 24px;
    }

    .card-illustration:nth-child(1) { background: var(--ml-bg-blush); }

    .card-illustration svg {
      width: 80px;
      height: 80px;
      stroke: var(--ml-stroke);
      stroke-width: 2px;
      fill: none;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .card-body { padding: 24px; }

    .card-body h3 {
      font-size: 1.15rem;
      margin-bottom: 8px;
    }

    .card-body p {
      font-size: 0.9rem;
      color: var(--ml-text-secondary);
      line-height: 1.65;
    }

    .card-tag {
      display: inline-block;
      margin-top: 16px;
      padding: 4px 12px;
      border: var(--ml-stroke-width) solid var(--ml-stroke);
      border-radius: 4px;
      font-family: 'Quicksand', sans-serif;
      font-weight: 600;
      font-size: 0.7rem;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: var(--ml-text-secondary);
    }

    /* ── CTA Section ── */
    .cta {
      background: var(--ml-bg-dark);
      color: var(--ml-text-inverse);
      text-align: center;
      padding: 80px 40px;
      border-top: var(--ml-stroke-width) solid var(--ml-stroke);
      border-bottom: var(--ml-stroke-width) solid var(--ml-stroke);
    }

    .cta h2 {
      font-size: 2rem;
      margin-bottom: 12px;
      color: var(--ml-text-inverse);
    }

    .cta p {
      font-size: 1.05rem;
      opacity: 0.85;
      margin-bottom: 2rem;
      max-width: 480px;
      margin-left: auto;
      margin-right: auto;
    }

    .cta .btn-primary {
      background: var(--ml-accent-tertiary);
      color: var(--ml-text-primary);
    }

    .cta .btn-primary:hover {
      background: #b8963f;
    }

    /* ── Monoline Divider ── */
    .divider {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 40px 0;
    }

    .divider svg {
      width: 180px;
      height: 20px;
      stroke: var(--ml-stroke);
      stroke-width: 2px;
      fill: none;
      stroke-linecap: round;
    }

    /* ── Footer ── */
    footer {
      max-width: 1200px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 32px 40px;
      font-size: 0.85rem;
      color: var(--ml-text-tertiary);
    }

    footer a {
      color: var(--ml-text-secondary);
      text-decoration: none;
    }

    footer a:hover {
      color: var(--ml-accent-primary);
    }

    footer ul {
      display: flex;
      gap: 24px;
      list-style: none;
    }

    /* ── SVG Draw-In Animation ── */
    .draw-in path,
    .draw-in line,
    .draw-in circle,
    .draw-in ellipse,
    .draw-in polyline,
    .draw-in polygon {
      stroke-dasharray: 800;
      stroke-dashoffset: 800;
      animation: drawLine 2.5s ease-in-out forwards;
    }

    .draw-in *:nth-child(2) { animation-delay: 0.15s; }
    .draw-in *:nth-child(3) { animation-delay: 0.3s; }
    .draw-in *:nth-child(4) { animation-delay: 0.45s; }
    .draw-in *:nth-child(5) { animation-delay: 0.6s; }
    .draw-in *:nth-child(6) { animation-delay: 0.75s; }
    .draw-in *:nth-child(7) { animation-delay: 0.9s; }
    .draw-in *:nth-child(8) { animation-delay: 1.05s; }
    .draw-in *:nth-child(9) { animation-delay: 1.2s; }
    .draw-in *:nth-child(10) { animation-delay: 1.35s; }

    @keyframes drawLine {
      to { stroke-dashoffset: 0; }
    }

    /* ── Responsive ── */
    @media (max-width: 768px) {
      .hero {
        flex-direction: column-reverse;
        text-align: center;
        padding: 48px 20px;
        gap: 40px;
      }

      .hero-actions {
        justify-content: center;
      }

      .hero-visual svg {
        max-width: 280px;
      }

      nav { padding: 16px 20px; }
      nav ul { gap: 16px; }

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

      .feature-cell {
        border-right: none;
        border-bottom: var(--ml-stroke-width) solid var(--ml-stroke);
      }

      .feature-cell:last-child { border-bottom: none; }

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

      .showcase, .features { padding: 48px 20px; }

      .cta { padding: 48px 20px; }

      footer {
        flex-direction: column;
        gap: 16px;
        text-align: center;
        padding: 24px 20px;
      }
    }
  </style>
</head>
<body>

  <!-- Navigation -->
  <nav>
    <a href="#" class="logo">
      <svg viewBox="0 0 32 32" fill="none" stroke="#2c2c2c" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <circle cx="16" cy="16" r="14"/>
        <path d="M10 20 C10 14, 14 10, 16 10 C18 10, 22 14, 22 20"/>
        <line x1="16" y1="10" x2="16" y2="22"/>
      </svg>
      Linework
    </a>
    <ul>
      <li><a href="#">Portfolio</a></li>
      <li><a href="#">Process</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>

  <!-- Hero -->
  <section class="hero">
    <div class="hero-content">
      <h1>One line. Every possibility.</h1>
      <p>Clean, continuous, and crafted with purpose. We believe the most compelling designs begin with a single, unwavering stroke.</p>
      <div class="hero-actions">
        <a href="#" class="btn btn-primary">View our work</a>
        <a href="#" class="btn btn-outline">Our process</a>
      </div>
    </div>
    <div class="hero-visual">
      <svg class="draw-in" viewBox="0 0 400 300" fill="none" stroke="#2c2c2c" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <!-- Mountain landscape in monoline -->
        <!-- Mountains -->
        <polyline points="0,260 60,140 100,180 150,100 200,170 240,120 300,190 340,130 400,260"/>
        <!-- Sun -->
        <circle cx="320" cy="70" r="30"/>
        <!-- Sun rays -->
        <line x1="320" y1="28" x2="320" y2="16"/>
        <line x1="350" y1="40" x2="358" y2="32"/>
        <line x1="362" y1="70" x2="374" y2="70"/>
        <line x1="350" y1="100" x2="358" y2="108"/>
        <line x1="290" y1="40" x2="282" y2="32"/>
        <line x1="278" y1="70" x2="266" y2="70"/>
        <line x1="290" y1="100" x2="282" y2="108"/>
        <!-- Cloud -->
        <path d="M60,70 Q70,50 90,55 Q95,40 115,45 Q130,35 140,50 Q155,45 155,60 Q165,65 155,75 Q150,85 130,80 Q115,90 100,80 Q80,85 70,78 Q55,80 60,70Z"/>
        <!-- Trees -->
        <line x1="70" y1="220" x2="70" y2="260"/>
        <path d="M55,220 L70,190 L85,220"/>
        <path d="M58,235 L70,210 L82,235"/>
        <line x1="110" y1="230" x2="110" y2="260"/>
        <path d="M98,230 L110,205 L122,230"/>
        <path d="M100,242 L110,222 L120,242"/>
        <!-- River path -->
        <path d="M180,260 Q200,240 190,220 Q180,200 200,185"/>
        <!-- Birds -->
        <path d="M180,45 Q185,38 190,45"/>
        <path d="M200,55 Q205,48 210,55"/>
        <path d="M215,40 Q220,33 225,40"/>
      </svg>
    </div>
  </section>

  <!-- Features -->
  <section class="features">
    <h2>The monoline method</h2>
    <div class="feature-grid">
      <div class="feature-cell">
        <div class="feature-icon" style="background: var(--ml-bg-blush);">
          <svg viewBox="0 0 24 24"><path d="M12 2 L2 7 L12 12 L22 7 Z"/><path d="M2 17 L12 22 L22 17"/><path d="M2 12 L12 17 L22 12"/></svg>
        </div>
        <h3>Uniform weight</h3>
        <p>Every stroke shares the same thickness, creating visual harmony across the entire composition.</p>
      </div>
      <div class="feature-cell">
        <div class="feature-icon" style="background: var(--ml-bg-sage);">
          <svg viewBox="0 0 24 24"><path d="M4 12 Q8 4, 12 12 Q16 20, 20 12"/><circle cx="4" cy="12" r="2"/><circle cx="20" cy="12" r="2"/></svg>
        </div>
        <h3>Continuous flow</h3>
        <p>Connected, unbroken paths guide the viewer's eye through the design with natural rhythm.</p>
      </div>
      <div class="feature-cell">
        <div class="feature-icon" style="background: var(--ml-bg-cream);">
          <svg viewBox="0 0 24 24"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg>
        </div>
        <h3>Scale-free</h3>
        <p>From a 16-pixel icon to a storefront mural, the artwork holds its clarity at any size.</p>
      </div>
    </div>
  </section>

  <!-- Showcase Cards -->
  <section class="showcase">
    <h2>Selected work</h2>
    <p>Each project begins with a single line weight and builds outward, letting structure and negative space do the storytelling.</p>
    <div class="card-grid">
      <div class="card">
        <div class="card-illustration" style="background: var(--ml-bg-blush);">
          <svg viewBox="0 0 80 80" stroke="#2c2c2c" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round">
            <circle cx="40" cy="28" r="16"/>
            <path d="M20,68 Q20,44 40,44 Q60,44 60,68"/>
          </svg>
        </div>
        <div class="card-body">
          <h3>Brand identity</h3>
          <p>Monoline logos and marks that scale from business cards to building signage without losing a single detail.</p>
          <span class="card-tag">Branding</span>
        </div>
      </div>
      <div class="card">
        <div class="card-illustration" style="background: var(--ml-bg-sage);">
          <svg viewBox="0 0 80 80" stroke="#2c2c2c" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round">
            <rect x="12" y="8" width="56" height="44" rx="3"/>
            <line x1="12" y1="20" x2="68" y2="20"/>
            <circle cx="20" cy="14" r="2"/>
            <circle cx="28" cy="14" r="2"/>
            <circle cx="36" cy="14" r="2"/>
            <line x1="20" y1="30" x2="60" y2="30"/>
            <line x1="20" y1="38" x2="50" y2="38"/>
            <rect x="24" y="60" width="32" height="12" rx="6"/>
          </svg>
        </div>
        <div class="card-body">
          <h3>Web interfaces</h3>
          <p>Icon systems and illustrated UI elements built with consistent stroke weight for pixel-perfect cohesion.</p>
          <span class="card-tag">UI Design</span>
        </div>
      </div>
      <div class="card">
        <div class="card-illustration" style="background: var(--ml-bg-cream);">
          <svg viewBox="0 0 80 80" stroke="#2c2c2c" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round">
            <path d="M40 10 L40 70"/>
            <path d="M28 18 Q40 30 52 18"/>
            <path d="M24 30 Q40 45 56 30"/>
            <path d="M20 44 Q40 60 60 44"/>
            <rect x="36" y="66" width="8" height="6" rx="1"/>
          </svg>
        </div>
        <div class="card-body">
          <h3>Editorial illustration</h3>
          <p>Narrative artwork for publications that brings complex ideas to life through elegant, single-weight linework.</p>
          <span class="card-tag">Illustration</span>
        </div>
      </div>
    </div>
  </section>

  <!-- Decorative Divider -->
  <div class="divider">
    <svg viewBox="0 0 180 20" stroke-linecap="round">
      <path d="M10,10 Q30,2 50,10 Q70,18 90,10 Q110,2 130,10 Q150,18 170,10" stroke="#2c2c2c" stroke-width="2" fill="none"/>
    </svg>
  </div>

  <!-- CTA -->
  <section class="cta">
    <h2>Start with a single line</h2>
    <p>Every great design begins with the first stroke. Let us bring your vision to life with precision and purpose.</p>
    <a href="#" class="btn btn-primary">Get in touch</a>
  </section>

  <!-- Footer -->
  <footer>
    <span>Crafted with uniform stroke weight, one line at a time.</span>
    <ul>
      <li><a href="#">Dribbble</a></li>
      <li><a href="#">Instagram</a></li>
      <li><a href="#">GitHub</a></li>
    </ul>
  </footer>

</body>
</html>

Implementation Tips

  • Set a single stroke-width variable and reference it everywhere -- define --ml-stroke-width: 2px once in :root and use it for all SVG strokes, CSS borders, underlines, and dividers to guarantee uniformity across the entire interface
  • Use stroke-dasharray and stroke-dashoffset for draw-on animations -- monoline illustrations are uniquely suited to CSS-driven line-drawing effects; calculate the total path length with JavaScript's getTotalLength() method and animate the offset from that value to zero
  • Design illustrations path-first in a vector editor -- build your SVGs by drawing paths and strokes rather than shapes with fills; this keeps file sizes small and ensures the single-weight constraint is maintained throughout the creative process
  • Normalize SVG output -- strip unnecessary attributes, set explicit stroke-linecap="round" and stroke-linejoin="round" on every path, and ensure no element has a different stroke-width value from the global standard
  • Match border widths to illustration stroke weights -- if your SVG illustrations use a 2px stroke rendered at their display size, your CSS card borders, dividers, and nav rules should also be 2px; this visual echo ties the illustration and interface layers together
  • Use vector-effect="non-scaling-stroke" when SVGs resize dynamically -- this SVG attribute keeps the stroke width constant in screen pixels regardless of the SVG's viewBox scaling, preventing lines from becoming too thick or too thin at different sizes
  • Test contrast ratios with your muted palette -- because monoline palettes tend toward warm neutrals and low saturation, verify that text-on-background combinations meet WCAG AA (4.5:1) or AAA (7:1) contrast requirements, especially for body text on tinted backgrounds
  • Keep illustration complexity proportional to display size -- a monoline icon at 24px should have 3-5 strokes maximum, while a hero illustration at 400px+ can support 20-30 distinct path elements; the uniform stroke weight amplifies visual noise faster than variable-weight styles
← Zurück zu den Designs
Agence WagnerAgence Wagner

© 2026 Agence Wagner. Alle Rechte vorbehalten.

Designs von chrislemke/website_designs, lizenziert unter MIT.