This site represents work-in-progress documentation of the Internet Archive design system and pattern library.
Table of Contents
Tiers
Components are organized using the Atomic Design methodology, albeit with modified names for some of the hierarchical levels.
- Tier 1: ”Foundational building blocks that comprise all our user interfaces,” such as brand colors, type sizes, built-in HTML elements, and small, indivisible components like icons. The equivalent of “Atoms.”
- Tier 2: ”Relatively simple groups of UI elements functioning together as a unit,” such as search bars and accordions. The equivalent of “Molecules.”
- Tier 3: “Relatively complex UI components composed of groups” of other components, such as nav bars and grid views.
- Templates: “Page-level objects that place components into a layout and articulate the design’s underlying content structure.” Each major page on a site should have its own Template.
- Pages: “Specific instances of Templates that show what a UI looks like with real representative content in place.” These help demonstrate how Templates work when using real content, but before they are fully deployed to production.
For questions and comments, please contact:
TODOs
- Provide a more complete overview of the design system.