Example

State Diagrams

• Online Bookstore - Book catalog and purchase flow. Demonstrates tags, doc, and def usage
• Amazon Shopping - From product search to reviews, wishlists, and subscriptions. Large-scale profile structure
• Learning Management System - Course management, assignments, and grading. Nested descriptors and href-based reuse

HTML Mock

A demo of Semantic Wireframe generated from an ALPS profile.

• Online Bookstore Mock — Three CSS fidelity levels over the same semantic HTML:
  • Level 1 - Bare — Minimal readability, no layout
  • Level 2 - Wireframe — Information skeleton. Hover any element to see its ALPS semantic descriptor ID
  • Level 3 - Production — A demo of full design system with typography, color, and responsive layout