## 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.