I built a website for people that are out of love...

Project Name
Kindling

A quiet digital space for people who feel unseen to feel acknowledged through anonymous human resonance.

Problem Statement

Many social and love-focused platforms reward visibility, romance, and performance. People who are single, emotionally overlooked, or who quietly give more than they receive rarely get a space to express small, genuine feelings without pressure. They are left with “motivation” posts or noisy anonymous apps that lack structure and safety.

Kindling addresses a different problem:

How can someone feel seen without being exposed?

The project solves that problem by providing an intentionally anonymous environment where simple signals of resonance (not likes or clout) produce brief, guided human contact and tiny proof points that someone noticed you without profile-building, comparison, or social pressure.

Target Audience

1. People who often feel unseen or unappreciated.
2. Individuals not looking for dating or romance but for quiet recognition.
3. Students, early-career adults, and anyone in transitional phases who need small, nonjudgmental validation.
4. Users who prefer anonymity and low-pressure interactions over profiles and followers.
5. Users seeking emotional validation rather than romantic engagement
6. Those overwhelmed by traditional social media metrics

Solution Design
I designed Kindling around three human needs: to be noticed, to be safe, and to feel useful. The product flow intentionally keeps interactions short and intentional so users don’t trade one form of loneliness for another.

-Post (minimal friction) — A single textarea prompt (or daily prompt) lets a user post one honest thought. No usernames, no photos, no profile. This lowers the activation energy to share.

-Resonate (no free-text replies) — Other users respond using guided reactions (e.g., “Seen”, “Held”, “You’re brave”) rather than open comments. This prevents performative replies and reduces toxicity.

-Mutual resonance → Spark — If two users react to each other’s posts, the system opens a limited Spark: a timed, anonymous interaction (10 minutes) or a shared micro-activity (pick a song, answer a single prompt). Sparks are ephemeral to discourage dependence and encourage presence.

-Reflection & evidence — After a Spark, the app shows small evidence: “3 people resonated with your post,” and a gentle follow-up prompt the next day to encourage reframing (“What did they see?”). This converts brief attention into cognitive evidence that the user affects others.

-Love Garden & Insights — Each post/reaction increments a shared garden and summary stats (private and non-competitive) so users see collective patterns like “Most-shared feeling today: wanting to be noticed.”

This flow turns raw expression into a repeatable loop: Share → Resonate → Spark → Reflect → Repeat. The UI nudges users from invisibility to recognition without forcing emotional labor.
Users seeking emotional validation rather than romantic engagement

HTML & SEO: Semantic Structure and Accessibility
Semantic HTML Structure
Kindling was structured using semantic HTML5 elements to ensure clarity, accessibility, and search engine readability. Instead of relying solely on

containers, I used structural tags that define purpose and hierarchy.

Navigation ()
Each page begins with a element containing:

1. A logo (SVG icon + text)
2. Primary navigation links
3. Clear anchor links for internal sections Using signals to screen readers and search engines that this is primary site navigation. This improves usability for assistive technologies and supports crawl clarity.

Main Content ()
On the landing page, I wrapped the primary hero section inside :

The tag:

1. Identifies the central content of the document
2. Helps screen readers skip repetitive navigation
3. Improves semantic clarity for search engines
4. Only one is used per page to follow accessibility standards.

Sectioning ()
The site is divided into thematic sections using :

#features
#share
#garden
#faq

Each section contains its own heading (<h2>) to establish a clear content hierarchy.
Example:

<section id="features">
  <h2>Human resonance, 4 steps away.</h2>
</section>

This creates a logical document outline:
<h1> — Core emotional thesis
<h2> — Major sections
<h3> — Feature descriptions
<h4>— FAQ questions

This structured heading system improves:

• SEO ranking clarity
• Content scannability
• Screen reader navigation

Content Blocks ( opportunity)
Although the current implementation uses structured containers for posts and flower cards, these components conceptually represent independent content blocks. In a future iteration, these could be improved using:

This would enhance semantic meaning because each post or bloom functions as standalone content.

Accessibility Considerations

1. Clear Heading Hierarchy
   There is only one <h1> per page, ensuring a clean document outline. Subsections cascade logically using <h2>,<h3>, and <h4>.

2. Descriptive Button Text
   Buttons such as:

“Share anonymously”

“See the Love Garden”

“Resonated ❤️”
Avoid vague labels like > “Click here,” making interactions understandable without visual context.

1. SVG Logo Accessibility The logo icon is inline SVG, ensuring:

• Scalability
• No image distortion
• Decorative consistency

In a full accessibility enhancement, an aria-label could be added to describe the logo for screen readers.

1. Form Input Simplicity The chat page uses a single input field with a clear prompt. The minimal interface reduces cognitive overload and supports ease of interaction.

In future versions, the input would include:
<label for="postInput">Share your thought</label>

To further enhance screen reader compatibility.

SEO Strategy
Although Kindling is conceptually an anonymous platform, the landing page is optimized for discoverability.

1. Keyword-Relevant Title <title>Kindling - A Space to be Seen</title> This includes emotionally relevant keywords such as:

“Space”
“Seen”
“Anonymous”

1. Clear Content Themes Search engines can easily identify:

• Emotional validation focus
• Anonymous posting model
• Non-dating positioning (clarified in FAQ) The FAQ section improves SEO by answering natural user queries such as:

“Is this a dating app?”
“Is it really anonymous?”
This supports long-tail keyword matching.

1. Clean URL Structure The site uses:

• index.html
• chat.html
• garden.html This keeps routing simple and crawlable.

1. Anchor Navigation Internal links like: <a href="#features">

Improve crawl flow and allow search engines to understand page segmentation.
Structural Consistency Across Pages
All pages maintain:
<nav>
Primary content sections
<footer>
This structural consistency:

• Reinforces predictable navigation
• Improves usability
• Strengthens crawl architecture By organizing content into meaningful structural elements rather than generic containers, the platform supports both human users and search engine crawlers, aligning technical implementation with the product’s mission of clarity and simplicity.

CSS Architecture
Design System Using CSS Variables
The foundation of the CSS architecture is built on a centralized design system using :root variables. This ensures consistency, scalability, and easier future modification without refactoring the entire stylesheet.
1.1 Color System
:root {
--pink-sorbet: #F4978E;
--soft-sand: #F8EDEB;
--dusty-rose: #DAADAF;
--charcoal: #2D2D2D;
--white: #ffffff;
--text-main: #4A4A4A;
--text-muted: #8E8E8E;
}

The color system is structured around emotional warmth and softness to match Kindling’s theme of vulnerability and human connection.
--pink-sorbet functions as the primary brand accent (buttons, highlights, active states).
--soft-sand acts as the base background color.
--dusty-rose is used for subtle emphasis and gradients.
--charcoal and --text-main maintain readability and contrast.
This separation allows for:
Easy theme switching
Centralized brand control
Reduced repetition of hex values

1.2 Spacing System (Tokenized Scale)

--space-0: 0.25rem;
--space-1: 0.5rem;
--space-2: 0.75rem;
--space-3: 1rem;
--space-4: 1.2rem;
--space-6: 2.5rem;
--space-7: 3rem;
--space-8: 4rem;

Instead of arbitrary margins and paddings, spacing follows a consistent scale. This improves:
Visual rhythm
Layout harmony
Predictability across components
Every section (#features, #share, #garden) uses these spacing tokens, ensuring uniform vertical rhythm throughout the interface.

1.3 Component Tokens
Reusable sizing tokens were introduced for layout predictability:

--container-bg: 35rem;
--border-radius: 1rem;
--border-radius-btn: 50px;
--width-sm: 25rem;
--width-md: 30rem;
--width-lg: 40rem;

This ensures:
Uniform border radii across cards and containers
Consistent container widths
Scalable button styling
For example, all rounded UI components derive from --border-radius, reinforcing visual cohesion.

1.4 Motion System
--transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);

A unified transition curve is used across buttons, cards, hover states, and animations. This creates:

• Consistent motion feel
• Smooth micro-interactions
• A soft, human-centered interface aesthetic

Layout Architecture: Flexbox & Grid
The layout system uses both Flexbox and CSS Grid strategically depending on structural complexity.

2.1 Flexbox for Directional Alignment
Flexbox was used where linear alignment was required.
Navigation Bar

.glass-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

Flexbox allows:

• Horizontal distribution of logo and navigation links
• Vertical centering
• Responsive stacking in smaller viewports

CTA Group

.cta-group {
  display: flex;
  gap: 1.25rem;
}

This creates:

• Even spacing between buttons
• Easy column stacking under media queries
• Clean horizontal alignment without manual margins

Garden Header Layout

.garden-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

This aligns:

• Section title
• Filter pills
• Ensures responsive flexibility without fixed positioning

2.2 Grid for Complex Content Layouts
CSS Grid was used for multidimensional layouts where rows and columns dynamically respond to content size.
Features Section

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1.5fr));
  gap: 2rem;
}

This enables:

• Automatic wrapping
• Responsive column scaling
• Balanced spacing across screen sizes

Instead of manually defining breakpoints for each column, auto-fit + minmax() allows the browser to dynamically determine layout distribution.

Garden Posts Layout (Complex Component)
The flowers grid represents the most complex layout.

.flowers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
}

Why this is significant:

• auto-fill allows dynamic card insertion without layout breaking.
• minmax(200px, 1fr) ensures minimum readability width.
• Cards scale fluidly across desktop and tablet.
• No hard-coded column count. This is crucial because the Love Garden is dynamic — posts grow over time.

Challenging Component Example: Flower Card System
One of the most technically layered components is the .flower-card.
It combines:

• Grid placement
• Hover scaling
• Staggered animation delays
• Nested flex layouts

State-based styling (e.g., .blooming, .your-post)
Code Snippet

.flower-card {
  background: var(--soft-sand);
  border-radius: 20px;
  padding: 24px 20px;
  position: relative;
  cursor: pointer;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s;
  border: 1px solid rgba(218,173,175,0.15);
  animation: bloomIn 0.6s ease both;
}

.flower-card:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 20px 40px rgba(244,151,142,0.12);
}

Why It’s Challenging

• It integrates animation (bloomIn) with layout rendering.
• It maintains performance while animating multiple elements.

• It includes visual state indicators like .spark-badge.
  It supports special variants such as:
  .blooming
  .your-post
  It uses nested flex containers inside grid containers.
  This layered structure ensures:

• Modularity

• Reusability

• Scalability for dynamic backend integration

3.Responsive Strategy
Media queries are minimal but strategic:

@media (max-width: 768px) {
  .nav-links { display: none; }
  .cta-group { flex-direction: column; }
}

Rather than rebuilding layouts entirely, responsiveness relies on:

• Grid auto-fit behavior
• Flex direction switching
• Relative sizing (rem, clamp()) This reduces CSS complexity while preserving adaptability.

Reflection
The hardest part of building Kindling was designing the Love Garden in a way that genuinely conveyed the emotional intention behind it. Conceptually, the garden represents growth, visibility, and quiet affirmation — each anonymous post becoming something that “blooms.”

However, translating that emotional idea into CSS was challenging.

CSS can control layout, color, spacing, animation, and interaction — but it cannot directly control how something feels. I wanted the Love Garden to feel:

• Soft but not childish
• Warm but not overwhelming
• Alive but not chaotic

• Comforting without looking like a dating app
  Balancing those visual cues required repeated experimentation with:

• Grid layouts (auto-fill vs auto-fit)

• Hover animations and motion timing

• Color transparency and gradients

• Border radius and shadow depth

• Animation delays for staggered “bloom” effects

One of the biggest challenges was avoiding visual clutter. Because posts grow over time, the grid could easily feel crowded. Achieving emotional softness while maintaining structural clarity required careful spacing and subtle motion design.
In short, the most difficult part was not technical complexity — it was emotional translation through CSS.

What I Would Do Differently in Version 2.0

1. More Organic Motion In Version 2.0, I would refine the bloom animations to feel more natural. Instead of simple fade-and-scale effects, I would experiment with:

• Slight vertical floating animations
• Subtle rotation shifts
• Staggered opacity transitions
• Micro-interactions when hovering over “spark” counts This would make the garden feel more alive, rather than simply arranged in a grid.

1. Dynamic Growth Visualization Currently, the Love Garden uses a card-based grid. In Version 2.0, I would explore:

• Variable card sizes based on resonance count
• Color intensity changes based on engagement
• A gradual “growth” animation when a post receives a spark This would visually reinforce the metaphor: appreciation leads to visible growth.

1. Deeper Emotional Feedback At the moment, interaction feedback is visual (hover, scale, spark badges). In the next iteration, I would add:

• Gentle micro-copy after a user resonates (e.g., “You helped this bloom.”)
• Soft transition overlays when a post reaches a milestone
• Small animation feedback on the user’s own post to show impact This strengthens the feeling of being seen — which is the core purpose of Kindling.

1. Accessibility Enhancements In Version 2.0, I would improve:

• ARIA states for resonance buttons
• Keyboard navigation support for flower cards
• Higher contrast mode toggle
• Reduced motion option for users sensitive to animations This would ensure the emotional experience is inclusive.

1. Visual Depth Through Layering To enhance atmosphere, I would experiment with:

• Layered background gradients
• Parallax scrolling effects
• Subtle light blur transitions
• Ambient motion in the garden canvas background These would create a stronger sense of immersion without overwhelming the user.

Final Reflection
The Love Garden taught me that designing for emotion is significantly more complex than designing for function. It required balancing aesthetics, performance, clarity, and symbolism.
The difficulty was not just making something look good — it was ensuring that the design supports the platform’s purpose: helping people who feel overlooked experience visibility and quiet affirmation.
If rebuilt as Version 2.0, I would focus on deepening emotional interaction through motion, dynamic scaling, and more meaningful feedback systems — while maintaining the simplicity that makes the space feel safe.

Github Link :

Pheonixai / Kindling-Love-Project

KINDLING - A SPACE TO BE SEEN

Project Overview

In a digital landscape often dominated by high-decibel social interaction and performance metrics, Kindling serves as a sanctuary for the quiet. I designed this platform to facilitate anonymous, peaceful connection where the value is placed on being heard rather than being "liked." It is a dedicated space for simple human acknowledgement, allowing users to feel a little less alone in their thoughts.

Name : Akinwunmi Fatihat (Solo Member) Team : Team G

Live Deployment

Vercel URL https://kindling-love-project.vercel.app/

Project Documentation

Case Study

Document - https://docs.google.com/document/d/1jRVR9ycD1vFRID3hNQyJAocZVh3TF1Nmh6fa8tuft1Q/edit?usp=sharing

Blog Link - https://dev.to/fatihat_akinwunmi_bde40f0/i-built-a-website-for-people-that-are-out-of-love-20f4

Presentation Link - https://gxunjlst.gensparkspace.com/

Design Document - https://docs.google.com/document/d/1FKs8DCOKQXL7vzuxrV18N3Ext8lRB8awrJnaAzFj6Bg/edit?usp=sharing

---

Brainstorm & Case Study

Project Name: Kindling

Problem Statement: Addressing the digital invisibility and social noise that often alienates introverted individuals or those seeking quiet support.

Target Audience: Introverts, individuals seeking anonymous emotional refuge, and those desiring brief, authentic human connections.

Core Features:

Anonymous "Seed"…

View on GitHub

Live Link :

kindling-love-project.vercel.app