UI Design Defaults (Cheatsheets)

The numeric UI defaults that independent senior designers keep converging on — type sizes, spacing grid, radius, icon strokes, button and row heights — so a new screen starts from sane values instead of guesswork.

The signal here is convergence: several designers, shipping different products, independently publish near-identical numbers. That overlap is what makes these defaults trustworthy — they are not one person's taste but a settled industry baseline. Treat them as the starting grid, then deviate deliberately. Source: X/@tranmautritam, 2026-03-18

The converged defaults

Source: X/@tranmautritam, 2026-03-18 · Source: X/@_heyrico, 2026-03-08

Two cheatsheets, same conclusions

• @tranmautritam ("shipped multiple products with this, never looked back"): 2 type sizes (16/14), 4px spacing, 40px buttons, 8→40px radius, 24px icons at 1.5–2px stroke. Source: X/@tranmautritam, 2026-03-18
• @_heyrico: huge_icons filled+stroke at 1.2px / 16px base, two font weights (regular body, medium emphasis), Tailwind Neutral palette. Source: X/@_heyrico, 2026-03-08

They differ only at the margins (icon base size, icon library) and agree on the structure — a strong validation of Kevin's own design system.

The reviewed @_heyrico artifact is a polished email-client mockup rather than a text poster: neutral surface stack, thin outline icons, 16px-class icon sizing, two-weight hierarchy, quiet sidebar, segmented inbox tabs, and a Claude-powered label that stays typographically subordinate. Its useful lesson is restraint: the defaults work because the system uses fewer weights, fewer colors, and repeated icon grammar. Source: local image artifact, 2026-07-03

The reviewed @tranmautritam image is a close-up UI measurement overlay, not a generic list poster: it marks 16px side padding, 8px inner spacing, 40px input/button heights, 40px lower controls, and 8/16 alignment guides around a dark mobile agent UI. The artifact reinforces that the cheatsheet numbers are meant as construction measurements, not aesthetic slogans. Source: local image artifact review, 2026-07-02

Dashboard-specific defaults

Dashboards add a few of their own conventions: Inter at 14px body, 240px sidebar width, 48px minimum table-row height for scanability, primary action top-right (never buried), and empty states as illustration + CTA, not "no data." See Dashboard Design System. Source: X/@Tanjim38, 2026-03-15

Typeface admission, not roundup voting

Inter remains a reliable neutral UI baseline, but a popular saved specimen is not automatically a better default. Route every candidate through Font Framework — Categorized Picks and require this evidence before it can carry product text:

1. Resolve the exact maker and primary distribution. For source fonts, pin a commit; for hosted fonts, freeze the current CSS and file URLs or the self-hosted release.
2. Record internal version, file hashes and bytes, formats, static/variable styles and axes, glyph/codepoint and required-script coverage, OpenType features, and upstream maintenance state.
3. Classify rights precisely: libre, free-commercial proprietary, commercial, personal-only, or unresolved. A no-cost download, trial, starter pack, social label saying “free,” or public CDN is not an OFL grant.
4. Give the face one literal job in the product. Sora/Outfit/Satoshi can enter a product-sans audition; Haffer/Lausanne are licensed system candidates; Louize is editorial; NeueBit/QUARZ/SPIKES are display vocabulary, not body UI.
5. Run the actual host fixture: body, headings, controls, tables, numerals, punctuation, italics, required languages, truncation, and the missing-font state. Measure subset/preload bytes and CLS; set font-display and host-derived size-adjust, ascent, descent, and line-gap overrides.

Fallbacks preserve function, not identity. Display faces must never be the sole carrier of an essential label, and no candidate becomes a global default merely because the source post has high engagement. The high engagement earns deep review; the artifact, rights, and host proof earn adoption. Source: X 2082553396259647652, 2083123338365595712, 2084182576823206011, and 2084184286463402110; raw/web/source-evidence/font-roundups-deep-audit-2026-08-12.json

Process defaults (before the pixels)

A repeatable screen-design checklist, distinct from numeric tokens: Source: X/@Tanjim38, 2026-03-15

1. Ask "what decision does the user need to make here?"
2. Remove everything that doesn't serve that decision.
3. Make the primary action impossible to miss.
4. Design the empty state before the full state.
5. Sanity-check that a brand-new user could complete the task.

This is a screen-triage rule before it is a visual-design rule. Start with the user's decision, remove unrelated material, make the next action obvious, and design the empty state first so the first-use experience is not an afterthought. Source: X/@Tanjim38, 2026-03-15

UX laws need evidence and operating boundaries

A saved screenshot advertises “20 UX laws” as instructions for Claude, but the source itself needs an audit before it can guide a screen. It repeats Postel's law at positions 16 and 17, leaving nineteen unique entries, and calls “minimize target distance” a separate law even though that guidance is derived from movement models such as Fitts's law. The promised full Markdown prompt is not present in the supplied artifact. Source: user-supplied screenshot, SHA-256 335d9bc2c0be22fe9f584cd3dc5d021a95daaa45c3a0e2823bdb22257bf39f01, reviewed 2026-09-02

Do not flatten these labels into one authority tier:

When prompting a model, replace the law dump with an evidence brief:

1. Describe the observed context and behavior.
2. State the desired user outcome.
3. Name only the relevant lenses and explain why they may apply.
4. State constraints and the cost of an error.
5. Request at least two alternatives with explicit tradeoffs.
6. Require the observation that would falsify each alternative.

The model should produce inspectable hypotheses with explicit failure conditions. Hick and Hyman model choice reaction, Fitts models aimed movement, and Palmer and Rock show how uniform connectedness can organize a region even when proximity and similarity point elsewhere. Source: Hick 1952; Hyman 1953; Fitts 1954; Miller 1956; Wertheimer 1923; Palmer and Rock 1994; Ghibellini and Meier 2025; RFC 9413; reviews/source-signals/personal-website-ux-laws-article-20260902.review.json

Icon-system admission, not pack swapping

Defaults are a floor, not a ceiling — and shared defaults can make generated interfaces converge. Om Patel's useful signal is therefore not "Lucide is bad" or "install every alternative." It is that high-repetition visual language must be chosen deliberately. Keep an incumbent icon system when it is coherent and covers the product. Change it only for a named failure such as missing domain concepts, the wrong optical voice, weak selected-state grammar, framework mismatch, licensing, or measured bundle cost. Source: X/@om_patel5 2030310771326861336, complete text and four local image artifacts, reviewed 2026-08-11

Before adopting a family:

1. Freeze the product's actual jobs and render a coverage probe of its 20–30 highest-frequency concepts at the real 16, 20, and 24px sizes. Include navigation, destructive actions, directional icons, status, empty/error states, and product-specific nouns.
2. Choose one family and one style grammar. Record its exact package or source revision, license, grid, default size, stroke/fill rule, and missing concepts. Do not mix a rounded outline pack, sharp solid pack, and arbitrary one-off SVGs on the same surface.
3. Put imports behind a project-owned AppIcon wrapper and semantic icon map. Use direct named imports, currentColor, tokenized sizes and weights, and a measured production bundle. Wildcard imports and runtime lookup tables need explicit bundle proof.
4. Treat fill, weight, and animation as redundant state cues rather than the sole label. Decorative icons are hidden from the accessibility tree; icon-only controls have an accessible name; directional glyphs get RTL proof.
5. Keep the incumbent and record a no-change receipt when a challenger does not improve coverage, identity, readability, accessibility, or bundle output.

Current family router

Brand/company marks remain a different job and route through The SVG. The family router above is for interface glyphs, not logos.

For the micro-interaction layer that sits on top of these structural defaults (focus states, hit-area, motion), see Interface Micro-Polish.

---

Timeline

• 2026-09-02 | Audited the supplied “20 UX laws” screenshot against primary papers, including Hyman's choice-reaction follow-up and Palmer and Rock's uniform-connectedness research, a modern Zeigarnik/Ovsiankina meta-analysis, and RFC 9413. Recorded nineteen unique entries, the duplicated Postel row, the distinction between models, Gestalt principles, memory findings, heuristics, and aphorisms, and the evidence-brief prompt pattern now published in the Personal Website. Source: reviews/source-signals/personal-website-ux-laws-article-20260902.review.json

• 2026-08-12 | Added the font-admission contract after resolving ten saved roundup faces through primary repositories/foundries, exact file or product surfaces, license classes, product jobs, and fallback/host fixtures. Source: raw/web/source-evidence/font-roundups-deep-audit-2026-08-12.json

• 2026-03-18 | @tranmautritam design cheatsheet — 2 type sizes, 4px spacing, 40px buttons, 8→40px radius, 24px icons. 791 likes, 732 bookmarks. Source: X/@tranmautritam, 2026-03-18

• 2026-03-15 | @Tanjim38 SaaS screen approach + dashboard defaults (240px sidebar, 48px rows, empty-state-first). 329 likes, 449 bookmarks. Source: X/@Tanjim38, 2026-03-15

• 2026-07-04 | Deep-reviewed Tanjim's text-only SaaS-screen checklist and clarified it as screen triage before visual design: decision first, remove non-serving content, obvious primary action, empty state before full state. Source: X/@Tanjim38, 2026-03-15

• 2026-03-08 | @_heyrico design cheatsheet — huge_icons 1.2px, two weights, Tailwind Neutral. 792 likes, 1,111 bookmarks. Source: X/@_heyrico, 2026-03-08

• 2026-03-07 | @om_patel5 "make your AI-coded UI stand out" — lucide sameness, differentiate via icons/type/texture. 1,035 likes, 2,032 bookmarks. Source: X/@om_patel5, 2026-03-07

• 2026-06-12 | Page created consolidating the converging UI-default cheatsheets, dashboard conventions, and process checklist. Source: x-bookmark-absorb, 2026-06-12

• 2026-07-02 | Reviewed the local image artifact and confirmed the bookmark's numeric defaults as UI construction measurements: 16px outer padding, 8px inner spacing, 40px controls, and 8/16 alignment guides. Source: local media artifact, 2026-07-02

• 2026-07-03 | Deep-reviewed Om Patel's four image slides and refined the anti-generic UI rule from "swap icons" to "choose a coherent icon system." Source: local image artifacts, 2026-07-03

• 2026-07-03 | Deep-reviewed @_heyrico's email-client screenshot and added the visual proof behind the cheatsheet: quiet neutral surfaces, thin icon grammar, two-weight hierarchy, and restrained Claude attribution. Source: raw/x-bookmarks/enriched/2030629123341881842.json; local image artifact

• 2026-08-11 | Replayed Om Patel's complete source under the new review contract; captured four original images, nine exact repositories, eleven npm records, and six official rendered docs. Replaced blanket pack-swapping with a coverage/license/wrapper/bundle admission gate; corrected current Hugeicons packages, Streamline's set-specific licensing, and Solar's unresolved repository-versus-npm license boundary. Source: X 2030310771326861336; exact capture manifest