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
| Dimension | Default | Notes |
|---|---|---|
| Body type | 14–16px | Often two sizes only (16 + 14), regular + medium. |
| Type weights | 2 | Regular for body, medium for headings/emphasis; semibold rare. |
| Spacing | 4px base grid | 4 / 8 / 12 / 16 … "no exceptions." |
| Radius | 8px base | 8 → 40px range depending on element size. |
| Buttons | 40px min height | Comfortable hit target. |
| Icons | 24px (or 16px base) | Stroke 1.2–2px; dashboards use a 1 / 1.2 / 1.5 stroke set. |
| Color | Neutral palette | Tailwind Neutral as a default; OKLCH for real systems (see Design Tokens). |
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
Process defaults (before the pixels)
A repeatable screen-design checklist, distinct from numeric tokens: Source: X/@Tanjim38, 2026-03-15
- Ask "what decision does the user need to make here?"
- Remove everything that doesn't serve that decision.
- Make the primary action impossible to miss.
- Design the empty state before the full state.
- 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
Escaping the AI-coded sameness
Defaults are a floor, not a ceiling — and shared defaults are exactly why AI-generated UIs look identical. lucide-react is the de-facto icon set for AI-coded apps, so "clean, free, everyone uses it" becomes "every generated interface looks the same." Differentiate by choosing a coherent icon language, adding a distinctive type pairing, or layering texture (see Texture & Grain Resources); for the broader anti-generic argument see Aesthetic Systems. Source: X/@om_patel5, 2026-03-07
Local artifact review sharpened the rule: the fix is not "replace Lucide with any other pack." The slides point at icon systems with their own internal grammar: Streamline's Ultimate/Core/Flex families and weights, Hugeicons' rounded/standard sets, Lineicons' broad SVG/Figma/Icon Font/React/JS delivery, and Solar Icons' multi-style cross-framework language. Pick one family and carry it through the UI instead of mixing icon vibes per component. Source: local image artifacts, 2026-07-03
For the micro-interaction layer that sits on top of these structural defaults (focus states, hit-area, motion), see Interface Micro-Polish.
Timeline
- 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