Two tags, and a page speaks LAKA.

Add the two tags

Put the stylesheet in <head> and the script anywhere with defer. The script is dependency-free (~12 KB), idempotent under double-inclusion, and initialises itself on DOMContentLoaded.

<!-- in <head> -->
<link rel="stylesheet" href="https://designsystem.bowtiekreative.com/dist/laka.css">
<script src="https://designsystem.bowtiekreative.com/dist/laka.js" defer></script>

<!-- Inter is the system typeface; load it if the page doesn't already -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap">

Tokens and components

laka.css carries the full token set as custom properties plus the core component classes. Build with the variables, not raw values — the contrast rules are baked into the palette.

What laka.js adds

Behaviour, not decoration: declarative attributes for the interactive patterns, the motion system, offline WCAG math, and the API client. No framework required; call LAKA.bind(container) after injecting DOM dynamically.

<!-- MENU toggle: manages aria-expanded, hidden, Escape -->
<button class="laka-btn laka-btn--outline" data-laka-menu="#site-menu">Menu</button>
<nav id="site-menu">…</nav>

<!-- dismissable banner -->
<div class="laka-banner laka-banner--info">
  Saved. <button data-laka-dismiss>×</button>
</div>

<!-- accessible tabs with arrow-key support -->
<div data-laka-tabs>
  <button data-laka-tab="#panel-a">First</button>
  <button data-laka-tab="#panel-b">Second</button>
</div>

<!-- scroll reveal: 24px rise, 600ms, 90ms sibling stagger,
     automatically disabled under prefers-reduced-motion -->
<section data-laka-reveal>…</section>

// tokens, frozen
LAKA.tokens.color.accent          // "#3F6EE9"
LAKA.tokens.space                 // [4, 8, 12, …, 80]

// WCAG 2.2 contrast, offline, token-aware
LAKA.contrast('accent', 'canvas', { fontSizePx: 16 })
// → { ratio: 4.38, verdict: { passes: false, … } }

// re-bind after injecting DOM
LAKA.bind(document.getElementById('new-content'))

// design-system API client (see API Reference)
await LAKA.api.rules({ systems: 'forms', severity: 'block' })
await LAKA.api.validate({ gate: 'accessibility', passed: [] })

Astro, Next.js, WordPress

<!-- Astro: src/layouts/Layout.astro -->
<head>
  <link rel="stylesheet"
    href="https://designsystem.bowtiekreative.com/dist/laka.css">
  <script is:inline defer
    src="https://designsystem.bowtiekreative.com/dist/laka.js"></script>
</head>

// Next.js (app router): app/layout.tsx
import Script from 'next/script';
// in <head>: the <link>; before </body>:
<Script src="…/dist/laka.js" strategy="afterInteractive" />

// WordPress: functions.php
add_action('wp_enqueue_scripts', function () {
  wp_enqueue_style('laka',
    'https://designsystem.bowtiekreative.com/dist/laka.css', [], '1.0.0');
  wp_enqueue_script('laka',
    'https://designsystem.bowtiekreative.com/dist/laka.js', [], '1.0.0',
    ['strategy' => 'defer', 'in_footer' => true]);
});

Embedding doesn't waive the system

The header keeps exactly four elements (seal, uppercase site name, MENU pill, one CTA pill — the contract). The seal is always the canonical logo — brand/btk-seal-white.png on dark, brand/btk-seal.png on light, shield crop below 24px — never a custom symbol, letterform or initial (rule brand.seal-asset; asset URLs ship in the nav-contract response). Accent is never body-size text — LAKA.contrast will tell you. Every site carries the “Powered by Bow Tie Kreative” footer backlink. Before shipping, run the page through POST /v1/audit/markup or the full POST /v1/audit/site gate.

<!-- the four-element header with the canonical seal -->
<header class="laka-header">
  <div class="laka-header__left">
    <img class="laka-header__seal" alt="Bow Tie Kreative"
      src="https://designsystem.bowtiekreative.com/brand/btk-seal-white.png">
    <a class="laka-header__name" href="/">SITE <span>NAME</span></a>
  </div>
  <div class="laka-header__right">
    <button class="laka-btn laka-btn--outline" data-laka-menu="#menu">Menu</button>
    <a class="laka-btn laka-btn--primary" href="/contact">Get started</a>
  </div>
</header>