# @nexus-cross/crossx-design-system

> CROSSx design system — color, typography and layout tokens with a swappable DesignSystem contract

Latest version **1.4.2** (published 2026-09-28) · MIT license · 0 weekly downloads

## Install

```sh
npm install @nexus-cross/crossx-design-system
pnpm add @nexus-cross/crossx-design-system
yarn add @nexus-cross/crossx-design-system
bun add @nexus-cross/crossx-design-system
```

## Health

**Score 70/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; recently updated; high maintenance score; high quality score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 1.4.2 |
| Published | 2026-09-28 |
| First published | 2026-06-17 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 21.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | hans-nexus |

## Links

- npm: https://www.npmjs.com/package/@nexus-cross/crossx-design-system
- npm.io page: https://npm.io/package/@nexus-cross/crossx-design-system

## Recent versions

- 1.4.2 (latest) — 2026-09-28
- 1.4.2-beta.8 (beta) — 2026-09-28
- 1.4.2-beta.7 — 2026-09-23
- 1.4.2-beta.6 — 2026-09-23
- 1.4.2-beta.5 — 2026-09-22
- 1.4.2-beta.4 — 2026-09-08
- 1.4.2-beta.3 — 2026-09-08
- 1.4.2-beta.2 — 2026-09-04
- 1.4.2-beta.1 — 2026-09-04
- 1.4.1 — 2026-08-27
- 1.4.1-beta.9 — 2026-08-26
- 1.4.1-beta.8 — 2026-08-26
- 1.4.1-beta.7 — 2026-08-26
- 1.4.1-beta.6 — 2026-08-26
- 1.4.1-beta.5 — 2026-08-25
- … 94 more at https://npm.io/package/@nexus-cross/crossx-design-system/versions

## README

# @nexus-cross/crossx-design-system

The CROSSx design system — **color**, **typography** and **layout** tokens with
a swappable `DesignSystem` contract. Pure TypeScript, **no runtime dependencies**.

It is the single source of design tokens for `@nexus-cross/dapp-ui` and
`@nexus-cross/connect-kit-*`. A DApp can replace it wholesale by passing its own
`DesignSystem`-shaped object — see [Swapping](#swapping).

## Install

```sh
pnpm add @nexus-cross/crossx-design-system
```

## Tokens

Transcribed from the CROSSx Figma design system (Embeded v1.0.0):

| Axis | Figma node | Shape |
|---|---|---|
| color | `2151-1073` (file `Bta3fMnTynXtOtyZqI05fu`) | `bg`, `surface`, `content`, `border`, `accent.primary`, `system.{red,blue,orange,purple,green}`, `overlay`, `static` — light + dark |
| typography | `2019-2351` | `text`, `textMedium`, `textSemibold`, `label`, `labelSemibold`, `heading` (h1–h7), `display` |
| layout | `2060-1755` | `responsivePadding` (`sm`/`md`/`lg`) |

## CSS output

```ts
import { buildDesignSystemCss, defaultDesignSystem } from '@nexus-cross/crossx-design-system';

const css = buildDesignSystemCss(defaultDesignSystem);
// inject `css` into a <style>, then set data-ds-theme="light" | "dark"
```

- **Colors / layout** → `--ds-*` custom properties.
  `content.highest` → `var(--ds-content-highest)`,
  `accent.primary.default` → `var(--ds-accent-primary-default)`,
  `responsivePadding.md` → `var(--ds-responsive-padding-md)`.
  Dark is the `:root` default; light overlays via `[data-ds-theme="light"]`.
- **Typography** → utility classes, applied with `className`:
  `.ds-text-medium-sm`, `.ds-label-md`, `.ds-heading-h6`, `.ds-display-lg`.

## Picking a ramp

`accent.primary` is the **brand orange** (`#FF8438` / `#F0640D`).
`system.orange` is a separate **warning amber** (`#FC8B01` / `#E56F00`), and
`system.green` is the teal success ramp. The two oranges look similar but are
not interchangeable — choose by meaning:

| Intent | Ramp |
|---|---|
| Primary CTA, focus ring, active tab, brand highlight | `accent.primary` |
| Warning / caution copy and chips | `system.orange` |
| Success, completion, positive delta | `system.green` |

`ColorRamp.medium` is **optional** — only `system.orange` and `system.green`
define it, so `--ds-<ramp>-medium` is emitted for those two ramps alone.

## crossy-sdk bridge

```ts
import { toSdkColorOverrides, defaultDesignSystem } from '@nexus-cross/crossx-design-system';

const overrides = toSdkColorOverrides(defaultDesignSystem, 'dark'); // 12-key SDKColorOverrides
```

## Swapping

```ts
import type { DesignSystem } from '@nexus-cross/crossx-design-system';

const myDesignSystem: DesignSystem = { name: 'acme', colors: { light, dark }, typography, layout };
createCrossxConfig({ /* ... */, designSystem: myDesignSystem });
```

The contract is structural — a conforming object works even without importing
the type.

See [`docs/design-system/01-architecture.md`](../../docs/design-system/01-architecture.md).

---
_Source: https://npm.io/package/@nexus-cross/crossx-design-system · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._