Create an editable mobile-first app prototype using the existing project stack for [PROJECT] and [AUDIENCE]. The task is: Event Companion Schedule.

## Required content and structure

Explore sessions by time and track, build a personal agenda, and show conflicts, room changes and event notices.

## Screens and navigation

Build three connected views: Schedule; Session detail; My day. Keep the selected record visible in the screen title or summary. Support an explicit back action and preserve in-progress inputs when moving between views. Keep the primary action near the relevant content and account for mobile safe areas, a visible software keyboard and long translated labels. At desktop widths, adapt the composition without removing a step or changing the task.

## Project inputs

Use [APPROVED_CONTENT] for names, records, labels, quantities and destinations. Ask for missing data instead of inventing operational claims. Demonstration records may use the fictional brand Gather; label these as sample data. Explain which actions are local prototype interactions and which would require authentication, persistence, permissions or a backend. Do not connect external services or claim a transaction was completed unless that integration has been explicitly implemented and tested.

## Design direction

Follow [BRAND_RULES]. When no brand is supplied, use black, white, acid yellow, bold conference typography. Make the workflow recognizable through its own content and controls, rather than repeating generic dashboard cards. Use a consistent spacing scale and clear text hierarchy. Include visible keyboard focus, accessible names, sufficient contrast and non-color status labels. Respect reduced motion and keep animated transitions optional.

## Task-specific acceptance check

- Show overlapping saved sessions and timezone changes explicitly instead of silently removing selections.

## Interaction states

Implement the three-screen happy path with local sample data. Include a useful empty state, validation before completing an action, a loading or pending state and a recoverable failure state. Destructive changes require a review or undo path. Keep the state of a record consistent across all three views. Do not silently discard partially completed input or change a user's choice after a retry.

## Delivery and review

Return the editable app views and explain the data model, any local storage behavior and unimplemented integrations. Test at 320px and a wider viewport, with keyboard navigation and long content. Use the task-specific acceptance check above to review the result before adding features. Keep demonstration behavior clearly distinct from a running production service.

## Reference attachment and reconstruction goal

Attach reference.webp from this prompt’s download bundle alongside this prompt in OpenDesign. Build an editable result with a similar composition and hierarchy; do not embed the whole reference image as the finished interface. Preserve approved project content and brand rules if they conflict with fictional sample labels. If the image is missing or unreadable, ask for it instead of claiming visual fidelity.

## Reference composition — three connected app screens

The attached image shows Gather, a fictional conference app, as three equal-width mobile screens on a pale acid-yellow presentation background. Build Schedule, Session detail and My day as connected app views. Do not render the three-screen montage as one page or use the entire reference as a background. At mobile width show one view at a time. A wider preview may show the views side by side for comparison, but the working app must preserve its navigation and state.

## Schedule screen

Use a near-white canvas with a thin dark outer edge. The header pairs a heavy black Gather wordmark on the left with compact event dates and venue information on the right, plus a search icon. Below it, set an oversized bold Schedule title and a smaller one-line introduction. Add a three-column date selector for Tue Oct 14, Wed Oct 15 and Thu Oct 16; the selected date is acid yellow, the others white with light separators. Below are All tracks and All types filters and a compact list-view control. The main list uses a narrow time column, a vertical track-color bar, then an uppercase track label, bold session title and smaller room label. Each row has a circular plus action aligned at the right and a fine horizontal divider. The illustrated tracks use blue, yellow, pink, green and purple; also show their names so color is not the only cue. The bottom navigation is black, with Schedule, My day, Notices and More; the active icon and label are yellow.

## Session detail screen

Contrast the light list view with a near-black detail surface. Place back, bookmark and share controls across the top. Use a subtle conference photograph behind the upper section with a dark overlay that preserves text contrast. Show a small yellow PRODUCT label, a large two-line yellow Design Systems at Scale title, and a white supporting line. Beneath it, put calendar/time and venue/room metadata in two columns with outline icons. Follow with thin outlined topic tags, a short description and a speaker row with a circular portrait, name, role, organization and disclosure arrow. Use a wide acid-yellow Save to my day button, then a dark outlined Add to calendar button. A divider introduces Related sessions with a small See all action and compact session rows. Keep the navigation back path clear; do not fabricate real speakers or endorsements when replacing demo data.

## My day screen

Return to the near-white surface and repeat the Gather header, date, venue and settings icon. Use a large My day heading and short subtitle. A pale-yellow notification banner contains a bell, bold Time zone change title, supporting text and a dismiss control. Below, show My agenda, Conflicts (1) and Notices (2) as three segments; the selected segment is black with white text. Saved sessions reuse the schedule row anatomy. An overlapping session uses a pale pink panel, red time and track accent, an explicit Overlap with saved session label and a Keep both control. A changed venue appears as a red Room change: B1 → B2 line. Repeat the black bottom navigation with My day active and a yellow count badge on Notices.

## Visual hierarchy and tokens

Use a heavy neutral grotesk for the wordmark and large titles, a readable sans-serif for body and controls, black and near-white primary surfaces, and acid yellow for primary actions and selected states. Start with an 8px spacing scale, 16–24px horizontal page padding, 44px minimum touch targets and strong title/body/metadata contrast. Treat these as implementation starting values, not measured pixel specifications. Preserve the screenshot's compact timetable, bold detail title and clear light/dark contrast. Use original or licensed conference photography and a fictional speaker portrait; keep labels as live text. The rounded controls inside this example are part of Gather's visual reference, independent of the prompt-library site's buttons.

## Interaction and data contract — implement and verify

Use local demo records with stable session IDs, title, track, type, UTC start/end, event timezone, room, previousRoom, speaker and saved state. Keep selectedDate, searchQuery, track/type filters, savedSessionIds and dismissedNoticeIds explicit. The image is conceptual: its dates and timezone wording are not an authoritative event timetable. Correct inconsistent demo dates while preserving the shown hierarchy. Selecting a day updates the date highlight and list. Search matches session and speaker names; filters combine and expose a useful empty state and clear action. Opening a row shows that same session's detail; Back restores the previous list, filters and scroll position. The plus and Save to my day controls save the same session exactly once and change to a clear saved state. Removing it updates My day and notices consistently. Detect overlap with startA < endB and startB < endA for saved sessions on the same date. Show a warning and both records; Keep both acknowledges the conflict without silently deleting either selection. Conflicts shows the affected pairs and links back to their details. A timezone change converts the same UTC instants to the chosen named timezone, updates displayed dates/times and recomputes grouping; it must not change actual event durations. Keep a visible timezone label and a dismissible explanation. A room-change notice shows old and new rooms; dismissing the notice does not revert the new room. For Add to calendar, provide a valid local calendar file or clearly label a demo action; no external calendar connection is implied. Share may use the platform share sheet with a copy-link fallback. Bookmark, notification dismissal and navigation need visible keyboard focus and accessible names. Keep the primary actions reachable above the mobile safe area. Include no-saved-sessions, no-matching-results and recoverable storage-failure states. Do not implement payments, account creation or live event updates unless separately requested.

## Visual comparison and delivery

1. Compare the result with the attached image at matching proportions. Review major region placement, relative image sizes, line breaks, spacing, typography hierarchy, contrast, active states and content density before polishing decorative details.
2. Then test the narrow layout without squeezing desktop text into tiny labels.
3. Keep logos, photos and icons as separate assets and all meaningful labels editable. List any unavailable fonts/assets and any intentional departures. Return the working files plus a concise account of implemented behavior and remaining integrations; do not promise a pixel-identical result from the prompt alone.