Designing boards — everything is a widget

Your board is a grid of widgets you arrange by hand. Drag anything anywhere, resize by the corner, and the rest make way — nothing ever overlaps and nothing is ever left crooked.

A dashboard is a board of widgets — charts, lists, entry cards, headings, pictures, containers. Every single one is the same kind of thing: you can move it, resize it, style it, and open its ⋯ menu. There is nothing on a board that isn't a widget.

Reading a board is a clean poster — no menus, no handles. Turn on Edit board (the pencil button by the board tabs) whenever you want to rearrange, resize or open a widget's menu; turn it off (now labelled Done) and you're back to a board that's just there to be read. See Editing widgets for the full rundown.

Arrange it yourself

The board is an invisible grid — twenty-four columns wide, with rows a few millimetres tall. It used to be twelve columns of double-height rows, which meant the smallest nudge you could make was a tenth of the screen; every position and size now snaps at half that step, so a widget can sit and be sized exactly where you want it. Boards you already have look identical — they were converted cell for cell. All of this happens in edit mode — turn it on with the pencil Edit board button, or long-press a widget on a phone or tablet, and everything below becomes grabbable. Reading the board, none of it shows.

Drag anywhere on the board. In edit mode, grab a widget's ⋮⋮ handle and drop it wherever you want it. Taps stop triggering the widget's own buttons while you're editing, until you press Done.
Resize by the corner. Pull the bottom-right corner like a photo; the right and bottom edges work too. It snaps to whole grid cells, so things always line up.
The others make way. As you drag or grow a widget, its neighbours slide out of the way in real time — down and onto the next line, like a chain. Let go and they stay where they landed.
Where you drop it is where it stays. Let go and the board is done — no flash back to where you started, no second jump to catch up. What you see while you drag is exactly what you get.
Nothing ever overlaps. Widgets can't sit on top of each other — drag one onto another and the board rearranges: on a Free board the pair swap places, on a Compact board the rest shift along and the board closes its own gaps. Which of the two you get is Layout in Board settings; Free is the default and keeps the gaps you leave.
New widgets land at the end. Add one and it appears after everything else at a sensible size for its type, then tucks itself into place — and turns edit mode on for you, since you'll usually want to nudge it.
Press Esc mid-drag to abandon the move; press it again with nothing in progress and you exit edit mode. Every move can be undone from the toast that appears — one Undo puts the whole board back, not just the widget you touched.

Every widget has good sizes

Each type of widget knows what sizes it works at. A bar chart starts wider than a single number; a stat starts small.

Widgets that hold a list can go as small as you like. Views, entry cards, panels, text and pictures shrink right down to a single grid cell — they simply show less and scroll inside their box, so nothing is lost. Make a list tiny in a corner and you can still scroll through all of it.

Widgets that draw a picture keep a floor. A bar chart, a donut, a heatmap or a calendar needs room to be a chart at all, so the handle stops before you get to an unreadable sliver. Containers stop too — their contents sit at fixed spots inside the frame, so a squashed container would hide them rather than let you scroll to them.

When you reach a floor, the edge just stops — it never lets you drag smaller and then springs back. A small Smallest size label appears so you know why it stopped rather than wondering whether the drag broke.

Containers — a box that holds widgets

Add a Container from the widget picker and drag other widgets into it. It's a framed panel — a title, a border, a background — and the widgets inside travel with it when you move it.

Stacked (the default) lines its widgets up top-to-bottom with an even gap. Perfect for "a titled panel with three progress bars in it"; drag them to reorder.
Grid gives the container its own smaller grid, so you can place things inside it precisely.

Widgets inside a container drop their own card frame by default — the container is the card, and a card inside a card looks like a mistake.

In edit mode, each widget inside a container keeps its own ⋯ menu, just like anywhere else. The container's own menu doesn't fight a child for the same corner — it hangs off a small labelled "⋯ Container" tab on the container's frame.

You don't have to find them on the board, though. Open the container's own settings and the first thing it shows is Inside this container — every widget in the frame, named by what it is and what it's called. Click one to open its settings; use the arrows to reorder it; or lift it back out onto the board (with an Undo if you didn't mean it). Give the container a Title in the same place and the frame wears it, in your theme, exactly like any other widget's title.

Style — the knobs every widget shares

Every widget has three levels of styling:

A named board style — pick one in the widget's Style tab (or set it as the board's default in Board settings…) and it dresses every widget that wears it in one move. Repainting a whole poster is then a single edit, not twenty.
Its own knobs, in Edit widget → Style (or the ⋯ menu's quick controls) — margin (the gutter between the widget and its grid cell) and padding (inside it, with a per-side "Advanced" option for either), background (a plain tier, a solid colour, or a two-colour gradient), a picture background with a colour overlay so text stays readable over it, border width/colour/glow, corner radius, drop shadow, a widget glow, an accent colour just for that widget's charts, Content scale (shrink or grow everything inside the widget from 50% to 150%, without changing the space it takes up on the board — handy for cramming more into a tile, or making one thing read bigger), and the title bar (show/hide, alignment, uppercase, a plate chip, colour, fill). Enough for everyday tidying — or a full poster panel.
A skin — a fully designed look, written for that one widget: a notched sci-fi plate, a parchment card, a lettered title, a bar with a custom shape.

The AI can dress any widget in a designed look — just ask. Pick Style this widget (AI) in the widget's ⋯ menu, or ask in chat: "give the quests panel a notched violet plate". The skin becomes part of your board's document, so you own it and can edit it any time.

A skin can either wrap the widget's real body — the chart, the list, the card still render inside it, fully live and tappable — or be the widget, when it's pure decoration or lettering. A container's skin can even have several openings, each holding a different widget: one piece of artwork with three real progress bars seated inside it. Either way the usual rules hold: skins can't run their own code, links out are refused, taps still perform the same safe actions (tick, set, log, open a day, open an entry), and colours and fonts come from your theme, so switching themes repaints everything.

Artwork and backgrounds

Background art lives in one of two places: the board's own background (a picture or gradient behind everything), or a skinned widget — the artwork is the widget's dress, and it moves and resizes like everything else. There is no separate floating decoration layer to lose track of.

Board background and theme

Board menu → Board settings…:

Layout — whether the board is Free (widgets stay exactly where you put them, gaps and all — the default) or Compact (widgets float up to close gaps). Widgets never overlap either way.
Background — upload a picture (with a preview and a Remove button), or pick a colour or a two-colour gradient, plus a texture. A picture here becomes the whole app's background while the board is open, fading in as you arrive and back out as you leave — see The app background.
Heading font — which of your theme's fonts the board's headings use.
This board's theme — a board can wear its own theme while the rest of the app keeps yours. A violet HUD board and a cream planner board can both be right at once.
Widget styles — the named styles you can hand out to widgets (see above). Three starting points are seeded for you: Clean (a plain hairline card), Poster (roomy, borderless, softly shadowed, titles hidden — the look a poster panel usually wants), and Compact (tight and boxy). Rename, edit or delete them, add your own, and pick one as the board's default so any widget that hasn't chosen its own style still matches.

On your phone

Your board reflows automatically: the same widgets in the same reading order, on a narrower grid. Wide ones go full width, narrow ones go half, and containers travel as one piece with their contents intact.

If you want a different phone order, use Board menu → Phone layout… on a computer: it shows your board at phone size and lets you drag the order, switch a widget between half and full width, and hide or show things. It only ever changes the phone view — your desktop layout is untouched.

Editing the document

Board menu → Edit dashboard (JSON) shows the whole board as one readable document:

{
  "version": 3,
  "name": "My board",
  "widgets": [
    { "id": "…", "chart_id": "…", "x": 0, "y": 0, "w": 6, "h": 4 },
    { "id": "…", "chart_id": "…", "x": 6, "y": 0, "w": 6, "h": 4,
      "container": "…", "chrome": { "frame": "flat" } }
  ]
}

Each widget is one small object: how big it is (w, h) on the twenty-four-column grid, where you'd like it (x, y), plus anything you've styled. On a Free board — the default — the y is the answer and your gaps are kept; on a Compact board the y is a hint about order and the board floats everything up, working out the exact rows itself. Either way a hand-typed or AI-written document can never come out overlapping or torn. A widget's ⋯ menu → Edit in JSON jumps straight to its lines, and everything you save is strictly validated, so a typo can't wreck a board.