Orchestration run tracking ticket. Not the real implementation ticket — this exists only so the live timing table has somewhere to post from step 1 onward. The real backend/mobile/web ticket(s) are created and cross-linked here once the run reaches that step.

Requirement:
"feature:
I want you to create the attached Public Monitoring Display design as accurately as possible.

Use the attached HTML/design as the primary visual reference. Do not redesign it or introduce your own visual style. The goal is to reproduce the same UI, layout, spacing, typography, colors, proportions, and interactions.

Design Overview¶

This is a public monitoring / queue display screen for a healthcare environment.

The design has two display modes:

1. Grid View
2. Single View

There should be a small Grid / Single toggle at the top-left that switches between these two layouts.

Overall Page¶

• Fixed design/reference size: 1440 × 1005px
• White main content background.
• Use Inter as the primary font.
• Main blue color: rgb(7, 104, 251) / #0768FB
• Secondary blue: rgb(32, 125, 255)
• Light blue background: rgb(241, 247, 255) / #F1F7FF
• Light blue border: rgb(161, 201, 255)
• Divider blue: rgb(128, 181, 255)
• Text black/dark: rgb(18, 18, 18)

The page should feel like a clean medical/hospital digital signage display: minimal, highly readable, spacious, and optimized for viewing from a distance.

Header¶

Create a header across the top.

Position¶

• Header starts around top: 28px

• Height approximately 80px

• Bottom divider line:

  • 1px
  • blue #207DFF

Logo¶

Place the Dr.Carrot logo on the left.

• Left: approximately 30px
• Width: approximately 238px
• Height: approximately 42px

Use the provided logo asset from the reference design if available.

Title¶

Centered horizontally:

Public Monitoring Display

Style:

• Font: Inter
• Weight: 700
• Size: approximately 35px
• Color: #0768FB
• Single line
• Slight negative letter spacing

Grid / Single Toggle¶

At the top-left, provide two buttons:

• Grid
• Single

Position approximately:

• left: 16px
• top: 16px

Buttons should be compact.

Active button¶

• Blue background #0768FB
• White text
• 1px blue border
• Border radius: 6px
• Padding: approximately 6px 14px
• Font size: 13px
• Font weight: 600

Inactive button¶

• White background
• Blue text
• Light blue border #A1C9FF
• Border radius: 6px
• Same padding and typography

Clicking the buttons should switch the display between Grid and Single modes.

GRID VIEW¶

The Grid view contains four monitoring cards arranged in a 2 × 2 layout.

Grid container¶

Approximately:

• Left: 30px
• Top: 135px
• Width: 1381px
• Height: 832px

Two columns:

• Card width: approximately 678px
• Horizontal gap: approximately 25px
• Vertical gap: approximately 23px

Monitoring Card¶

Each card should have:

• Width: approximately 678px
• Height: approximately 401px
• Border radius: 12px
• Background: #F1F7FF
• Very subtle/light blue border
• No heavy shadow
• overflow: hidden

Each card contains three main areas:

1. Room / Department information
2. Large queue number
3. Next queue numbers

Card Header¶

At the top of each card:

Room information¶

Left aligned.

Example:

[room icon] Room - 140

Style:

• Icon approximately 23px
• Gap between icon and text around 8px
• Font size approximately 20px
• Font weight 500
• Color #0768FB

Department information¶

Right aligned.

Example:

[department icon] General Medicine

Same general styling:

• Icon approximately 23px
• Font size approximately 20px
• Font weight 500
• Blue text

Divider¶

Under the room/department information:

• Horizontal divider
• Approximately 0.5px
• Color #80B5FF

Main Queue Number¶

The queue number should be the most prominent element.

Example:

A-020

Style:

• Centered horizontally
• Font: Inter
• Font weight: 700
• Font size: approximately 100px
• Color: #0768FB
• Very slight negative letter spacing
• No additional decoration

The number should have significant whitespace around it.

Next Queue Section¶

At the bottom of each card:

Text:

Next:

followed by queue-number chips.

Example:

Next: [A-021] [A-022] [A-023]

Position approximately:

• left: 16px
• top: 343px

"Next:" label¶

• Font size: approximately 21px
• Weight: 500
• Color: #121212

Queue chips¶

Each chip:

• Height: approximately 46px
• Border radius: 8px
• Border: approximately 1.3px solid #207DFF
• White/light background
• Blue text
• Font size: approximately 18px
• Font weight: 700
• Horizontal padding around 12px

There should be approximately 10px gap between chips.

Grid Data¶

Use these example cards:

Card 1¶

• Queue: A-020

• Room: Room - 140

• Department: General Medicine

• Next:

  • A-021
  • A-022
  • A-023

Card 2¶

• Queue: C-100

• Room: Room - 325

• Department: Pulmonology

• Next:

  • C-101
  • C-102
  • C-103

Card 3¶

• Queue: B-105

• Room: Room - 251

• Department: Cardiology

• Next:

  • B-106
  • B-107
  • B-108

Card 4 — Waiting State¶

This card represents a waiting/no-current-number state.

• Queue: Please Wait

• Room: Room - 125

• Department: General Medicine

• Next:

  • -

For this card:

• Background: approximately rgb(240,240,240)
• Border: approximately rgb(167,167,167)
• Divider: approximately rgb(167,167,167)
• Label color: approximately rgb(138,138,138)
• Main text color: approximately rgb(138,138,138)
• Main queue font weight: 400
• Next chip border: gray
• Icons should appear grayscale/dimmed.

SINGLE VIEW¶

When the user selects Single, display one large monitoring panel instead of four cards.

Panel:

• Left: 30px
• Top: 135px
• Width: approximately 1381px
• Height: approximately 839px
• Border radius: 12px
• Background: #F1F7FF
• Light blue border
• Overflow hidden

Single View Header¶

Top-left:

Room icon +:

Room - 251

Style:

• Icon approximately 36px
• Font size approximately 31.5px
• Font weight 500
• Blue #0768FB

Top-right:

Department icon +:

General Medicine

Style:

• Icon approximately 40px
• Font size approximately 35px
• Font weight 500
• Blue #0768FB

A horizontal divider should appear below these elements.

Single View Queue Number¶

Center the queue number prominently:

A-020

Style:

• Font size approximately 200px
• Font weight 700
• Color #0768FB
• Horizontally centered
• Large amount of whitespace
• This should dominate the screen.

Single View Next Queue¶

At the bottom:

Next:

followed by:

[A-021] [A-022] [A-023]

The single-view chips should be larger than the grid-view chips.

Approximately:

• Height: 72px
• Border radius: 12px
• Border: 2px solid #207DFF
• Font size: 29px
• Font weight: 700
• Blue text
• Horizontal padding approximately 18px
• Gap approximately 16px

Position approximately:

• left: 20px
• top: 747px

Responsiveness / Display Behavior¶

The original design is primarily intended for a 1440 × 1005 public display.

Prioritize pixel accuracy at this reference size.

However:

• Keep the layout centered.
• Do not allow content to overlap.
• Preserve the relative proportions when the viewport changes.
• On smaller screens, scale the complete display rather than arbitrarily rearranging individual elements.
• Avoid introducing unnecessary responsive breakpoints that change the visual design.

This is a public-facing display, so readability from a distance is more important than dense information.

Interaction¶

Implement:

Grid → displays the 4 monitoring cards
Single → displays the large single-monitoring screen

The toggle should update the view immediately without reloading the page.

Keep the data structure reusable so that monitoring information can later come from an API.

For example:

{
  number: "A-020",
  room: "Room - 140",
  department: "General Medicine",
  next: ["A-021", "A-022", "A-023"]
}

Important Visual Requirements¶

Do NOT:

• Add gradients.
• Add unnecessary shadows.
• Add extra navigation.
• Add sidebars.
• Add dashboard widgets.
• Add charts.
• Add unnecessary animations.
• Change the blue color palette.
• Change the typography hierarchy.
• Invent additional UI elements.
• Replace the minimal medical-display aesthetic with a generic dashboard design.

The result should look like a digital hospital queue/public monitoring screen, not an admin dashboard.

Focus heavily on:

• Exact spacing
• Typography
• Font weights
• Card proportions
• Border radius
• Blue color palette
• Queue-number sizing
• Header alignment
• Room/department alignment
• Next-number chip sizing
• Overall whitespace

Implementation Requirements¶

Before writing the final implementation:

1. Inspect the provided reference carefully.

2. Reproduce the visual hierarchy.

3. Keep all repeated card content data-driven.

4. Keep Grid and Single as separate render states.

5. Use reusable components for:

   • Header
   • View toggle
   • Monitoring card
   • Queue chip
   • Room information
   • Department information

6. Keep the code clean and maintainable.

7. Do not hardcode repeated markup unnecessarily.

8. Use CSS variables/constants for the main colors and spacing where appropriate.

Most importantly:

Do not interpret this as a request to create a similar design. Recreate the provided design as closely as possible.

This version gives Claude the actual dimensions, colors, typography, content, component structure, and interaction behavior from the attached design rather than just describing it generally."

Attached file (read it directly for the real content): /opt/drcarrot-deploy/cross-repo-orchestration/contracts/.attachments/dev-hub-spec-EFGBnguE9Emf4whw8-Public_Display_Standalone__1_.html