Introduction

TAV digital products use an atomic metaphor for our component structure. Atoms are the smallest possible components, which can be combined to create molecules, organisms, and templates. By creating an interdependent component system, we can maintain lightweight components in concert with their combined implementation in larger reusable components.

Designers and front-end engineers create and maintain the rules and definitions for each component, including: interactions, state changes, CSS, and markup. It is the responsibility of the design team to keep this implementation guide consistent with our vetted and production-ready components. Experimental components should not appear in this guide until they've been canonized as one of our official components. These components should serve all TAV products and be derived from real use-cases. There shouldn't be any components that lack a purpose in one or many products.

This guide is not a substitute for designer input, but rather an implementation guide for taking designs that use these components and building them into the working product.

Colors

Every color used in a TAVHealth product should be injected into our CSS precompiler from a file of color variables. This allows us to maintain our colors in one source and make global changes to a color system for users requiring higher contrast ratios.

Units

When deciding which unit to use (px, rem, em, vh, vw, percent), context is king. We're trying to accommodate as many future cases as we can with each component; fixed-width and fixed-height elements are almost never used.

Utility Classes

Admin

We'll describe the embedded code here.