diff --git a/assets/Nudge_Language_Categorized_Updated.json b/assets/Nudge_Language_Categorized_Updated.json new file mode 100644 index 0000000..7603565 --- /dev/null +++ b/assets/Nudge_Language_Categorized_Updated.json @@ -0,0 +1,177 @@ +[ + { + "nudge": "68% of impulse buyers regret their purchase later. Pause to reflect!", + "theme": "Regret", + "type": "Call to action" + }, + { + "nudge": "Over $900 is spent yearly on items people later regret buying.", + "theme": "Regret", + "type": "Statistic" + }, + { + "nudge": "79% of shoppers buy items they never use. Will you?", + "theme": "Regret", + "type": "Call to action" + }, + { + "nudge": "25% of impulse buys are never or rarely used after purchase.", + "theme": "Regret", + "type": "Statistic" + }, + { + "nudge": "56% of online impulse purchases bring buyer's remorse.", + "theme": "Regret", + "type": "Statistic" + }, + { + "nudge": "71% of people regret their spending habits at some point. Will you?", + "theme": "Regret", + "type": "Call to action" + }, + { + "nudge": "78% have felt regret immediately after a purchase. Pause now!", + "theme": "Regret", + "type": "Call to action" + }, + { + "nudge": "Nearly 3 in 4 Americans want to save more and never do. Is it time to start?", + "theme": "Financial", + "type": "Call to action" + }, + { + "nudge": "Landfills overflow with perfectly usable goods. Pause before buying.", + "theme": "Environmental", + "type": "Call to action" + }, + { + "nudge": "Recycling helps but reducing is even more powerful.", + "theme": "Environmental", + "type": "Statement" + }, + { + "nudge": "Do I really need this or just want it for a moment?", + "theme": "Mindfulness", + "type": "Question" + }, + { + "nudge": "Will this item improve my life or clutter it?", + "theme": "Mindfulness", + "type": "Question" + }, + { + "nudge": "Is there a more sustainable way to get this?", + "theme": "Environmental", + "type": "Question" + }, + { + "nudge": "Would saving this money instead feel better later?", + "theme": "Financial", + "type": "Question" + }, + { + "nudge": "Will this purchase create waste later?", + "theme": "Environmental", + "type": "Question" + }, + { + "nudge": "Do you own something similar already?", + "theme": "Mindfulness", + "type": "Question" + }, + { + "nudge": "How will this choice impact you savings goals?", + "theme": "Financial", + "type": "Question" + }, + { + "nudge": "Every purchase adds up. Do you really need this?", + "theme": "Financial", + "type": "Question" + }, + { + "nudge": "3 in 5 people hide items they regret buying at home.", + "theme": "Regret", + "type": "Statistic" + }, + { + "nudge": "Will you still be happy you bought this in a month?", + "theme": "Mindfulness", + "type": "Question" + }, + { + "nudge": "Less stuff = More freedom. Buy thoughtfully.", + "theme": "Mindfulness", + "type": "Call to action" + }, + { + "nudge": "Buying less is the ultimate power move.", + "theme": "Mindfulness", + "type": "Statement" + }, + { + "nudge": "2 out of 3 buyers regret their online impulse purchases.", + "theme": "Regret", + "type": "Statistic" + }, + { + "nudge": "About 80% of people buy items they never use.", + "theme": "Regret", + "type": "Statistic" + }, + { + "nudge": "Shoppers spend around $1,000 a year on purchases they later regret.", + "theme": "Regret", + "type": "Statistic" + }, + { + "nudge": "Over a lifetime, buyers waste $70k on disappointing online purchases.", + "theme": "Regret", + "type": "Statistic" + }, + { + "nudge": "3 out of 4 shoppers have regrets about their spending habits.", + "theme": "Regret", + "type": "Statistic" + }, + { + "nudge": "#1 regret of retirees is wishing they'd saved more. Is it time to start?", + "theme": "Financial", + "type": "Call to action" + }, + { + "nudge": "Will this bring you joy after you buy it?", + "theme": "Mindfulness", + "type": "Question" + }, + { + "nudge": "Will this item improve your life?", + "theme": "Mindfulness", + "type": "Question" + }, + { + "nudge": "Is this a want or a need?", + "theme": "Mindfulness", + "type": "Question" + }, + { + "nudge": "Will you love or regret this purchase in a month?", + "theme": "Mindfulness", + "type": "Question" + }, + { + "nudge": "Do you already own something similar you can use?", + "theme": "Mindfulness", + "type": "Question" + }, + { + "nudge": "Shopping less reduces stress and raises savings.", + "theme": "Mindfulness", + "type": "Statement" + }, + { + "nudge": "A pause is the first step to intentional spending.", + "theme": "Mindfulness", + "type": "Statement" + } +] diff --git a/components/Nudge.tsx b/components/Nudge.tsx index 2739e36..6a82bd1 100644 --- a/components/Nudge.tsx +++ b/components/Nudge.tsx @@ -1,27 +1,8 @@ import { useEffect, useState } from "react" +import nudgesData from "../assets/Nudge_Language_Categorized_Updated.json" import { spacing, textSize } from "../design-system" -const MOCK_NUDGES = [ - { - nudge: - "Every purchase is a vote for the kind of world you want to live in.", - theme: "environmental", - type: "reflection" - }, - { - nudge: - "Waiting 24 hours before buying can save you from impulse purchases you'll regret.", - theme: "financial", - type: "advice" - }, - { - nudge: "The best purchase is often the one you don't make.", - theme: "mindfulness", - type: "wisdom" - } -] - const CHARS_PER_SECOND = 17 const Nudge = () => { @@ -29,8 +10,8 @@ const Nudge = () => { const [visibleCharCount, setVisibleCharCount] = useState(0) useEffect(() => { - const randomIndex = Math.floor(Math.random() * MOCK_NUDGES.length) - setSelectedNudge(MOCK_NUDGES[randomIndex].nudge) + const randomIndex = Math.floor(Math.random() * nudgesData.length) + setSelectedNudge(nudgesData[randomIndex].nudge) }, []) useEffect(() => { @@ -68,7 +49,8 @@ const Nudge = () => { style={{ fontWeight: "600", fontSize: textSize.lg, - color: "var(--text-color-light)" + color: "var(--text-color-light)", + width: "100%" }}> {selectedNudge.slice(0, visibleCharCount)} diff --git a/guide-style.md b/guide-style.md index da804c9..bb58e4d 100644 --- a/guide-style.md +++ b/guide-style.md @@ -30,6 +30,7 @@ When users interact with ThinkTwice, they should feel: 5. **Thoughtful** - "I'm being invited to reflect, not rushed to decide" The interface should never feel: + - Aggressive or pushy - Judgmental or preachy - Cluttered or overwhelming @@ -43,10 +44,12 @@ The interface should never feel: ### The Foundation: Deep Blue-Gray **Background Colors** + - `#3d4f5e` - Main background - `#4a5d6e` - Secondary background **Feeling**: These deep, muted blue-grays evoke: + - **Stability** - Like a calm ocean or evening sky - **Trust** - Professional but not corporate - **Contemplation** - A space for reflection, not action @@ -59,6 +62,7 @@ These colors create a **calm container** that feels separate from the bright, ur **Primary Button Color**: `#b8d8d4` **Feeling**: This soft mint green communicates: + - **Growth** - Like new leaves, suggesting positive change - **Freshness** - A clean slate, a new perspective - **Gentleness** - Soft and approachable, not aggressive @@ -67,6 +71,7 @@ These colors create a **calm container** that feels separate from the bright, ur This is the color of "Sleep on it"—the main action. It's not red (urgent) or orange (aggressive). It's the color of **patience** and **growth**. When users see this color, they should feel: "This is a good choice. This feels right." **Text Color**: `#065F46` (Dark green) + - Provides contrast while maintaining the green theme - Feels grounded and natural @@ -75,6 +80,7 @@ This is the color of "Sleep on it"—the main action. It's not red (urgent) or o **Secondary Button Color**: `#bfdbfe` **Feeling**: This light, airy blue suggests: + - **Clarity** - Like a clear sky, helping you see things clearly - **Calm Confidence** - "I know what I want" - **Openness** - Not defensive, but open to possibilities @@ -83,6 +89,7 @@ This is the color of "Sleep on it"—the main action. It's not red (urgent) or o This color is for "I need it"—acknowledging that sometimes, you do know what you want. It's supportive, not confrontational. **Text Color**: `#223573` (Deep blue) + - Maintains the calm, confident feeling - Professional but approachable @@ -91,6 +98,7 @@ This color is for "I need it"—acknowledging that sometimes, you do know what y **Tertiary Button Color**: `#fca5a5` **Feeling**: This gentle coral-red conveys: + - **Gentle Caution** - Not alarm, but awareness - **Self-Care** - "It's okay to say no" - **Warmth** - Caring, not cold rejection @@ -99,17 +107,20 @@ This color is for "I need it"—acknowledging that sometimes, you do know what y This is for "I don't need it"—a decision that requires courage but shouldn't feel harsh. It's warm and supportive, like a friend saying "You've got this." **Text Color**: `#7F1D1D` (Deep red) + - Grounds the warmth with stability - Feels decisive but not aggressive ### Text Colors: Clarity & Readability **Light Text**: `#d1dce5` + - Soft, readable, and calming - Feels like moonlight—gentle illumination - High contrast against dark backgrounds without being harsh **Dark Text**: `#2d3e4e` + - Grounded and trustworthy - Professional but not cold - Used in popup interfaces for clarity @@ -119,6 +130,7 @@ This is for "I don't need it"—a decision that requires courage but shouldn't f **Popup Colors**: White (`#ffffff`), light grays (`#f9fafb`, `#e5e7eb`) **Feeling**: The popup interface uses a clean, neutral palette that feels: + - **Professional** - Like a well-designed app - **Trustworthy** - Clean and organized - **Uncluttered** - Easy to scan and understand @@ -131,6 +143,7 @@ This is the "settings" space—functional, clear, and straightforward. **Error Color**: `#e74c3c` **Feeling**: Errors should be: + - **Clear** - You know something went wrong - **Not Panic-Inducing** - Mistakes happen, it's okay - **Actionable** - Here's what to do about it @@ -144,16 +157,19 @@ This is the "settings" space—functional, clear, and straightforward. ThinkTwice feels like: **A quiet library corner** - Not a bustling store + - Calm, contemplative space - Time to think - Respectful silence **A trusted advisor's office** - Not a sales floor + - Professional but warm - Supportive, not pushy - Your interests first **A meditation app** - Not a shopping app + - Peaceful and intentional - Focused on mindfulness - About the journey, not the destination @@ -191,32 +207,32 @@ ThinkTwice feels like: ### Main Overlay (Dark Theme) -| Color | Hex | Emotional Meaning | Usage | -|-------|-----|-------------------|-------| -| Background | `#3d4f5e` | Stability, contemplation | Main container | -| Secondary BG | `#4a5d6e` | Depth, sophistication | Secondary containers | -| Primary Action | `#b8d8d4` | Growth, patience | "Sleep on it" button | -| Secondary Action | `#bfdbfe` | Clarity, confidence | "I need it" button | -| Tertiary Action | `#fca5a5` | Gentle caution, self-care | "I don't need it" button | -| Light Text | `#d1dce5` | Clarity, gentleness | Text on dark backgrounds | +| Color | Hex | Emotional Meaning | Usage | +| ---------------- | --------- | ------------------------- | ------------------------ | +| Background | `#3d4f5e` | Stability, contemplation | Main container | +| Secondary BG | `#4a5d6e` | Depth, sophistication | Secondary containers | +| Primary Action | `#b8d8d4` | Growth, patience | "Sleep on it" button | +| Secondary Action | `#bfdbfe` | Clarity, confidence | "I need it" button | +| Tertiary Action | `#fca5a5` | Gentle caution, self-care | "I don't need it" button | +| Light Text | `#d1dce5` | Clarity, gentleness | Text on dark backgrounds | ### Popup Interface (Light Theme) -| Color | Hex | Emotional Meaning | Usage | -|-------|-----|-------------------|-------| -| Background | `#ffffff` | Clean, neutral | Popup background | -| Card Background | `#f9fafb` | Soft, organized | Card containers | -| Border | `#e5e7eb` | Subtle separation | Dividers, borders | -| Primary Text | `#1f2937` | Clear, readable | Main text | -| Secondary Text | `#6b7280` | Supportive, muted | Secondary text | -| Success | `#10b981` | Positive, growth | Success indicators | +| Color | Hex | Emotional Meaning | Usage | +| --------------- | --------- | ----------------- | ------------------ | +| Background | `#ffffff` | Clean, neutral | Popup background | +| Card Background | `#f9fafb` | Soft, organized | Card containers | +| Border | `#e5e7eb` | Subtle separation | Dividers, borders | +| Primary Text | `#1f2937` | Clear, readable | Main text | +| Secondary Text | `#6b7280` | Supportive, muted | Secondary text | +| Success | `#10b981` | Positive, growth | Success indicators | ### Semantic Colors -| Color | Hex | Emotional Meaning | Usage | -|-------|-----|-------------------|-------| -| Error | `#e74c3c` | Clear, not alarming | Error states | -| Disabled | `#cccccc` | Neutral, inactive | Disabled elements | +| Color | Hex | Emotional Meaning | Usage | +| -------- | --------- | ------------------- | ----------------- | +| Error | `#e74c3c` | Clear, not alarming | Error states | +| Disabled | `#cccccc` | Neutral, inactive | Disabled elements | --- @@ -225,12 +241,14 @@ ThinkTwice feels like: **Font**: Inter **Why**: Inter feels: + - **Modern but timeless** - Not trendy, will age well - **Highly readable** - Designed for screens - **Friendly but professional** - Approachable but trustworthy - **Neutral** - Doesn't add personality, lets content shine **Sizes**: Generous, readable + - Never feels cramped or hard to read - Hierarchy is clear but not dramatic - Comfortable line spacing for easy reading @@ -242,11 +260,13 @@ ThinkTwice feels like: ### Animations **Smooth & Gentle** + - 0.2s transitions feel natural, not rushed - Subtle hover effects (slight lift, soft shadow) - No jarring movements or sudden changes **Purposeful** + - Every animation has a reason - Helps users understand what's happening - Feels polished, not flashy @@ -254,6 +274,7 @@ ThinkTwice feels like: ### Hover States **Inviting, Not Demanding** + - Buttons lift slightly—"I'm ready when you are" - Borders glow softly—"I'm here if you need me" - Never aggressive or urgent @@ -270,7 +291,7 @@ When a user encounters ThinkTwice, the visual language should tell this story: 4. **"This is thoughtful"** - Every element invites reflection, not reaction 5. **"This respects you"** - Privacy-focused, user-first, transparent -The style should make users think: *"Finally, a tool that treats me like an adult and helps me make better decisions without being preachy or pushy."* +The style should make users think: _"Finally, a tool that treats me like an adult and helps me make better decisions without being preachy or pushy."_ --- @@ -298,4 +319,4 @@ If the answer is no—if it feels urgent, pushy, judgmental, or manipulative—i --- -*This style guide is about feeling, not just pixels. Use it to make decisions that align with ThinkTwice's core mission: helping people make thoughtful choices with dignity and respect.* +_This style guide is about feeling, not just pixels. Use it to make decisions that align with ThinkTwice's core mission: helping people make thoughtful choices with dignity and respect._ diff --git a/style.css b/style.css index 797e847..17c935c 100644 --- a/style.css +++ b/style.css @@ -86,7 +86,9 @@ body { font-size: 14px; color: var(--text-color-light); margin: 0; - line-height: 1.4; + line-height: 1.5; + word-wrap: break-word; + overflow-wrap: break-word; } /* Circular icon button base */