Julian lechnerandClaude Haiku 4.5
01220cebd4
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
49 lines
1.9 KiB
Markdown
49 lines
1.9 KiB
Markdown
## 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.
|