Design system 1 documentation

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/@0001-labs/design-system-1@alpha/DS1/1-root/one.css"
/>
<script
  type="module"
  src="https://cdn.jsdelivr.net/npm/@0001-labs/design-system-1@alpha/dist/design-system-1.bundle.js"
></script>

The package is @0001-labs/design-system-1. The alpha tag follows the published alpha release. Pin a specific version when a page should stay on one build.

To install it in a project instead:

vp add @0001-labs/design-system-1@alpha

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

• Explore buttons and text.
• Read about layout and spacing.
• Open the CLASSless editor to work with CSS libraries.