MyAiConfiguration/shared/rules/ui-ux/references/visual-and-accessibility.md

Visual Design

• Prefer modern, clean and restrained visual design.
• Use a consistent design system.
• Keep typography hierarchy clear.
• Maintain sufficient contrast.
• Use color intentionally.
• Do not rely on color alone to communicate state.
• Keep the number of accent colors limited.
• Avoid excessive gradients, shadows and decorative effects.
• Use rounded corners, borders and elevation consistently.
• Keep icons stylistically consistent.
• Use familiar icons for familiar actions.
• Pair unclear icons with text labels.
• Avoid tiny click targets.
• Keep interactive targets large enough for comfortable use.
• Maintain consistent alignment.
• Avoid arbitrary spacing values.
• Prefer reusable spacing and sizing tokens.

Accessibility

• Accessibility is part of the default design, not an optional enhancement.
• Use semantic controls and elements.
• Ensure full keyboard usability.
• Maintain visible focus indicators.
• Use sufficient color contrast.
• Do not rely solely on hover interactions.
• Do not rely solely on color to indicate status.
• Provide accessible names for controls.
• Keep focus order logical.
• Move focus intentionally after dialogs, navigation or major state changes.
• Support screen readers where applicable.
• Use ARIA only when native semantics are insufficient.
• Respect reduced-motion and system accessibility preferences.
• Avoid flashing or distracting content.

Responsive Design

• Design for the available viewport instead of fixed screen sizes.
• Prioritize important content on smaller screens.
• Avoid horizontal scrolling unless the content genuinely requires it.
• Keep controls usable on touch devices.
• Do not simply shrink desktop layouts.
• Adapt navigation and layout intentionally for smaller screens.
• Preserve core functionality across supported screen sizes.
• Avoid hiding important actions solely because space is limited.
• Test common breakpoints and extreme content lengths.