Get started

DSMU is tech-agnostic. The mandatory contract is design tokens + CSS + accessible HTML. Any stack — PHP, .NET, WordPress, a static site, or a JS framework — can use it. Vue components are a convenience that emits exactly the same markup.

Without a framework (any stack)

Add one stylesheet (it includes the tokens and the self-hosted Public Sans font) and write normal HTML with dsmu- classes. There is no build step and no external font CDN. Add the small script only if you use a dismissible alert or the cookie banner.

<!-- The DSMU stylesheet — includes the design tokens AND the self-hosted
     Public Sans font. Serve the /fonts folder next to this CSS file. -->
<link rel="stylesheet" href="/path/to/dsmu.min.css" />

<!-- Optional: only needed for dismissible alerts / the cookie banner -->
<script src="/path/to/dsmu.js" defer></script>

Then write HTML. The preview below is rendered from the exact HTML shown — no Vue involved.

<button class="dsmu-button" type="submit">Save and continue</button>
<button class="dsmu-button dsmu-button--secondary" type="button">Cancel</button>

<div class="dsmu-field dsmu-field--error">
  <label class="dsmu-label" for="email">Email address</label>
  <p class="dsmu-hint" id="email-hint">We'll only use this to confirm your request.</p>
  <p class="dsmu-error-message" id="email-error">
    <span class="dsmu-u-visually-hidden">Error:</span>
    Enter an email address in the correct format, like name@example.com
  </p>
  <input
    class="dsmu-input"
    id="email"
    name="email"
    type="email"
    aria-describedby="email-hint email-error"
    aria-invalid="true"
  />
</div>

<div class="dsmu-alert dsmu-alert--success" role="alert">
  <div class="dsmu-alert__content">
    <h3 class="dsmu-alert__title">Application submitted</h3>
    <p class="dsmu-alert__body">Your reference number is HDB-2026-04821.</p>
  </div>
</div>

Every component page has a HTML tab next to the Vue tab — open “Show code” and switch to HTML to copy the markup for that component.

With Vue (or Nuxt)

Install the component library and import the styles once. Then use the components.

# install
pnpm add @dsmu/vue @dsmu/css vue

# main.ts — import the styles once
import '@dsmu/css';

<DsmuButton type="submit">Save and continue</DsmuButton>

Other frameworks

A React library is planned. In the meantime, any framework (React, Angular, Svelte, Twig, Blade, …) can render the same HTML with dsmu- classes from @dsmu/css — the classes are the contract.