Rachel Stone — Figma to Svelte 5 High-Fidelity Demo

Built With:

Testing & Deployment

Automated E2E testing pipeline includes Vitest and Playwright/Axe-Core checks on every commit.
Accessibility verified via WAVE, Axe, and manual NVDA screen reader audits.
Performance is continuously monitored with daily PageSpeed audits.

Live Demo: https://rachel-demo.oxypteros.com

About The Project

A front-end demo of a Figma design transformed into a high-performance, fully accessible Svelte 5 application.

The goal of this project was to recreate the “premium feel” of the original design while achieving good Lighthouse scores, zero layout shift (CLS), excellent accessibility and strong semantic HTML structure.

Design tools often produce static or heavy code when exporting UI.
This project demonstrate a manual approach using modern tools:

• Pixel-Precision: Accurate recreation of the Figma template.
• Mobile-First: Fully responsive layouts.
• Accessibility: Strict compliance.
• Architecture: Svelte 5 Runes for reactive state.
• Design System: Tailwind CSS for consistent styling.

This demo covers a Vertical Slice (Home Page), showcasing what a production environment would look like.

Tech Stack

• Framework: SvelteKit/Svelte5
• Styling: Tailwind CSS
• Language: TypeScript
• Icons: Unplugin Icons (Custom SVGs)
• Linting: Prettier + ESLint
• Deployment: Cloudflare Pages (Auto Adapter)

Key Technical Highlights

1. Performance Optimization

• Lazy Video Loading: Custom Svelte Action to zero-out battery usage when the video is off-screen.
• CLS Prevention: All images/videos include enforced aspect-ratio.
• Responsive Images: Hand-crafted srcset + sizes for the scaled hero section.

2. Svelte 5 Runes Architecture

• State Management: Replaced legacy stores with $state() for granular reactivity.
• Data Separation: Dynamic content is decoupled from the UI, living in TypeScript files (src/lib/data/).
• Scoped Styling: Tailwind custom utilities for headings, spacing, and typographic rhythm.

3. Accessibility (a11y)

• Semantic Architecture: Proper HTML5 landmarks, headings and region definitions.
• Automated Audits: 100% passing scores on WAVE and Axe DevTools.
• Screen Reader Verified: Manually tested with NVDA to ensure meaningful and logical reading order.
• Keyboard Navigation: Full focus management (no traps), visible focus indicators, and logical tab flow.
• Inclusive Design: Motion-sensitive animations respecting prefers-reduced-motion.

4. UI Features

• Parallax Scroll: Scroll-linked, GPU-accelerated parallax effect.
• Infinite Marquee: Pure CSS looping with gradient masking.
• Comparison Slider: Custom image comparison (no dependencies).

Getting Started

1. Clone the repository

  git clone https://github.com/oxypteros/rachel-figma-svelte.git
  cd rachel-figma-svelte

2. Install dependencies

  npm install

3. Configure Environment Secrets

cp .env.example .env

(Optional: Edit .env and add your Resend API Key if you want to test the email functionality.)

4. Start development server

  npm run dev

License & Attribution

The Code

The source code of this project (Svelte, Tailwind, TypeScript logic) is licensed under the MIT License.

The Design

The visual design, layout, and assets are based on the "Rachel Stone" Template by DjectStudio.

• Source: Personal Fitness Trainer Template
• License: CC BY 4.0
• Modifications: Adjustments were made to fulfill accessibility criteria.