Skip to content

Showroom02Web app — venue operations

VenueOS

Graphite and four states

The book a rooftop actually runs on — tonight’s floor, four weeks of programming, the table pipeline and twelve weeks of takings.

Product
VenueOS — Venue operations
Tenant
Running on LUMEN, Brickell
Sector
Web app — venue operations
Quoted as
Web AppsFrom $5,000
branvisuals.com/demos/apps/venueos

The views switch and wait, the door count moves on its own, the bars grow and the attendance line draws itself, the pipeline advances with an undo, and the regulars filter can empty a column and say so. Everything on it is invented; none of it is a picture.

Open the live product

New tab — the frame above is already running it.

01 — The brief

LUMEN’s website was finished and the business behind it was still being run out of a group chat, a wall planner and a spreadsheet somebody rebuilt every Monday. That is the ordinary shape of the problem: the front of a business gets designed and the part that decides whether it makes money does not. This is that part, built to the standard of the website in front of it.

02The direction

Graphite and four states

Three moves, in the order they were made. Everything after this page — the palette, the type, the sections — falls out of them.

  1. 01

    A website gets one accent. A product needs a vocabulary

    Iris is the brand and every primary action; jade is confirmed and up; amber is held and expiring; rose is released and down. Four colors that mean something, used only where they mean it — so a manager reads the state of the floor before reading a single word. It is the one palette in this showroom with semantics in it, and that is most of the difference between a page and a product.

  2. 02

    Views, not sections

    Tonight, Calendar, Reservations, Revenue — four screens that each answer one question completely, rather than one long page that answers four badly. Switching holds for four hundred milliseconds and shows a skeleton, because that is what a query over a real book costs and software that never waits has never been connected to anything.

  3. 03

    Every state, including the ones nobody demos

    Filter the pipeline to regulars and a column can be empty — so it says so, and offers the way back. Advance a table and a toast says what happened and offers to undo it. Loading, empty, undo: three things a website never needs and a product cannot ship without.

03 — Palette

The colors, and what each one is for.

Every value here is a real token in the build. A palette with a role written beside each color is a palette somebody can hand over — which is the difference between a design and a decoration.

#0a0b0d

Base

The application ground

#121418

Panel

Every card, the rail, the topbar

#191c21

Raise

Hover, the active row, a skeleton

#23272e

Line

Hairlines. There are a lot of them

#ebedf0

Text

Type

#8a9099

Mute

Labels, units, axis ticks

#8b7cf6

Iris

The brand, and every primary action

#4fd1a1

Jade

Confirmed, seated, and up

#e8b45c

Amber

Held, pending, expiring

#e8776b

Rose

Released, canceled, and down

04 — Typography

Two faces, and the reason for both.

Display

Geist

Aa Bb Cc 0123

The quick brown fox jumps over the lazy dog — 1234567890

A face with no opinion, on purpose. The product here is the data; a display face with character would be competing with the numbers it is setting, and in a dense interface that competition reads as noise rather than as personality.

Text

Geist Mono

Aa Bb Cc 0123

The quick brown fox jumps over the lazy dog — 1234567890

Every figure in the app — times, minimums, deltas, axis labels — is set in the mono sibling, so columns align without a table cell and nothing shifts width as a value changes. A chart whose labels resize while the data updates is a chart that shivers.

05 — What it does

The part a template cannot copy.

A run sheet that knows where the night is

Doors, sets, kitchen close and last call, with the current beat marked. It is the one screen a floor manager keeps open, so it is the one the app opens on.

A pipeline you can move

Inquiry, held, confirmed, seated. Advancing a table is one press, it announces itself, and it can be taken back — because the person doing it is holding a radio in the other hand.

Twelve weeks, and the number under them

Revenue as bars, heads through the door as a line over them, and spend per head computed for whichever week is under the cursor. Private hire is seventeen percent of takings on eleven percent of the hours, which is the reason Monday is dark.

It fits in a pocket

The rail becomes a tab bar and the week grid becomes a list under 1024px, because a manager checking the floor at midnight is holding a phone, not sitting at a desk.