UI/UX Design

Core Design Philosophy

Apple Human Interface Guidelines

• Clarity - Every element easy to understand with legible text, precise controls, clear hierarchy
• Deference - Interface facilitates content discovery, not distraction
• Depth - Layering, shadows, and visual effects create hierarchy

Atlassian Design Values

• Bold - Build trust through conventions, introduce changes carefully
• Optimistic - Make products accessible for any context or ability
• Practical - Respect the work people need to do

Evidence-Based Approach

Base all design decisions on research, data analytics, studies, and test results. Gather evidence through user interviews, card sorts, treejack studies, and surveys.

Design System Standards

Material Design 3

• Extract color palettes from brand colors or imagery
• Use tonal palettes with primary, secondary, tertiary, error, and neutral
• Support both light and dark modes by default
• Implement elevation system (0dp to 5dp)

Carbon Design System (IBM)

• Follow IBM Design Language foundation
• Use 2px grid system for precise layouts
• Productive (condensed) and expressive (spacious) type scales

Accessibility Requirements (WCAG 2.1 AA)

Color & Contrast

• Text contrast: 4.5:1 for regular text, 3:1 for large text (18pt+)
• Graphics contrast: 3:1 for UI components and meaningful graphics
• Never rely on color alone to convey information

Interaction Standards

• Touch targets: Minimum 44x44px (Apple), 48x48px (Material)
• Keyboard navigation: Full keyboard access to all interactive elements
• Focus indicators: Visible focus states (3px outline, 3:1 contrast)

Screen Reader Support

• Semantic HTML with native elements before custom components
• Landmark regions: header, nav, main, aside, footer
• ARIA live regions for dynamic content
• Skip to main content navigation

Typography System

Scale	Size	Line Height
Display	57px	64px
Headline 1	48px	56px
Headline 2	36px	44px
Headline 3	32px	40px
Title	24px	32px
Body Large	16px	24px
Body	14px	20px
Label	12px	16px

Font Families

• Material: Roboto, Roboto Flex
• Apple: SF Pro, SF Pro Display, SF Mono
• IBM Carbon: IBM Plex Sans, IBM Plex Mono
• Web Safe: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto

Spacing & Layout

Spacing System (8px base grid)

• 4px - Tight spacing (icon-label gaps)
• 8px - Small spacing (between related items)
• 16px - Medium spacing (component padding)
• 24px - Large spacing (section spacing)
• 32px - XL spacing (major sections)
• 48px, 64px, 96px - XXL spacing (page-level)

Responsive Breakpoints

• Mobile: < 600px (xs), 600-905px (sm)
• Tablet: 905-1240px (md)
• Desktop: 1240-1440px (lg), 1440px+ (xl)

Component Patterns

Buttons

• Primary - High emphasis, one per screen
• Secondary - Medium emphasis
• Tertiary/Text - Low emphasis
• States: Default, hover, active, focus, disabled, loading
• Sizes: Small (32px), Medium (40px), Large (48px)

Form Inputs

• Top-aligned labels (preferred)
• Real-time validation with clear error messages
• States: Default, focus, filled, error, disabled

Modals & Dialogs

• Max 600px wide, vertically centered
• Backdrop: Semi-transparent (rgba(0,0,0,0.5))
• Focus trap to keep focus within modal
• ESC key and backdrop click to close

Nielsen's 10 Usability Heuristics

1. Visibility of system status - Keep users informed with appropriate feedback
2. Match system and real world - Use familiar language and concepts
3. User control and freedom - Provide undo/redo, clear exits
4. Consistency and standards - Follow platform conventions
5. Error prevention - Design to prevent errors before they occur
6. Recognition over recall - Minimize memory load
7. Flexibility and efficiency - Shortcuts for expert users
8. Aesthetic and minimalist design - Remove irrelevant information
9. Error recovery - Help users recognize, diagnose, and recover from errors
10. Help and documentation - Provide searchable, task-focused help

Design Tokens Example

{
  "color": {
    "primary": {
      "50": "#E3F2FD",
      "500": "#2196F3",
      "900": "#0D47A1"
    }
  },
  "spacing": {
    "xs": "4px",
    "sm": "8px",
    "md": "16px"
  },
  "typography": {
    "headline1": {
      "fontSize": "48px",
      "lineHeight": "56px",
      "fontWeight": 700
    }
  }
}

Best Practices Summary

1. Start with research - Base decisions on evidence, not assumptions
2. Design for all - Accessibility is not optional
3. Mobile first - Design for constraints, then enhance
4. Test early, test often - Validate with real users
5. Document everything - Create reusable, scalable systems
6. Iterate based on feedback - Design is never truly finished
7. Respect conventions - Users prefer familiar patterns
8. Optimize performance - Fast interfaces feel better
9. Provide feedback - Always acknowledge user actions
10. Keep it simple - Remove unnecessary complexity

When to Use This Skill

• Designing new applications or features
• Creating component libraries or design systems
• Performing accessibility audits
• Reviewing existing designs for usability
• Creating wireframes, mockups, or prototypes
• Writing design specifications for developers
• Establishing design standards for teams
• Improving user experience of existing products
• Planning information architecture
• Conducting heuristic evaluations