README.md — Unstory.live

A Story-First, Emotion-Driven Blogging Platform

---

1. Vision & Philosophy

Unstory.live is a story-first writing platform designed to help people express their experiences, ideas, emotions, and memories freely. Unlike traditional blogging websites, Unstory.live focuses on:

• Emotional expression over technical writing
• Personal storytelling over SEO tricks
• Minimal distractions
• Comfortable, safe writing environment

The design prioritizes human connection, flow state writing, and reader immersion.

---

2. UI/UX Design Psychology

2.1 Core Design Principles

1. Calm Design

Users should feel emotionally safe. Use soft spacing, reduced clutter, warm neutral colors.

Goal: reduce cognitive load → increase writing comfort.

---

2. High Readability

Typography that encourages long reading/writing sessions:

• 18–20px base font
• line-height 1.6–1.75
• wide margins
• serif or geometric sans font

Goal: deep-focus reading experience.

---

3. Flow-State Writing

The editor must feel like a premium Apple Notes + Medium hybrid.

• Distraction-free
• Large whitespace
• Auto-save
• Minimal formatting toolbar

Goal: keep users writing without breaking flow.

---

4. Emotional Aesthetic

Use visuals that trigger comfort and connection.

Color Psychology:

Color	Meaning
Soft beige/cream	Warmth, creativity
Light desaturated blue	Calmness, trust
Earthy brown/charcoal	Stability
Soft gradients	Depth, modern feel

Goal: make users feel like they are telling their story in a cozy personal space.

---

5. Community Without Noise

The platform shows content from real people, but:

• No toxicity
• No comments wars
• No vanity metrics (remove Likes/Views)
• Replace with “Appreciations” (positive framing)

Goal: promote healthier engagement.

---

3. Design System

3.1 Colors

Primary: #1A1A1A (Charcoal Black)
Secondary: #F2EDE7 (Soft Cream)
Accent: #7BA4FF (Calm Blue)
Background: #FFFFFF
Muted Text: #777777
Error: #FF4D4D
Success: #2ECC71

---

3.2 Typography

• Headings: Playfair Display / Georgia (emotional, elegant)
• Body: Inter / SF Pro / Lora (smooth, modern, readable)
• Writing Editor Font: Lora/Georgia (book-like feeling)

---

3.3 Spacing Rules

• Large whitespace
• All sections minimal
• Let stories breathe
• Margins: 100–140px on desktop
• Card padding: 24–32px

---

3.4 Components

Minimal Header

• logo
• search
• write button
• profile menu

Story Cards

• large cover image
• title
• 4-line preview
• author avatar
• “Appreciate” button

Writing Editor

• full-width
• floating toolbar
• auto-save indicator
• dark mode available

Reader View

• centered content
• progress bar on top
• immersive mode (hides side UI)
• clean footer

---

4. Full User Flow of Unstory.live

4.1 New Visitor Flow

1. Landing Page

   • “Write your story. Share your voice.”
   • Showcase inspiring stories
   • Minimal CTAs: Start Writing / Explore Stories

2. Explore Page

   • Trending stories
   • Categories: Life, Growth, Love, Change, Tech, Personal
   • Search bar

3. Sign Up

   • Google
   • Email
   • No phone number → reduce friction

---

4.2 Writer Flow

1. Click Start Writing

2. Enter the Flow Editor

3. Write story with:

   • title
   • subtitle
   • body text
   • images
   • tags

4. Auto-save

5. Publish → get own story page

6. Story appears on feed after moderation (optional)

---

4.3 Reader Flow

1. Explore stories

2. Click any story

3. Enters immersive reading mode

4. Can:

   • Appreciate
   • Follow writer
   • Save to bookmarks

5. Finish → recommended stories appear

---

4.4 Profile Flow

1. Profile page shows:

   • Name
   • Bio
   • Profile photo
   • Stories written
   • Follower count
   • Joined date

2. CTA: Write a Story

---

4.5 Admin Flow

1. Dashboard:

   • Pending stories
   • Reported content
   • Trending stories

2. Approve/reject content

3. Feature best stories

4. Manage tags/categories

---

5. Content Architecture (SEO-Friendly)

URLs:

• Story: /story/story-slug
• User: /@username
• Category: /category/life
• Tag: /tag/motivation

Technical SEO:

• OG Images auto-generated
• Schema.org Article markup
• Canonicals
• Lazy-loaded images
• Optimized sitemaps
• 90+ Lighthouse expected

---

6. Feature Roadmap

MVP (Launch Version)

• Flow Editor
• Publish stories
• Explore page
• User profiles
• SEO-friendly pages
• Basic moderation
• Bookmarks
• Dark mode

V2

• Story Series (multi-part stories)
• Audio versions (AI voice-over)
• Collaborative writing
• Draft sharing
• AI writing suggestions (optional)

V3

• Premium Creator Plan
• Monetization for writers
• Story analytics
• Custom domains for writers
• Story collections

---

7. Brand Identity Summary

• Name: Unstory
• Domain: unstory.live
• Brand Tone: warm, human, safe, expressive
• Audience: storytellers, personal bloggers, journal writers
• Value Prop: A place where your story feels heard
• Visual Style: minimal, airy, calm

---

8. Tagline Options

• Where your story finds its home.
• Write freely. Live deeply.
• Your voice. Your story. Unfiltered.
• Stories that matter.
• Tell the world what you lived.