System Architecture

The Facemask Design System can be visualized as a series of design libraries arranged in a three-tiered structure. Building from top to bottom, elements are assembled into more complex combinations becoming less abstract and more concrete.

Top Tier – NFL Global Elements
The highest level of the Facemask Design System contains primitive stylistic elements that hold little to no meaning on their own. Examples include color values, fonts, logos, icons, etc.

Middle Tier - Digital Platform Elements
Moving down one tier, elements from the top level are grouped into more complex configurations and stored in platform-specific component libraries. Facemask currently supports native-app, responsive-web and connected TV product platforms.

Bottom Tier - NFL Digital Products
Components from the middle tier are assembled into even more complex configurations that work together to create functional NFL fan experiences.