On a web page
<html data-theme="dark"> <!-- "light" for Paper -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500&display=swap">
<link rel="stylesheet" href="https://design.de-alwis.com/v1/tokens.css">
<link rel="stylesheet" href="https://design.de-alwis.com/v1/bundle.css">
<script src="https://cdn.jsdelivr.net/npm/react@18.3.1/umd/react.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/react-dom@18.3.1/umd/react-dom.production.min.js"></script>
<script src="https://design.de-alwis.com/v1/bundle.js"></script>
<!-- window.KDA.Slide, KDA.LayerGrid, KDA.Headline … -->Files
| URL | What |
|---|---|
/v1/tokens.css | CSS custom properties for both themes and a class per type style |
/v1/tokens.json | The tokens as data, with a usage note on every token |
/v1/bundle.js, bundle.css | 19 React components on window.KDA |
/v1/index.d.ts | Component props |
/v1/brand/*.md | The brand book as Markdown, for agents and tools |
/v1/assets/logos/*, /v1/assets/illustration/* | Logo files and node graphics |
/v1/assets/icons/icons.json, /v1/assets/icons/phosphor/<weight>/<name>.svg | The icon set: names, then one SVG per icon and weight |
/design-system.json | Machine-readable index of everything above |
/llms.txt | Plain-text guide for AI tools |
For agents
Read llms.txt first, then the brand book sections it lists. Use the tokens by name. Copy logos and node graphics as files; never redraw them. Every footer carries de-alwis.com.