How this redesign
was made.

1 · The brief, distilled

Redesign simplyloveprocess.com without touching its structure: identical pages, sections, information architecture and copy. Change only the look and feel, aimed at a women-focused audience using 2026 design research: warmth over cold, softness over sharpness, texture over flatness — warm minimalism, never sterile or corporate. Color is treated as strategy, not decoration: research suggests up to 85% of purchase decisions are influenced by color, so the palette carries the brand's emotional argument.

2 · Palette — "The Gilded Hour", led by the Simply Love blues

A warm-neutral foundation carries the brand's the four official blues from the Simply Love brand guide (#0418A8, #2D8CCB, #19ADE4, #C6E9F7) as the lead accent: buttons, links, italic accent words, wayfinding. Gold — not brown — is the warm voice: champagne glows, gold tape on the pinned notes, gold rings around the gold Mirror Truth mark, and a blue-to-gold gradient on "Record · Reflect · Realign," echoing the live site. Text sits in brand charcoal; the ivory foundation stays warm.

The blue accent is rationed deliberately — one italic word per headline (echoing the store's blue italic truth), link underlines, button gradients — so each appearance reads as the "optimistic lift" rather than noise. A second, cooler family — watercolor blues lifted directly from Susan's signature logo — carries everything Mirror Truth: the app sections become a “night” moment (as above), while the rest of the site stays golden-hour warm (so below). Two worlds, one duality, on purpose.

3 · Typography — the star of the show

The brand guide names Playfair Display Italic among its faces, so Playfair Display now leads the serif stack — headlines, quotes, and every italic accent word carry it. (Beloved Sans and NEOU, the guide's display faces, aren't openly web-licensed; Work Sans stands in for the quiet supporting text.) Fraunces remains in the stack as a variable-font fallback with four axes. Headlines push optical size to 144 and dial in "SOFT" 60, "WONK" 1 — the "juicy," slightly wonky old-style personality. Italic accent words push SOFT to 100 for a swash-like warmth. Work Sans at weight ~380 keeps body text quiet, grounded and readable. Hierarchy is fluid via clamp(), so the type scales gracefully from phone to ultrawide.

4 · Soft UI & texture

Every surface follows the same tactile logic: rounded cards (14–36px radii), triple-layered warm shadows (--shadow-soft, --shadow-lift), and generous white space. A film-grain overlay — an inline SVG feTurbulence noise, gently animated in 3 steps — gives the whole site the feel of soft paper rather than glass. Hand-drawn botanical line-art (eucalyptus sprigs in sage) is authored as raw SVG paths and draws itself on scroll using stroke-dashoffset, with each path's length measured at runtime.

5 · Brand marks — the real files

Every mark on this site is now Susan's actual artwork, pulled from the brand kit. The Susan Fry signature logo (susan-fry-watercolor-cyan.png, trimmed of its transparent padding) anchors the header and footer. The Simply Love lockup — the interlocking-circles heart in white over the indigo watercolor pool, above “SIMPLY LOVE · THE TRUTH OF YOU” — crowns the outcomes section, and the white heart alone glows on the dark call-to-action bands. The blue heart is the favicon. The official watercolor washes (cyan and indigo) sit as soft textures behind the pull-quotes and page heroes, and the Mirror Truth logo is served straight from mirrortruthapp.com (its background is already transparent — no editing needed), only in the Mirror Truth sections, with the emblem as a 5% watermark behind the night panels.

6 · The Coherence Heart — the landing interactive

The home page opens on a playable idea, not a decoration: 2,600 particles of gold-and-blue light that respond to how you move, not where. Move your cursor harshly and the heart scatters into fog — the particles' turbulence is driven by pointer velocity. Move gently, or simply be still, and the light re-organizes into the Simply Love heart; its heartbeat (a real systolic pulse curve) slows from an anxious flutter to a deep, calm rhythm as a "clarity" meter fills. Hold that gentleness for a few sustained seconds and the heart blooms into the infinity sign — as above, so below — releasing one of the brand's affirmations. There is no score and no way to lose: the only mechanic is kindness, which is the entire thesis of the Simply Love Process rendered as physics. Fear scatters; love organizes.

6b · The other 3D layers

The homepage opens on a real-time Three.js scene: a silk sheet (a 60×34-segment plane) whose vertices ripple through three overlapping sine fields, re-lit every frame by a warm key light, a clay rim light, and a faint sage point light. Vertex colors blend cream → blush → clay across the cloth, and 90 floating dust motes catch the light like late-afternoon sun. The camera leans subtly toward the cursor. The silk is also touchable: moving your pointer across the hero drops soft rings onto the fabric — travelling ripples that fade like water settling. And in every Mirror Truth section lives a second scene: 1,600 particles woven into a five-strand infinity symbol that morphs into a heart when you hover (the infinity-heart), with a breathing four-point star at its crossing. Drag it to orbit — it keeps your momentum, then drifts back to its slow idle spin. Both scenes degrade gracefully: no WebGL or reduced-motion preference, and a calm static frame or gradient stands in.

7 · Motion language

All motion shares one personality: slow, soft, upward. Headlines split into words that rise from a masked line with a 2° settle. Sections reveal with a 42px rise plus a 6px blur-out — the blur is what makes it feel like breath instead of UI. Offer cards tilt in 3D toward the cursor (7° max). A warm "cursor light" — a blurred blush radial in soft-light blend — follows the pointer at 6% interpolation, like carrying a candle across the page. The affirmation marquee, the rotating halo ring around Susan's portrait, and the twinkling stars in the espresso CTA bands complete the set. A hairline clay reading-progress bar tracks the scroll; primary buttons are gently magnetic, leaning a few pixels toward the cursor; amorphous blush blobs morph slowly behind the pull-quotes; and concentric rings pulse behind the Mirror Truth sections — Record, Reflect, Realign as a visual echo. Everything respects prefers-reduced-motion.

8 · How it was actually built

The process, replicable by anyone with Claude:

Capture. Fetch every page of the live site and record its exact structure, copy, links and assets — then audit it in a real browser (enumerating every <img> and testimonial in the DOM) to confirm nothing was missed — the redesign contract is "change nothing but the skin."

Direct. Write the design system first (tokens for color, type, spacing, radius, shadow, easing) as CSS custom properties, so every component is derived, not improvised.

Build. Static HTML + one shared stylesheet + one shared script. No framework, no build step — the same stack the original site used, so deployment is a drag-and-drop swap. Images are referenced from the live site; fonts load from Google Fonts; Three.js from a CDN.

Iterate. Three full critique passes after "completion": one for design faults (contrast, rhythm, spacing collisions), one to deepen the craft (richer 3D lighting, better mobile behaviour, page-level details), one for coherence and QA (accessibility, reduced motion, consistency of voice). The site you're reading survived all three.

9 · The rules that made it feel right

Warmth is a temperature, not a color: every neutral leans yellow-red, every shadow is brown, never black or grey. Softness is a shape and a speed: nothing sharp, nothing faster than 300ms. Texture is quiet: grain at 5% opacity, felt more than seen. And restraint is the actual luxury: one serif, one sans, one accent, one idea per section — personality up top, calm underneath.

← Back to the site