User Flow Description The user flow is streamlined to ensure simplicity and accessibility, particularly for elderly users, while supporting multilingual functionality. Below is the detailed flow: Login with SingPass: Users open the app and encounter the Login Screen, featuring a prominent “Login with SingPass” button. SingPass, Singapore’s national digital identity system , ensures secure authentication. After successful login, first-time users proceed to the Setup Screen; returning users go directly to the Main Fact-Check Screen. Setup Preferences (First Time Only): Users select their preferred language (English, Malay, Mandarin, Tamil) to support Singapore’s multicultural society. Optionally, users choose trusted news sources (e.g., Straits Times, CNA, Today, gov.sg) to personalize fact-checking results. Clicking “Save and Continue” directs users to the Main Fact-Check Screen. Fact-Check Claim: On the Main Fact-Check Screen, users input a claim or headline in a text field and click “Verify.” The app queries the Google Fact Check Tools API to display the claim’s veracity (true, false, partially true) with credible source links. A “Share Result” button allows users to share results via social media or messaging apps using the React Native Share API . Users can access recent fact-checks or navigate to other screens via a menu. Educational Tips: Accessible from the main menu, this screen provides concise tips on spotting misinformation (e.g., checking source credibility, avoiding sensational headlines). Content is presented in the user’s selected language, with large fonts for readability. Settings: Also accessed via the menu, users can adjust language, news sources, or log out. The screen ensures all options are clearly labeled and easy to navigate. --- style guide: Overall Aesthetic: Clean and Minimalist: The design uses ample whitespace, clear typography, and a limited color palette, contributing to a sense of clarity and ease of use. Trustworthy and Secure: The prominent use of shades of blue, green, and a shield icon reinforces the application's security purpose. Card-based Layout: Information is presented in distinct, rounded-corner cards, making it easy to digest and categorize. Subtle Gradients/Shadows: There's a hint of depth, likely through subtle shadows behind the cards or very soft gradients, giving a slightly elevated feel without being flat. Color Palette: Primary Blue (Dominant): A medium, calming blue is used extensively for headers, icons, and primary call-to-action buttons (e.g., "Next" button, background of "Set up scam call blocking" screen). Success Green: A vibrant yet not overly bright green is used to indicate positive affirmations and safety (e.g., "This sender looks safe," verified checks). Warning Red: A distinct, bold red is used to flag potential threats and scams (e.g., "Beware, this looks like a scam"). Neutral Grays/Whites: Off-white for card backgrounds, light gray for subtle borders, text, and descriptive elements. Darker gray for main body text. Subtle Pink/Orange (Accent for Suspicion): Seen in the "Scam call blocking" screen for suspicious numbers, a softer, almost peach-pink is used. Typography: Sans-serif Font: A clean and readable sans-serif font is used throughout, likely a system font or a very similar one like Roboto, Inter, or a similar sans-serif for optimal readability. Font Weights: Bold/Semi-bold: Used for headlines and important short phrases (e.g., "We have submitted a scam report for you," "Safe sender," "Safe link"). Regular: For body text and longer descriptions. Lighter Weight: For secondary information or metadata (e.g., "Last reported 43 mins ago"). Font Sizes: Large for main titles. Medium for subheadings and key information. Smaller for descriptive text and metadata. Icons: Outline and Filled: A mix of outlined and filled icons are used, all in a consistent style. Shield Icon: The most prominent icon, often filled blue or green, representing security and protection. Checkmark: Used for verification and confirmation, often in a circle. "X" Mark: Used to indicate caution or a problem. Person/Avatar Icon: Used for user representation or general placeholder. Phone Icon (Abstract): In the "Set up scam call blocking" screen, a stylized abstract phone icon is part of the shield graphic. UI Elements & Components: Cards: Rounded corners (medium radius). Subtle drop shadow for depth. Solid color fills (white, green, red). Buttons: Primary Button: Filled blue with white text, rounded corners. (e.g., "Next" button). Text Buttons/Links: Underlined or distinct blue text. Progress/Status Indicators: Checklist/Stepper: Seen in the "Scam report" screen with dots and lines indicating stages (filled blue dot for current stage, gray for pending). Lists with Icons: Information presented in lists with leading icons (e.g., checkmarks, warning signs) for quick visual cues. Circular Elements: The "Scam call blocking" screen uses a large circular graphic with a shield at its center, surrounded by smaller circular elements representing numbers. Avatar/Profile Icons: Simple, abstract head-and-shoulders icons. Layout and Spacing: Generous Padding: Ample padding around text and within cards ensures readability and reduces clutter. Consistent Margins: Uniform spacing between elements and sections. Vertical Stacking: Information is generally stacked vertically within cards.

get inspiration from the styling from the attached screenshots