Custom Properties

Design tokens referenced internally and externally for custom styles

Demo

My background and text colors reference custom properties

API

Colors

All color values are in the perceptually uniform color space to provide visually appealing colors while still achieving a11y contrast guidelines.

Name Example Description
--m-color-red-[dark|med|light]
Used to denote something has or will go wrong.
--m-color-orange-[dark|med|light]
Used for bringing attention to something that may not be desirable.
--m-color-blue-[dark|med|light]
Used to highlight primary actions.
--m-color-green-[dark|med|light]
Used to communicate something desirable has or will happen.
--m-color-[darkest|darker|dark]
Used for text and high-contrast backgrounds.
--m-color-gray-[6|5|4|3|2|1]
Grayscale used for backgrounds, borders, and disabled state.
--m-color-offwhite
Used for the whole page background.
--m-color-primary-action
Used for links and other primary action elements.

Spacing

The spacing sizes are based on Divine Proportions to help provide a natural rhythm.

Name Value Description
--m-space-[xs|sm|md|lg|xl] 6, 12, 18, 30, 48px Used for developing a visual rhythm between elements. Loosely follows Divine Proportion. You should use the padding and margin utility classes whenever possible and reserve use of --m-space-* for other spacing needs like position.

Element styles

All elements use these values for their relevant styles.

Name Value Description
--m-border-radius-[sm|md|full] 2, 4, 50% Used for border radiuses.

Breakpoints

Although custom properties are unfortunately not usable in media queries, these breakpoint values are useful elsewhere.

The large breakpoint and above are considered desktop-sized

Name Value Description
--m-breakpoint-sm 576px The portrait width of an iPhone X.
--m-breakpoint-md 768px The portrait width of an iPad.
--m-breakpoint-lg 992px The landscape width of an iPad.

Other

Name Value Description
--m-font-family 'Helvetica Neue', Arial The typefaces in use.
--m-max-content-width 1536px The max width used by Container. Wrapping your content in a m-container is more likely what you need, but you can use this if necessary.
--m-min-input-height 34px The min height used for form elements. Reference this if you'd like your element to match the height of inputs.

Guidelines

Do not hard code values

Facebook famously had 548 unique colors hard-coded 6,498 times across all their stylesheets. That's a maintenance meltdown! Custom properties are a standard CSS feature that helps you avoid this by defining reusable values. Reference these custom properties instead of hard coding their values. Like this:

/* Do */ @import "../node_modules/m-/dist/custom-props.css"; #foo \{ background-color: var(--m-color-gray-2); } /* Don't */ #foo \{ background-color: #dedede; }

Go here to learn more about custom properties and how to use them.

Accessibility

The colors and spacing meet accessibility requirements.