Skip to content

Rules · design/*

Design rules

Measured design heuristics from computed styles: font families, type scale, line length, palette and accent sprawl, spacing grid, radius sprawl, dark mode and the tells of generated UI.

$ void design19 rules0 error · 9 warn · 10 infoupdated 16 Sept 2026
  1. design/too-many-font-familieswarnToo many font familiesMore than a display face, a text face and a mono face reads as unconsidered and costs extra font downloads.
  2. design/no-type-scalewarnToo many distinct font sizes (no type scale)A dozen ad-hoc sizes make hierarchy mushy. A deliberate scale (6-8 steps) is the fastest way to look designed.
  3. design/line-length-longwarnBody text lines are too longBeyond ~75-85 characters per line the eye loses its place returning to the next line; reading slows down.
  4. design/line-length-shortinfoBody text lines are very short on desktopLines under ~45 characters break rhythm and make paragraphs look ragged and tall.
  5. design/body-text-smallwarnBody text is smaller than 15px on mobileSmall body text on phones is hard to read and causes pinch-zooming; iOS also zooms into inputs under 16px.
  6. design/body-line-height-tightwarnBody line-height is too tightParagraphs under ~1.4 line-height feel cramped and are harder to track, especially on long lines.
  7. design/heading-trackinginfoLarge headings use default letter-spacingType designed for text sizes looks loose when set large; slight negative tracking is what makes big headlines look tight and intentional.
  8. design/heading-no-balanceinfoHeadings do not use text-wrap: balanceBrowsers fill each line greedily, so multi-line headings often end with a single orphaned word. That makes a headline look unfinished.
  9. design/palette-sprawlwarnToo many distinct colorsDozens of near-identical grays and tints mean colors were picked ad hoc instead of from a scale; the UI looks noisy and dark mode becomes impossible to maintain.
  10. design/multiple-accentswarnMore than one accent hueOne accent color gives the eye a single signal for 'act here'. Several saturated hues on buttons and highlights compete and cheapen the page.
  11. design/gradient-textinfoGradient-filled heading textbackground-clip: text gradients on headlines are a strong generic 'AI template' tell and often fail contrast at one end of the gradient.
  12. design/purple-gradientinfoPurple/indigo gradient backgroundThe violet-to-indigo hero gradient is the default look of generated templates; it signals 'no design decisions were made'.
  13. design/emoji-iconswarnEmoji used as iconsEmoji in headings, buttons and feature cards render differently per platform, can't be styled or sized with the type, and read as placeholder UI.
  14. design/spacing-off-gridinfoSpacing values are off the 4px gridMargins, paddings and gaps that don't share a base unit create subtle misalignment and uneven rhythm.
  15. design/radius-sprawlinfoToo many different corner radiiMixing 3px, 6px, 10px, 14px and 20px corners makes components look like they come from different kits.
  16. design/no-dark-modeinfoNo dark mode supportMany users run their OS in dark mode; a bright page at night is jarring. Not required, but expected of polished sites.
  17. design/color-scheme-missinginfocolor-scheme is not declaredWithout color-scheme, native controls, scrollbars and the canvas default stay light even on a dark theme, causing flashes and mismatched form controls.
  18. design/selection-unstyledinfo::selection is not styledA branded selection color is a small detail that signals care; default blue often clashes with the palette.
  19. design/horizontal-overflowwarnPage scrolls horizontally at 375pxHorizontal overflow on a common phone width makes the whole page wobble sideways while scrolling and hides content.