48by40-ui

Canonical shared presentation infrastructure for 48by40 products: design tokens, Tailwind preset, and primitive React components.

Bounded shared UI assets only:

• primitives
• tokens
• Tailwind preset
• explicitly approved shared shell primitives

Must not contain product pages or business logic. No domain decisioning; no imports from product cleanrooms.

Versioning

Strict semver; production consumers must not depend on main. See governance doc §4.

Current version: 0.1.0 (pre-release; private; unpublished).

Governance

Charter, RomeOS UI policy, semver, and dependency guardrails:

• Authoritative: techno48by40-tech/romeos-v2-cleanroom — docs/architecture/REPO_AND_PACKAGE_GOVERNANCE.md (branch main).
• Local sibling clone: ../romeos-v2-cleanroom/docs/architecture/REPO_AND_PACKAGE_GOVERNANCE.md

Freight cleanroom name (canonical): 48by40freight-cleanroom (not 48by40-freight-cleanroom).

Charter

Approved shared primitives are listed in docs/CHARTER.md. Add entries there when promoting a component to shared scope. Reviewer matrix per REPO_AND_PACKAGE_GOVERNANCE.md §3.

What's in this package (v0.1)

@48by40/ui                    # Primitives + cn utility
@48by40/ui/tokens             # TypeScript token constants
@48by40/ui/tailwind-preset    # Tailwind preset for v1.1 brand tokens

Primitives shipped at v0.1

| Primitive | Charter row | Purpose | |---|---|---| | Button | UI-001 | v1.1 primary / secondary CTA per memo §3.6 + canon §6.1 | | BrandLogo | UI-002 | Lock-aware router over the 25 locked SVG assets per public/logo/README.md | | PlaceholderImage | UI-003 | Honest-pending image slot per D-05 photography rule | | SectionHeader | UI-004 | Eyebrow + headline + subhead block per canon §9 |

Tokens shipped at v0.1

| Module | Source | |---|---| | colors | v1.1 role-named palette (atlas-navy, vector-green, verified-cobalt, settlement-amber, ink, slate, hairline, surface, surface-muted) | | fonts | Three-typeface system (Space Grotesk display / Inter body / JetBrains Mono mono) per memo §3.2 | | typeScale | v1.1 type scale per canon §2.1 | | radii | 6px button radius per canon §6.1 (was 12px in kit-15) | | motion | fast / base / slow easings per memo §3.7; Freight overshoot variant | | spacing / zIndex / shadows / screens | structural supplements to Tailwind defaults |

Consumer integration

Tailwind preset

// tailwind.config.ts
import type { Config } from "tailwindcss";
import preset from "@48by40/ui/tailwind-preset";

const config: Config = {
  presets: [preset],
  content: [
    "./src/**/*.{ts,tsx}",
    "./node_modules/@48by40/ui/dist/**/*.{js,cjs}",
  ],
  // ... consumer-specific extensions / plugins
};

export default config;

The content glob must include the package dist/ so Tailwind sees primitive class strings.

Logo asset distribution

The 25 locked SVGs live at 48by40-io-cleanroom/public/logo/ per the lock package README §7.5 (the lock folder is the only source of truth for the bytes). Consumers either:

1. Verbatim copy the lock set into their own public/logo/ (default; recommended at v0.1). BrandLogo then resolves to /logo/<surface>-<layout>-<mode>.svg.
2. Mount at a different path and pass assetBasePath="/your-prefix" to BrandLogo.

The component never reconstructs logos in JSX. Per the lock README §6.1 / §6.5, missing variants require a variant request, not improvisation.

Doctrine binding

Every change to this repo is bound by:

• romeos-v2-cleanroom/docs/architecture/REPO_AND_PACKAGE_GOVERNANCE.md §3.3–3.4 (charter scope)
• romeos-v2-cleanroom/docs/completed-brand-work/08_brand_architecture_memo.md (brand architecture v1.1)
• romeos-v2-cleanroom/docs/completed-brand-work/13_decision_memo_block.md (D-01 through D-07)
• 48by40-io-cleanroom/public/logo/README.md (logo lock v1.1)
• 48by40-io-cleanroom/docs/landing/BRAND_MESSAGE_AND_BUILD_CANON_2026-04-29.md (canon-binding read-set)