Web Design Guidelines

Web Interface Guidelines

Focus States

• Interactive elements need visible focus: focus-visible:ring or equivalent
• Never outline-none without focus replacement
• Use :focus-visible over :focus

Animation

• Honor prefers-reduced-motion
• Animate transform/opacity only (compositor-friendly)
• Never transition: all — list properties explicitly
• Animations interruptible

Typography

• Use … not ...
• Curly quotes not straight
• font-variant-numeric: tabular-nums for number columns
• text-wrap: balance or text-pretty on headings

Content Handling

• Text containers handle long content: truncate, line-clamp, break-words