Introduction

Mesa is a Design System—a collection of pre-built, reusable assets, including components, patterns, guidance, and code—that allows its users to build consistent web experiences faster. Mesa also includes brand guidelines and resources for visual design intended for use by our web design and developer community at the Lab. Mesa unifies the Lab’s identity among our web products. With Mesa, we can spend less time rebuilding assets and more time supporting the Lab’s mission through digital products and experiences.  

The Mesa Design System is named after the foundation on which Los Alamos was built, located in the high desert of northern New Mexico on top of a mountain. The town is 35 miles from the state capital of Santa Fe. The location was chosen because of its remote location and beauty.

The Mesa team is committed to helping our community successfully adopt and use Mesa assets to ensure consistency among all web products.

Benefits: 

Accessible design

As a government institution, it’s vital for us to deliver products that are 508 compliant to all our users. Mesa provides the resources you need to make compliance easy.

Researched solutions

Mesa is backed by research. It delivers well-researched solutions that provide consistency across all the Lab’s products. 

Mission focus

By utilizing a library of shared components and patterns, Mesa frees up more time for innovation in research and development.

Building trust

Providing a consistent, user-friendly experience helps us build trust with the people who rely on our work. 

Mesa allows its users to build consistent web experiences faster, as well as brand guidelines and resources for visual design intended for use by our community at LANL.

Mesa focuses on our developer community 

Mesa will guide developers on accessibility and component styles. 

How it helps

Mesa will be distributed via NPM package as an SCSS framework that is agnostic and extendable for use in any other frameworks and languages. The framework will be released with an initial focus on React.js components. All contemporary web products produced by the Institutional Web Team in CEA-MP use Mesa’s guidance for accessibility and style.

Contribute back to Mesa

• Contribute component and pattern enhancements or create new assets, stewarded by the Mesa team.

• Author developer documentation for patterns and components.

• As you learn and grow, give back to the community in the support channels.

Mesa supports multiple code implementations. These reflect the production-level design libraries. The frameworks are listed below with their primary maintainers:

• React: Mesa team

• Web Components: Mesa team
  
  

If you’re using a different framework, you can still build components by following our guidelines for other frameworks.

Design patterns are harvested from products built with Mesa. These become part of the design system. Teams can use these well-defined patterns in their work and contribute patterns back to the system. Visit the contribution page.

Have questions? Found a bug? Contact us at design-system@lanl.gov.