The rules every screen follows. Two small decisions per screen, from two short lists — not one layout applied everywhere, and not twenty-nine separate ideas.
How the screen divides. One column, two panes, three panes, a prompt that owns the page. Chosen once per screen, from what the work actually needs.
How a list of things looks inside that skeleton. Cards, rows, a dense table, flat sections. Chosen once per kind of content, then never varied again.
Cards and dense tables are not alternatives to split panes. They sit inside one. Separating the two decisions is what makes mixing safe: the skeleton can change screen to screen while every list in the product still looks identical.
Pick one per screen, from what the work on that screen actually is. Three of these eight carry almost the whole product; the rest are here so you can see what was ruled out and why.
Navigation, then one scrolling body. Nothing competes for attention.
A list on the left, the selected thing on the right. You never lose your place.
A filter, a list, a detail. Earns its width only when the filter is used constantly.
The input is the page. Results stack above it as they arrive.
Controls left, the thing being made on the right, updating as you type.
Floating panels over a workspace. Powerful, and a steep first ten minutes.
Columns you drag between. Only right when things really move through stages.
A time grid. The expected second view of anything that schedules posts.
In use: single column, prompt-first, form + live preview, and three-pane on Inbox alone. Four shapes across the whole product.
Held back: calendar is the obvious second view for Publish once scheduling exists. Board needs real stages on leads before it means anything. Canvas is a different product.
Treatment is chosen once per kind of content and then never varied — that single rule is what lets the skeleton change from screen to screen without the product coming apart.
Few items, each one a thing you act on, each with a mark of its own.
A list you scan top to bottom. One hairline between, no boxes, no corners.
Many items, compared field by field. Columns line up so the odd one out is obvious.
Forms and settings. A heading, a hairline, the fields. No container at all.
Tiles of different weight, one glance. Earns its place once, on the dashboard.
A generated result is recognised by looking, so it gets a thumbnail, never a row of text about it.
Personality does not come from the skeleton. It comes from the parts that never change. Break these and it falls apart however few layouts you use.
| Screen | Skeleton | Treatment |
|---|---|---|
| Home page | Marketing — its own patternChanged | See below |
| Dashboard | Single column | Bento, then divided rows |
| Calendar | Calendar grid + day pane | Divided rows |
| Create Center | Prompt-first | Divided rows |
| Create · Image, Video, Audio, Article | Form + live preview | Flat sections |
| Inbox | Three-pane | Divided rows |
| Channel connections | Single column | Cards, then dense table |
| Publish | Form + live preview | Flat sections |
| Insights · Overview | Single column | Bento, then dense table |
| Insights · Posts | Single column | Dense tableNew |
| History | Single column | Contact sheet |
| Lead generation | Single column | Dense table |
| Lead settings | Single column | Flat sections |
Templates, Canvases, Replica, Brand Profile, Knowledge, Media Library and Tutorials are not drawn yet — each is a single column with the treatment its content asks for.
The marketing page sits outside the product rules above, and now has rules of its own. They apply to that page only — nothing inside the platform follows them.
An empty screen is not one state, it is four, and they must not look alike. Showing the wrong one makes people do the wrong thing — create a duplicate, re-run a job, or decide the product is broken.
A new account. Nothing is wrong — there has simply never been anything here. Keeps the space, names what belongs there, offers the one action that fills it.
There is plenty of data. The search or the filter excluded all of it. Shows what was excluded and how many exist.
The request failed. Looks wrong on purpose — a failure drawn as emptiness gets fixed by making a second one.
One tile has no data while the rest of the page is full. Same size, no button, so the page does not jump as data lands.