@trading-game/design-intelligence-layer 0.8.5
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.
- package/AGENTS.md +70 -0
- package/README.md +464 -0
- package/dist/index.cjs +6798 -0
- package/dist/index.cjs.map +1 -0
- package/dist/index.d.cts +611 -0
- package/dist/index.d.ts +611 -0
- package/dist/index.js +6473 -0
- package/dist/index.js.map +1 -0
- package/docs/accessibility-standards/trading-game-accessibility-standards.md +101 -0
- package/docs/design-principles/trading-game-design-principles.md +97 -0
- package/docs/design-system-guide/trading-game-ds-guide.md +2193 -0
- package/docs/personas/trading-game-player-field-guide.md +213 -0
- package/docs/rules/design-system-consuming-project.mdc +208 -0
- package/docs/tone-of-voice/trading-game-tone-of-voice-and-campaign-brief.md +290 -0
- package/package.json +85 -0
- package/src/styles.css +398 -0
|
@@ -0,0 +1,290 @@
|
|
|
1
|
+
# trading.game — Tone of voice + campaign brief
|
|
2
|
+
|
|
3
|
+
*The creative foundation. Build everything from here.*
|
|
4
|
+
|
|
5
|
+
Version 1.0 · 2026
|
|
6
|
+
|
|
7
|
+
---
|
|
8
|
+
|
|
9
|
+
The style guide tells writers what to do.
|
|
10
|
+
|
|
11
|
+
This tells them why it works — and what world-class looks like.
|
|
12
|
+
|
|
13
|
+
---
|
|
14
|
+
|
|
15
|
+
## What we're actually selling
|
|
16
|
+
|
|
17
|
+
Not a game. Not a platform. Not a crypto product.
|
|
18
|
+
|
|
19
|
+
The moment you call what a market does next — before it happens — and you're right. The line moves. The number hits. The screenshot goes up.
|
|
20
|
+
|
|
21
|
+
*I called it.*
|
|
22
|
+
|
|
23
|
+
No other brand owns this sentence. Crypto exchanges sell holdings. Prediction markets are slow. Casino-adjacent apps sell luck. None of them give the player a reason to say *I called it.*
|
|
24
|
+
|
|
25
|
+
trading.game does.
|
|
26
|
+
|
|
27
|
+
Everything follows from this. Every headline. Every bust state. Every push notification. Every button. The question behind all of it is the same: does this copy give the player *I called it* — or does it take it away?
|
|
28
|
+
|
|
29
|
+
---
|
|
30
|
+
|
|
31
|
+
## The three campaign territories
|
|
32
|
+
|
|
33
|
+
Every player is protecting one sentence. These are the three sentences.
|
|
34
|
+
|
|
35
|
+
---
|
|
36
|
+
|
|
37
|
+
### Territory 1 — The Edge
|
|
38
|
+
|
|
39
|
+
> *"I have an edge. I've done the research."*
|
|
40
|
+
|
|
41
|
+
This player watches charts because they believe attention is a competitive advantage. They've been right three times in a row. Maybe five. Enough to build a conviction that the reads mean something.
|
|
42
|
+
|
|
43
|
+
They're usually wrong about having an edge. They're right about one thing: they are paying attention. The product's job is to give that attention the fastest possible verdict.
|
|
44
|
+
|
|
45
|
+
**Campaign anchor:** *Your read. The market decides.*
|
|
46
|
+
|
|
47
|
+
**What this territory owns:**
|
|
48
|
+
Speed of resolution as validation. Not luck — the read, tested. The chart annotated after the fact. The screenshot that says *called this level three days ago.*
|
|
49
|
+
|
|
50
|
+
**Demonstration copy:**
|
|
51
|
+
|
|
52
|
+
| Context | Copy |
|
|
53
|
+
|---|---|
|
|
54
|
+
| Win | Your read. Confirmed. |
|
|
55
|
+
| Win (specific) | Called the level. Vol moved exactly where you said. |
|
|
56
|
+
| Loss | Bust. Vol spiked at the last tick. Happens. |
|
|
57
|
+
| Loss (sustain) | Direction was right. Go again. |
|
|
58
|
+
| Streak | Still up 3 this week. Keep reading. |
|
|
59
|
+
| Campaign headline | Your read. The market decides. |
|
|
60
|
+
| Campaign headline | You've been calling levels for months. Now you can back them. |
|
|
61
|
+
| Campaign headline | The fastest feedback loop on a read. |
|
|
62
|
+
|
|
63
|
+
**What kills it:** Anything implying randomness. "Lucky break." "Your selection was incorrect." These remove the read entirely. The player doesn't just lose — they lose the thing the product was supposed to protect.
|
|
64
|
+
|
|
65
|
+
---
|
|
66
|
+
|
|
67
|
+
### Territory 2 — The System
|
|
68
|
+
|
|
69
|
+
> *"I'm not just playing. I have rules."*
|
|
70
|
+
|
|
71
|
+
This player has a modified martingale. The modification is wrong. The cap won't save them. None of that matters. Having a system is the point. Without it, this is gambling. With it, it's research. Every session is data. Every bust is a flaw to iterate on.
|
|
72
|
+
|
|
73
|
+
The word *system* is doing all the psychological work. trading.game's job is to keep that frame intact — especially after a loss.
|
|
74
|
+
|
|
75
|
+
**Campaign anchor:** *Every trade is data.*
|
|
76
|
+
|
|
77
|
+
**What this territory owns:**
|
|
78
|
+
The intellectual coating they've always wanted around the game they've already been playing. Session stats as content. Provably fair as trust signal. Clean withdrawals as table stakes.
|
|
79
|
+
|
|
80
|
+
**Demonstration copy:**
|
|
81
|
+
|
|
82
|
+
| Context | Copy |
|
|
83
|
+
|---|---|
|
|
84
|
+
| Win | +250 USDT. System running. |
|
|
85
|
+
| Win streak | 3-game streak. Keep the rules tight. |
|
|
86
|
+
| Loss | Bust. Market barely moved. Tight range. |
|
|
87
|
+
| Loss (sustain) | Variance is part of any system. Go again. |
|
|
88
|
+
| Stats | 7 trades. 4 wins. 57%. Your session. |
|
|
89
|
+
| Withdrawal | Withdrawal confirmed. On its way. |
|
|
90
|
+
| Campaign headline | Every trade is data. |
|
|
91
|
+
| Campaign headline | A game that rewards having a system. |
|
|
92
|
+
| Campaign headline | The read. The result. The record. |
|
|
93
|
+
|
|
94
|
+
**What kills it:** WIN BIG. Jackpot language. Casino aesthetics. Any of these strips the system frame immediately and turns the product into the thing they've been insisting it isn't. Also: "please try again." Systems don't apologise.
|
|
95
|
+
|
|
96
|
+
---
|
|
97
|
+
|
|
98
|
+
### Territory 3 — The Record
|
|
99
|
+
|
|
100
|
+
> *"I called it. And I can prove it."*
|
|
101
|
+
|
|
102
|
+
The prediction only counts if someone witnessed it. The win is not complete until it's posted. This player runs a public record — a spreadsheet in their bio, a weekly X post, a pinned Discord message. The number that matters is not their balance. It's their running unit total and their public win rate.
|
|
103
|
+
|
|
104
|
+
Being early to trading.game is as valuable as winning on it. "I found this before anyone knew about it" is not a throwaway line. It's identity. Write for this player and the next hundred come free.
|
|
105
|
+
|
|
106
|
+
**Campaign anchor:** *The fastest way to be publicly right.*
|
|
107
|
+
|
|
108
|
+
**What this territory owns:**
|
|
109
|
+
The result screen as a content piece. The streak counter as a K/D ratio. The platform as evidence. Shareable, specific, worth posting — because if the win state is generic, it doesn't get posted, and the distribution flywheel doesn't turn.
|
|
110
|
+
|
|
111
|
+
**Demonstration copy:**
|
|
112
|
+
|
|
113
|
+
| Context | Copy |
|
|
114
|
+
|---|---|
|
|
115
|
+
| Win | Called it. +1,250 USDT. 5-tick streak. |
|
|
116
|
+
| Win (share prompt) | Streak: 7. Post this. |
|
|
117
|
+
| Near-win | You were early on that move. Vol 75 confirmed. |
|
|
118
|
+
| Loss | Bust. Still 6 from 9 today. Record stands. |
|
|
119
|
+
| All-time stat | Your record: 47–29. Keep building. |
|
|
120
|
+
| Campaign headline | The fastest way to be publicly right. |
|
|
121
|
+
| Campaign headline | You found it early. That matters here. |
|
|
122
|
+
| Campaign headline | Before it was mainstream. You know what to do. |
|
|
123
|
+
|
|
124
|
+
**What kills it:** "Great job." "You're getting the hang of this." Generic win states with no data, no mechanic, nothing worth posting. If the result screen is forgettable, it doesn't get shared. The UI is a distribution channel. Treat it like one.
|
|
125
|
+
|
|
126
|
+
---
|
|
127
|
+
|
|
128
|
+
## The translation principle
|
|
129
|
+
|
|
130
|
+
Apple doesn't describe the product. They describe the experience in the user's language.
|
|
131
|
+
|
|
132
|
+
Neither do we.
|
|
133
|
+
|
|
134
|
+
| What the product is | What the player calls it | The copy rule |
|
|
135
|
+
|---|---|---|
|
|
136
|
+
| A synthetic GBM price feed | A live market | Never say synthetic |
|
|
137
|
+
| A 50/50 binary outcome | My read, tested | Never say 50/50 |
|
|
138
|
+
| A house edge of 2% | Known edge. Provably fair. | Own the number — don't hide it |
|
|
139
|
+
| A 5-tick resolution | Fast feedback on the call | Speed is the whole product |
|
|
140
|
+
| A streak counter | My record | Not a feature. Their identity. |
|
|
141
|
+
| A win state | Called it | Two words. That's the product. |
|
|
142
|
+
| A loss state | Market moved. Next one. | The copy is the recovery mechanism |
|
|
143
|
+
|
|
144
|
+
Every piece of copy should be written from the right column. The left column is for the legal team and the product spec. The right column is for everyone else.
|
|
145
|
+
|
|
146
|
+
---
|
|
147
|
+
|
|
148
|
+
## The near-miss — a dedicated campaign brief
|
|
149
|
+
|
|
150
|
+
This is the mechanic no one talks about. It should be a campaign.
|
|
151
|
+
|
|
152
|
+
When the price lands one tick short of the target — when the line stops at 55.49 and the player needed 55.50 — the brain does not register a loss. It registers: *I was right and the resolution was imprecise.* Neurologically distinct from a clean loss. More motivating than a win, because a win ends the tension. A near-miss keeps it alive.
|
|
153
|
+
|
|
154
|
+
The animation of the line stopping one tick short is not a UX detail. It is the most powerful retention mechanic in the product.
|
|
155
|
+
|
|
156
|
+
**Campaign territory:** The feeling of being one tick away from right — and knowing the read was correct — is specific to trading.game. No exchange offers it. No prediction market delivers it this fast. This is a campaign.
|
|
157
|
+
|
|
158
|
+
**Campaign lines:**
|
|
159
|
+
- One tick short. The read was right.
|
|
160
|
+
- 55.49. You had 55.50. Next one.
|
|
161
|
+
- Close. Vol reversed at the last second.
|
|
162
|
+
- Almost isn't wrong. Go again.
|
|
163
|
+
|
|
164
|
+
**The creative brief:**
|
|
165
|
+
Show the line stopping one tick short. No music swell. No consolation overlay. Just the number, held for a beat. Then one line. The player should feel correct — not consoled. They should place the trade again without being told to.
|
|
166
|
+
|
|
167
|
+
The near-miss is the product's most honest promise: *you are getting better at this.* Every piece of near-miss copy should carry that without saying it.
|
|
168
|
+
|
|
169
|
+
---
|
|
170
|
+
|
|
171
|
+
## The voice
|
|
172
|
+
|
|
173
|
+
One person. A smart friend who actually plays. Who has been right on three calls in a row and knows — specifically — the difference between edge and luck.
|
|
174
|
+
|
|
175
|
+
Not a bank. Not a tutorial. Not a hype account. The friend who would tell you when the read was bad, without apology, but who also knew before you did that it was going to bust.
|
|
176
|
+
|
|
177
|
+
**The voice has a point of view.** It knows what it's talking about. It sounds like someone with something at stake.
|
|
178
|
+
|
|
179
|
+
**The voice is fast.** It gets to the point before the player blinks. In a game context, attention is short. If a sentence can be cut in half, cut it in half.
|
|
180
|
+
|
|
181
|
+
**The voice reacts.** It responds to what just happened. A win state written last Tuesday is not a win state. It's furniture.
|
|
182
|
+
|
|
183
|
+
**The voice is fearless.** Real stakes. Real crypto. Real loss. It doesn't apologise for any of this. It owns it.
|
|
184
|
+
|
|
185
|
+
---
|
|
186
|
+
|
|
187
|
+
## What the voice never does
|
|
188
|
+
|
|
189
|
+
**Never explains what the player already knows.**
|
|
190
|
+
They follow charts. They know support levels. They've been on Stake. Copy that explains how a volatility index works to this player is an insult.
|
|
191
|
+
|
|
192
|
+
**Never celebrates luck.**
|
|
193
|
+
"Lucky break" destroys the frame. The read wasn't lucky. It was right. Say that.
|
|
194
|
+
|
|
195
|
+
**Never apologises for the product.**
|
|
196
|
+
The player didn't sign up for safety. They signed up for the verdict.
|
|
197
|
+
|
|
198
|
+
**Never writes a loss as a failure.**
|
|
199
|
+
A loss is: the market moved, the vol spiked, the range was tight, the tick landed short. A loss is never: your selection was incorrect. One gives the player something to hold. The other leaves them with nothing and no reason to go again.
|
|
200
|
+
|
|
201
|
+
**Never sounds generated.**
|
|
202
|
+
Smooth, competent, forgettable is the failure mode. trading.game copy has a point of view. It sounds like someone who has actually played. If it could have been written by a language model in three seconds for any product — rewrite it.
|
|
203
|
+
|
|
204
|
+
---
|
|
205
|
+
|
|
206
|
+
## The mirror test
|
|
207
|
+
|
|
208
|
+
Before any copy ships, hold it against these. These are the exact phrases the player uses. Copy that sounds like a response to one of these passes. Copy that sounds like it was written for someone else doesn't.
|
|
209
|
+
|
|
210
|
+
**Territory 1 (The Edge):**
|
|
211
|
+
- *"Flagged the rejection at 68.4k on Monday. Played out exactly."*
|
|
212
|
+
- *"Direction was right, timing was off."*
|
|
213
|
+
- *"Not changing the system."*
|
|
214
|
+
|
|
215
|
+
**Territory 2 (The System):**
|
|
216
|
+
- *"Down 300 but my process was solid."*
|
|
217
|
+
- *"Variance is part of any system — you accept it or you quit."*
|
|
218
|
+
- *"New rules after last week. Still testing. Will update end of month."*
|
|
219
|
+
|
|
220
|
+
**Territory 3 (The Record):**
|
|
221
|
+
- *"Week 22: 9–5, +3.1 units. Running total since January: +31.2 units."*
|
|
222
|
+
- *"I was on this before anyone knew about it."*
|
|
223
|
+
- *"Positive EV call even if it doesn't land."*
|
|
224
|
+
|
|
225
|
+
If the copy could sit next to any of these sentences and not feel out of place — it passes.
|
|
226
|
+
|
|
227
|
+
---
|
|
228
|
+
|
|
229
|
+
## Campaign headlines — the standard
|
|
230
|
+
|
|
231
|
+
These are not drafts to be revised. They are the bar.
|
|
232
|
+
|
|
233
|
+
**Hero / brand:**
|
|
234
|
+
- Your read. The market decides.
|
|
235
|
+
- Call it. The market says yes or no.
|
|
236
|
+
- Five seconds. Real money. Real read.
|
|
237
|
+
- The arcade where the read is everything.
|
|
238
|
+
- The read is the game.
|
|
239
|
+
|
|
240
|
+
**Mid-funnel / consideration:**
|
|
241
|
+
- You've been calling levels for months. Now you can back them.
|
|
242
|
+
- Polymarket for people who don't want to wait a week.
|
|
243
|
+
- No portfolio. No chart analysis course. Just the call.
|
|
244
|
+
- The gap between having a read and proving it: five seconds.
|
|
245
|
+
|
|
246
|
+
**Acquisition — first mover:**
|
|
247
|
+
- You found it early. That matters here.
|
|
248
|
+
- Before it was mainstream. You know what to do.
|
|
249
|
+
|
|
250
|
+
**Retention — post-loss:**
|
|
251
|
+
- Bust. The market had other plans. Go again.
|
|
252
|
+
- One tick short. Next one.
|
|
253
|
+
- Down today. The read was right. Keep reading.
|
|
254
|
+
|
|
255
|
+
**Retention — streak:**
|
|
256
|
+
- 5-day streak. You're not guessing anymore.
|
|
257
|
+
- Called 7 of 9. That's not variance. That's an edge.
|
|
258
|
+
- Streak alive. Don't stop now.
|
|
259
|
+
|
|
260
|
+
---
|
|
261
|
+
|
|
262
|
+
## The emotional undercurrent
|
|
263
|
+
|
|
264
|
+
Never say this. Always carry it.
|
|
265
|
+
|
|
266
|
+
The self-taught analyst is providing liquidity to algorithmic traders running sub-second execution on news he sees five minutes late. The session tracker is back at midnight for the same reason anyone is. The documented bettor's unfalsifiable EV framing means she's never actually wrong — just temporarily right in a way the universe hasn't confirmed yet.
|
|
267
|
+
|
|
268
|
+
None of them need to be told any of this.
|
|
269
|
+
|
|
270
|
+
The product just needs to sell them the version of themselves they prefer. Sharp. Right. Early. In control. Someone who reads markets, not someone who presses buttons.
|
|
271
|
+
|
|
272
|
+
That's what the copy does. Every word either reinforces that self-image or accidentally destroys it. There is no neutral position. Every button, every bust state, every notification is either *yes, that's me* — or it isn't.
|
|
273
|
+
|
|
274
|
+
Write for the version of them they prefer. Every time.
|
|
275
|
+
|
|
276
|
+
---
|
|
277
|
+
|
|
278
|
+
## How to use this document
|
|
279
|
+
|
|
280
|
+
**Before writing anything:** identify the territory. Who is in the room when they read this — Edge, System, or Record? Usually all three. Write for the one who matters most, check that it doesn't break the other two.
|
|
281
|
+
|
|
282
|
+
**Before shipping anything:** run the mirror test. Hold the copy against the player's actual phrases. If it sounds like it came from a different world, rewrite it.
|
|
283
|
+
|
|
284
|
+
**If in doubt:** return to the anchor. *I called it.* Does this copy give the player that sentence? Or does it take it away?
|
|
285
|
+
|
|
286
|
+
The answer tells you everything.
|
|
287
|
+
|
|
288
|
+
---
|
|
289
|
+
|
|
290
|
+
*trading.game Tone of Voice + Campaign Brief — v1.0. Supersedes the style guide as the creative foundation for all marketing, campaign, and brand copy. Use the style guide for mechanics and grammar rules. Use this for what matters.*
|
package/package.json
ADDED
|
@@ -0,0 +1,85 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@trading-game/design-intelligence-layer",
|
|
3
|
+
"version": "0.8.5",
|
|
4
|
+
"description": "Trading Game Design System — shadcn/ui components with Tailwind CSS v4",
|
|
5
|
+
"type": "module",
|
|
6
|
+
"main": "./dist/index.cjs",
|
|
7
|
+
"module": "./dist/index.js",
|
|
8
|
+
"types": "./dist/index.d.ts",
|
|
9
|
+
"exports": {
|
|
10
|
+
".": {
|
|
11
|
+
"import": {
|
|
12
|
+
"types": "./dist/index.d.ts",
|
|
13
|
+
"default": "./dist/index.js"
|
|
14
|
+
},
|
|
15
|
+
"require": {
|
|
16
|
+
"types": "./dist/index.d.cts",
|
|
17
|
+
"default": "./dist/index.cjs"
|
|
18
|
+
}
|
|
19
|
+
},
|
|
20
|
+
"./styles": "./src/styles.css"
|
|
21
|
+
},
|
|
22
|
+
"sideEffects": [
|
|
23
|
+
"**/*.css"
|
|
24
|
+
],
|
|
25
|
+
"scripts": {
|
|
26
|
+
"dev": "next dev -H 127.0.0.1 -p 3000",
|
|
27
|
+
"generate:registry": "node scripts/generate-component-registry.mjs",
|
|
28
|
+
"build": "tsup",
|
|
29
|
+
"build:next": "next build",
|
|
30
|
+
"start": "next start",
|
|
31
|
+
"lint": "eslint",
|
|
32
|
+
"prepublishOnly": "npm run build"
|
|
33
|
+
},
|
|
34
|
+
"files": [
|
|
35
|
+
"dist/",
|
|
36
|
+
"src/styles.css",
|
|
37
|
+
"docs/",
|
|
38
|
+
"AGENTS.md"
|
|
39
|
+
],
|
|
40
|
+
"publishConfig": {
|
|
41
|
+
"access": "public"
|
|
42
|
+
},
|
|
43
|
+
"peerDependencies": {
|
|
44
|
+
"react": ">=18",
|
|
45
|
+
"react-dom": ">=18",
|
|
46
|
+
"tailwindcss": ">=4"
|
|
47
|
+
},
|
|
48
|
+
"dependencies": {
|
|
49
|
+
"@base-ui/react": "^1.2.0",
|
|
50
|
+
"@hookform/resolvers": "^5.2.2",
|
|
51
|
+
"class-variance-authority": "^0.7.1",
|
|
52
|
+
"clsx": "^2.1.1",
|
|
53
|
+
"cmdk": "^1.1.1",
|
|
54
|
+
"date-fns": "^4.1.0",
|
|
55
|
+
"embla-carousel-react": "^8.6.0",
|
|
56
|
+
"input-otp": "^1.4.2",
|
|
57
|
+
"lucide-react": "^0.577.0",
|
|
58
|
+
"radix-ui": "^1.4.3",
|
|
59
|
+
"react-day-picker": "^9.14.0",
|
|
60
|
+
"react-hook-form": "^7.71.2",
|
|
61
|
+
"react-resizable-panels": "^4.7.1",
|
|
62
|
+
"recharts": "^2.15.4",
|
|
63
|
+
"sonner": "^2.0.7",
|
|
64
|
+
"tailwind-merge": "^3.5.0",
|
|
65
|
+
"vaul": "^1.1.2",
|
|
66
|
+
"zod": "^4.3.6"
|
|
67
|
+
},
|
|
68
|
+
"devDependencies": {
|
|
69
|
+
"@tailwindcss/postcss": "^4",
|
|
70
|
+
"@types/node": "^20",
|
|
71
|
+
"@types/react": "^19",
|
|
72
|
+
"@types/react-dom": "^19",
|
|
73
|
+
"eslint": "^9",
|
|
74
|
+
"eslint-config-next": "16.1.6",
|
|
75
|
+
"next": "16.1.6",
|
|
76
|
+
"next-themes": "^0.4.6",
|
|
77
|
+
"react": "19.2.3",
|
|
78
|
+
"react-dom": "19.2.3",
|
|
79
|
+
"shadcn": "^3.8.5",
|
|
80
|
+
"tailwindcss": "^4",
|
|
81
|
+
"tsup": "^8.5.1",
|
|
82
|
+
"tw-animate-css": "^1.4.0",
|
|
83
|
+
"typescript": "^5"
|
|
84
|
+
}
|
|
85
|
+
}
|