CMS Design System

A base layer of styling can be applied to an area of your site by adding the .ds-base class. If you're implementing the design system on a new site, you'd likely want to apply this class to the <body> element. On existing sites this might not be desirable. In which case, you could apply the .ds-base class to an element which scopes the styling to itself and its children.

Specifically, the base styling sets the following CSS properties:

color is set to $color-base
font-family is set to $font-sans
font-size is set to $font-size-base
line-height is set to $font-line-height-base

We the People of the United States, in Order to form a more perfect Union, establish Justice, insure domestic Tranquility, provide for the common defence, promote the general Welfare, and secure the Blessings of Liberty to ourselves and our Posterity, do ordain and establish this Constitution for the United States of America.

Code snippet

<div class="ds-base ds-u-padding--2">
  We the People of the United States, in Order to form a more perfect Union,
  establish Justice, insure domestic Tranquility, provide for the common
  defence, promote the general Welfare, and secure the Blessings of Liberty to
  ourselves and our Posterity, do ordain and establish this Constitution for the
  United States of America.
</div>

Modifier: .ds-base--inverse

Applies an inverse text color and background-color

Code snippet

<div class="ds-base ds-base--inverse ds-u-padding--2">
  We the People of the United States, in Order to form a more perfect Union,
  establish Justice, insure domestic Tranquility, provide for the common
  defence, promote the general Welfare, and secure the Blessings of Liberty to
  ourselves and our Posterity, do ordain and establish this Constitution for the
  United States of America.
</div>