Packages
Generated artifacts and Nuxt layers
The packages/ directory contains final artifacts ready for consumption.
Unlike output/, packages are tracked in git and versioned alongside the source.
Package Structure
packages/
├── content/ # Documentation content (consumed as remote source)
│ ├── data/ # JSON data files
│ ├── 01.brand/ # Brand identity pages
│ ├── 02.logos/ # Logo system pages
│ ├── 03.avatars/ # Avatar pages
│ ├── 04.colors/ # Color system pages
│ ├── 05.theme/ # Theme system pages
│ ├── 06.typography/ # Typography pages
│ ├── 07.layout/ # Layout and spacing
│ ├── 08.motion/ # Motion and animation
│ ├── 09.voice/ # Voice guidelines
│ ├── 10.writing/ # Writing guidelines
│ ├── 11.imagery/ # Imagery guidelines
│ ├── 12.accessibility/ # Accessibility standards
│ ├── 13.messaging/ # Messaging guidelines
│ └── 99.cli/ # CLI documentation
└── layers/ # Nuxt layers (published to CodeArtifact)
├── nuxt-layer-ui/ # Main UI layer with theming
├── nuxt-assets-logos/ # Logo assets layer
├── nuxt-assets-avatars/ # Avatar assets layer
└── nuxt-layer-stylebook-docs/ # Stylebook docs components & composables
Content Collection
Path: packages/content/
Markdown documentation and JSON data for docs.ontopix.dev.
Generated from Jinja2 templates in templates/content/.
What It Contains
- Markdown pages with brand documentation
- Data JSON files for interactive components
- Vue components embedded in MDC syntax
How It's Consumed
The docs.ontopix.dev Nuxt application pulls this content as a remote source from GitHub.
It is not part of a layer — the docs portal fetches it separately from the stylebook repository.
The nuxt-layer-stylebook-docs layer provides the Vue components and composables that render this content.
Nuxt Layers
Nuxt layers provide reusable functionality that can be extended by Nuxt applications.
nuxt-layer-ui
Path: packages/layers/nuxt-layer-ui/
The main UI layer providing brand theming for Nuxt applications.
Contents
| File | Purpose |
|---|---|
nuxt.config.ts | Registers semantic color tokens |
app/app.config.ts | Maps tokens to palette colors |
app/assets/css/ontopix.css | CSS custom properties |
app/components/Ontopix/Logo.vue | Brand logo component |
app/components/OgImage/Docs.vue | OG image generator |
public/favicon.ico | Browser favicon |
public/apple-touch-icon.png | Apple touch icon |
Usage
// nuxt.config.ts
export default defineNuxtConfig({
extends: ['@ontopix/nuxt-layer-ui']
// or for local development:
// extends: ['../stylebook/packages/layers/nuxt-layer-ui']
})
Then use components and tokens:
<template>
<OntopixLogo class="h-8" />
<UButton color="primary">Action</UButton>
<div class="bg-onbrand-500 text-white">Brand color</div>
</template>
nuxt-assets-logos
Path: packages/layers/nuxt-assets-logos/
Layer providing all logo assets as public files.
Contents
nuxt-assets-logos/
└── public/
├── logo/
│ ├── variants/ # SVG variants
│ ├── png/ # PNG rasterizations
│ ├── webp/ # WebP rasterizations
│ └── jpg/ # JPG rasterizations
└── favicon/
└── *.ico # ICO files
Usage
// nuxt.config.ts
export default defineNuxtConfig({
extends: ['@ontopix/nuxt-assets-logos']
})
Then reference logos:
<img src="/logo/variants/logo-main.svg" alt="Ontopix" />
nuxt-assets-avatars
Path: packages/layers/nuxt-assets-avatars/
Layer providing generated avatars as public files.
Contents
nuxt-assets-avatars/
└── public/
└── avatars/
├── humans/
│ └── {subject}/
└── agents/
└── {agent}/
Usage
// nuxt.config.ts
export default defineNuxtConfig({
extends: ['@ontopix/nuxt-assets-avatars']
})
Then reference avatars:
<img src="/avatars/humans/john.doe/john.doe.1.png" alt="John Doe" />
Template System
Packages are generated from Jinja2 templates in templates/.
Template Locations
| Source | Output |
|---|---|
templates/content/ | packages/content/ |
templates/layers/nuxt-layer-ui/ | packages/layers/nuxt-layer-ui/ |
Template Context
All templates receive the brand context object containing the full brand.json:
{{ brand.brand.name }} {{ brand.color.data.palette }} {{ brand.logo.config.variants }} ```
### Custom Filters
Templates have access to custom Jinja2 filters:
| Filter | Purpose |
|--------|---------|
| `oneline` | Collapse multiline strings for YAML |
| `dig` | Safe nested dictionary access |
| `kebab` | Convert to kebab-case |
| `snake` | Convert to snake_case |
| `camel` | Convert to camelCase |
| `pascal` | Convert to PascalCase |
| `css_var` | Format as CSS custom property |
Example:
```jinja
{{ brand | dig('logo.metadata.title', 'Default') }}
{{ 'myValue' | kebab }} ```
---
## Rebuilding Packages
```bash
# Rebuild packages only
stylebook build packages
# Preview changes without executing
stylebook build packages --dry-run
# Verbose output showing each operation
stylebook build packages --verbose