Materials you can feel.
A concept website for a premium leather-goods house, where leather, wood, brushed metal, glass, and linen are all simulated with pure CSS — and a control panel lets you retune the entire material system live.
The ATELIER & CO homepage — heavy shadows, beveled edges, and chrome specular highlights.
Overview
ATELIER & CO is a concept website for a fictional leather and materials brand. Every surface on the page mimics a physical object: buttons press and depress like switches, cards sit in four-layer shadows, and textures — leather grain, wood grain, brushed metal, glass, linen, plastic — are generated entirely from CSS gradients and SVG filters. There is not a single texture image on the page.
“Every shadow has depth. Every highlight tells you where the light source is.”
Brief
The concept explored how far pure CSS could push realism. The design challenge was making digital interfaces feel tangible and weighty — like objects you could reach out and touch — while keeping the page fast and fully responsive.
The physics of touch
Typography
- Playfair Display — display serif for brand voice
- Inter — clean UI body
- Strong contrast between headline and body
Color
- Warm parchment #d4c5a9 and leather brown #8B4513
- Chrome and silver for metal surfaces
- Linen and ivory neutrals
Materials
- Leather via fractalNoise SVG filter + warm gradients
- Wood grain, brushed metal, glass, linen, plastic
- All textures are CSS gradients — zero image files
Depth
- Four-layer shadow formula with reflected light
- Beveled edges: inner highlight + inner shadow
- Chrome specular streaks on top edges
Interaction
- Physical button states — press to depress
- Control panel: shadow depth, bevel, radius
- Draggable panel, magnetic pull, spotlight, ripples
A material system you can tune
The site's showpiece is a floating control panel that treats the design system as a physical object. Three sliders adjust shadow depth, bevel width, and corner radius across the whole page in real time, with four presets from flat to extreme. It makes the underlying token system visible — and demonstrates exactly how the materials are built.
Buttons throughout the site press and release like real switches: shadows invert to inset, the face sinks two pixels, and a specular highlight flashes. Leather-textured toast notifications and a floating-label contact form complete the tactile world.
Built with
Pure HTML5 and CSS with SVG filter feTurbulence for organic grain, backdrop-filter for glass, and vanilla JavaScript for the control panel, drag, magnetic pull, and ripple interactions. No image files, no libraries, no build step.
Honest result
A fully responsive concept demonstrating how a highly distinctive, tactile, experimental interface can remain coherent within a brand world. It was designed and built from scratch as a personal project — the atelier is fictional, and all content on the site is placeholder.
See it running
Open the live concept site and press a button — then try the control panel in the corner. The source is public on GitHub.