A departures board for a kitchen

This is Concept C of five design directions prepared for Borenstein Caterers — the Operations concept, aimed at airline procurement and ops people. Its whole job is to radiate operational competence: 15,000 meals a day, every day, to 50+ airlines. Here is how each piece works.

Concept & art direction

A flight kitchen lives on airport time, so the site borrows the visual language of a departures hall: a split-flap board, tabular mono type, status lamps, marching flow lines, and a floor plan annotated like an ops diagram. Nothing decorative that a dispatcher wouldn't recognize.

Two editorial rules from the pitch brief were treated as hard constraints: no fake testimonials and no invented airline names. Every number on the page — 15,000+ meals/day, 50+ airlines, 1946, El Al ownership since 1970, OU/FDA/USDA — is a stated client fact. The board's "destinations" are internal kitchen lines (HOT KITCHEN, TRAY LINE A…), never airlines, so the live data can be fictional without being false.

Palette

Charcoal and steel do the work; safety orange is rationed to flow, status, and the one number that matters; certificate blue is reserved exclusively for supervision and compliance — so when you see blue, it always means "certified".

Type pairing

IBM Plex Mono plays the flight-information display: the board, timestamps, labels, stats — anything that behaves like data. Archivo at 800 weight, uppercase, tight tracking, is the hard grotesk doing the shouting in headlines. The rule: if it could appear on a monitor in an ops room, it's mono; if it's the company speaking, it's the grotesk.

The signature: a real split-flap board

The production board is not a video or a text swap — each of the 210 cells is a genuine flap mechanism built from divs. A cell holds two static halves (top and bottom) plus a hinged leaf that rotates on the X axis with a CSS 3D transform:

<div class="cell">
  <div class="half top"><span>B</span></div>   <!-- next char, revealed -->
  <div class="half bot"><span>A</span></div>   <!-- current char -->
  <div class="leaf">                          <!-- the moving flap -->
    <div class="face front"><span>A</span></div>
    <div class="face back"><span>B</span></div>
  </div>
</div>

To show a new character the leaf flips rotateX(0 → -180deg) in 78 ms with an ease-in curve (gravity), the back face — pre-rotated 180° with backface-visibility:hidden — lands as the new bottom half, and the cell commits. To travel from A to Z the cell steps through the charset one flip at a time, capped at nine flips so long jumps stay snappy:

var dist = (to - from + CHARSET.length) % CHARSET.length;
if (dist > MAX_STEPS) {           // teleport the start closer,
  from = (to - MAX_STEPS + CHARSET.length) % CHARSET.length;
  cell.paint(CHARSET[from]);      // so every arrival is ≤ 9 real flips
}

The staged clatter is choreography, not chaos: each cell starts at row·90 + column·55 + cell·26 + random(60) milliseconds, so updates ripple across the board left-to-right the way a real Solari board fires solenoids down the line. A 6.2-second scheduler advances one run's status at a time (PREP → PLATING → CHILLING → SEALED → BOARDED) and recycles boarded rows into fresh runs, so the board never freezes and never thrashes. Here is a live row:

With prefers-reduced-motion, every flip collapses to an instant text set and the scheduler slows down — the board still updates, it just stops performing.

The SVG facility plan

The floor plan is a single hand-written SVG: ten numbered zones on a faint grid pattern, a dashed "certified envelope" wall, and one orange production line from the receiving dock to a drawn aircraft-door cutaway. The marching motion is the cheapest trick in the book — a dashed stroke with an animated offset:

.flow {
  stroke: #ff6b1a; stroke-width: 2.5;
  stroke-dasharray: 7 9;
  animation: march 1.1s linear infinite;
}
@keyframes march { to { stroke-dashoffset: -16; } }

Blue pulsing dots mark kosher-supervision posts (the same blue as the Standards cards — the color code holds everywhere), and annotation callouts use thin leader lines like a technical drawing. On phones the plan keeps a minimum drawing width and scrolls horizontally inside its frame instead of shrinking into an unreadable postage stamp.

Photography

Four stills were pre-generated with Nano Banana Pro: the tray line with aircraft in the windows, an overhead fresh-meal tray, a freshness macro, and a black-and-white 1946 airfield scene. One editorial catch: the archival image arrived with era-styled crates lettered for a different (fictional) brand — unusable in a real client pitch where accuracy matters. Rather than regenerate, it was cropped to the delivery truck and the DC-4 on the wet tarmac, which keeps the period mood and loses the wrong name. Captions are styled as mono status strips, so even the photos report in like stations.

Three iteration passes

Do this yourself

• Give data a body. A number in a div is a claim; a number that arrives by physical flaps is an event. If your subject runs on schedules, borrow the display hardware of that world.
• Assign colors jobs, not moods. Orange = movement, blue = certification, everything else stays grey. When a color means one thing, users read it without a legend.
• Cap your animation distance. The nine-flip limit is why the board feels crisp instead of noisy — always give a mechanism a maximum performance length.
• Crop before you regenerate. The wrong brand name in one corner doesn't invalidate a photograph — a tight crop is faster, cheaper, and often better composed.