Skip to main content

Design System

Base

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 properties:

  • color
  • font-family
  • font-size
  • line-height
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 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>