System Requirements Document (SRD)

Project Name: Stone-Yoga

1. Introduction

Stone-Yoga is a boutique yoga studio located in Bangkok, Thailand, offering vinyasa, yin, and breathwork classes. This document outlines the system requirements for the development of a landing page for "Sala," the studio's online presence. The design will precisely replicate the attached reference image, ensuring alignment with its editorial magazine aesthetic. Alternating background colors will be used to separate sections, enhancing visual clarity while maintaining the serene tone of the studio's brand.

2. System Overview

The landing page will serve as the primary online interface for Sala, providing essential information about the studio, its offerings, and pricing. It will feature an asymmetric bento-grid layout with generous whitespace, photo-first design, and typography that matches the reference image. The page will include sections for class types, schedules, pricing, teacher bios, and contact information. Alternating background colors (warm cream and beige) will visually distinguish sections while maintaining harmony with the overall design.

3. Functional Requirements

• As a User, I should be able to view the studio's philosophy and offerings on the landing page.
• As a User, I should be able to explore class types with descriptions and links for more information.
• As a User, I should be able to view the weekly class schedule with teacher names.
• As a User, I should be able to see pricing options and click "Get started" to purchase a package.
• As a User, I should be able to read teacher bios to learn more about the instructors.
• As a User, I should be able to find the studio's address, opening hours, and contact details.
• As a User, I should be able to access social media links and copyright information in the footer.
• As Admin, I should be able to update class schedules, teacher bios, and pricing information.

4. User Personas

1. Admin

• Manages class schedules, teacher bios, and pricing updates.
• Ensures the website content is accurate and up-to-date.

2. User

• Prospective or returning yoga students exploring class options, schedules, and pricing.
• Interested in learning about the studio's philosophy and teachers.

5. Visuals Colors and Theme

Color Palette

Based on the reference image and user request for alternating section backgrounds, the following color palette is implemented:

• Background:

  • Primary: #F5EFE6 (warm cream)
  • Secondary: #EFE7DA (beige)

• Text Primary: #1A1A1A (near-black)

• Accent: #FF6B35 (warm coral)

This palette reflects a clean, modern aesthetic with warm accents to evoke a sense of calm and focus.

6. Signature Design Concept

Editorial Bento Grid with Alternating Backgrounds and Carousel Animation

The homepage will feature a unique design inspired by the boutique yoga studio's serene atmosphere and the editorial magazine aesthetic:

• Hero Section:

  • Left column: Vertical navigation menu with active page indicator styled in serif italic and arrow icon.
  • Right column: Large lifestyle image of yoga practice with floating cards for pricing ("Drop-in / 600 THB").

• About Section:

  • Includes a dynamic photo carousel with square images that extend beyond screen boundaries.
  • Images will slowly animate from left to right, creating a flowing gallery effect.
  • Headline: "Twelve students. One teacher. Full attention." with "One teacher" in italic.

• Transitions: Smooth fade-ins and slide animations between sections to maintain a tranquil flow.

• Interactive Schedule: Weekly grid with hover effects revealing additional details (e.g., teacher bio snippet).

• Micro-Interactions: Buttons and links will have soft ripple effects upon click, mimicking the flow of water.

• Typography:

  • Headlines use large serif display fonts with italicized emphasis words (e.g., "slow, attentive").
  • Body text uses clean sans-serif fonts with generous line-height.

• Alternating Backgrounds: Sections will alternate between warm cream (#F5EFE6) and beige (#EFE7DA) to visually separate content blocks while maintaining harmony with the overall design.

This design will make the landing page visually memorable while staying true to the studio's quiet confidence.

7. Non-Functional Requirements

• The website must load within 2 seconds on standard broadband connections.
• It must be responsive and optimized for mobile, tablet, and desktop devices.
• The design must adhere to accessibility standards (WCAG 2.1 AA).
• The system must support Thai and English languages.

8. Tech Stack

Frontend

• React for Web

Backend

• Python
• FastAPI

Database

• MySQL (with Alembic for migrations)

AI Tools

• GPT 5.4 for user-friendly responses

Local Orchestration

• Docker
• Docker-compose

9. Assumptions and Constraints

• The studio operates from a single location, so the website will not require multi-location support.
• The schedule and pricing data will be provided by the admin and updated manually.
• The design reference provided will serve as the sole visual guide.

10. Glossary

• Hero Section: The topmost section of a webpage, typically featuring a headline and call-to-action buttons.
• WCAG: Web Content Accessibility Guidelines, standards for making web content accessible to all users.
• Micro-Interactions: Small, subtle animations or effects that enhance user experience.
• Bento Grid: A layout style with asymmetric, varied card sizes and generous whitespace.
• Carousel Animation: A dynamic gallery where images move slowly in a horizontal direction.