01
Brand system
Warm apricot palette with FFF9F4, F9E8DC, EBC9B3, D27146, and 342921; a compact fold mark anchors wordmarks and wayfinding.
Industrial, Logistics & Mobility
Havenfold — Design-Led Storage Brand
Havenfold is a fictional premium storage brand designed as a public-facing conversion experience for self-storage, RV storage, and boat storage.
Industrial, logistics, and mobility websitestorage
Visit live website ↗storage-brand-073.vercel.app
Project type
Industrial, logistics, and mobility website
Industry
Industrial, Logistics & Mobility
Experience
Responsive web experience
Availability
Live deployment
Project overview
Inside the Havenfold — Design-Led Storage Brand experience
Havenfold is a fictional premium storage brand designed as a public-facing conversion experience for self-storage, RV storage, and boat storage. The site frames storage as editorial utility: a calm, warm-apricot environment that makes space choices, site navigation, and reservation steps easy to understand.
The application uses React 19, TypeScript, Vite, Tailwind CSS, Wouter, Framer Motion, and GSAP with ScrollTrigger. It runs in the provided Express/tRPC project template; no database is required for this demonstration flow. Design displays use Fraunces and the UI uses Outfit. The visual system is documented in docs/design-spec.md.
Brand system | Warm apricot palette with FFF9F4, F9E8DC, EBC9B3, D27146, and 342921; a compact fold mark anchors wordmarks and wayfinding.
Experience details
Key features and interaction highlights
02
Navigation
Edge-aligned sticky desktop header, Framer Motion mobile menu, active route styling, focus states, and history-aware forward route scroll reset.
03
Motion
Framer Motion supports menu and accordion state; GSAP scopes the facility-map grid and building reveal behavior with context cleanup and reduced-motion fallback.
04
Responsive behavior
Purposefully composed hero, storage controls, map, unit grid, and reservation flow from 320px through wide desktop.
05
Accessibility
Semantic landmarks and headings, labelled form fields, visible focus states, keyboard-operable selectors, touch-friendly controls, and reduced-motion safeguards.
Visual gallery
Desktop details and mobile experience
Three genuine captures from the live deployment show the opening view, an interior content section, and the responsive mobile composition.
Build characteristics
Technology and delivery signals
Labels come from project documentation where available; conservative delivery characteristics are used when a repository does not specify its stack.
ReactTypeScriptViteTailwind CSSGSAPFramer MotionWouterExpress
Project FAQ
Questions about Havenfold — Design-Led Storage Brand
What is Havenfold — Design-Led Storage Brand?
Havenfold is a fictional premium storage brand designed as a public-facing conversion experience for self-storage, RV storage, and boat storage.
Who is the Havenfold — Design-Led Storage Brand website designed for?
Operational buyers and customers evaluating capabilities, coverage, process, and reliability.
What does the Havenfold — Design-Led Storage Brand experience include?
The documented experience includes brand system, navigation, motion, responsive behavior. The live website shows the complete interface and interaction flow.
Can I view Havenfold — Design-Led Storage Brand online?
Yes. Use the “Visit live website” link on this page to open the current public deployment.
