Component

For Designers

• Summary (what this component is, when to use this in lieu of another)
• Visual Examples
  • States (hover, active, open, etc.)
• Dos & Don'ts
• Variations (e.g. with icon, without label, ...)
• References
  • Link to Component in Abstract
  • RFCs (if any)
  • Articles (industry research, etc. that have shaped our perspectives)
• Related Components

For Engineers

• Code,classes, etc. Deal with this content later.

---

Meta

• When possible, define guidelines globally (e.g. capitalization) and use component guidelines when you need to deviate from the norm.
• Might need an overall layout practices page (e.g. placement of secondary button in relation to primary)
• May need a higher level "principles" page that express our opinion about design and interaction patterns (e.g. pagination vs infinite scroll)
  • Some cases might demand more contextual "principles" sections, e.g. accessibility and icons.
• Use TODO tag in places where things aren't to-done
• When we notice missing states, or other issues where components need to be modified, create a task in the Asana Structure board.
• Indicate pixel measurements in cases where Sketch might not adequately communicate that. (e.g. minimum button width)