UI/UX Design Guidelines

Workflow

1. Identify purpose, user problem, audience/devices, platform, framework, component library, existing design system/tokens, breakpoints, dark-mode needs, and accessibility constraints.
2. Select the platform branch below. Apply shared rules plus its requirements.
3. Preserve established patterns unless the brief requires change. Implement the smallest compliant solution.
4. Validate tokens, responsive behavior, semantics, keyboard/screen-reader use, contrast, focus, touch targets, states, and reduced motion.

Platform branches

Web and desktop

• Use semantic HTML before ARIA; maintain logical focus order, visible focus, and pointer/keyboard parity.
• Validate breakpoints, readable line lengths, no horizontal overflow, and 44×44px minimum targets.
• Preserve the component library/layout system; prefer CSS-only motion.

iOS