Living
The system is not a project or an artifact, but a living enterprise-wide entity—growing with us and reflecting the brand digitally. It requires ongoing care and maintenance to remain healthy and functional.
Articulate
Examples and documentation give the system clarity around a common design language that communicates the visual and semantic nuances in a way that is understandable and repeatable.
Learning
Within a constant feedback loop the system is updated based on new thinking, enhancements in performance and efficiency, best practices, and of course new standards, styles and patterns.
Adaptable
The system adapts to maintain a quality and consistency both now and in the future that meets the needs of multiple product teams with unique implementations serving a diverse member base.
Project Details
Based on Bootstrap 4
The Bootstrap framework is the basis for our HTML, CSS (SCSS) and JS. We have created the theme-base theme as the default digital implementation of Life Time brand standards at an enterprise level. Additional themes can be created to extend or modify theme-base to support the use of the system for different entities and unique functionality.
Bootstrap 4 (alpha) Docs(external link)
Pattern Lab and Guide Guide
Pattern Lab is the static site generation tool that helps us bring our design system to life. Based on Atomic Design thinking, our responsive system starts with elements that cannot be broken down any further. Elements combine to form components and components combine to form patterns. All of these items work together to create templates that can be used to reflect complete pages.
Pattern Lab Docs(external link)
Style Guide Guide(external link) (the generator for this site) works with Pattern Lab to include our pattern library in tandem with other brand standards and documentation.