Web DesignWebflowGSAPCMS ArchitectureAI Content WorkflowFigmaClient-First System

A nature-centric lifestyle platform and blog focused on regenerative living, built with high-end motion architecture and scalable content systems.

Fabled Earth lifestyle blog website preview showing clean typography and nature-focused imagery

Problem

Information regarding sustainable living is often presented in cluttered, dated, or overly technical formats. The challenge was to create a modern 'digital field guide' that feels as organic as the subject matter, while utilizing a rigid, high-performance CMS structure.

Goals

Bridge the gap between nature-focused content and high-end, modern web interactions.

Implement a scalable CMS architecture using Finsweet’s Client-First naming convention.

Leverage AI tools to accelerate the research and drafting phase, allowing more time to focus on creative direction and site performance.

Challenges

01 — 05

Discovery

Setting the compass before the journey with the intent of defining goals into a clear, creative direction.

For Fabled Earth, the focus was on 'intentionality.' I identified the core audience as modern minimalists looking for a return to autonomy. The brand identity needed to feel grounded but fluid and responsive as a modern application.

02 — 05

Direction

Mood, references, and visual language that translate abstract ideas into a coherent vision.

I curated a palette of moss greens, soil browns, and slate—colors for an earthy fel. Typography was chosen for its legibility and 'established' feel, blending serif elegance with functional sans-serif and mono for the technical sections.

03 — 05

Design

Key sections, layout systems, typography, and components, all clean, usable, and brand-aligned.

The design utilizes generous negative space to represent the 'quiet' of nature. I leveraged Figma to build a modular system where every component—from the blog cards to the category filters—feels part of a unified brand.

04 — 05

Build

Responsive, accessible implementation that brings the final experience to life.

The build was executed in Webflow using the Finsweet Client-First system for scalability. I integrated GSAP for simple motion animations and utilized a custom AI-tooling workflow to accelerate the population of the 'Rooted Knowledge' blog section, ensuring the site felt 'lived-in' at launch.

05 — 05

Launch + Iterate

Ship, measure, and refine, making improvements based on practicality and feedback.

Post-launch, the focus remains on SEO health and content density. I continue to iterate on the CMS structure, ensuring that adding new entries stay a seamless and easy.