NOTED

Small acts of care are forgotten quickly, so we are created Noted, a platform to document the small things for your loved ones.

Links

1. Vercel Live Link
2. JS Implemenntation Case study
3. Project Case Study
4. Design Document
5. Contribution Table
6. 1st Presentation
7. Current Presentation
8. Ramnan's Case Study
9. Ejemen's Case Study

---

Style Guide

Layout

• Mobile breakpoint: 768px

Colors

1. Hot Fuchsia: # FD0951
   • Call-to-action buttons, highlights, brand accents
2. Intense Cherry: # CA0741
   • Headings, dividers, emphasis text
3. Lavender Blush: # FFE6EE
   • Page backgrounds, section fills

Color Variables

• Brand Scale: --color-brand-50 --> color-brand-950 (Hot Fuchsia)
• Gray Scale: --color-gray-50 --> --color-gray-950
• Semantic Roles: --color-bg, --color-surface, --color-primary, --color-text, etc.

Fonts

• Urbanist
• IBM Plex Serif
• Delicious Handrawn

Typography Variables

• Font Roles: --font-body (Urbanist), --font-heading (IBM Plex Serif), --font-app (Delicious Handrawn).
• Size Scale: --font-size-xs --> font-size-2xl

Spacing & Shapes

• Spacing Scale: --space-1 --> --space-8 (used across layout and components)
• Radii: --radius-sm, --radius-md, --radius-lg, --radius-pill (for chips, buttons, cards, and avatars)

---

Project Setup

Follow these steps to run the project locally.

Steps

1. Clone the repository: git clone https://github.com/ramyilcodes/NOTED.git
2. Open a CLI in the root of the project
3. Serve the project using one of the options below.

Option 1: Using Node.js

npx serve

Option 2: Using VS Code

• Install the Live Server extension
• Right-click index.html
• Select Open with Live Server

Option 3: Using VS Code Run and Debug

1. Open the project folder in VS Code.
2. Go to the Run and Debug panel (Ctrl + Shift + D).
3. Click Run > Start Debugging.
4. Select a browser environment (for example: Chrome or Edge).
5. VS Code will launch the app in your browser with debugging enabled.

---

Case Study Summary

Link to complete case study here.

Noted is a reflective relationship platform designed to help people recognize and communicate the small, everyday acts of care that sustain emotional connection. Instead of emphasizing grand romantic gestures, it reframes love as presence rather than performance. Highlighting the quiet moments that often go unnoticed but matter most.

The core problem Noted addresses is the invisibility of everyday effort in modern relationships. When love is measured only by big gestures, consistent care can be overlooked, leading partners to feel unappreciated despite genuine effort. Over time, this invisibility creates emotional distance, misinterpretation, and the feeling that love is absent when it is simply unseen.

As a solution, Noted functions as a calm, introspective tool rather than a dating or advice app. Through features like Take Notes, Love Bytes, and gentle Reminders, the platform helps users document small acts, share low-pressure emotional check-ins, and stay intentionally present. The goal is not performance or gamification, but making love visible in its most authentic, everyday form.

This project is built and maintained by

• Ramnan Ramyil: @ramyilcodes
• Ejemen Iboi: @AJ1732