Skip to content
DS one

Quick Start

Your First DS one Page

Section titled “Your First DS one Page”

Create a simple HTML page using DS one components:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My DS one App</title>


    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/ds-one@beta/DS1/1-root/screen.css"
    />
    <script
      type="module"
      src="https://cdn.jsdelivr.net/npm/ds-one@beta/dist/ds-one.bundle.js"
    ></script>
  </head>
  <body>
    <ds-layout>
      <header-v1 slot="header">
        <title-v1 variant="site">My App</title-v1>
      </header-v1>


      <main>
        <text-v1 variant="heading">Welcome to DS one</text-v1>
        <text-v1 variant="body">
          A modern design system built with TypeScript and Lit.
        </text-v1>


        <button-v1 variant="primary">Get Started</button-v1>
        <button-v1 variant="secondary">Learn More</button-v1>
      </main>
    </ds-layout>
  </body>
</html>

Basic Components

Section titled “Basic Components”

Button

Section titled “Button”
<button-v1 variant="primary">Primary Button</button-v1>
<button-v1 variant="secondary">Secondary Button</button-v1>
<button-v1 variant="text">Text Button</button-v1>

Text

Section titled “Text”
<text-v1 variant="heading">This is a heading</text-v1>
<text-v1 variant="body">This is body text</text-v1>
<text-v1 variant="small">This is small text</text-v1>
Section titled “Link”
<link-v1 href="https://example.com">Visit Example</link-v1>
<link-v1 href="/about" internal>About Page</link-v1>

With Translation Support

Section titled “With Translation Support”

DS one includes built-in internationalization:

<script type="module">
  import {
    setLanguage,
    loadTranslations,
  } from "https://cdn.jsdelivr.net/npm/ds-one@beta/dist/ds-one.bundle.js";


  // Load translations
  await loadTranslations({
    en: { greeting: "Hello", welcome: "Welcome" },
    es: { greeting: "Hola", welcome: "Bienvenido" },
  });


  // Set language
  setLanguage("en");
</script>


<text-v1 data-key="greeting"></text-v1>
<text-v1 data-key="welcome"></text-v1>

Next Steps

Section titled “Next Steps”