UI Patterns: Visual System, Components, Forms & Anti-Patterns

Field	Value
Type	Agent Reference
Source	~/.copilot/agents/_refs/senior-ux/ui-patterns.md
Description	Not specified

Source Content

UI Patterns: Visual System, Components, Forms & Anti-Patterns

Typography (Practical UI Guidelines)

• Maximum 2 typeface families per project (1 for headings, 1 for body). Often 1 family is enough.
• Establish a clear type scale using consistent ratios (1.2 minor third or 1.25 major second for most interfaces)
• Line length: 40–80 characters per line including spaces. Optimal is about 65 characters. Lines that are too long make it hard to track back to the start. Lines that are too short cause excessive eye movement.
• Line height: 1.4–1.6 for body text. 1.1–1.3 for headings.
• Use weight and size for hierarchy. Don’t rely on color alone.
• Minimum body text size: 16px on screens. Never go below 14px for any readable text. 12px is acceptable only for tertiary captions and legal text.

Color System (Practical UI Guidelines)

• Build a systematic palette: primary, secondary, neutral, and semantic colors (success/green, warning/amber, error/red, info/blue)
• Use the 60-30-10 rule: 60% dominant neutral color, 30% secondary color, 10% accent/primary color
• Test every color combination for WCAG contrast ratios
• Test with color blindness simulators (protanopia, deuteranopia, tritanopia) — about 8% of men and 0.5% of women have some form of color vision deficiency
• Never convey information by color alone. Always pair color with icons, patterns, or text labels
• Dark mode is not just inverted colors. Reduce overall contrast slightly (avoid pure white — use #E0E0E0 to #F0F0F0 max). Use elevated surfaces with subtle shadows instead of borders. Desaturate colors slightly.

Spacing & Layout (Practical UI Guidelines)

• Use a 4px base grid for all spacing: 4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80. Everything aligns to the grid.
• Maintain consistent padding rhythms within and between components
• Use an 8px grid for larger structural alignment
• Group related elements with tighter spacing. Separate unrelated elements with wider spacing. Proximity is your primary grouping tool — not boxes and lines.
• Design mobile-first, then expand to larger screens
• Standard breakpoints: 640px (small), 768px (medium), 1024px (large), 1280px (extra large), 1536px (2xl)

Iconography

• Use a single consistent icon set throughout the entire product. Never mix icon styles (outlined + filled, rounded + sharp).
• Icons must have text labels unless the icon is universally recognized. The only truly universal icons are: close, search, home, and hamburger menu. Almost nothing else is universally understood without a label.
• Consistent sizing, stroke weight, and optical alignment across all icons
• Every icon needs an accessible label (aria-label or visually hidden text)

Readability & Scannability Checklist

Apply this to every screen, every page, every component.

Text Readability

• Body text is at least 16px
• Line length is 40–80 characters (65 optimal)
• Line height is 1.4–1.6 for body text
• Sufficient contrast: 4.5:1 for normal text, 3:1 for large text (18px+ bold or 24px+ regular)
• Text color is not pure black on pure white for long-form reading — use #1A1A1A to #333333 on #FFFFFF, or #E0E0E0 to #F0F0F0 on #121212 for dark mode
• No justified text on screens (creates uneven word spacing). Use left-aligned for all body text.

Content Scannability

• Every section has a descriptive heading that makes sense when read alone
• The most important information comes first (inverted pyramid structure)
• Long lists are broken into groups with subheadings
• Key terms and actions are visually emphasized (bold, not all caps or underline which implies links)
• Dense data is presented in tables, not paragraphs
• Visual elements (icons, illustrations, color coding) support — but do not replace — text labels
• Related content is visually grouped using whitespace, cards, or shared background color
• Actionable items are visually distinct from informational items

Number & Data Readability

• Large numbers use separators: 1,000,000 not 1000000
• Dates use clear formats: “April 5, 2026” not “04/05/26”
• Relative times for recent events: “2 hours ago” is easier than “2:15 PM EST”
• Units are always labeled: “$50/month” not just “50”
• Percentages and comparisons include context: “85% complete (17 of 20 tasks)” not just “85%“

Component Design Standards

Every component must include the following states and behaviors.

Required States

• Default — resting appearance
• Hover — visual feedback on desktop (cursor change + subtle highlight)
• Active / Pressed — visible depression or color shift on click/tap
• Focus — visible keyboard focus ring (high contrast, never removed)
• Disabled — visually muted + tooltip explaining WHY it’s disabled (never leave users guessing)
• Loading — skeleton placeholder or spinner with descriptive text
• Error — persistent, in-context error message with fix instructions
• Empty — helpful message with clear next action
• Success — confirmation of completed action

Responsive Behavior

• Defined behavior at each breakpoint (mobile, tablet, desktop)
• Touch-friendly sizing on mobile (min 44×44px targets)
• Content reflow rules: stack, truncate with access to full content, or hide with accessible toggle
• Test landscape and portrait orientations

Component Documentation

For every component, document:

• What it does — one sentence explaining the problem it solves
• When to use it — and when to use an alternative instead
• All props and configuration — with sensible defaults
• Do / Don’t examples — visual examples of correct and incorrect usage
• Accessibility requirements — ARIA attributes, keyboard behavior, screen reader announcements

Forms

Forms are where most users abandon products. Treat form design as a critical skill.

• Only ask for what you need. Every unnecessary field reduces completion rates. Remove any field you cannot justify.
• Use persistent labels above inputs. Never use placeholder text as the only label — it disappears on focus and users forget what the field is for. Practical UI emphasizes this as a critical anti-pattern.
• One column layouts for forms. Multi-column forms increase completion time and error rates. The only acceptable exception is short, related fields on the same line (City / State / Zip).
• Group related fields with clear section headings
• Use appropriate input types. Email fields use type=“email”. Phone fields use type=“tel”. Dates use date pickers, not free text.
• Show validation inline, in real time. Don’t wait until submission to tell users about errors. Validate as they move between fields.
• Mark optional fields, not required ones. If most fields are required, labeling the few optional ones is less visual noise.
• Use smart defaults and auto-fill. Pre-populate known information. Support browser auto-fill attributes (autocomplete).
• Submit buttons describe the action. “Create account” not “Submit.” “Save changes” not “OK.”

Emotional Design

Making People Feel Welcomed

The first 5 seconds determine whether a user trusts your product. Design every entry point — onboarding, login, landing page, empty state — to communicate: “You belong here. This is going to be easy.”

• Use warm, human language. “Welcome back, Sarah” not “User authenticated.” “Let’s get started” not “Initialize setup.”
• Show, don’t require. Let people explore before asking them to commit. Reduce mandatory sign-up gates. Demonstrate value before requesting investment.
• Celebrate progress. When someone completes a step, acknowledge it. Not with confetti (unless appropriate) — with clear confirmation: “Done. Your profile is set up.”
• Forgive mistakes gracefully. Every error is an opportunity to build trust. “That email doesn’t look right — try something like <name@example.com>” is helpful. “Error 422: Validation failed” is hostile.

Making Complex Processes Simple

This is the core skill. The hallmark of great design is making a 15-step process feel like 3 steps.

• Hide complexity until it’s needed. Smart defaults cover 80% of users. Advanced options are available but tucked away.
• Break long workflows into digestible steps. Each step has one clear task. Progress is visible. Going back is easy.
• Use sensible defaults. Pre-fill what you can. Pre-select the most common option. Reduce the number of decisions users have to make.
• Automate the tedious parts. If the system can figure something out, don’t ask the user to type it.
• Provide clear next steps. Every screen answers: “What do I do now?” No dead ends. No ambiguity.

Design Anti-Patterns (Never Do These)

These patterns feel clever but harm real people:

Mystery meat navigation — Icons without labels, abstract symbols. Unless it’s a universally understood icon (close, search, home), always add a text label.

Infinite scroll without position — Users lose context and can’t return to a specific point. Provide position indicators or pagination.

Modals stacked on modals — Destroys spatial awareness. If you need to open a modal from a modal, rethink the information architecture.

Disabled buttons without explanation — Users don’t know WHY the button is disabled. Always provide a tooltip or adjacent text explaining what’s needed to enable it.

Carousels and sliders for primary content — Research consistently shows users interact almost exclusively with the first slide. Critical content on slides 2+ is effectively invisible. Erik Runyon, Notre Dame.

Placeholder text as the only label — Labels disappear when users start typing. They forget what the field was for. Always use persistent labels above input fields.

Gray on gray — Insufficient contrast disguised as minimalism. If you have to squint, the contrast is too low.

Truncation without access — Cutting off text with ”…” and no way to see the full content. Always provide “Read more,” a tooltip, or an expandable area.

Auto-playing media — Disrespects user attention, bandwidth, and data plans. Always require user action to start media playback.

Scroll hijacking — Custom scroll speeds, horizontal scroll where vertical is expected, scroll-jacking animations. Users expect standard scroll behavior. Don’t override it.

Toast notifications for critical information — Toasts disappear. Critical errors, destructive actions, and important confirmations need persistent, in-context display.

Dark patterns — Trick confirms, hidden costs, forced continuity, misdirection, confirm-shaming, roach motels, bait-and-switch. Never. Under any circumstances. These are hostile design. Harry Brignull coined the term and maintains a hall of shame at darkpatterns.org. Don’t end up there.

Walls of text — Large blocks of unbroken text are never read. Always break content into short paragraphs, use descriptive headings, and front-load key information.

ALL CAPS for body text — All caps text is harder to read because it removes the word-shape cues (ascenders and descenders) that help readers recognize words quickly. Use all caps sparingly, only for very short labels or badges.

The Intuitive Design Checklist

Before finalizing ANY design, verify each of these.

Affordance & Signifiers (Don Norman)

• Every interactive element LOOKS interactive (buttons look tappable, links look clickable, inputs look fillable)
• Non-interactive elements do NOT look interactive (no hover effects on static text, no pointer cursor on non-clickable elements)
• The primary action on each screen is visually obvious within 2 seconds
• Users can identify what to do without reading instructions

Feedback & System Status (Nielsen Heuristic #1)

• Every user action produces immediate visible feedback (under 100ms)
• Loading states are shown for any operation over 300ms
• Success and error states are clear, specific, and actionable
• Error messages explain what went wrong AND how to fix it
• System status is always visible: Where am I? What’s happening? What just happened?

Navigation & Wayfinding (Krug’s Trunk Test)

• User always knows where they are (breadcrumbs, active states, page titles)
• User can always get back (visible back button, undo, escape hatch, browser back support)
• User can always get home (persistent home/logo link)
• Navigation is consistent across all pages and screens
• No dead ends — every screen has a clear next step

Content & Language (Plain Language + Practical UI)

• All text uses plain language (6th–8th grade reading level)
• Labels use the user’s vocabulary, not technical jargon
• Instructions are unnecessary — but available if needed
• Empty states guide users toward their next action
• Microcopy is human, helpful, and concise
• Headings are descriptive and make sense when scanned alone

Progressive Disclosure (Tesler’s Law)

• Simple tasks are simple. Advanced features are accessible but not in the way.
• Defaults are smart — the most common choice is pre-selected
• Forms show only required fields initially
• Complex workflows are broken into clear, manageable steps with visible progress
• Help and documentation are available but don’t clutter the interface