‍Design Guidelines

1. Color Palette

• Primary: Navy for backgrounds
• Secondary: Light Gold for accents elements
• White for text and contrast- Red for critical actions

‍

2. Typography

• Large: Headlines, screen titles
• Medium: Buttons, important content
• Small: Supporting text, timestamps
• Font weight variations for emphasis

‍

3. Components

• Rounded corners
• Gold fill for primary actions
• Outlined style for secondary actions
• Red text for destructive actions
• Clear focus states
• Built-in validation indicators
• Consistent padding, width and height

‍

Screen Configuration

1. Authentication Screen

• Decorative background image
• BIBLICAI logo with rounded container
• Email/Password input fields with padding
• Password field with visibility toggle
• “Forgot Password” button
• “Log in” button
• Social Login button: “Apple”, “Google”
• “Create Account” button

‍

2. Home Screen

• AppBar: Home button (left), Profile button (right)
• “Talk with the Bible” button
• Feature buttons: “Search”, “Bookmarks”, “Read”
• “Visualize the Bible” button
• Sacred landscape image

‍

3. Chat Screen

• AppBar: Home button (left), BIBLICAI logo (center), Voice search button (right)
• Conversation display area
• Message input field
• Navigation Bar: History, Search, Bookmarks

‍

4. Bible Reading Flow

4.1. Testament Selection Screen

• AppBar:Back button (left), BIBLICAI logo (center)
• Two main buttons: “Old Testament”, “New Testament”
• Each button fills width of screen

‍

4.2. Book Selection Screen

• AppBar: Back button (left), BIBLICAI logo (center)
• Single column ListView of books
• Each book as full-width button

‍

4.3. Chapter Selection Screen

• AppBar: Back button (left), BIBLICAI logo (center)
• Two-column GridView of chapters
• Each chapter as button
• Even spacing between buttons

‍

4.4. Chapter Preview Screen

• AppBar: Back button (left), BIBLICAI logo (center)
• Chapter label and “Read” button

‍

‍4.5. Chapter Detail Screen

• AppBar: Back button (left), BIBLICAI logo (center)
• Scrollable verse display

‍

5. Image Generation Screen

5.1. Prompt Screen

• AppBar: Back button (left), BIBLICAI logo (center), Action buttons (right)
• Image preview area
• Prompt input field
• Generation/Save button
• Disclaimer text

‍

‍5.2. History Screen

• AppBar: Home button (left), BIBLICAI logo (center)
• Three-column image grid
• Plus button (FAB) for new generation

‍

5.3. Image Detail Screen

• AppBar: Back button (left), BIBLICAI logo (center), Action buttons (right)
• Large image display
• Prompt text
• Generation timestamp

‍

6. Profile Screen

• AppBar: Home button (left), BIBLICAI logo (center)
• User Profile: Image, Name, Email
• Support Options: “Share Feedback”, “Report an Issue”, “Contact Us” button
• Account Management: “Change Username”, “Change Password”, “Log Out” (in red), “Delete Account” (in red) button- Preferences: “Bible Version”, Theme Selection Button (toggle)
• Subscription Management: “Manage Subscription” button

…