Design Aesthetic Reference

Where Raw Meets Refined

Rustic Modern harmonizes the warmth of reclaimed wood, exposed brick, and hand-forged iron with the clean geometry of contemporary minimalism. Honest materials, deliberate tension, lasting craft.

Explore Components View Palette

Sturdy Serifs, Clean Sans

Characterful headings grounded by warm, readable body text -- like a hand-painted sign on a clean white wall

Display / Playfair Display 700
Weathered & Built
High-contrast transitional serif for hero headlines and editorial display. Carries the weight and presence of engraved signage on old storefronts.
Playfair Display -- 400, 700, 900
Heading / Lora 600
Material Honesty in Every Detail
Warm calligraphic serif for section headings and pull quotes. Organic curves with enough structure to feel modern, never nostalgic.
Lora -- 400, 500, 600, 700
Body / Source Sans 3 -- 400
Every crack, every ring, every change in color is a chapter in a story that only time could write. The best interfaces feel like well-renovated spaces -- every original imperfection preserved with intention, every modern intervention seamlessly integrated into the existing character.
Source Sans 3 -- 300, 400, 600
UI Label / Cabin 600
Reclaimed Materials · Hand-Finished · Built to Last
Small caps with wide tracking for navigation, labels, tags, and structural UI elements. Warm geometric sans that pairs naturally with Lora headings.
Cabin -- 400, 500, 600, 700

Materials as Colors

Drawn from walnut, brick, iron, sandstone, patina, and concrete -- never bright, never synthetic

Walnut
#5C4033
Barn Wood
#8B6F4E
Oak
#A68B6B
Sandstone
#C4A882
Linen
#E8DCC8
Brick
#9E5A42
Clay
#B87353
Steel
#6B7B86
Iron
#4A5259
Patina
#6B7F5E
Concrete
#B0A99F
Charcoal
#2C2A28

Honest Construction

Visible structure, functional beauty -- like the exposed joinery of a well-built cabinet

Reclaimed Timber

Weathered wood grain used as backgrounds, card surfaces, and decorative accents. Warm, unpolished, imperfect -- every board carries the story of its previous life.

Texture Surface

Steel Framework

Dark metal tones for borders, dividers, icon strokes, and structural UI elements. Brushed and blackened, never polished -- strength revealed through restraint.

Structure Metal

Exposed Brick

Rough, matte brick patterns at low opacity suggest masonry walls and fireplaces. A warm textural anchor that references permanence and the hand-laid honesty of construction.

Pattern Warmth

Patina & Verdigris

Weathered copper greens and aged brass tones serve as organic accents. The visual evidence of time passing, transforming raw material into something richer and more complex.

Aging Organic

Natural Stone

From rough-cut fieldstone to honed concrete, mineral surfaces anchor every space with permanence and quiet gravity. Cool counterpoint to warm wood and brick.

Mineral Weight

Riveted Joinery

Visible fasteners, exposed bolts, and honest construction details become decorative elements. The beauty of function displayed without concealment or pretense.

Detail Craft

Honest Materials, Clean Forms

Where every weathered beam is set against a clean white wall. Every steel bracket, hand-finished. Every imperfect grain, framed by precise geometry.

The Rustic Modern Philosophy

material honesty, structural clarity, warmth through restraint

Material Honesty

Every texture, color, and surface should reference a real material without artificial embellishment or synthetic sheen. Wood looks like wood. Metal is brushed and raw, not chrome-polished to a mirror shine. Let surfaces be what they are.

Tension Between Raw & Refined

The aesthetic lives in the contrast between rough natural elements and clean modern geometry. Neither side should dominate. A weathered beam against a minimal white wall. An iron bracket holding a floating shelf. The interplay creates depth.

Structural Clarity

The underlying grid, hierarchy, and information architecture should be immediately legible, like the exposed beams of a well-built structure. Clear sightlines through the content. Visible container boundaries. Functional beauty in every element.

Patina Over Perfection

Embrace the visual character of age, wear, and use. Imperfection communicates authenticity and human touch. Design choices should feel timeless and durable, not trend-chasing -- aging as gracefully as the materials they reference.


CSS Material Textures

All textures rendered with pure CSS -- no image assets, no external dependencies

Wood Grain

Layered linear gradients simulate the directional grain and growth-ring patterns of reclaimed timber.

Exposed Brick

Inline SVG data URIs create a repeating masonry pattern with mortar lines and varied brick tones.

Brushed Steel

Fine horizontal lines over a cool gradient produce the directional texture of brushed metal surfaces.

Poured Concrete

Soft radial gradients and cross-hatched noise suggest the aggregate texture and tonal variation of raw concrete.

Linen Weave

Intersecting horizontal and vertical gradients at low opacity create the warp-and-weft texture of natural fabric.

Copper Patina

Warm-to-green diagonal gradients with animated radial overlays simulate the oxidation process of aging copper.

Grounded Buttons

Warm, solid, and tactile -- designed to feel substantial rather than floating

The beauty of wood is that it tells you its own history. Every crack, every ring, every change in color is a chapter in a story that only time could write.
— A Builder's Reflection

Built to Last

honest materials, clean forms, lasting craft

The Rustic Modern aesthetic embraces material honesty, the tension between raw and refined, and the quiet beauty of surfaces that age with grace. Ground every layout in walnut, brick, and iron -- then let the warmth come from restraint.

Back to the Top