Web Design Guidelines
Responsive Web Design (RWD)
- Mobile First: Always design core CSS for mobile targets first, overriding with
md:,lg:,xl:breakpoints using Tailwind CSS. - Fluid Typography: Utilize robust rem-based spacing instead of hard pixel values.
Accessibility (A11y)
- Semantic HTML: strictly use
<button>for actions,<a>for navigation, and<nav>,<main>,<article>appropriately. - ARIA Attributes: Apply
aria-label,aria-hidden, andaria-expandedon interactive dynamic UI elements (like Modals and War Room Interfaces). - Contrast: Ensure text passes standard WCAG AAA contrast checks against the background.
UI Feedback
- Provide distinct visual states for
Hover,Focus,Active, andDisabled. - Always wrap non-instant actions with Loading Spinners or Skeleton loaders.