OurThread Design System Package

Experimental public-package surface for the OurThread React primitive library.

This package copies the current primitives from src/components/primitives/* so Figma Make can test whether it can consume the real OurThread component language from npm. The app still imports its local primitives directly. This package is not published yet and the workflow is not proven.

The package is intentionally unscoped for this experiment because the @ourthread npm scope/org is not available.

Importing

import { Background, Button, Card, TimerDigits } from 'ourthread-design-system';
import 'ourthread-design-system/styles.css';

The stylesheet import is required. Vite extracts the package CSS into dist/style.css, so consumers should import it explicitly to load Tailwind-generated primitive classes, CSS variables, and bundled font data:

import 'ourthread-design-system/styles.css';

Local Build

From the repo root:

npm --prefix packages/design-system run build

This produces an ESM library build and TypeScript declaration files under packages/design-system/dist.

Clean Vite App Smoke Test

Use a separate temporary Vite React app to verify the package before considering publication:

npm --prefix packages/design-system run build
cd packages/design-system
npm_config_cache=/private/tmp/ourthread-npm-cache npm pack --pack-destination /private/tmp
cd -
npm create vite@latest ourthread-ds-smoke -- --template react-ts
cd ourthread-ds-smoke
npm install
npm install /private/tmp/ourthread-design-system-0.0.0-experimental.0.tgz

Then render a small primitive sample:

import { Background, Button, Card, TimerDigits } from 'ourthread-design-system';
import 'ourthread-design-system/styles.css';

export function App() {
  return (
    <Background variant="auth" className="min-h-screen p-8">
      <Card variant="hero" size="spacious">
        <TimerDigits state="future" />
        <Button variant="primary">Create account</Button>
      </Card>
    </Background>
  );
}

Run:

npm run dev

Inspect whether fonts, dark surfaces, timer digits, button states, and spacing match the app primitive preview.

Known portability requirement: the consumer must explicitly import ourthread-design-system/styles.css.

Figma Make Experiment

After a future manual npm publication, test whether Figma Make can import ourthread-design-system and compose screens from these exports. Use Guidelines.md as the Figma Make behavior guide.

Figma Make output remains visual/layout guidance only. Codex implementation in the real app must still use local primitives from src/components/primitives and verified feature hooks/APIs.