Make it Plai

<!--
This document was generated by Plainify (https://plainify.app)
Platform: Plainify
Format: PLAIN (Product Language for AI Notation)
Author: Halil İbrahim Çakıroğlu (@selfishprimate)
Exported: January 3, 2026 at 05:50 PM GMT+3

Plainify is a multi-platform project definition tool that helps you create
structured documentation for AI coding assistants and development teams.

Learn more: https://plainify.app
-->

# INITIAL PROMPT FOR AI AGENTS

You are an expert UI/UX designer and full-stack developer. I'm providing you with a PLAIN (Product Language for AI Notation) document that contains comprehensive project specifications. Read each section carefully and build the application exactly as specified. Pay special attention to Design Language, Color Palette, Typography, and Frontend Technology sections. Fill any gaps with appropriate defaults that match the overall design direction. Start by setting up the project structure and installing dependencies.

# Project Overview

The project name is "Quitely", which is described as a calmness and mindfulness app designed for people experiencing stress, anxiety, and overwhelm in their daily lives. The core purpose of the project is to help users reduce stress, find calmness, and improve mental well-being through accessible mindfulness practices.


# Design Language

The design style for Quitely is minimalist, with a focus on creating an accessible, clean, calm, and creative experience. The design references key inspiration from the following sources:

- https://www.calm.com - Soothing color palette, gentle animations, and calming visual hierarchy. Focus on spacious layouts that don't overwhelm the user.
- https://www.headspace.com - Playful yet calming illustrations, friendly onboarding flow, and approachable interface design. Warm colors combined with minimalist layout.

Additional notes emphasize the need to create a serene and non-intrusive experience, avoiding overstimulation through excessive colors, animations, or busy layouts. The design should promote mindfulness and tranquility, using gradual transitions and soft micro-interactions. Accessibility for users with anxiety or sensory sensitivities is also a consideration.

## Additional Notes

Focus on creating a serene and non-intrusive experience. Avoid overstimulation through excessive colors, animations, or busy layouts. The design should promote mindfulness and tranquility. Use gradual transitions and soft micro-interactions. Consider accessibility for users with anxiety or sensory sensitivities.


# Color Palette

The primary colors for Quitely are a Soft Blue (#6B9BD1) and Sage Green (#9CBAA5), which are calming colors that evoke serenity and nature. The secondary accent colors are Lavender (#B8A8D8) and Peach (#F4BFA6), which are soft and warm. The application supports both light and dark mode themes.


# Typography

The display font is Inter, the body font is Poppins, and the monospace font is Fira Code. The typescale follows a major second modular scale.


# Icons

The icon library used is Lucide, with an outlined icon style.


# Layout

The responsive strategy for Quitely is mobile-first. The layouts feature simple, card-based designs with generous spacing. A bottom navigation bar is used for primary actions. On mobile, single-column layouts are emphasized to reduce cognitive load, with a focus on vertical scrolling over horizontal navigation. Large, touch-friendly targets (minimum 44x44 pixels) and smooth, gentle transitions between screens are also key considerations.

## Additional Notes

Simple, card-based layouts with generous spacing. Bottom navigation for primary actions. Use single-column layouts on mobile to reduce cognitive load. Emphasize vertical scrolling over horizontal navigation. Large, touch-friendly targets (minimum 44x44px). Smooth, gentle transitions between screens.


# Inspirations

Inspired by:
- https://www.notion.com/ - The modern and minimalist look and feel of Notion.
- https://www.overflow.design/ - The hand drawn illustration style.


# User Stories

As a stressed professional, I want to access quick breathing exercises during my work breaks, so that I can reduce anxiety and regain focus without leaving my desk.

As a new meditator, I want guided meditation sessions with varying lengths, so that I can practice mindfulness regardless of how much time I have available.

As someone with insomnia, I want to listen to calming ambient sounds and sleep stories, so that I can fall asleep more easily at night.

As a user tracking my progress, I want to see my meditation history and streaks, so that I can stay motivated and build a consistent mindfulness practice.

As someone experiencing anxiety, I want reminders throughout the day to pause and breathe, so that I can maintain calmness and mindfulness throughout my busy schedule.


# Functional Requirements

## Must-Have Features

- The system must display four main categories (Smartphone, Tablet, Desktop, Smartwatch) on the homepage.
- The system must allow users to filter templates by device brand within each category.
- The system must allow users to filter templates by device model within each category.
- The system must allow users to filter templates by wireframe type (grid, dot, blank, lined).
- The system must generate downloadable A4-sized printable PDF files for each template.
- The system must provide a one-click download functionality for PDF templates.
- Guided meditation library with sessions ranging from 5-30 minutes, organized by categories (stress, anxiety, sleep, focus)
- Breathing exercises with visual guides and timer (box breathing, 4-7-8 technique, deep breathing)
- Ambient soundscapes library (rain, ocean waves, forest sounds, white noise) with mixing capabilities
- Progress tracking dashboard showing meditation minutes, streak days, and completed sessions

## Should-Have Features

- The system should provide a global search functionality to find templates by device name, brand, or model.
- The system should allow users to combine multiple filters simultaneously (brand + model + wireframe type).
- The system should display the device screen dimensions on each template card.
- The system should show the total number of available templates per category.
- Customizable mindfulness reminders with scheduling options
- Sleep stories and bedtime meditations with fade-out timer
- Favorites system to save preferred meditations and sounds

## Could-Have Features

- The system could store recently downloaded templates in browser local storage for quick access.
- The system could offer a "Download All" option for multiple selected templates as a ZIP file.
- The system could provide a dark mode toggle for the interface.
- The system could allow users to favorite templates for future reference.
- Offline mode for downloaded meditations and sounds
- Social features to share progress with friends and join meditation challenges
- Personalized meditation recommendations based on user mood and activity history

## Won't-Have Features

- The system won't require user registration or authentication.
- The system won't offer custom template generation with user-defined dimensions.
- The system won't provide collaboration or sharing features.
- The system won't include a payment system or premium templates.
- Live meditation classes or video streaming
- Integration with health tracking devices beyond basic mobile sensors


# Page Map

- Home (/): Main landing page with featured meditations, quick breathing exercises, and user progress overview
- About (/about): Company information
- Tablet (/tablet): Tablet category page
- Meditations Library (/meditate): Browse and filter guided meditation sessions by category, duration, and instructor
- Soundscapes (/sounds): Collection of ambient sounds and nature soundscapes with custom mixing options
- Breathing Exercises (/breathe): Interactive breathing exercises with visual guides, timers, and various breathing techniques
- My Progress (/progress): User dashboard showing meditation history, streaks, time spent, and achievements


# Content Structure

The common content types for this application include blog posts, user profiles, categories, pages, tags, and team information.


# Tech Stack

## Database
CockroachDB

## Framework
Next.js

## UI Library
Shadcn

## Animation Library
Framer Motion

## State Management
Zustand

## Authentication
Passport

## Content Management
Markdown

## Hosting
Netlify

Additional notes mention the use of an audio player library (React Native Sound or Expo AV) for meditation and soundscape playback, with background audio support and local storage for offline content. Push notifications for mindfulness reminders are also a consideration.

## Additional Notes

Audio player library (React Native Sound or Expo AV) for meditation and soundscape playback. Background audio support for meditation sessions. Local storage for offline content. Push notifications for mindfulness reminders.


# Core Components

The core components for Quitely include:
accordion, button, card, checkbox, calendar, badge, carousel, chip, date-picker, form, footer, skeleton, switch, slider, sheet, radio, pagination, navigation, menu-bar, separator, select, sidebar, spinner, tabs, tooltip, tag, toast, toggle, drawer, divider, alert, avatar, breadcrumb

Additional components needed are:
Audio Player with playback controls, volume slider, and seek bar. Circular breathing animation component. Timer component for meditation sessions. Waveform visualizer for soundscapes. Achievement/Streak badges.


# Additional Notes

Focus on creating a serene and non-intrusive experience. Avoid overstimulation through excessive colors, animations, or busy layouts. The design should promote mindfulness and tranquility. Use gradual transitions and soft micro-interactions. Consider accessibility for users with anxiety or sensory sensitivities.