Samith Wijesinghes' Digital Brain 🧠

    Snapy App Design Specifications

    🎨 Color Palette Suggestions

    When choosing colors for a study app, it’s best to stick to a clean, neutral background with vibrant accents to indicate actions (like flipping a card, marking "correct," or highlighting a tricky subject).

    Option 1: "The Deep Focus" (Calm & Professional)

    This palette uses blues and greens, which are scientifically proven to reduce stress and improve concentration. It's great for university students or intense studying.

    • Primary Background: Off-White (#F8F9FA) - Softer on the eyes than pure white.
    • Card Color: Pure White (#FFFFFF) - Creates a clean container for the text.
    • Primary Brand/Focus Color: Indigo (#4361EE) - A calming, deep blue for main buttons and headers.
    • Success (Got it right!): Mint Green (#2EC4B6) - Fresh and rewarding.
    • Needs Review (Got it wrong): Soft Coral (#EF476F) - Gentle but grabs attention without feeling like a harsh red "F".

    Option 2: "The Energetic Learner" (Gamified & Modern)

    If your app is a bit more gamified or aimed at younger students, this palette is vibrant and energetic without being visually overwhelming.

    • Primary Background: Light Lavender/Gray (#F4F4F9)
    • Card Color: Pure White (#FFFFFF)
    • Primary Brand/Focus Color: Deep Violet (#5A189A) - High contrast and modern.
    • Highlight/Accent: Cyber Yellow (#FFC300) - Excellent for highlighting key terms or "streak" counters.
    • Action Button: Bright Cyan (#00B4D8) - Pops well against the violet.

    Pro Tip for Colors: Don't forget Dark Mode! Students often study late at night. Make sure your app has a dark slate or dark blue background (like #121212 or #1E1E2F) where your accent colors can still pop comfortably.

    ✍️ Font Suggestions

    For a flashcard app, legibility is everything. You want sans-serif fonts that are easy to read at a glance, even on small screens.

    Combination 1: Friendly & Approachable

    • Headings / Front of Flashcard: Nunito or Poppins
      • Why: These fonts have slightly rounded edges, making them feel friendly, less intimidating, and very modern.
    • Body Text / Back of Flashcard: Inter
      • Why: Inter is arguably one of the most readable fonts ever designed for screens. It balances perfectly with a playful header font.

    Combination 2: Clean & Academic

    • Headings / Front of Flashcard: Montserrat
      • Why: Montserrat is geometric, bold, and authoritative. It looks great in all-caps for subject categories.
    • Body Text / Back of Flashcard: Roboto or Open Sans
      • Why: These are standard, highly legible UI fonts. They don't distract the reader, allowing the brain to focus entirely on the subject matter.