Epic SS-10939 · Phase 1 · INFI Connect

INFI DISPLAY
UI design for every story

One screen design per story in the Display epic — the menu board, the order status screen, and the INFI Connect surfaces that set them up. Colours, type and components are taken from the shipped INFI Connect theme, so these are proposals in the app’s own language rather than sketches in someone else’s.

SS-10939 · Epic11 storiesSpace GroteskInfiColors tokensDrafted 2026-10-02

Foundations

bgBase#0A0F20
bgCard#101528
bgSurface#0D1226
bgElevated#192040
borderSubtle#1A2240
blueBright#4547E8
blue#2A2BC0
textInteractive#7B8FFF
textSecondary#B0BAD4
textMuted#7A8BAD
available#00C896
soldOut#FF3B5C
amber#FFB020
cyan#00D4FF
purple#7C3AED
hidden#4A5578

Type

Screen titleFront Counter
Row titlePickup Screen
BodyLast ping just now
Meta3 screens · next charge 11/8
Section labelASSIGNED CATEGORIES
Numeric4K7Q2M

Space Grotesk throughout, as in the app. Codes, times, device ids and anything a human reads aloud or compares digit by digit is set in mono.

Rules these screens obey

  • A display is one screen. No screen numbers, no tabs, no n-of-m counts.
  • The guest never reads an error. Every failure on a TV resolves to a branded state carrying the brand mark.
  • Content is never re-entered. Images, tags, calories and descriptions come from the item record; Display only chooses what to show.
  • Contrast is the system’s job. The operator picks a brand colour, never a text colour.
  • Money before commitment. What a screen costs is shown in the confirm step, not on the invoice.
  • Setup lives in INFI Connect. No Merchant Console surface in Phase 1.

Surfaces

  • INFI Connect — phone, dark, one column. Every setup and management screen.
  • Menu board — 16:9 TV, read at 3–8 m, landscape, no interaction.
  • Order status screen — 16:9 TV, read at 8 m, two states only.

The TV surfaces are designed for a low-RAM TV browser: flat fills, no blur, no shadows, no web fonts beyond the one family, and nothing that animates continuously.

Components in play

  • Card, row, section label, status badge, status dot
  • Segmented control, switch, slider, stepper
  • Bottom sheet for anything that costs money or destroys something
  • Inline note — blue for a rule, amber for a caution, red for a block
  • Device tile, QR + code pair, TV preview thumbnail

Nothing here is new to the app. Each mock is assembled from components already on screen in INFI Connect today.

SS-10940

S1  Screen Pairing & Setup

The whole setup is two surfaces talking to each other: the TV shows a code, INFI Connect claims it. Nothing is typed on the TV and no remote is needed past turning it on. The screen states its own code large enough to read from across a room, and INFI Connect never asks which position in a wall it is — a display is one screen.

Pair this screen
OR ENTER CODE
4K7Q2M
Refreshes in 4:58
INFI Connect › Displays › +
TV · unpairedCode and QR carry equal weight — a phone that will not scan in a dim dining room still has a 6-character fallback. The timer is visible so a stale code is obviously stale.
9:41INFI Connect
‹
Pair a screen
Main St · San Jose
⟳
POINT AT THE SCREEN
scanning…
or type the code shown on the TV
4K7Q2M
CLAIMING THIS SCREEN FOR
Front Counter
No screen paired yet
Change
A display is one screen. Pairing another device here replaces the one on it.
Pair screen
INFI Connect · pairThe display already exists and already has a name; this step only decides which physical screen fills it. The note sets the single-screen expectation before the operator can form the wrong one.
Pair this screen
OR ENTER CODE
9P2X8B
PREVIOUS CODE EXPIRED · NEW ONE SHOWN
TV · code expiredA code lives five minutes. A screen left on the pairing page overnight is showing a code that would be refused, so it replaces it rather than leaving a stale one readable from the floor.
SS-10941

S2  One Screen Per Display

This story is a subtraction. Everything that made a display a container for several screens leaves the UI: the 1/2/3/4 screen-count picker, the per-screen category tabs, the “SCR n” badges, the n-of-m counts, and dragging a category from one screen to another. Nothing is deleted below the surface — a single switch brings all of it back.

9:41INFI Connect
‹
New Display Group
Create
Menu Board
Order Status
Group name (e.g. Main Counter)
NUMBER OF SCREENS
1
2
3
4
Screen 1
Screen 2
Screen 3
Removed from the UI — kept in the codebase behind kMultiScreenDisplays.
BeforeTwo multi-screen decisions were forced on the operator before they had paired a single TV, and the screen-count choice could not be changed later without re-doing the category split.
9:41INFI Connect
‹
New Display
Create
Menu Board
Order Status
Display name (e.g. Main Counter)
CATEGORIES ON THIS DISPLAY
Espresso
All Day Menu · 9 items
✓
Cold Brew
All Day Menu · 6 items
✓
Pastries
All Day Menu · 12 items
2 categories selected
NowOne name, one list of categories, done. The form lost a whole mental model and gained nothing to replace it — which is the point.
9:41INFI Connect
Displays
+⟳
BEFORE
Front Counter
1/1 online
1/1 screens
1
Paired
Online
NOW
Front Counter
1/1 online
Paired
▭
Paired
Online
A display configured as a 3-screen wall before this change keeps all three screens and stays fully manageable.
List card · the diff“1/1 screens” was a ratio nobody needed to read. It becomes a state: paired or not. The slot number becomes a screen glyph.
Reversible by designEvery control here is wrapped in one flag, not deleted. Turning it on restores the picker, the tabs, the badges and the drag in place, with existing displays untouched.
SS-10942

S3  Template Library & Brand Styling

The operator picks a template, then turns three or four knobs — brand colour, logo, text size, what to show per item. They never pick a text colour, because contrast is the system's job, not theirs. Item images, descriptions, calories and Best Seller tags are read from the item record, so nothing on this screen asks for content that already exists.

9:41INFI Connect
‹
Front Counter
Template
⟳
Overview
Menu
Template
Theme
TEMPLATE
3-COLUMN
Counter
Selected
HERO + 2
Feature
Hero item + 2 columns
LIST
Tall
Portrait
GRID
Photo
Image-led
Template libraryEach preview renders the template's real layout, not a stock photograph, so what is chosen is what appears. Layout differences are named on the card so the choice can be made without opening each one.
9:41INFI Connect
‹
Front Counter
Theme
⟳
Overview
Menu
Template
Theme
BRAND COLOUR
#
LOGO
PNG · 512px
bluebird-mark.png
Shown top-left on the board
Replace
ITEM TEXT SIZE
1.4
Description and price scale with it. Description always reads smaller than the name.
Item images
Off gives a denser, text-only board.
Brand stylingOne slider governs the whole type hierarchy — name, description and price move together, which is the rule the shipped templates already follow (description = 0.78x the item name).
BLUEBIRD COFFEE
BEST SELLER TAGS FROM ITEM RECORD

Espresso

Flat White5.25
Cortado4.75
Americano4.00
Macchiato4.25

Cold Brew

House Cold Brew5.50
Nitro6.25
Sparkling Yuzu6.00

Pastries

Butter Croissant4.50
Morning Bun5.00
Kouign-amann5.75
Resulting boardThe same brand colour drives the category rules and the logo tile. Prices are tabular so the right-hand edge of every column lines up at any text size.
SS-10943

S4  Live Menu Sync & Item Availability

The board has no menu of its own. It points at a menu, and the only decision the operator makes is what an unavailable item should look like — gone, or visibly struck. Everything else happens without them: a price edit, an 86, a new photo on the item record.

9:41INFI Connect
‹
Front Counter
Menu
⟳
Overview
Menu
Template
Theme
Following the live menu
Checked every couple of minutes · updated 2m ago
A sold-out item greys out and keeps its place, so the board never reflows mid-service.
ASSIGNED CATEGORIES
Espresso
All Day Menu · 9 items · 1 sold out
✓
Cold Brew
All Day Menu · 6 items
✓
Pastries
Bakery Menu · 12 items
✓
Refresh this display now
Menu bindingCategories can be pulled from more than one menu, so the menu each one came from is named on its row. Refresh exists for the impatient, not because anything requires it.
BLUEBIRD COFFEE

Espresso

Flat White5.25
Cortado  · sold out4.75
Americano4.00
Macchiato4.25

Cold Brew

House Cold Brew5.50
Nitro6.25
Sparkling Yuzu6.00

Pastries

Butter Croissant4.50
Morning Bun5.00
Kouign-amann5.75
Grey-it-out behaviourThe item keeps its row so the board does not reflow mid-service and send a queue hunting for a line that moved. Hide-it is the other setting and closes the gap instead.
Bluebird Coffee
Breakfast starts at 6:30 AM
Nothing in serviceAn empty menu is a branded holding state, never a blank screen and never an error string. A guest reading this learns something; a guest reading a stack trace does not.
SS-10946

S7  Customer Display — Order Status Screen

This is the only screen in the product whose user is the guest, not the operator. It answers one question from across a room — is mine ready — so it shows numbers at a size that works at eight metres and nothing else. No items, ever: the board is read by everybody standing in the room.

Preparing

A12A14A15 B03B07B11 C02C08

Ready for pickup

A09A11 B01B05
BLUEBIRD COFFEE
TV · order statusReady is a different colour and a different weight, and the order that just moved glows for a beat so a guest who looks up at the right moment catches it. Only numbers appear.
9:41INFI Connect
‹
Pickup Screen
Settings
⟳
Overview
Settings
SHOW GUESTS
●
Order number
A12, B07
Guest name
First name only
Both
A12 · Dana
Item contents are never shown. Everyone in the room can read this screen.
ORDERS ON SCREEN
16
Today’s orders only
Yesterday’s open orders stay off the screen
SettingsThe privacy rule is stated where the choice is made, not buried in a help page. The cap is what keeps a busy lunch from pushing the oldest orders off the readable area.
No orders in progress
Order numbers appear here as soon as they are placed
IdleA pickup screen is blank most of the day in a slow store. Idle is branded, so the slow hours still look deliberate.
SS-10947

S8  Remote Screen Management & Health

The operator is not in the store, and the screen cannot tell them anything. So the list is the product: every display, whether it is connected, and when it was last heard from. Two actions cover the incidents this story claims — refresh it, and make it identify itself so the right TV gets unplugged.

9:41INFI Connect
Displays
+⟳
2
ONLINE
3
TOTAL SCREENS
Bill covers 3 screens · 3 in use · next charge 11/8
Front Counter
Connected
Paired
Pickup Screen
Connected
Order
Drive-Thru
Last seen 1h 12m ago
Offline
Health at a glanceThe list is the whole mechanism: state and last-seen on every row, with the offline one marked where the eye already is. Nothing pushes — the operator learns by opening the screen, which is what the app can honestly do today.
9:41INFI Connect
‹
Front Counter
Overview
⟳
Overview
Menu
Template
Theme
Connected
Last ping just now
ASSIGNED TO THIS DISPLAY
EspressoCold BrewPastries
What this display has been told to show. Not a capture of the screen.
Refresh
Identify
Identify flashes this screen so you can tell it apart from the others on the wall.
Device
8f3a…c1 · paired 12 Sep
Unpair the screen
Display detailThe category chips say what the display was told to show, and the caption says so in as many words — a reconstruction dressed up as a screenshot would lie in exactly the case this screen exists for.
SS-10948

S9  Offline Resilience

The failure this story exists to prevent is a blank TV above a queue. So the board keeps showing the last menu it received, forever if it has to, and never renders a network error where a guest can read it. Staff get a quiet signal that content may be stale; guests get a menu.

BLUEBIRD COFFEE
UPDATED 10:42

Espresso

Flat White5.25
Cortado4.75
Americano4.00

Cold Brew

House Cold Brew5.50
Nitro6.25
Sparkling Yuzu6.00

Pastries

Butter Croissant4.50
Morning Bun5.00
Kouign-amann5.75
Offline, servingThe only change is a timestamp in the corner, sized for a barista standing under it and invisible from the queue. No banner, no colour wash, no apology.
Bluebird Coffee
Waiting for the menu
Never had a menuA screen paired for the first time with no connectivity has nothing cached. It still shows the brand rather than a pairing code it already consumed or a browser error page.
9:41INFI Connect
Displays
+⟳
Front Counter
Not connected · last seen 12m ago
Stale
The screen is still showing the menu from 10:42. It picks up changes on its own once it reconnects.
Pickup Screen
1/1 online
Paired
What the operator is toldThe operator needs to know two things an offline board cannot tell them: it is still showing something, and it will catch up by itself. Both are on the row.
SS-10949

S10  Supported Devices & TV App Distribution

Merchants buy their own hardware, so the most valuable screen in this story is a list of model names with a verdict next to each. The hard constraint is whether the device can be kept awake indefinitely — a stick that lets a screensaver take the board is not a menu board, and the list has to say so before anybody buys one.

9:41INFI Connect
Supported devices
⟳
RECOMMENDED · ALWAYS-ON
Fire TV Stick 4K Max
Install from the device app store
Always-on
Fire TV Cube
Install from the device app store
Always-on
Fire TV Stick 4K · 2018+
Install from the device app store
Always-on
ATTENDED USE ONLY
Fire TV Stick 4K Select
Screensaver cannot be switched off — fine for a staffed screen, not for a menu board
Attended
NOT SUPPORTED
Fire TV Stick 2nd gen
Too old · use a 4K Max instead
No
Supported devicesThree verdicts, by model, with the reason attached. “Attended” is the honest answer for hardware that cannot hold the screen awake, and naming the replacement turns a no into a purchase.
What is this screen for?
▤
Menu Board
Your menu and prices
▦
Order Status
Preparing and ready
Remembered — this screen comes back here after a power cut
First run on the deviceOne app, two products, chosen once with a D-pad. The promise underneath is the important part: a device that loses power returns to the same screen with nobody in the store.
9:41INFI Connect
‹
Before you start
Front Counter
⟳
✓
A supported device
Fire TV Stick 4K Max or newer
✓
Power at the screen
The board runs all day
✓
Wi-Fi the device can reach
Guest networks with a login page will not work
4
TV left on the right input
HDMI 1, HDMI 2 — whichever the device is in
Start pairing
Install checklistEvery item here is a real support ticket. The captive-portal line in particular is the one that turns a two-day outage into a thirty-second fix.
SS-10950

S11  Per-Screen Billing & Entitlement

Nobody should discover the price of a screen on an invoice. The cost is stated in the confirm step, before the screen is paired, and the running total lives on the same strip as screen health. Releasing a screen mid-cycle keeps the seat for the rest of the period, which is said plainly rather than discovered next month.

9:41INFI Connect
‹
Pair a screen
Bluebird Coffee
⟳
▭
Drive-Thru
Ready to pair
Add this screen?
Digital Menu Board
$15.00 / mo
Screens after this
3
Goes on your existing invoice. Next full charge 11/8, same as your plan.
Add screen & pair
Cancel
Confirm before pairingWhat it costs, how many screens that makes, and which invoice it joins — stated before the commitment. “Same as your plan” is the line that kills the fear of a second invoice.
9:41INFI Connect
‹
Displays
Billing
⟳
THIS MONTH
3 screens
$45.00
Digital Menu Board × 3 · one line on your invoice
3 of 3 paid screens in use
Next charge 11/8
Front Counter
Menu board
$15.00
Drive-Thru
Menu board
$15.00
Pickup Screen
Order status
$15.00
Unpair a screen and the seat stays yours until 11/8 — another TV can take it in the meantime. The count drops at the next cycle.
What is being paid forMenu board and order status bill identically and collapse to one invoice line, but the operator still needs the per-screen breakdown to recognise what they are paying for.
9:41INFI Connect
‹
Pair a screen
Bluebird — Ferry Bldg
⟳
!
No payment method on file
A screen is $15.00 a month. Add a card to this merchant and the screen pairs straight after.
Add payment method
Not now
We never start a subscription for a merchant that has not agreed to one. Pairing is blocked, not quietly billed later.
No payment methodThe block is explained with the price, the fix and what happens after the fix. The note states the rule the block protects, which is the one thing a frustrated operator deserves to know.