Installation

1. Import Tokens

Add the design system’s generated CSS to your app’s CSS entry point. This brings in all token layers (primitives, semantic, component) as CSS custom properties.

src/styles/app.css

@import "@risingswamp/design-system/styles.css";

2. Import Components

import {
  Button,
  Input,
  Field,
  Tag,
  CardRoot,
  CardHeader,
  CardTitle,
  CardDescription,
  CardBody,
  CardFooter,
  Tooltip,
} from "@risingswamp/design-system";

3. Dependencies

Ensure these are in your package.json:

{
  "@risingswamp/design-system": "workspace:*",
  "@ark-ui/solid": "^4.x",
  "solid-js": "^1.9.x"
}

Styles are generated by Panda CSS and shipped as a pre-built styles.css — no Panda CSS dependency needed in the consuming app.

4. Fonts

Bundle Space Grotesk and Space Mono as .woff2 files in your Tauri app’s assets. Declare via @font-face — no CDN loading.

@font-face {
  font-family: "Space Grotesk";
  src: url("/assets/fonts/SpaceGrotesk-Variable.woff2") format("woff2");
  font-weight: 300 700;
  font-display: swap;
}

@font-face {
  font-family: "Space Mono";
  src: url("/assets/fonts/SpaceMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

5. Usage

<Button variant="solid" size="md">
  Capture
</Button>

<Button variant="ghost" size="sm">
  Cancel
</Button>

<Field label="Search" hint="Describe what you remember">
  <Input placeholder="What are you looking for?" />
</Field>

<CardRoot>
  <CardHeader>
    <CardTitle>Vault</CardTitle>
  </CardHeader>
  <CardBody>
    <Tag variant="accent">confluence</Tag>
    <Tag>archived</Tag>
  </CardBody>
</CardRoot>

<Tooltip content="Keyboard shortcut: ⌘K">
  <Button variant="outline" size="sm">Search</Button>
</Tooltip>

Token Layers

Components consume semantic tokens (Layer 2), which reference primitives (Layer 1). Component-scoped tokens (Layer 3) exist only where the semantic default doesn’t capture the right intent.

Primitive (--color-cyan-core)
  → Semantic (--color-accent-primary)
    → Component (--button-bg-primary)

Never use primitives directly in component styles.