# Pattern Library
**Pattern Library** collects recurring visual techniques, layout ideas, and stylistic moves found across high-quality modern websites.
It should help you explore proven, contemporary patterns within different aesthetic directions: from quiet minimalism to expressive experimental design.
Not to copy, but to inspire. Use this library to create your own unique style for themes:
* to understand what makes each aesthetic spectrum feel authentic and modern,
* to find visual approaches that fit a chosen spectrum,
* to discover compositional tricks, typography styles, or layout structures that elevate themes,
* to avoid outdated design solutions by using fresher, more relevant patterns.
Review and utilise the patterns below to create themes that feel intentional, current, and competitive.
{% hint style="success" %}
Don’t hesitate to borrow ideas, even if you’re not a designer! Taking a few solutions from different sources and combining them thoughtfully already creates a strong, unique result.
{% endhint %}
This section is split between clean and experimental patterns:
* **Clean patterns** represent clarity, harmony, structure, and refinement.
* **Experimental patterns** are to express identity, show cultural energy, and visualise controlled chaos.
Together, these two sets cover the full range of modern web aesthetics recently seen across all top-tier design inspiration platforms.
### Clean/premium/universal patterns
These patterns form the core language of modern, clean, commercial, premium design.
#### Clean Typography Patterns
* Large, confident headings (not aggressive)
* Soft neo-grotesk or geometric sans-serif fonts
* Clear hierarchy (Regular → Medium → Semi/Bold)
* Balanced line-height and spacing
* No compressed or distorted type
* Typography aligns perfectly with the grid
* Designed to feel quiet, premium, and effortless
Purpose: clarity, sophistication, calm confidence.
Examples: [prose.com](http://prose.com/) ·[ organicbasics.com](http://organicbasics.com/) ·[ olderstudio.com](http://olderstudio.com/) ·[ onceuntold.com](http://onceuntold.com/) ·[ feldspar.studio](https://feldspar.studio/) ·[ ](http://ker.fr/)[ker.fr](http://ker.fr)
#### Composition & Layout Patterns
* Generous whitespace
* Predictable modular grid
* 2–3 column systems with consistent pacing
* Clear breathing zones around major sections
* Large anchor imagery blocks
* Proportional padding (8/16/48px rhythm)
* Smooth vertical rhythm
Result: stability, structure, modern premium look.
Examples: [fredhome.com.au](http://fredhome.com.au/) ·[ sanaskinstudio.com](http://sanaskinstudio.com/) ·[ livewelly.co](http://livewelly.co/) ·[ velorahome.com](http://velorahome.com/) ·[ pedestal.com](http://pedestal.com/) ·[ ](http://sezane.com/)[sezane.com](http://sezane.com)
* Soft natural light or gentle studio light
* Clean backgrounds, minimal distractions
* Even exposure
* Neutral color temperature
* Editorial lifestyle shots when needed
* No heavy filters
* Consistency > complexity
Result: visually trustworthy, polished presentation.
Examples: [springandmulberry.com](http://springandmulberry.com/) ·[ nimuroma.com](http://nimuroma.com/) ·[ nestig.com](http://nestig.com/) ·[ wearedancing.com](http://wearedancing.com/) ·[ ](http://goodweatherskin.com/)[goodweatherskin.com](http://goodweatherskin.com)
#### Color Use Patterns
* Neutral bases (white, cream, grey)
* 1–2 well-controlled accents
* High contrast in CTAs but subtle elsewhere
* Tonal harmony, no “rainbow noise”
* Colors support mood, do not compete with content
Key rule: simplicity = premium.
Examples: [okalobeauty.com](http://okalobeauty.com/) ·[ innerworkhealth.com](http://innerworkhealth.com/) ·[ knownworkstudio.com](http://knownworkstudio.com/) ·[ madeinslovenia.design](https://madeinslovenia.design/)
#### Micro-detail & UI Patterns
* Soft radii
* Minimal shadows (or none)
* Liquid glass
* Clean icons
* Light transitions (fade, slide, subtle parallax)
* Buttons with elegant proportions
* Uniform padding and spacing
Outcome: smooth, refined, high-trust design.
It is important to keep consistency in details.
Examples: [drinkdouze.com](http://drinkdouze.com/) ·[ drinkproxies.com](http://drinkproxies.com/) ·[ ](http://tryooma.com/)[tryooma.com](http://tryooma.com)
#### Emotional Patterns
Clean aesthetics convey:
* trust
* professionalism
* clarity
* calmness
* sophistication
* universal appeal
This is why clean themes fit many verticals naturally.
Examples: [nestig.com](http://nestig.com/) ·[ springandmulberry.com](http://springandmulberry.com/) ·[ wearedancing.com](http://wearedancing.com/) ·[ ](http://velorahome.com/)[velorahome.com](http://velorahome.com)
### Experimental/art-driven patterns
These patterns represent the contemporary art-first, editorial, post-internet design world.
#### Typography Patterns
* Typography used as a visual object, not just text
* Oversized display type
* Extreme weights, tight or loose spacing
* Serif + sans combinations
* Brutal contrasts and unexpected alignments
* Handcrafted imperfections: shifts, overlaps, rotations
Purpose: cultural expression > readability.
Examples: [counter-forms.com](http://counter-forms.com/) ·[ gass.zone](https://www.gass.zone/) ·[ kostasmurkudis.org](http://kostasmurkudis.org/) ·[ stu-b-io.com](http://stu-b-io.com/) ·[ ](http://fantasticman.com/)[fantasticman.com](http://fantasticman.com)
#### Composition & Layout Patterns
* Controlled chaos (not random)
* Intentional asymmetry
* Breaking the grid, but with logic
* Layering: text over images, patterns over blocks
* Nonstandard proportions: huge heroes, tiny captions
* Zine/editorial spreads as inspiration
Rule: asymmetry must feel intentional, not sloppy.
Examples: [fantasticman.com](http://fantasticman.com/) ·[ middleplane.com](http://middleplane.com/) ·[ negeurra.com](http://negeurra.com/) ·[ txtbooks.us](http://txtbooks.us/) ·[ ](http://julesesick.com/)[julesesick.com](http://julesesick.com)
#### Image Style Patterns
* Grain, noise, analog textures
* Harsh lighting or flash photography
* Documentary-style angles
* Collages, cutouts, mixed media
* High-fashion editorial aesthetics
* Emotional, raw, expressive imagery
Imagery defines the brand personality.
Examples: [cormio.com](http://cormio.com/) ·[ syeranyrvana.com](http://syeranyrvana.com/) ·[ aintnotrash.com](http://aintnotrash.com/) ·[ cavempt.com](http://cavempt.com/) ·[ ](http://2022.madebynull.com/)[2022.madebynull.com](http://2022.madebynull.com)
#### Color Use Patterns
* Color chosen for emotion, not safety
* Unexpected combinations
* Neon + neutral hybrids
* Monochrome tints
* Dark/light extremes
* “Beautifully wrong” color usage
Key principle: color as cultural statement.
Examples: [helloyowie.com](http://helloyowie.com/) ·[ geleegelee.com](http://geleegelee.com/) ·[ plantstotherescue.co](http://plantstotherescue.co/) ·[ essesi.com](http://essesi.com/)
#### Graphic Elements & Effects
* Scanned elements
* Poster-like layouts
* Rough edges, visible artifacts
* High-contrast strokes
* Mixed textures
* Artistic overlays
* Noise, grain, motion distortions
Digital treated as printed matter.
Examples: [studio-job.com](http://studio-job.com/) ·[ temporarymark.com](http://temporarymark.com/) ·[ pitchfestival.com.au](http://pitchfestival.com.au/) ·[ ](http://kseniaschnaider.com/)[kseniaschnaider.com](http://kseniaschnaider.com)
#### Emotional Patterns
Experimental aesthetics communicate:
* artistic confidence
* youth culture
* intentional rawness
* rebellion against standard UI
* cultural depth
* uniqueness
These designs are less universal but far more iconic.
Examples: [gass.zone](https://www.gass.zone/) ·[ ossa.wine](https://ossa.wine/) ·[ noon.world](https://noon.world/) ·[ ](http://syeranyrvana.com/)[syeranyrvana.com](http://syeranyrvana.com)
### Additional pattern collections
Where to explore more patterns and references.
#### Web Inspiration
*
*
*
*
*
#### Typography & Layout
*
*
*
*
*
#### Editorial & Print
*
*
*
*
#### Motion / Interaction
*
*
*
#### UI Patterns
*
#### Logo & Brand Name
* [LogoArchive](https://www.logo-archive.org/)
* [bpando.org](http://bpando.org/)
* [Namelix](https://namelix.com/) (name generator)
* [brandmark.io](http://brandmark.io) (logo generator)
#### Image sources
*
*
*
* (generator of product images)