@newco-ai-platform/ui

v0.2.0

Published

24 days ago

NewCo Suite design tokens (Luminous Multi-Signal, frozen v1.0) + the component CSS surface that consumes them

0High
0Medium
0Low

hardeeparora

newco design-tokens luminous-multi-signal design-system

@newco-ai-platform/ui

NewCo Suite design tokens — Luminous Multi-Signal.

This is the v0.5 publish: tokens only. React primitives, .p-* components from the pitch microsite, and Storybook ship at v0.2.0 in Phase 2.

Install

npm install @newco-ai-platform/ui

Use — TypeScript

import {
  colors,
  typography,
  productAccents,
  productAccentList,
  dataViz,
  spacing,
  shadows,
  motion,
  prefersReducedMotion,
} from '@newco-ai-platform/ui';

// Light/dark surfaces
const bg = colors.light.surface;             // '#f7f9ff'
const bgDark = colors.dark.surface;          // '#0F1219'

// One product's accent
const neuronViolet = productAccents.neuron.hex;   // '#7C4FE0'
const neuronTint = productAccents.neuron.tint;    // rgba(124, 79, 224, 0.08)

// All 5 in customer-journey order — used in MERIDIAN's portfolio chart only
productAccentList.forEach((p) => console.log(p.displayName, p.hex));

// Typography style — spread into CSS-in-JS
const titleStyle = {
  ...typography.pageTitle,
  color: colors.light.onSurface,
};

// Motion — respect user preference
if (prefersReducedMotion()) {
  // Skip the animation; show the final state directly.
}

Use — CSS

@import '@newco-ai-platform/ui/tokens.css';

.my-page {
  background: var(--surface);
  color: var(--on-surface);
  font-family: var(--font-body);
}

.my-page__title {
  font-family: var(--font-display);
  font-size: var(--fs-page-title);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.my-page__neuron-pill {
  color: var(--neuron);
  background: var(--neuron-tint);
}

Set data-theme="dark" on <html> for the dark variant. Light is the default.

Demo

The included demo.html renders one example of each token category against the live tokens.

cd platform/packages/ui
npm run demo
# opens http://localhost:8765/demo.html

Constraints (from DESIGN.md)

One accent per product. Cross-product surfaces use neutrals only.
No 1px borders for sectioning. Use --shadow-card for tonal lift.
Body text ≥ 14px on data surfaces.
Kill switches use the product accent, never red. Red is reserved for true errors.
prefers-reduced-motion: reduce is always honored. All durations collapse to 0ms.

Full constraints + rationale: see platform/DESIGN.md.

Versioning

v0.1.0 (this release) — tokens-only. Phase 1 D7 unlock criterion.
v0.1.1 (Phase 1 D9) — any v0.5 → v1.0 token deltas after user "approved" sign-off.
v0.2.0 (Phase 2) — adds React primitives (Button, Card, Input, Dialog, Table) + the .p-* components from the pitch microsite ported as proper React.

Token changes after v0.1.1 require a design-system-owner PR review.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

@newco-ai-platform/ui

Install

Use — TypeScript

Use — CSS

Demo

Constraints (from DESIGN.md)

Versioning