A token-first, framework-progressive design system for the Spec Kitty ecosystem.
Live Storybook - https://stijn-dejongh.github.io/spec-kitty-design/
Spec Kitty Design provides:
- Design tokens (
@spec-kitty/tokens) - CSS custom properties for colour, typography, spacing, motion, and radius. The single authoritative source for all visual values across the ecosystem. - HTML/JS components (
@spec-kitty/html-js) - framework-agnostic CSS and lightweight JS for core UI patterns (navigation, cards, tags, forms, banners, footer). - Angular components (
@spec-kitty/angular) - Angular component wrappers for the same patterns. - Brand assets - fonts (Falling Sky, Swansea), logo, and visual identity artefacts.
The design language targets the AI-tooling and spec-driven development context: dark-first, yellow-accented, technical-professional tone.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@spec-kitty/tokens/dist/tokens.css">Then use --sk-* CSS custom properties anywhere in your styles:
.my-element {
background: var(--sk-surface-card);
color: var(--sk-fg-default);
border-radius: var(--sk-radius-lg);
padding: var(--sk-space-6);
}<!-- After loading tokens.css, add the component stylesheet: -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@spec-kitty/html-js/dist/nav-pill/sk-nav-pill.css">
<nav class="sk-nav-pill" aria-label="Primary navigation">
<div class="sk-nav-pill__items">
<a href="/" class="sk-nav-pill__item sk-nav-pill__item--active" aria-current="page">Home</a>
<a href="/about" class="sk-nav-pill__item">About</a>
</div>
</nav>npm install @spec-kitty/angular @spec-kitty/tokensimport { SkButtonPrimaryModule } from '@spec-kitty/angular';Add data-theme="light" or data-theme="dark" to your <html> element. The token system defaults to dark.
- Component Storybook - interactive component browser with light/dark variants
- Blog Demo - full-page marketing/blog layout
- Dashboard Demo - Kanban board layout
# Install dependencies
npm ci
# Run Storybook locally
npx nx run storybook:storybook
# Build all packages
npx nx run-many --target=build --all
# View demo pages (served via Storybook dev server)
# http://localhost:6006 (or configured port)packages/
tokens/ - CSS custom properties + brand fonts
html-js/ - Framework-agnostic CSS + JS components
angular/ - Angular component wrappers
apps/
storybook/ - Storybook application
demo/ - Static demo pages (blog, dashboard)
doctrine/ - Brand voice and visual identity guidelines
kitty-specs/ - Mission specifications (spec-kitty workflow)
This repository is governed by the Spec Kitty charter and ADR framework. All visual values must use --sk-* tokens (ADR-001). Package topology follows a one-directional dependency graph (ADR-002). See doctrine/ for brand and identity guidelines.