One Fine Stay — Brand Refresh Pitch

Motion, semantic design tokens, and brand-system architecture at scale — a 9-layer CSS token system, IntersectionObserver scroll micro-interactions, and 60+ prototype pages built with an AI-assisted workflow, no framework required.

ofs-brand-pitch.netlify.app/onefinestay-theme-dashboard open ↗

// context

The graphics and marketing teams were considering a full rebrand with an outside agency. With a lean two-person UX team supporting all internal and external digital products across three companies, I proposed an internal alternative — and used it as the opportunity to build the kind of token-driven, motion-rich brand system the product needed regardless of who owned the rebrand.

// solution

9-layer global.css — tokens, reset, layout primitives, typography, components, utilities, animation, responsive, accessibility — all from one source of truth.
Semantic tokens — shadcn/ui-style naming (--background, --foreground, --primary, --secondary, --accent) shared across all 60+ pages.
Motion in vanilla JS — IntersectionObserver scroll reveals, requestAnimationFrame-gated handlers, parallax. No motion library.
Signature image treatment — CSS filter stack (contrast .85, saturate .7, sepia .15) via .img-treated — brand cohesion enforced in code, not Photoshop.
19-section master brand guidelines — strategy, voice, color, type, logo, photography, accessibility, roadmap, asset downloads.

// outcome

token + motion system delivered9-layer global.css with semantic tokens and production-grade micro-interactions across 60+ pages.
end-to-end design craft at scopeBrand strategy, identity, voice, system, motion, and 60+ prototype pages — one designer, AI-assisted workflow.
device showcaseLets leadership navigate every prototype at desktop / tablet / mobile widths without a demo call.
decision statusAwaiting approval as of source.

repo ↗