Analyzing Website Design Systems

Python
# Website analysis template
site_analysis = {
    "url": "https://example.com",
    "layout": {"grid": "", "containers": "", "sections": ""},
    "spacing": {"scale": "", "rhythm": "", "breakpoints": ""},
    "typography": {"fonts": "", "scales": "", "hierarchy": ""},
    "motion": {"transitions": "", "animations": "", "easing": ""},
    "responsive": {"breakpoints": "", "strategy": ""},
    "interactions": {"hover": "", "focus": "", "feedback": ""}
}

Progress:

• Initial Scan: Load website, take screenshots at key breakpoints
• Layout Analysis: Identify grid systems, container widths, section patterns
• Spacing Audit: Extract margin/padding values, identify spacing scale
• Typography System: Document fonts, sizes, line heights, hierarchies
• Motion Patterns: Catalog animations, transitions, timing functions
• Responsive Behavior: Test breakpoints, layout shifts, component adaptations
• Interaction States: Document hover, focus, active, loading states
• Documentation: Compile findings into structured format
• Export: Save as JSON/Markdown with code examples

Example 1: Input: Stripe.com homepage analysis Output:

JSON
{
  "layout": {
    "grid": "12-column CSS Grid, max-width: 1200px",
    "containers": "Centered with 24px side padding",
    "sections": "Full-width backgrounds with contained content"
  },
  "spacing": {
    "scale": "4px base unit (4, 8, 16, 24, 32, 48, 64, 96px)",
    "rhythm": "24px vertical rhythm",
    "breakpoints": "768px, 1024px, 1200px"
  },
  "typography": {
    "fonts": "Inter (headings), SF Pro (body)",
    "scales": "12px, 14px, 16px, 20px, 24px, 32px, 48px",
    "hierarchy": "6 heading levels with consistent spacing"
  }
}

Example 2: Input: Component interaction analysis Output:

CSS
/* Button states extracted */
.button {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.button:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}