cofob Design System

The shared design language and component system for cofob.dev sites. It keeps the original site's content-first typography, sky accent, zinc surfaces, soft geometry, and direct interactions while making those decisions reusable across standards-based HTML, React, and Svelte.

The system uses authored semantic CSS rather than utility generation or CSS-in-JS. React and Svelte render the same public cf-* class and data-* state contract provided by the CSS package.

Packages

Package	Purpose
@cofob/design-system-assets	Node-only Telegram TGS conversion to transparent WebM and an inline SVG manifest
@cofob/design-system-stickers	Optimized Telegram sticker assets with sharded catalogs and generated React/Svelte components
@cofob/design-system-css	Semantic tokens, light/dark themes, Manrope, base/component CSS, PostCSS source, and vanilla controllers
@cofob/design-system-react	Typed React 18.3/19 components
@cofob/design-system-svelte	Svelte 5 components compatible with SvelteKit 2
@cofob/design-system-asciinema-player	SSR-safe Native, React, and Svelte adapters for Asciinema Player
@cofob/design-system-showroom	Private Astro application deployed to design.cofob.dev

The four UI and runtime packages share a fixed Changesets version. The two asset packages are versioned independently. All public packages are published to GitHub Packages.

Requirements

• Node.js 24.11 or newer
• npm 11
• FFmpeg with libvpx-vp9 when converting Telegram .tgs stickers
• A classic GitHub token with read:packages for installing from GitHub Packages

Configure the @cofob scope without committing a token:

@cofob:registry=https://npm.pkg.github.com
//npm.pkg.github.com/:_authToken=${GITHUB_PACKAGES_TOKEN}

Install

Native HTML, CSS, and optional vanilla controllers:

npm install @cofob/design-system-css lucide

React:

npm install @cofob/design-system-css @cofob/design-system-react lucide-react

Svelte or SvelteKit:

npm install @cofob/design-system-css @cofob/design-system-svelte @lucide/svelte

Asciinema Player for Native HTML, React, or Svelte:

npm install @cofob/design-system-css @cofob/design-system-asciinema-player

Build-time TGS conversion:

npm install --save-dev @cofob/design-system-assets
cf-tgs convert sticker.tgs --out-dir public/stickers/example --public-base /stickers/example

Reusable sticker packs and generated framework components:

npm install @cofob/design-system-stickers
cf-stickers copy --out-dir public/stickers

Import the complete stylesheet once at the application root:

import "@cofob/design-system-css/index.css";

Asciinema consumers also import its compiled upstream base styles and cofob theme:

import "@cofob/design-system-asciinema-player/styles.css";

The CSS package also exposes granular tokens.css, fonts.css, base.css, components.css, and PostCSS authoring entries. Framework packages never inject styles.

Development

npm install
npm run build
npm run dev

Validation commands:

npm run check
npm run lint
npm run format:check
npm run test:e2e
npm run test:a11y
npm run test:visual

npm run check validates type/build contracts, the complete showroom manifest, tests, package contents, and repository-wide styling boundaries.

Repository layout

packages/
  design-system-assets/    build-time TGS conversion and manifest generation
  design-system-stickers/  optimized packs, sharded catalogs, and generated adapters
  design-system-css/       tokens, CSS, public contracts, vanilla controllers
  design-system-react/     React adapter
  design-system-svelte/    Svelte 5 adapter
  design-system-asciinema-player/  Asciinema controller and Native/React/Svelte adapters
apps/
  showroom/                Astro documentation and live examples
tests/e2e/                 cross-adapter accessibility and interaction checks

See Design language, cofob.dev migration, and release/deployment operations.

License

Original work is covered by the repository cofob.dev License. Manrope and other third-party dependencies retain their own licenses; package notices are shipped with the relevant artifacts.