SNA Conference App — UI mock

Static HTML. No logic, no framework, no data. Real copy, consuming the shapes in flow/05-contract.md, rendered in the SNA brand — colours, gradient and typefaces read directly off snaworldwide.com and locked into DESIGN.md on 2026-08-06.

Navy #004E7C → blue #0074A8 → cyan #00B5D9 is SNA's own logo gradient, copied exactly. Headings are Barlow Condensed and body is Inter — both SNA's. Cyan never carries text: it fails contrast at 2.3:1, so navy does every job that must be read.

This is the design review. Approving it means the frontend cards get built to look like this. Rejecting a screen here costs seconds; rejecting it after the frontend card costs a deploy cycle.

01 / F1

Sign in — POST /api/auth/request-link

9:41SNA

30 Sep - 2 Oct 2026 · Ho Chi Minh City

The 1st SNA Global Annual Conference

LEAD LOCAL - GO GLOBAL

No password. We email you a link, you tap it, you are in.

Only addresses on the conference guest list can sign in. If yours is not recognised, contact the organisers.

02 / F1

Link sent — 200 { ok: true }

9:41SNA

Check your inbox

We sent a sign-in link to linh.tran@pacificlogistics.vn

The link works once and expires in 15 minutes. Open it on the phone you will carry at the conference.

Not arrived after a minute? Check spam, then ask at the registration desk — the organisers can sign you in directly.

03 / F2 + F5

Event — home, the object page

9:41SNA

Day 1 · 30 September

The 1st SNA Global Annual Conference

12
connections
#4
your rank
18
meetings
Show my QR codeLet someone save your details
Scan someoneSave who you just met

Announcements

Pinned

Welcome Night moved to 19:00

The rooftop terrace opens half an hour later than printed. Same venue.

30 Sep, 08:15

Your 1-to-1 schedule is at the desk

Collect your printed meeting grid when you check in. Table numbers are on it.

29 Sep, 17:40

Airport shuttle times

Shuttles leave the hotel lobby at 07:30, 12:00 and 16:30 on all three days.

28 Sep, 09:00

04 / F3 + F4

My card — GET /api/me/qr, GET /api/me/profile

9:41SNA

Hold this up to be scanned

Screen brightness goes to full automatically

What they will see

LT
Linh Tran
Head of Overseas Development
Pacific Logistics JSC
Company profile
Freight forwarder in Ho Chi Minh City since 2009. Sea and air, 40 staff, own bonded warehouse near Cat Lai port.
Competitive advantage
Same-day customs clearance at Cat Lai. Vietnamese-speaking desk for European shippers.
Website
pacificlogistics.vn
Name card
linh-tran-card.pdf

05 / F3

Edit my card — PUT /api/me/profile

9:41SNA

Edit my card

Six fields visible, everything else behind "More options" — photo, name card upload, and the free note you want to share.

06 / F4

Scan — camera, before a code is found

9:41SNA

Scan a QR code

Point at the code on their phone. It saves by itself.

Looking for a code…

Ask for camera permission the first time only, with a sentence explaining why — iOS refuses silently if the prompt is dismissed.

07 / F4

Saved — 201 { already_existed: false }

9:41SNA

Saved to your connections

You met Marco Bernardi

That is connection number 13. You moved up to #3.

MB
Marco Bernardi
Managing Director
Adriatica Freight Srl
Company profile
Italian forwarder, Trieste and Genoa. Reefer and project cargo into the Adriatic, 65 staff.
Competitive advantage
Own customs brokerage in Trieste. Weekly consolidation box to Ho Chi Minh City.
Website
adriaticafreight.it

08 / F4

People › My connections — tabs as lenses

9:41SNA

13 people, all three days

MB
Marco Bernardi
Adriatica Freight Srl · Trieste
Just now · you scanned
PS
Priya Sharma
Meridian Lines Pvt Ltd · Mumbai
30 Sep, 11:20 · they scanned you
KT
Kenji Tanaka
Nihon Kaiun KK · Yokohama
30 Sep, 10:55 · you scanned
AO
Adaeze Okafor
Gulf of Guinea Cargo · Lagos
30 Sep, 10:31 · you scanned
HM
Hans Muller
Rheinhafen Spedition GmbH · Duisburg
30 Sep, 09:48 · they scanned you
SC
Sofia Castillo
Andes Multimodal SA · Callao
29 Sep, 20:14 · you scanned

09 / F5

People › Leaderboard — GET /api/leaderboard

9:41SNA
486
connections made
#3
you

Top connectors — a prize on Gala Night for number one

1
Priya Sharma
Meridian Lines Pvt Ltd
21
2
Kenji Tanaka
Nihon Kaiun KK
17
3
Linh Tran (you)
Pacific Logistics JSC
13
4
Marco Bernardi
Adriatica Freight Srl
13
5
Hans Muller
Rheinhafen Spedition GmbH
11
6
Adaeze Okafor
Gulf of Guinea Cargo
9

486 is unique pairs across the whole conference. It is not the sum of the numbers on the right — every connection appears in two people's lists.

10 / F7

Join the show — the mandatory tap

21:40SNA

Gala Night · 2 October

Something is about to happen

Tap once now. When the organisers start it, your phone joins in by itself.

Not joined yet
Your screen stays dark until you tap

This tap is not optional decoration. Phone browsers refuse to start a video with sound unless the person has touched the page first — so the app asks for the tap early, while nobody is watching the stage.

11 / F7

Joined, waiting — GET /api/show, state: idle

21:42SNA

Gala Night · 2 October

You are in

Keep this screen open and turn your volume up.

Waiting for the organisers
Starts on its own — do not touch anything

12 / F7

Playing, in sync — state: playing + server_time

21:45SNA

Gala Night · 2 October

Every screen in the room

IN SYNC

Playing together with 214 other phones

13 / F6

Organiser › Door check-in — POST /api/checkin

8:12SNA · ORGANISER

Day 1 · 30 September

Check in at the door

Checked in · 08:12

Kenji Tanaka

Nihon Kaiun KK · Yokohama

Already checked in today. Adaeze Okafor arrived at 08:04 — not counted twice.
83
arrived
214
expected

14 / F2 + F7

Organiser › Console — announcements + show control

21:41SNA · ORGANISER

Organiser

Start the show214 phones have joined and are waiting
Post an announcementReaches all 214 guests at once

The show

214
joined
231
signed in

17 guests have not tapped "Join the show" yet. Their phones will not play — that is the browser's rule, not ours.

If the venue wifi will not carry it, stop here and play the video on the main screen instead. Nothing else in the app depends on this.