# Integration

How to consume YotoShelf design tokens and components in your project.

The design system is published as a git submodule at `frontend/design/` within the YotoShelf repository. External projects (or a fork) can consume it the same way.

## Adding the submodule

```sh
git submodule add https://gitlab.com/yotoshelf/yotoshelf.dev.git design
git submodule update --init
```

## CSS tokens

Import the global token file in your root CSS or layout:

```css
@import './design/src/styles/global.css';
```

This provides all `--color-*`, `--font-*`, `--spacing-*`, `--radius-*`, and `--text-*` tokens.

## Svelte components

The design system exposes shared Svelte components from `design/packages/components/`. These are pre-built interactive components (TocRibbon, Carousel, Callout) already used in this documentation site.

```svelte
<script>
  import TocRibbon from '../design/packages/components/TocRibbon.svelte';
  import Carousel from '../design/packages/components/Carousel.svelte';
  import Callout from '../design/packages/components/Callout.svelte';
</script>
```

## Updating the submodule

```sh
cd design
git pull origin main
cd ..
git add design
git commit -m "chore(design): update design system submodule"
```

Pin the submodule to a specific commit for stability in production. The design system follows semantic versioning — breaking changes will be in major releases.