Archetype AI Design System — Scaffold, Don't Reinvent

There is a real, published, MIT-licensed design system on npm. Front-ends are assembled by installing it, not by transcribing tokens or copy-pasting component markup. The ds CLI scaffolds a SvelteKit + Tailwind v4 project, installs the packages, wires the order-critical CSS, and drops the design system's own agent configuration (CLAUDE.md/AGENTS.md + ds-manifest.json) into your repo. After that, defer to that shipped config — it owns components, fonts, fallback behavior, and styling. This file only gets you to the scaffold.

The packaged components currently ship for Svelte 5 — Svelte 5 + SvelteKit + Tailwind v4 + the DS packages, exactly what ds create scaffolds; a React port is in progress. Prefer that stack for Newton demo front-ends. On any other stack (React, Flask, plain HTML), @archetypeai/ds-lib-tokens is pure CSS and usable from any framework — tokens and base styles only, no components.

When to Apply

• User wants to start a new Newton demo front-end / dashboard / monitoring UI
• User wants to add Archetype AI branding + tokens to an existing SvelteKit app
• User wants branded components: menubar, logo, cards, badges, tables, dialogs, sensor/scatter/area charts, a video player, a code block, toasts

Do not use this skill when:

• The task is Newton API / model work — text·image·video reasoning, embeddings, KNN, data prep. Use the atai-newton-fusion-model, atai-newton-omega-model, or atai-newton-omega-model-data-prep skills (source).

The System (MIT)

Four packages under the @archetypeai/ scope: