Skip to main content
Astro Design Kits

SOURCE, NOT A BLACK BOX

A starting point you can own.

The same editable files power the examples and the downloads. No installer, hosted runtime or CMS is required.

Start with a complete example

  1. Choose a kit and read its manifest, design language and licence notices.
  2. Download and extract the versioned ZIP. Copy the kit folder into src/design-kits/ in your Astro project.
  3. Create a route importing examples/Demo.astro. The included document layout loads that kit’s tokens, reset and local fonts.
  4. Edit the content or compose the individual patterns through their props. Run your project checks and inspect the rendered result.
---
import Demo from '../../design-kits/art-deco/examples/Demo.astro';
---
<Demo />

This example path is for src/pages/examples/art-deco.astro. Do not wrap the demo in another document layout.

Adopt a language across a whole site

Use Astro Site Playbook as the foundation. Replace src/styles/tokens.css with the kit’s complete token file. Integrate the supplied font stylesheet and font files, then replace existing layout font imports and preloads. Copy patterns with their local dependencies and review global defaults against the kit’s assets/base.css.

Changing --font-display alone does not load a font. Each kit includes font files, CSS declarations and layout preload examples.

Merge carefully into an existing project

Preserve your current work. Compare tokens and layout styles before replacing anything, and keep your own content, routes and hosting identity. Existing components may need extra semantic roles or different contextual surfaces.

One complete kit is intended to own a page’s design language. Loading two unscoped token files on the same page is unsupported. Follow the included README for integration details.

Validate the adoption

Run the Playbook token, contrast, Astro, build and accessibility checks. Inspect real rendered foreground/background pairs, button and focus states, fonts, mobile layouts and keyboard operation. The stock token checker reads only src/styles/tokens.css; a nested demo’s tokens need their own checks.

Use with an agent

Point the agent at the kit’s README.md, design-language.md and kit.json. The JSON catalogue exposes the same metadata as these pages. The manifest schema defines the format.

Licence and ownership

Kit source is MIT licensed: use, edit and redistribute it, including commercially, while retaining its copyright and licence notice. Included fonts have separate SIL Open Font License notices. The example plans are illustrative; the kits do not offer subscriptions or a checkout.

Compatibility claims name tested releases only. Each kit’s manifest lists its verified environment and source version.

Choose a kit