UI DESIGN LAB
  • Home
  • Community
  • Library
  • Knowledge
  • Docs
ZHLogin
KnowledgeCommunity design principlesOnly reviewed published knowledge enters Agent RAG.
Contribute

Categories

AllTypography Color Accessibility

Tags

accessibilitybrandemphasisfont-pairingfont-weighthierarchyline-heightreadabilityspacingtype-scaletypography
Knowledge RAG

Design Knowledge Base

Community-maintained principles reviewed before publication and retrieved as Agent design constraints.

Submit principle
5 published principles
Typography Color Accessibilitytypography / spacing

Text Spacing Resilience

Text Spacing Resilience turns a frequent interface judgment into an executable constraint before generation.

Interfaces should tolerate adjusted line height, letter spacing, font size, or browser zoom without hiding content.84%
Typography Color Accessibilitytypography / font-pairing

Font Pairing by Function

Font pairing should start from product function: brand voice, long reading, numeric comparison, and controls have different needs.

Typeface differences need a clear purpose; decorative mixing can increase reading cost.82%
Typography Color Accessibilitytypography / font-weight

Font Weight Emphasis

Font weight creates emphasis; it should not make every label bold.

Too much bold text loses emphasis and makes dense interfaces feel heavy.82%
Typography Color Accessibilitytypography / readability

Line Height and Measure

Long text needs comfortable line height and measure; dense interfaces still need readable text.

Overwide lines lose place, tight line height feels cramped, and loose line height reduces useful density.82%
Typography Color Accessibilitytypography / hierarchy

Type Scale Hierarchy

Type scale should serve page structure and avoid hero-sized text in compact panels.

A clear type scale lets headings, labels, body text, and numbers each do their job.82%