@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.

Install

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

Tokens

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

| Axis | Figma node | Shape | |---|---|---| | color | 2032-6584 | 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

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.

crossy-sdk bridge

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

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

Swapping

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.