Scan & Understand Patterns | LlamaPress Pattern Catalog

Pattern · Demo Activity Timeline A record's history as an ordered list of events — who did what, when — so "how did this get like this" is answerable without asking anyone. Scan & UnderstandInspectCoordinate

Anti-pattern · Demo Badge Soup Every attribute rendered as its own coloured pill, so the row is a wall of chips and colour has stopped separating anything. Scan & Understand

Pattern · Demo Card List Records shown as individual bordered blocks rather than table rows — right for a few important, visual or heterogeneous things, and wrong for forty similar ones. Scan & Understand

Pattern · Demo Collapsible Section A named section that folds away, keeping its heading and a count visible — disclosure that lets someone open several sections at once, unlike tabs. OrientInspectScan & Understand

Anti-pattern · Demo Dashboard Disease Everything becomes a dashboard — numbers, charts and tiles — even though the people opening it came to do work, not to look at work. OrientScan & Understand

Anti-pattern · Demo Data Dump Every field the model has, on one screen, at one level of importance — built from the data outward instead of from the job inward. Scan & UnderstandInspect

Pattern · Demo Dense Operational Table A tight, scannable grid built for comparing many similar records at once — the default for operational work, and almost always better than cards. Scan & Understand

Pattern · Demo Filter Bar A row of controls above a collection that narrows it by attribute, with every active filter visible as a removable chip and the whole state carried in the URL. Find & NavigateScan & Understand

Pattern · Demo Grouped List One collection divided into labelled sections with counts, so the shape of the set is visible before any individual row is read. Scan & Understand

Anti-pattern · Demo Horizontal Scroll Table Thirty columns pushed sideways off the screen because nobody decided which ones mattered — so half the data is hidden with no door and no indication it exists. Scan & Understand

Pattern · Demo Inline Editing Change a value where it is displayed, without leaving the screen or opening a form — the shortest possible distance between noticing something is wrong and fixing it. Edit & ManipulateScan & Understand

Pattern · Demo Kanban Board Work shown as columns of cards, one column per stage, moved by dragging — the shape of the whole process visible at once, at the cost of everything a table is good at. Scan & UnderstandMove Through Workflow

Pattern · Demo Master–Detail Drawer Keep the list on screen and open the selected record in a panel beside it, so someone can inspect ten records without navigating ten times. Scan & UnderstandInspect

Visual grammar · Demo Semantic Colour Neutral is the default and colour is an exception that carries exactly one meaning — at most three semantic hues plus greys, and never colour on its own. Scan & Understand

Visual grammar · Demo Spacing and Proximity Whitespace is the primary grouping mechanism. Things that belong together sit close; things that do not sit apart — and uniform padding everywhere is a decision not to have grouped anything. Scan & Understand

Visual grammar · Demo Visual Hierarchy Size, weight, colour and position are a currency with a fixed supply. Spend them in proportion to importance, and accept that emphasising everything emphasises nothing. Scan & Understand

Exemplar What Airtable Figured Out That people already know how to use a grid, and that the winning move is to make the spreadsheet a real database rather than to replace it with forms. Edit & ManipulateScan & UnderstandCreate & Capture

Exemplar What Stripe Figured Out That money software is read far more often than it is written, so the product is built around inspecting a past event rather than performing a new one. InspectScan & Understand