Cloth remembers the hands that make it.
A handcrafted digital experience designed around natural dyes, Mediterranean heritage, and editorial storytelling — for a fictional dye house in Ronda.
The OCHRE homepage — arch motifs, linen textures, and canvas-drawn dye plates.
Overview
OCHRE is a concept website for a Mediterranean natural-dye and handloom studio. The brief was to make a digital brand that felt as tactile as the cloth it sells — warm, slow, and rooted in craft. Every section is built around a repeating visual motif: the arch, scaled from a giant hairline frame in the hero down to the curve of the dye plates.
“We don't chase trends. We cultivate experiences that feel timeless, warm, and deeply human.”
Brief
The concept explored how an editorial, handcrafted brand could live on the web without losing its physical warmth. The design challenge was creating richness from texture and typography rather than photography — using paper grain, linen weave, and canvas-drawn artwork as the primary visual language.
Language of the house
Typography
- Cormorant Garamond — display serif with italic accents
- Tenor Sans — humanist body
- Bilingual Spanish/English nav for authenticity
Color
- Terracotta #A84E33, ochre gold #C08A3E
- Olive, indigo, and umber accents
- Paper, linen, and sand neutrals
Layout
- Editorial vertical rhythm with overlapping plates
- Scalloped arch dividers between sections
- Generous whitespace and slow pacing
Materials & motifs
- Arch motif at three scales
- Paper grain + linen weave texture overlays
- Hand-drawn sun stamp wordmark
Interaction
- Dye-bath selector — choose a recipe, dye the cloth live
- Canvas-drawn dye plates (madder, shibori indigo, weld)
- Four-generation timeline, FAQ, contact form
The dye-bath selector
The signature interaction is a glaze-lab where visitors pick a historical dye recipe — madder red, weld gold, logwood black, or Sado indigo — and watch a canvas cloth take on the colour in real time. Each swatch carries a century of memory in its copy, turning a simple selector into a piece of brand storytelling.
Around it, six courtyard cards and three journal entries are illustrated entirely with Canvas 2D artwork: pottery silhouettes, woven patterns, leaf studies, glaze circles, and wabi-sabi rings. No images — every piece is drawn at runtime.
Built with
Pure semantic HTML5, CSS custom properties, and vanilla JavaScript — with Canvas 2D for all artwork and IntersectionObserver for scroll reveals. No frameworks, no image files for decoration, no build step.
Honest result
A fully responsive concept demonstrating how editorial storytelling, visual identity, and interaction can work together in a digital brand experience. It was designed and built from scratch as a personal project — there is no real dye house, and any statistics or testimonials on the site are fictional placeholder content.
See it running
Open the live concept site and try the dye-bath selector yourself. The source is public on GitHub.