Named after the stone trail markers of the Peak District — Cairn guides consistent UI decisions across Kinda products without getting in the way.
Live docs: https://kinda-software.github.io/cairn-design-system/
| File | Purpose |
|---|---|
index.html |
Full documentation site — architecture, tokens, components, setup guides |
Design.md |
Machine-readable design system spec (google-labs-code/design.md format) |
cairn-shadcn.md |
shadcn-svelte integration guide — setup, token mapping, component overrides |
app.css |
Cairn CSS theme file — install into SvelteKit projects to replace the shadcn default palette |
# 1. Initialise shadcn-svelte in your SvelteKit project
npx shadcn-svelte@latest init
# Style: new-york · Base colour: stone · CSS variables: yes
# 2. Replace src/app.css with the Cairn theme file
# Download: https://kinda-software.github.io/cairn-design-system/app.css
# 3. Set data-theme on your root layout's <html> element
# 'orbit' | 'beacon' | 'vault' | 'pulse'See cairn-shadcn.md for the complete setup walkthrough and Design.md for the full token reference.
Design.md follows the google-labs-code/design.md specification. Point any coding agent at it before generating UI:
Read Design.md before generating any UI component for this project.
All colours, typography, spacing, and component behaviour must match
the tokens and constraints defined in that file.
Lint the file with the official CLI:
npx @google/design.md lint Design.mdPart of Kinda Software — SaaS tools built for a single goal, as simply as possible.