Layout

Layout

• Align optically, not geometrically. When a button has text and an icon, give the icon a hair less padding so the lockup looks centered. Fix the SVG, not the layout, when a shape leans. Inline marks, @handles, swatches, code, sit on the same baseline as the sentence. Same size. Same color as the words. A quiet wash, not a button dropped into the line. Jakub Krehel (@jakubkrehel).
• Deliberate alignment. Every element aligns with something intentionally, a grid, baseline, edge, or optical center. No accidental positioning. Shared edges are how the eye scans.
• Group with space, not lines. Negative space first, background shapes second, separator lines last. The gap between groups is at least 2× the gap within a group.
• Balance contrast in lockups. When text & icons sit side by side, adjust weight, size, spacing, or color so they don’t clash. A 1.5px icon stroke sits with regular text; 2px sits with semibold.
• Work dominates chrome. Navigation supports orientation. The customer’s work, schedule, records, conversations, and money receive visual priority. The sidebar recedes; the work sheet leads.

  114 OakLeak · open

• Chrome keeps one measure. Header, nav, and sign-off sit on the document measure, 65–75ch. Only the work may go wider: a mirror, a board, a feed. The location bar does not jump when the record does. Linear keeps the inverted L still while the sheet changes. Cap the measure.
• Density belongs to the work. Linear is dense where comparison matters, lists, boards, schedules. Steve Schoger (@steveschoger) and Adam Wathan (@adamwathan): start with too much space on Showcase; remove it until the workbench fits one more useful row. You don’t have to fill the screen with chrome. You do have to fill it with the job. Refactoring UI (opens in a new tab).

  Morning board↑↓↵

  7:30114 OakLeak8:1522 PineNo heat9:008 MillInstall

• Responsive coverage. Verify on mobile, laptop, & ultra-wide. Responsive design recomposes; it does not merely shrink desktop. For ultra-wide, zoom out to 50% to simulate.
• Respect safe areas. Account for notches & insets with safe-area variables (opens in a new tab). Content bleeds; controls float inside the margins.
• No excessive scrollbars. Only render useful scrollbars. Fix overflow instead of hiding it. Test with macOS “Show scroll bars: Always”.
• Let the browser size things. Prefer flex/grid/intrinsic layout over measuring in JS. Avoid layout thrash.
• Logical properties, not physical. Use margin-inline-start, padding-inline-end, text-align: start. Reserve left/right for genuinely physical geometry.
• Reserve the space. Images, maps, video, and avatars set aspect-ratio so nearby work does not jump while they load. A skeleton matches the hole. A missing ratio is layout shift, and layout shift on a dispatch board is a lost row. D-019. From the UI Skills playbook (opens in a new tab).
• Peek the next item. A horizontal list that scrolls shows 16–32px of the next card. If the last visible item is flush, it reads as the end. Photos on a job, invoices in a strip, a day of stops: leave a sliver. D-019.
• Fade a list that continues. Where a pane scrolls and the edge would look like a hard clip, fade it with mask-image. The fade is how you say there is more. Do not use a divider, a chevron, or a drop shadow as that signal.
• Overlay is a mix, not a blur. Collect payment, assign a tech, a menu: the board behind them is a solid mix, one step dimmer. Not backdrop-filter. Blur is expensive and it is costume. Frost on the site header is chrome, not an overlay. A popover grows from the control that opened it. A menu fades; it does not fly off the screen. D-021.
• Two rimmed controls keep 12px. Field to commit is 12px. Two chips, a well and a mark, a pair of bordered buttons: 12px between them. Tighter reads as one control. Looser is a new group.
• A full-width commit stays in the sheet. Arrive, Save invoice, Collect: if they go full width they sit in the sheet’s pad, not flush to the phone edge. Edge-to-edge is the sheet, not the button.