@deriv-ds/design-intelligence-layer 0.1.0 → 0.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -6,32 +6,12 @@ Version 1.0 · 2026
6
6
 
7
7
  ---
8
8
 
9
- ## The one thing that ties them all together
10
-
11
- > "This isn't gambling dressed up in crypto jargon."
12
-
13
- Nobody says this sentence out loud. They think it. Constantly. About their own behaviour.
14
-
15
- These players are not degenerate gamblers. They are not reckless. They are people with strong opinions about where things go next — markets, matches, prices, events — who have found platforms that let them back those opinions with real money and get an answer fast.
16
-
17
- The self-image they're protecting is: *I have good reads.* Not "I got lucky." Not "I enjoy risk." I. Have. Good. Reads.
18
-
19
- Every piece of trading.game copy is either reinforcing that self-image or accidentally destroying it. There is no neutral position. Copy that says "your selection was incorrect" destroys it. Copy that says "market moved at the last second" preserves it. The player in both cases lost. What they do next depends entirely on which sentence they read.
20
-
21
- ---
22
-
23
9
  ## Three modes, one player
24
10
 
25
11
  ### Mode 1 — The Edge Seeker
26
12
 
27
13
  **The self-image sentence:** *"I have an edge. I've done the research."*
28
14
 
29
- This is the player who genuinely believes their read is information-based. They've watched enough charts, followed enough accounts, tracked enough outcomes to feel like they see things the market hasn't priced in yet. They know the Polymarket stat: during the 2024 US election, prediction markets outperformed every major poll. They know this because it confirms something they already believe about themselves — that paying attention is a competitive advantage.
30
-
31
- They approach a trade the way the Polymarket Playbook describes catalyst momentum trading: *"Traders with real-time news feeds can enter positions in the first 30 seconds and exit as late-movers pile in."* That's who they think they are. The early mover. The one who saw it first.
32
-
33
- In practice, they're usually the retail trader the article was warning against: *"If you're still betting based on gut feelings and Twitter polls, you're exiting liquidity for algorithmic traders."* But they don't know this. And the product doesn't need to tell them. The product needs to give their read a fast resolution and let reality do the rest.
34
-
35
15
  **What they actually say:**
36
16
 
37
17
  - *"This level has held three times. I'm not guessing, I'm reading the chart."*
@@ -40,16 +20,6 @@ In practice, they're usually the retail trader the article was warning against:
40
20
  - *"4 for 5 this week. My read on this setup is getting cleaner."*
41
21
  - *"Down today but the process was right. Bad fill, not a bad read."*
42
22
 
43
- That last line. *Down today but the process was right.* This is the most important sentence in the field guide. It is the cognitive move the brain makes to survive a loss without abandoning the system. It separates someone who goes again from someone who uninstalls. trading.game copy needs to hand them this sentence, or a version of it, every time they bust.
44
-
45
- **What they brag about:**
46
-
47
- Not money. Timing. *"I got in before the move."* Specifically, the moment of being right before other people realise they're wrong. The 10x hit matters less than the fact that they saw it coming. Screenshots go up on X with the chart annotated: *"Flagged this level two days ago. Look at that."*
48
-
49
- **What kills the mode:**
50
-
51
- Any framing that suggests randomness. If the resolution feels arbitrary — if the line moves in a way that reads as noise, not signal — they don't just lose, they lose trust in the product. They need the mechanic to feel like it responds to real information, even when the underlying feed is synthetic. The chart has to look like a chart. The resolution has to feel like it followed the logic of the market, even when the market is a GBM simulation.
52
-
53
23
  **Copy that works:**
54
24
 
55
25
  - *"The chart moved. You called it."*
@@ -69,12 +39,6 @@ Any framing that suggests randomness. If the resolution feels arbitrary — if t
69
39
 
70
40
  **The self-image sentence:** *"I'm not just playing. I have rules."*
71
41
 
72
- This player has a spreadsheet, or thinks they do. They've been on Stake or Rollbit. They know the house edge — they can tell you the exact percentage. They've read about martingale. They've tested martingale. They've busted on martingale twice and now have a modified version that caps at three steps, which they believe has eliminated the downside while preserving the upside.
73
-
74
- They are not delusional. They understand probability better than most. What they're doing is building a model — a framework that makes the activity feel like engineering rather than gambling. The model is usually wrong. But the act of having a model is what keeps them going, because it means every session is data, not just outcome.
75
-
76
- From the Polyburg psychology research: *"Accountability pressure — when people know they'll be held accountable for their decisions, they engage in more thorough information processing."* This player feels accountable to their own system. The system is the thing. Winning validates the system. Losing exposes a flaw in the current version, which needs to be iterated on. They will be back tomorrow with a tighter ruleset.
77
-
78
42
  **What they actually say:**
79
43
 
80
44
  - *"I go max 3 martingale steps then flat bet. That's the discipline piece most people skip."*
@@ -83,25 +47,11 @@ From the Polyburg psychology research: *"Accountability pressure — when people
83
47
  - *"My win rate over 80 samples on this setup is 63%. That's not a guess, that's a sample."*
84
48
  - *"One more to get back to flat. Just one."*
85
49
 
86
- That last line is not a strategy. It is the sound of the loop engaging. It is the most expensive sentence in crypto gambling. trading.game copy should never be the thing that triggers it — but it should absolutely understand that this is what's running in the background.
87
-
88
- **What they brag about:**
89
-
90
- Session stats. Monthly net figures. System iteration — *"New rules: max 5 steps, not 7. Adjusted after last week."* The public post that says *"Month review: +340 USDT net, 12 winning sessions, 8 losing. Still refining"* is not a win post. It is a system update. The brag is the discipline, not the number.
91
-
92
- Also: multipliers, not amounts. *"Hit 200x on a 0.01 stake"* is the screenshot. The absolute return is irrelevant. The multiplier is the story.
93
-
94
- **What kills the mode:**
95
-
96
- Loss streaks without narrative. Five busts in a row with no contextual copy leaves the brain with nothing to hold onto. *"BUST. BUST. BUST. BUST. BUST."* feels rigged. Each bust needs one line that gives the loss a shape — *"Tight range. Market didn't move."* / *"Vol index pinned at resistance."* — something that makes the loss legible without assigning blame.
97
-
98
- Also: withdrawal friction. This community has long institutional memory around platforms that make it easy to deposit and hard to withdraw. It is the single most common Reddit complaint across Stake, Rollbit, and every Deriv-adjacent product. If trading.game makes withdrawal clean and instant, say so explicitly. The bar is low because the competition set it low.
99
-
100
50
  **Copy that works:**
101
51
 
102
52
  - *"Bust. Market barely moved. Try a different setup."*
103
53
  - *"System running? 3-game streak. Keep the rules tight."*
104
- - *"Withdrawal confirmed. On its way."* (no friction, no delay copy)
54
+ - *"Withdrawal confirmed. On its way."*
105
55
  - *"Your stats. 7 trades. 4 wins. 57%."*
106
56
 
107
57
  **Copy that kills it:**
@@ -116,42 +66,18 @@ Also: withdrawal friction. This community has long institutional memory around p
116
66
 
117
67
  **The self-image sentence:** *"I called it. And I can prove it."*
118
68
 
119
- This player's win only counts if someone witnessed it. The prediction is not complete until it is posted. They run a public record — a spreadsheet linked in their bio, a weekly X post, a pinned Discord message. The number that matters is not their balance. It is their running unit total and their public win rate.
120
-
121
- From the Polyburg piece: the prediction market creates *"accountability pressure"* that makes people think more carefully. But for this player, the accountability isn't to the money. It's to the audience. They have built an identity around being demonstrably right over time. A single bad week is a variance event. A bad month is a crisis of identity.
122
-
123
- They are in esports prediction communities. Fantasy sports leagues. Kalshi. They liked Polymarket before it got too slow and too liquid — when the edge was in being first to a niche market that the crowd hadn't found yet. They are, in the language of every crypto community they've ever inhabited, *early.*
124
-
125
- Being early is not a strategy. It is a personality trait that functions as a brand. *"I was on trading.game before anyone knew about it."* That sentence, said six months from now in a Discord, is the first-mover acquisition flywheel. This is the person who tells people. Write for them and the next hundred come for free.
126
-
127
69
  **What they actually say:**
128
70
 
129
71
  - *"Week 22: 9-5, +3.1 units. Running total since January: +31.2 units. Screenshot below."*
130
- - *"I had this market at 70% when Kalshi had it at 55%. Took it. It resolved 100%. That's what reading the room looks like."*
131
72
  - *"Everyone was on the favourite. I took the value side. Positive EV call even if it doesn't land."*
132
- - *"Got in on [platform] when nobody knew about it. Already at level 4."*
133
73
  - *"My friends bet for fun. I track my record. There's a difference."*
134
- - *"Statistically it happens. Still a good bet at those odds."* (loss framing)
135
-
136
- That last line is the prediction market version of *"direction was right, timing was off."* It is the self-image protection sentence for someone who thinks in probability. They didn't lose. The low-probability outcome materialised. The decision was still correct given the information available. The market just disagreed this once.
137
-
138
- **What they brag about:**
139
-
140
- The public record above everything. Long shot calls that landed. Being early to a platform or a market. The specific mechanic of a near-win that they survived — *"55.50, I needed 55.51, I had under, I won."* The granularity of that number is the whole point. It proves they were paying attention.
141
-
142
- They share results through the product's own UI. The result card, the streak, the win state — these are designed content. If the screenshot of a trading.game result is ugly or generic, it won't get posted. The result screen is a distribution channel.
143
-
144
- **What kills the mode:**
145
-
146
- Generic copy on win and loss states. *"Well done!"* means nothing to someone who just called a five-tick streak. The win state should acknowledge the specific mechanic. *"5-tick streak. Vol moved exactly where you said."* is a sentence they will screenshot. *"You won! Claim your reward."* is not.
147
-
148
- Also: anything that makes them feel like a beginner. Tutorial prompts, explanatory overlays mid-game, onboarding copy that explains how markets work — all of this is an insult. They know how markets work. They've been tracking them since before trading.game existed.
74
+ - *"Statistically it happens. Still a good bet at those odds."*
149
75
 
150
76
  **Copy that works:**
151
77
 
152
78
  - *"Called it. +1,250 USDT. 5-tick streak."*
153
- - *"You were early on that move. Vol 75 confirmed."*
154
- - *"Streak: 7. Post this."* (literal invitation to share)
79
+ - *"You were early on that move. Confirmed."*
80
+ - *"Streak: 7. Post this."*
155
81
  - *"Bust. Still 6 from 9 today. Record stands."*
156
82
 
157
83
  **Copy that kills it:**
@@ -162,40 +88,8 @@ Also: anything that makes them feel like a beginner. Tutorial prompts, explanato
162
88
 
163
89
  ---
164
90
 
165
- ## Where the modes bleed together
166
-
167
- The same player, in a single session:
168
-
169
- Opens the app in Edge Seeker mode — *"I've been watching this vol index all week, I have a read."* Places three trades. Wins two. Third one busts. Drops into System Runner mode — *"Okay, variance. My system long-term is positive. One more."* Wins the fourth. Screenshots it. Posts it in Mode 3 with the caption: *"Back to even. System held."*
170
-
171
- That is one person. One session. Three modes.
172
-
173
- The copy implication: every state needs to be written to land across all three simultaneously. *"Bust. Market moved at the last tick."* gives Mode 1 a narrative (the market, not their read). Tells Mode 2 the system wasn't broken (external event). Lets Mode 3 post *"Bust but you can see the vol spike at the exact moment, setup was right"* without embarrassment.
174
-
175
- One sentence. Three self-images intact. Player goes again.
176
-
177
- ---
178
-
179
- ## The near-miss — the mechanic no one talks about
180
-
181
- This applies in all three modes.
182
-
183
- When the price lands 0.01 from the target — when the dice rolls 55.49 and they needed 55.50 — the brain does not register a loss. It registers *I was right and the resolution was imprecise.* This is neurologically distinct from a clean loss. The near-miss is more motivating than a win, because a win ends the tension. A near-miss keeps it alive.
184
-
185
- The animation of the resolution — the line landing one tick short, the number stopping just before the target — is not a UX detail. It is the single most powerful retention mechanic in the product. It should be treated with the same deliberateness as any major feature.
186
-
187
- Copy for near-miss states should never say the player was wrong. They almost weren't.
188
-
189
- - *"One tick short. The read was right."*
190
- - *"55.49. You had 55.50. Next one."*
191
- - *"Close. Vol reversed at the last second."*
192
-
193
- ---
194
-
195
91
  ## What trading.game is selling, in their language
196
92
 
197
- Not their words. Theirs.
198
-
199
93
  | What the product is | What the player calls it |
200
94
  |---|---|
201
95
  | A synthetic GBM price feed | *"A live market"* |
@@ -206,8 +100,6 @@ Not their words. Theirs.
206
100
  | A win state | *"Called it"* |
207
101
  | A loss state | *"Market moved. Next one."* |
208
102
 
209
- The product doesn't have to lie about what it is. It just has to use the player's language for it. They are not playing a synthetic random number game. They are testing a read against a live market. The first sentence feels like gambling. The second feels like trading.game.
210
-
211
103
  ---
212
104
 
213
105
  *trading.game Player Field Guide — v1.0. Use alongside the Content Style Guide when writing any player-facing copy. These are not character studies — they are the modes the player is in when they read what you write.*
@@ -1,14 +1,14 @@
1
1
  ---
2
- description: Enforce correct usage of the @trading-game/design-intelligence-layer npm package. Apply whenever building UI in a project that has the package installed — before writing any component, layout, or styled element.
2
+ description: Enforce correct usage of the @deriv-ds/design-intelligence-layer npm package. Apply whenever building UI in a project that has the package installed — before writing any component, layout, or styled element.
3
3
  globs: ["**/*.tsx", "**/*.jsx", "**/*.ts", "**/*.css"]
4
4
  alwaysApply: true
5
5
  ---
6
6
 
7
- # @trading-game/design-intelligence-layer — AI Agent Usage Rules
7
+ # @deriv-ds/design-intelligence-layer — AI Agent Usage Rules
8
8
 
9
9
  ## Rule 1 — Check the package before writing any custom UI
10
10
 
11
- **BEFORE** writing any `<div>`, `<button>`, `<span>`, or other element styled with Tailwind classes, you MUST check if a component already exists in `@trading-game/design-intelligence-layer`.
11
+ **BEFORE** writing any `<div>`, `<button>`, `<span>`, or other element styled with Tailwind classes, you MUST check if a component already exists in `@deriv-ds/design-intelligence-layer`.
12
12
 
13
13
  ### Available components (check this list first)
14
14
 
@@ -18,9 +18,9 @@ Accordion, Alert, AlertDialog, Avatar, AvatarGroup, Badge, Breadcrumb, Button, C
18
18
 
19
19
  ```
20
20
  Does a component exist in the list above?
21
- YES → Import it from @trading-game/design-intelligence-layer. Do NOT re-implement it.
21
+ YES → Import it from @deriv-ds/design-intelligence-layer. Do NOT re-implement it.
22
22
  NO → STOP. Tell the user:
23
- "The [ComponentName] component does not exist in @trading-game/design-intelligence-layer.
23
+ "The [ComponentName] component does not exist in @deriv-ds/design-intelligence-layer.
24
24
  Options:
25
25
  (a) Build a custom one using design system tokens only
26
26
  (b) Use a different existing component
@@ -31,7 +31,7 @@ Does a component exist in the list above?
31
31
  ### Correct import pattern
32
32
 
33
33
  ```tsx
34
- import { Button, Card, Badge } from "@trading-game/design-intelligence-layer"
34
+ import { Button, Card, Badge } from "@deriv-ds/design-intelligence-layer"
35
35
  ```
36
36
 
37
37
  ---
@@ -61,8 +61,8 @@ import { Button, Card, Badge } from "@trading-game/design-intelligence-layer"
61
61
  ✅ bg-primary — brand blue #2323FF — CTAs and primary actions
62
62
  ✅ bg-primary-hover — darker blue #0B0BD2 — primary button hover
63
63
  ✅ bg-secondary-hover — light grey #EEEEEE — outline/secondary button hover
64
- ✅ bg-semantic-win — green — profit/positive
65
- ✅ bg-semantic-loss — red — loss/negative
64
+ ✅ bg-win — green — profit/positive
65
+ ✅ bg-loss — red — loss/negative
66
66
  ```
67
67
 
68
68
  #### Text tokens
@@ -72,8 +72,8 @@ import { Button, Card, Badge } from "@trading-game/design-intelligence-layer"
72
72
  ✅ text-on-subtle — secondary text (mid grey)
73
73
 
74
74
  ✅ text-primary — brand blue #2323FF
75
- ✅ text-semantic-win — green — profit/positive
76
- ✅ text-semantic-loss — red — loss/negative
75
+ ✅ text-win — green — profit/positive
76
+ ✅ text-loss — red — loss/negative
77
77
  ```
78
78
 
79
79
  #### Border tokens
@@ -119,9 +119,9 @@ Token rules apply **only** to: color (bg, text, border, ring, shadow color), bor
119
119
  ### Correct CSS setup in the consuming project
120
120
 
121
121
  ```css
122
- @import "@trading-game/design-intelligence-layer/styles";
122
+ @import "@deriv-ds/design-intelligence-layer/styles";
123
123
  @import "tailwindcss";
124
- @source "../node_modules/@trading-game/design-intelligence-layer/dist";
124
+ @source "../node_modules/@deriv-ds/design-intelligence-layer/dist";
125
125
  ```
126
126
 
127
127
  ### Vite projects — required plugin
@@ -185,7 +185,7 @@ Wait for confirmation before proceeding.
185
185
 
186
186
  ## Rule 8 — Blocks are playground-only (not package exports)
187
187
 
188
- **Blocks** are pre-composed UI sections (e.g. NavBar) demonstrated in the **Blocks** tab of the design system playground. They are **not** exported from `@trading-game/design-intelligence-layer`.
188
+ **Blocks** are pre-composed UI sections (e.g. NavBar) demonstrated in the **Blocks** tab of the design system playground. They are **not** exported from `@deriv-ds/design-intelligence-layer`.
189
189
 
190
190
  ```
191
191
  ❌ Do NOT import blocks from the package — they don't exist there
@@ -204,11 +204,11 @@ Wait for confirmation before proceeding.
204
204
 
205
205
  ## Rule 7 — Package version upgrades (stay aligned with the published design system)
206
206
 
207
- When the user asks to **update**, **upgrade**, or **install the latest** `@trading-game/design-intelligence-layer`, or after the dependency version changes in `package.json`:
207
+ When the user asks to **update**, **upgrade**, or **install the latest** `@deriv-ds/design-intelligence-layer`, or after the dependency version changes in `package.json`:
208
208
 
209
209
  ### How updates actually apply
210
210
 
211
- - If the project **imports components only** from `@trading-game/design-intelligence-layer`, new styles and behavior come from **`node_modules/.../dist`** after **`npm install` / `npm ci` and a dev or production build**. The package is the source of truth — no AI step is required for those imports to change.
211
+ - If the project **imports components only** from `@deriv-ds/design-intelligence-layer`, new styles and behavior come from **`node_modules/.../dist`** after **`npm install` / `npm ci` and a dev or production build**. The package is the source of truth — no AI step is required for those imports to change.
212
212
  - If the repo **contains copied or forked** files that mirror package components (e.g. a local `components/ui/button.tsx` with full implementation), **`npm install` does not update those files.** They stay stale until someone reconciles them.
213
213
 
214
214
  ### What you MUST do after a design-system version bump
@@ -216,10 +216,10 @@ When the user asks to **update**, **upgrade**, or **install the latest** `@tradi
216
216
  1. **Search for local duplication** — Look for UI files that re-implement package exports (`components/ui/`, `@/components/ui`, etc.). Flag any file that is not a **thin re-export** or **documented wrapper** around the package.
217
217
  2. **Reconcile** — Prefer **removing** duplicate implementations and **importing from the package**. If a fork must stay, align it with the **exact** current implementation in the installed package (or tag on GitHub) and document why it diverges (file name + reason).
218
218
  3. **Notify on replace** — If you **delete, replace, or substantially overwrite** local component code to match the package, **stop and tell the user clearly**, e.g.
219
- `Aligned [ComponentName] with @trading-game/design-intelligence-layer@[version]. Previous local behavior or classes: [short summary]. Re-apply needs via package variants/props, tokens, or a thin wrapper only if product requires it.`
219
+ `Aligned [ComponentName] with @deriv-ds/design-intelligence-layer@[version]. Previous local behavior or classes: [short summary]. Re-apply needs via package variants/props, tokens, or a thin wrapper only if product requires it.`
220
220
  4. **Review `className` overrides** — Parent apps often pass `className` on DS components. Old overrides (radius, colors, shadows) can **hide** new defaults (e.g. pill buttons). After upgrade, scan for overrides on DS components and trim or adjust them when they conflict with the new design.
221
221
  5. **Refresh Cursor rules** — The package ships `guides/rules/design-system-consuming-project.mdc`. Cursor does **not** read it from `node_modules` automatically. Tell the user to re-copy it (see README **AI Agent Setup → Cursor**) so agent instructions match the release.
222
- 6. **Tailwind** — Confirm `@source` still points at `node_modules/@trading-game/design-intelligence-layer/dist` so Tailwind v4 emits classes from the updated bundle.
222
+ 6. **Tailwind** — Confirm `@source` still points at `node_modules/@deriv-ds/design-intelligence-layer/dist` so Tailwind v4 emits classes from the updated bundle.
223
223
 
224
224
  ### Do not assume
225
225
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@deriv-ds/design-intelligence-layer",
3
- "version": "0.1.0",
3
+ "version": "0.3.0",
4
4
  "description": "Deriv Design System — shadcn/ui components with Tailwind CSS v4",
5
5
  "type": "module",
6
6
  "main": "./dist/index.cjs",