CREATE SOMETHING

Installation

Install the Canon components package in your SvelteKit project.

Terminal

pnpm add @create-something/components

Requirements: SvelteKit 2.0+ and Svelte 5.0+

Import Tokens

Import the Canon design tokens in your app's global CSS file. Choose the import that matches your needs.

Option 1: Full Canon (Recommended)

Includes tokens, base styles, and utility classes.

src/app.css

@import '@create-something/components/styles/canon.css';

Option 2: Tokens Only

Just the CSS custom properties, for custom theming.

src/app.css

@import '@create-something/components/styles/tokens.css';

Option 3: With Tailwind

For projects using Tailwind CSS alongside Canon.

src/app.css

@import '@create-something/components/styles/tokens.css';
@tailwind base;
@tailwind components;
@tailwind utilities;

Using Components

Import and use Canon components in your Svelte files.

+page.svelte

<script lang="ts">
  import { Button, TextField, Card } from '@create-something/components';

  let email = $state('');
</script>

<Card>
  <TextField
    label="Email"
    type="email"
    bind:value={email}
  />
  <Button>Subscribe</Button>
</Card>

Using Tokens Directly

Canon tokens are CSS custom properties. Use them anywhere you write CSS.

Component.svelte

<div class="custom-box">
  Custom styled element
</div>

<style>
  .custom-box {
    padding: var(--space-md);
    background: var(--color-bg-subtle);
    border-radius: var(--radius-lg);
    color: var(--color-fg-primary);
  }
</style>

Common Tokens

Category	Token	Use
Color	`--color-fg-primary`	Primary text
Color	`--color-bg-subtle`	Card backgrounds
Spacing	`--space-md`	Medium spacing (1.618rem)
Radius	`--radius-lg`	Large border radius (12px)
Typography	`--text-body`	Body text size (1rem)

Project Structure

Recommended structure for Canon-based projects.

src/
├── app.css           # Import canon.css here
├── app.html
├── routes/
│   ├── +layout.svelte
│   └── +page.svelte
└── lib/
    └── components/   # Your custom components

What's Next?

Colors

Explore the color token system

Typography

Learn the type scale

Components

Browse all components

Token Reference

Complete token list