@trading-game/design-intelligence-layer

v1.1.0

Published

4 days ago

Trading Game Design System — shadcn/ui components with Tailwind CSS v4

0High
0Medium
0Low

Champion Trade Design System

The component library and token architecture for Champion Trade (formerly Trading Game) — a Tailwind CSS v4 + React design system with a strict semantic token layer, per-component typography tokens, light and dark themes, and 59 production components.

Package name: published as @trading-game/design-intelligence-layer. The Champion Trade npm scope rename is parked for a future major — install and import under the current name below.

Install

npm install @trading-game/design-intelligence-layer@latest --safe-chain-skip-minimum-package-age

The --safe-chain-skip-minimum-package-age flag bypasses npm's 72-hour safe-chain hold on newly published packages — needed when the latest version is fresh (common for AI agents and CI).

1 · CSS imports

In your main CSS file (e.g. globals.css), in this order:

@import "@trading-game/design-intelligence-layer/styles";
@import "tailwindcss";
@source "../node_modules/@trading-game/design-intelligence-layer/dist";

Why @source? Tailwind v4 skips node_modules by default; without it, no CSS is generated for component classes. Adjust the relative path in monorepos (../../node_modules/...).

1b · Vite projects

npm install @tailwindcss/vite

// vite.config.js
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'

export default { plugins: [react(), tailwindcss()] }

Next.js needs no plugin (PostCSS handles Tailwind).

2 · Fonts

The styles import loads Plus Jakarta Sans from Google Fonts automatically. font-body, font-display, and font-sans all resolve to it.

3 · Dark theme

Add the dark class (or data-theme="dark") to <html>. Every semantic token re-resolves — no component changes needed.

4 · Use components

import { Button, Card, Field, FieldLabel, FieldContent, Input } from "@trading-game/design-intelligence-layer"

export default function App() {
  return (
    <Card>
      <Field size="md">
        <FieldLabel htmlFor="amount">Amount</FieldLabel>
        <FieldContent>
          <Input id="amount" placeholder="250.00" />
        </FieldContent>
      </Field>
      <Button variant="primary">Trade now</Button>
    </Card>
  )
}

Peer dependencies

React 18+, ReactDOM, Tailwind CSS v4+.

What's inside

59 components — forms, overlays, menus, navigation, data display, plus trading-specific pieces (Numpad, the Stepper amount tray, Slide to Confirm, Steps timelines, Bottom Navigation with its liquid selection bubble + AI circle, Profile Photo, and the Result Snackbar for a settled win or loss)
Three-layer token architecture — primitives → semantics → component type tokens; components consume semantic colour tokens only, and npm run check:tokens fails the build on any drift (undocumented tokens, primitives in components, alpha-modified colour constructions)
Three-layer motion system — duration/easing primitives → semantic roles (hover, press, surface, overlay) → named signature moves (the liquid travel spring, the arrival pop); overlay animations ship with the package
Light + dark themes — dark is designed, not mirrored: its own surface mixes, selection fills, and ink steps; every selected/current-state marker (calendar today, breadcrumb page, links, radio, nav bubble) speaks the brand-selected ink family in dark
A tuned ink ladder — prominent → subtle → disabled is set by the gap between steps rather than by matching ramp positions, and the inverse family is defined as the opposite theme's page ladder rather than a bespoke construction. On a brand fill the ladder inverts, descending from white through the sanctioned alpha rungs (text-on-brand-subtle-static, text-on-brand-disabled-default)
Tinted canvas — the signature screen background (--background-tinted-canvas): a blue aurora melting into the canvas, pure token math, applied once on the page root
The frosted family — variant="frosted" (brand-tinted glass on page surfaces) and variant="frosted-on-brand" (white frost on art) across Button, NavigationButton, and Card
Disabled is decided per variant and per theme — the default construction is tokenised rather than dimmed: text-disabled-default ink, a background-disabled-default glaze laid over each variant's own fill (white 24% in light, black 24% in dark), and border-disabled-default for the edge, so a control drains without losing its identity and never compounds through nested elements. A named set of exceptions uses element opacity where the fade reads better than a glaze: Button primary and the selection controls at 24%, Button frosted at 40% on its already-tinted fill, and Button secondary at 24% in light while dark keeps a black-24% glaze. The trade is explicit — opacity drains a fill and its ink together, so a faded label loses contrast against its own surface
Position indicators — Pagination ships three forms of "which of N am I on": numbered cells, PaginationDots (active dot widens to a pill) and PaginationBar (segmented). Carousel exposes its index and composes them via CarouselDots, so there is exactly one indicator implementation
No shadows — elevation is hairlines and surface steps, with two sanctioned shadows: the floating-chrome lift (Bottom Navigation, Result Snackbar) and the Slide to Confirm handle's brand glow
Pill shape system — buttons and chips are pills, icon buttons are circles, cards 18px, menus 10px, form fields 4px; every control on the 32/40/48 rail
AI-readable in node_modules — AGENTS.md, all 58 component pages (Toggle and Toggle Group share one), foundations, and patterns ship inside the npm tarball
TypeScript, ESM + CJS

Documentation

| | | |---|---| | AGENTS.md | Start here if you're an AI agent — hard rules, grammar, anti-patterns, component index | | docs/foundations/colors.md | Every semantic token: light + dark value and its job | | docs/foundations/typography.md | Type scales, the private component-token pattern, weight policy | | docs/foundations/shape-layout.md | The 32/40/48 size rail, radius system, spacing, grid | | docs/foundations/motion.md | The three-layer motion system: primitives → semantic roles → signature moves | | docs/components/ | One page per component: API, variants, tokens consumed, behaviour, do/don't | | docs/patterns/ | Forms (Field cascade), menus (shared family), on-brand surfaces & the frosted recipe |

Demo app

npm run dev   # Next.js demo at http://localhost:4000 — every component, light/dark toggle

Upgrading

npm install @trading-game/design-intelligence-layer@latest --safe-chain-skip-minimum-package-age

Deprecated token aliases and component aliases (e.g. Button variant="glass" → frosted-on-brand, Input variant="inverse", NativeSelect size="default") keep working throughout 1.x; they are removed in one breaking sweep at the next major, alongside the Champion Trade package rename.