UI Checklist — HIG System

Visual Hierarchy

0 of 10 complete

0%

Is there a single, clear focal point per screen? Does font size follow a logical progression from large to small? Is bold or semibold weight reserved for emphasis only? Do colors reinforce hierarchy — accent for action, secondary for supporting info? Is the primary CTA visually distinct from all secondary actions? Is there visual breathing room between major content sections? Does content order match information priority — most important first? Are group boundaries clear without relying on heavy borders? Is background-to-foreground contrast sufficient for all text? Does the overall layout guide the eye in a natural reading direction?

Clarity & Communication

0 of 10 complete

0%

Materiality & Depth

0 of 10 complete

0%

Components & Interactions

0 of 10 complete

0%

Typography

0 of 8 complete

0%

Is the type scale limited to 3–4 distinct sizes per view? Is line length within the 50–80 character optimal range? Is body text at least 15px — with 17px strongly preferred? Are font weights used meaningfully to convey importance — not just decoration? Is letter-spacing tighter for large display sizes and slightly looser for captions? Are large display titles free of additional bold weight applied on top? Are numbers in data tables using tabular (monospaced) figures for alignment? Is sentence case used for all UI labels — not Title Case or ALL CAPS for body?

Color & Contrast

0 of 8 complete

0%

Does all body text meet WCAG AA contrast ratio of at least 4.5:1? Does large text (18px+ regular or 14px+ bold) meet WCAG AA at 3:1? Is color never the only differentiator — always paired with an icon, label, or shape? Is the accent color limited to 1–2 deliberate uses per screen? Does the full color system — backgrounds, text, accents — work in both light and dark mode? Are semantic colors used correctly — green for success, red for errors, orange for warnings? Is background hierarchy visually apparent — primary, secondary, and tertiary levels distinct? Do glass surfaces maintain readable contrast over all possible background content?

Motion & Feedback

0 of 8 complete

0%

Do all interactive elements respond visually to hover and focus states? Are most transitions under 400ms — feeling responsive, not sluggish? Is spring or bounce easing used sparingly — not applied to every element? Does animation direction reinforce hierarchy — modals scale up, sheets slide up? Is prefers-reduced-motion respected — animations disabled or replaced with instant transitions? Are page and view transitions smooth, directional, and contextually appropriate? Do success and error states animate in with appropriate character? Is there no animation purely for aesthetic decoration without communicative purpose?

Premium Feel

0 of 8 complete

0%

Does the interface feel spacious and uncluttered — restrained, not cramped? Is restraint applied — few, well-chosen elements per screen rather than many? Does it avoid obvious design trends — neon gradients, heavy drop shadows, excessive blur? Are borders used minimally — spatial and tonal separation preferred over lines? Is the interface visually consistent across all screens — same components, same language? Does it work beautifully in dark mode — not just tolerated, but refined? Does glass and depth feel intentional and functional — never decorative? Would a detail-oriented user find no rough edges, misalignments, or inconsistencies?

UI Review Checklist