Listify Style Lab

Five visual directions, four palette variants each. Every page carries the same content in the same order — logo, landing sections, pricing, the phone app, a component sheet — so only the treatment differs. Open any card; on a phone the app section runs edge to edge.

Things to try on each page

Watch the hero animation once, then reload it.
Scroll to the app: tap Groceries, tick a few items, swipe a row left to delete, use Undo on the toast.
Type in Add an item… and press Add; open the … menu for the bottom sheet; try the period tabs.
Check the logo at 16px in the logo section — does it still read?

Mid-century print

1955–72 poster and paperback design: flat cut-paper shapes, a sun-disc logo with the tick punched through it, a slightly out-of-register second print. The chat lands as cut-paper speech shapes and the list prints as a ticket.

Fraunces (display) · Karla (body) · Courier Prime (labels)

Mid-century print — Kodachrome Noon on a phone

1Kodachrome Noon

Straw paper, mustard / teal / tomato. Highest contrast of the four.

Mid-century print — Avocado Formica on a phone

2Avocado Formica

Cream, brown ink, avocado and burnt orange. Cosier, softer.

Mid-century print — Poolside Coral on a phone

3Poolside Coral

Cool sand, navy ink, coral and turquoise. Brighter, Palm Springs.

Mid-century print — Late Matinée on a phone

4Late Matinéedark

Espresso ground with mustard, teal and coral inks. A dark poster.

Swiss grid

International Typographic Style: a visible twelve-column grid, huge flush-left grotesk type, rules at two weights, one accent in solid blocks. Logo is two bars and a tick — a list, finished. This is the cleanest direction; the energy comes from scale.

Archivo (display, width axis) · IBM Plex Mono (labels, numbers)

Swiss grid — Concert Red on a phone

White, warm ink, signal red. Widest type, highest contrast.

Swiss grid — Transit Cobalt on a phone

2Transit Cobalt

White and cobalt, accent in rules rather than mass. Subway signage.

Swiss grid — Press Orange on a phone

Warm paper stock, safety orange. Softest and airiest.

Swiss grid — Night Rail on a phone

4Night Raildark

Ink-navy ground, white type, railway yellow.

Paper & ink

Real stationery: a notebook page under a bulldog clip that writes itself as the chat happens, ink ticks that draw on, a rubber-stamp roundel for the logo. Ruled lines are the layout rhythm; the era shows in materials, not in ornament.

Zilla Slab (display) · Newsreader (body) · Courier Prime (labels) · Caveat (annotations only)

Paper & ink — Ballpoint Blue on a phone

1Ballpoint Blue

White pad, ballpoint blue, red stamp. The crispest.

Paper & ink — Kraft Manila on a phone

Manila ground, black ink, paste-on white labels, violet stamp.

Paper & ink — Graph Green on a phone

Graph paper, fountain-pen green, graphite marks.

Paper & ink — Chalk Slate on a phone

4Chalk Slatedark

Chalkboard slate, chalk white, one yellow chalk. A different material, not a dark mode.

Pop-art comic

Lichtenstein panels and Ben-Day dots, kept clean: halftone only in defined zones, one outline weight, a speech-bubble logo with a tick inside, a 'DONE!' burst when you check something. The hero is three comic panels telling the conversation.

Anton (headlines) · Rubik (body) · Bangers (wordmark and bursts only) · Space Mono (labels)

Pop-art comic — Sunday Funnies on a phone

1Sunday Funnies

Classic CMYK on white, black offset shadows.

Pop-art comic — Factory Pink on a phone

Pale-yellow ground, hot pink and orange, shadows print blue. Warhol.

Pop-art comic — Newsprint Duo on a phone

Two plates only — navy and red on off-white. The most restrained.

Pop-art comic — Midnight Panel on a phone

4Midnight Paneldark

Black night panel, white outlines, magenta / yellow / cyan halftone.

Editorial, done properly

The improved version of the current magazine style — but no cream, no Playfair, no terracotta. A masthead, a cover line at cover scale, the chat set as a printed interview, the use-case ticker as kinetic type. Logo is an L whose foot becomes a check.

Fraunces (display) · Instrument Sans (body) · IBM Plex Mono (running heads, prices)

Editorial, done properly — Press Green on a phone

Ink on a green-cast white, bottle green, chartreuse spark.

Editorial, done properly — Cover Story on a phone

Hard white, electric blue, signal yellow, 5px rules. Businessweek energy.

Editorial, done properly — Sunday Supplement on a phone

E3Sunday Supplement

Pale blue-grey stock, plum, apricot. Gentle but sharp.

Editorial, done properly — Late Edition on a phone

E4Late Editiondark

Deep navy, ivory type, one rubine spot. The night edition.