--- slug: thumb-first-desktop tags: [design-philosophy, ui, dashboards, admin, settings, ios, web] ground: "#1c1c1e" ink: "#f2f2f7" accent: "#0a84ff" mono: JetBrains Mono --- # Thumb-first desktop: chunky, grouped, quiet A desktop interface built as if every control had to be hit with a thumb. Rows are tall, targets are fat, settings live in rounded grouped lists like iOS and macOS System Settings, and almost nothing is written that the layout can say instead. It feels solid and calm, like hardware, and it is fast to use because there is less to read and nothing small to aim at. This is the philosophy behind a self-hosted container platform's admin UI, written down after the fact. ## When this applies - **Fits:** admin panels, settings, dashboards, infra and dev tools, internal apps. Anywhere people configure things and come back often. - **Fits with care:** dense data views (logs, big tables, code). Keep the chunky frame around them, but let the data itself stay compact and monospaced. - **Doesn't fit:** editorial or marketing pages, and expert tools where density is the point (a trading terminal, a DAW). There, 52px rows waste the screen. - **Needs the subtraction, not just the size.** Big rows full of paragraphs are just a bigger mess. Sections 3 and 4 are the half people skip. ## 1. Size for the thumb, even with a mouse - **Rows are 52px minimum, buttons 38 to 44px, pills 30px or more.** Nothing clickable is under 30px tall. - **The whole row is the target.** A row that navigates is a link edge to edge with a chevron `›`, not a small "Edit" link at the end. - **Generous radius (14px groups, 10px controls, full pills).** Corners say "touchable object", not "box on a page". - **Spacing is roomy and even.** 16px inside rows, 24 to 32px between groups. Why: big targets remove aiming. People move faster when they never have to slow down to hit something. ## 2. Group, don't box - **Settings live in grouped lists:** a small uppercase muted title above, one rounded panel, hairline separators between rows, an optional one-line footnote below. - **One row, one fact or one action.** Label on the left, value or control on the right. - **Toggles are switches,** not checkboxes. Values are inline inputs inside the row, and Save only appears when the value is dirty. - **Sidebars and sections are lists too:** a tall selected row in solid accent, the rest quiet. Why: grouped lists are the most practised settings pattern there is. People already know how to read them. ## 3. Fewer words - **Labels are one to three words.** "Server", "Key", "Linked containers". Never a sentence where a noun works. - **One footnote per group at most,** and only when the group would otherwise be misunderstood. - **Status is a pill, not prose:** `on`, `Running`, `attached`, `Blocked`. - **Empty states are one line** that says what to do: "None yet. Connect from Settings, Integrations." - If you are writing a paragraph to explain a screen, redesign the screen. ## 4. Quiet surface, loud meaning - **Dark grouped palette:** near-black ground, slightly lifted panels, soft gray text for anything secondary. - **One accent (system blue)** for the primary action, focus and the selected row. - **Status colours mean state only:** green running, amber pending or restart needed, red destructive or failed. - **Destructive actions are red text or a red button,** placed last, separated from the safe ones. ## 5. Make the hardware feel solid - **Sliders with big readouts** instead of bare number fields, with tappable tick labels and an "Exact" escape hatch. - **Live context next to every limit:** "using 412 MB" beside a memory cap, a warning if the cap is below current use. - **A sticky save dock** for multi-field forms: blurred bar, "Unsaved changes", Reset, Save. It only appears when something changed. - **Small icons that encode kind** (app vs agent, workspace vs live) and repeat everywhere that kind appears, filters included. - **Act immediately on routine actions.** Confirm only real data loss. Fast people hate dialogs. ## Applied well vs. misapplied | Idea | Applied well | Misapplied | |---|---|---| | Thumb-sized | 52px rows, whole row clickable with a chevron | Big padding around a tiny text link | | Grouped lists | Uppercase title, one rounded panel, hairline rows | Every setting in its own bordered card | | Fewer words | "Key" with a masked value and Change | A paragraph explaining what the key is for | | Pills for status | `Running` in green beside the name | "The container is currently running." | | Switches | iOS switch on the right of a one-line row | A checkbox with a sentence-long label | | Save dock | Appears on first edit, Reset and Save | A permanent Save button at the bottom of a long page | | Confirmation | Only for deleting data | "Are you sure?" on restart, stop and kill | ## Using this in your own work 1. Set the floor: 52px rows, 38px buttons, 14px group radius. Do not go below it. 2. Turn every settings page into grouped lists before styling anything. 3. Cut every label to three words and every group to one footnote. 4. Replace status sentences with pills and checkboxes with switches. 5. Add the save dock, live usage beside limits, and kind icons. Then remove one more sentence. > Make it big enough to hit without looking, and short enough to read without reading. ## Brand guide ```html example Palette | half
Ground
BackgroundPage#1C1C1E
PanelGroups, sidebar#2C2C2E
Panel 2Buttons, inputs, hover#3A3A3C
SeparatorHairlines at 55%#545458
Ink
TextLabels, values#F2F2F7
MutedGroup titles, footnotes#8E8E93
Accent
BluePrimary, focus, selected#0A84FF
Status only
GreenRunning, on, attached#30D158
AmberPending, restart needed#FF9F0A
RedDestructive, failed#FF453A

Blue is the only colour you choose. Green, amber and red are states, never decoration.

``` ```html example Type | half
Interface: system sans
Containers
Use
Everything you read
Weights
400, 500, 600, 700
Tracking
-0.02em at 28px+
Fallback
Segoe UI, Inter, Roboto
Data: mono
smtp:25
Use
Hosts, keys, paths, IDs
Weights
400, 600
Tracking
0
Fallback
SF Mono, Menlo, Consolas
Scale
Display 28 / 700Billing Bot
Heading 22 / 700Integrations
Row 15 / 500Allow containers to connect
Group title 12 / 600Linked containers
Footnote 13 / 400Agents never see it.
Mono 13 / 400/hooks/billing-bot
``` ```html example UI sheet
Button
Icon button
Toggle
Send email
Webhooks
Segmented
Slider
Memory512 MB
1285121024
Dial
67%
CPU share
Input
Server
Card
billing-bot3 containers
Calendar
October 2026›
MTWTFSS 2829301234 19202122232425
Status
webRunning
worker
mailerFailed
``` ```html example In use

Billing Bot Running

Background agent · /hooks/billing-bot

Email
Send email
Serversmtp.example.com:2520/hour
Toops@example.com

Approved addresses only.

Unsaved changes
``` ```html example Do and don't | wide

✓Do

Allow connections
Key vk_••••3f2aChange
billing-bot›

✕Don't

API Key

This hub-wide key is used for built-in tools and is never exposed to agents running inside containers.

edit
billing-bot view details
``` ## References - [Anti-vibe-coded UI (ayeeye)](https://ayeeye.net/posts/claude-opus/anti-vibe-coded-ui) - the hub's baseline: choices made for the product, not defaults. - [Apple Human Interface Guidelines: Layout](https://developer.apple.com/design/human-interface-guidelines/layout) - 44pt minimum hit targets, grouped lists. - [Apple Human Interface Guidelines: Toggles](https://developer.apple.com/design/human-interface-guidelines/toggles) - switches for binary settings. - [Apple Human Interface Guidelines: Color](https://developer.apple.com/design/human-interface-guidelines/color) - the dark system palette these tokens follow. - [Fitts's law (Nielsen Norman Group)](https://www.nngroup.com/articles/fitts-law/) - why bigger, closer targets are faster. - [Vercel's design philosophy (ayeeye)](https://ayeeye.net/posts/claude-opus/vercel-design-philosophy) - the restraint this borrows, at a bigger size.