MotirBuilding in public
MOTIR · moooon
onMotir
You’re viewing a public project. Anyone can view it — no account needed. Sign in to submit, upvote, or comment on requests.View-only — you can’t edit work items
MOTIR-1456

8.3.11 Ship Motir's BRAND chrome for cross-repo reuse — the design-system half already shipped as `@motir/design-system`

Done
Description

Type: code · Executor: coding_agent · RE-SCOPED 2026-08-27 by motir run MOTIR-1456, which claimed the card, verified its criteria against origin/main and the public npm registry, found two of three already delivered, and halted at guard #4 rather than build. The original body is preserved below under As authored.

Implement the decision MOTIR-1456 is now blocked by: ship Motir's brand chrome so a second Motir-owned repository (motir-marketing) can render it, by the mechanism that ADR chooses. Do not choose the mechanism here.

What is ALREADY SHIPPED — do not rebuild any of it

Story MOTIR-1524 (Epic 7, authored two days after this card, with no edge to it) delivered the extraction. Verified 2026-08-27:

original criterionverdictevidence
a versioned package builds and publishes; exports the --el-* + shape tokens + the landing primitivesSATISFIED for tokens + primitives@motir/design-system@0.1.0 is live on public npm (published 2026-07-02T22:14:57Z, dist.shasum ed10ed8db66eb09d34d062b0b4bad878c8509fed). npm pack @motir/design-system@0.1.0, pulled anonymously, carries theme.css with 405 --el-* references and the [data-palette] (46) / [data-style] (134) / [data-type] (17) override blocks, plus Button, Card, Pill, SectionLabel, typography.js and buildThemeInitScript. — MOTIR-1526, MOTIR-1535, MOTIR-1536, MOTIR-1537
motir-core consumes the package for the extracted tokens, no visual regressionSATISFIEDorigin/main:app/globals.css opens @import 'tailwindcss'; @import '@motir/design-system/theme.css';. packages/design-system/ is on origin/main; the compiled CSS was proved byte-identical to the pre-swap build. — MOTIR-1527
a separate repo can install + render from the package aloneMECHANISM SATISFIEDnextjs-prisma-vercel-starter carries "@motir/design-system": "^0.1.0" on origin/main, imports theme.css, renders from the package in layout.tsx / page.tsx / components/ui/index.ts, and guards it with tests/design-system-wiring.test.ts. — MOTIR-1528, MOTIR-1530

Nothing above is this card's work any more. These clauses are recorded as met, with evidence, rather than dropped.

What is LEFT — this card's actual scope

The brand chrome is not in the package, and that is the only reason motir-marketing still cannot render Motir's mark from a dependency. grep -c '\.brand-' returns 10 in app/globals.css and 0 in packages/design-system/theme.css. The three artifacts, all in motir-core:

  • components/brand/BrandMark.tsx — the lockup (lockup / mark / stacked; default / quiet / inverted)
  • components/brand/waveBand.tsWAVE_BAND_PATH + WAVE_BAND_VIEW_BOX
  • the .brand-* block in app/globals.css (lines 174–221)

Acceptance criteria

  • The brand chrome ships by the mechanism the blocking decision chose — a new package, a subpath export, or a recorded copy — and no other; if the implementation disagrees with the ADR, amend the ADR first.
  • motir-core renders its brand chrome through that mechanism with no visual change: prove it the way MOTIR-1527 did — build the compiled CSS before and after and show the chunks match, not by screenshot.
  • The type-axis pin survives. .brand-word must still resolve var(--font-sans-source), the raw FACE variable, never the var(--font-sans) ROLE token that three [data-type] blocks re-point. A test asserts it (ExploreTopBar shipped this defect once).
  • tests/components/brand-mark.test.tsx and tests/brand/* still pass unchanged against the relocated component, or their moves are shown to be mechanical.
  • Every existing BrandMark consumer still resolves: app/(auth)/layout.tsx, app/(authed)/_components/TopNav.tsx, app/(public)/_components/PublicTopBar.tsx, app/(public)/explore/_components/ExploreTopBar.tsx, components/onboarding/DiscoveryChatRail.tsx, components/planning/PlanChangeRail.tsx, components/planning/PlanWithAIFab.tsx.
  • If the mechanism publishes an artifact, the artifact-obtainable check runs before the card closes: bump the version, merge, push the release tag, and pull the published tarball anonymously from npm, quoting the digest in the PR body and on this card. The release procedure is documented in packages/design-system/README.mdReleasing and automated by .github/workflows/release-design-system.yml (tag design-system-v<x.y.z>, OIDC Trusted Publishing, no NPM_TOKEN) — the tag push is a post-merge step, not a fake one.
  • motir-marketing is NOT touched by this card — that repo does not exist yet (MOTIR-1455). This card ships the distributable; MOTIR-1152 consumes it.

Context refs

  • the blocking decision card (blocked_by) — the ADR that chooses the mechanism
  • motir-core/docs/decisions/design-system-package.md — the existing boundary (§1 rule, §Context consumers, §3 distribution)
  • motir-core/packages/design-system/package.json exports/files, tsup.config.ts, scripts/preserve-use-client.mjs, scripts/build-index-barrel.mjs (the RSC-safe barrel, MOTIR-1538 — reuse both post-build steps for any new mixed client/server bundle)
  • motir-core/design/brand/design-notes.md — §3 the reference CSS, §7 the variants, §8 the accessible-name rule
  • blocks MOTIR-1152 (the marketing landing consumes this)

As authored (2026-06-30, superseded above)

motir-marketing is a SEPARATE repo, so it can't import motir-core's design system directly. To keep the two repos on-brand (no drift), extract the design system into a shared package both repos consume. Extract the --el-* colour-token layer + the [data-display-style] shape tokens + the 3-axis [data-axis] override scaffolding, plus the small set of primitives a landing needs (Button, Card, the brand lockup wrapper, type scale). Publish as a versioned package; motir-core switches to consuming it so there is ONE source of truth, not a fork. Keep the package framework-light so the marketing site can server-render.

Acceptance criteria: a versioned @motir/design-system package builds and publishes, exporting the --el-* + shape tokens + the landing primitives · motir-core consumes the package for at least the extracted tokens with NO visual regression · motir-marketing can install + render the brand chrome from the package alone.