Design system 1

Getting started

Add Design system 1 to a page.

Design system 1 uses web components. Load its stylesheet and JavaScript bundle, then use the components in your HTML.

Add the stylesheet and script

This follows the CDN setup in the Design system 1 quick start.

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/ds-one@alpha/DS1/1-root/one.css"
/>
<script
  type="module"
  src="https://cdn.jsdelivr.net/npm/ds-one@alpha/dist/ds-one.bundle.js"
></script>

The alpha tag follows the published alpha package. Pin a specific release when you need a build to stay on the same version.

Use a component

<ds-text variant="heading">A place for your work</ds-text>
<ds-text variant="body">Start with a small, useful interface.</ds-text>
<ds-button variant="primary">Get started</ds-button>

Choose your next step

Open Design system 1