@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,101 @@
|
|
|
1
|
+
# trading.game — Accessibility Standards
|
|
2
|
+
|
|
3
|
+
*Inclusion standards and intent for designers and AI agents.*
|
|
4
|
+
|
|
5
|
+
Version 1.0 · March 2026
|
|
6
|
+
|
|
7
|
+
---
|
|
8
|
+
|
|
9
|
+
## What this is
|
|
10
|
+
|
|
11
|
+
trading.game is built for everyone — no finance degree required. That promise only holds if the product is genuinely usable by everyone, including people who navigate differently, see differently, or process information differently.
|
|
12
|
+
|
|
13
|
+
This document is not a technical spec. The Design System Guide and npm package handle implementation. This document sets the intent — the human standard every screen should meet, regardless of how it was built.
|
|
14
|
+
|
|
15
|
+
Target standard: **WCAG 2.1 Level AA**.
|
|
16
|
+
|
|
17
|
+
---
|
|
18
|
+
|
|
19
|
+
## The people we design for
|
|
20
|
+
|
|
21
|
+
Accessibility is not an edge case. At any given moment, our players include people who:
|
|
22
|
+
|
|
23
|
+
- Navigate entirely by keyboard, with no mouse
|
|
24
|
+
- Use a screen reader that reads the interface aloud
|
|
25
|
+
- Cannot distinguish between red and green
|
|
26
|
+
- Are sensitive to flashing or fast-moving animation
|
|
27
|
+
- Are playing one-handed, or on a small screen in bright sunlight
|
|
28
|
+
- Are new to trading and need extra clarity to feel confident
|
|
29
|
+
|
|
30
|
+
Good accessibility often makes the experience better for everyone, not just those who need it most.
|
|
31
|
+
|
|
32
|
+
---
|
|
33
|
+
|
|
34
|
+
## The standards
|
|
35
|
+
|
|
36
|
+
### Colour never carries meaning alone
|
|
37
|
+
|
|
38
|
+
Colour supports understanding — it never carries it alone. This matters most in trading contexts where green and red signal wins, losses, and balance changes. Any player who cannot see or distinguish colour should receive the same information as everyone else — through a number, a sign, an icon, or a word alongside it.
|
|
39
|
+
|
|
40
|
+
---
|
|
41
|
+
|
|
42
|
+
### Every player can navigate freely
|
|
43
|
+
|
|
44
|
+
The experience should be fully reachable regardless of how a player interacts with their device. Navigation should feel logical and follow the natural flow of the screen.
|
|
45
|
+
|
|
46
|
+
---
|
|
47
|
+
|
|
48
|
+
### Every element communicates its purpose
|
|
49
|
+
|
|
50
|
+
Interactive elements should be understandable in isolation — not just visually, but to anyone experiencing the interface through assistive technology.
|
|
51
|
+
|
|
52
|
+
---
|
|
53
|
+
|
|
54
|
+
### Live information reaches everyone
|
|
55
|
+
|
|
56
|
+
trading.game is a live product. Prices move, trades resolve, balances change. Players who rely on assistive technology should stay as informed as anyone else in real time.
|
|
57
|
+
|
|
58
|
+
---
|
|
59
|
+
|
|
60
|
+
### Animation enhances — it never replaces
|
|
61
|
+
|
|
62
|
+
Animation is part of the trading.game identity. The words and outcomes always stand on their own. Animation is the layer on top that makes moments feel bigger. For players who need less motion, the experience should remain complete.
|
|
63
|
+
|
|
64
|
+
---
|
|
65
|
+
|
|
66
|
+
### Content stays readable under any conditions
|
|
67
|
+
|
|
68
|
+
The interface should hold up when players adjust their device settings — larger text, higher contrast, different display conditions. Information should always be accessible, never hidden by how it's presented.
|
|
69
|
+
|
|
70
|
+
---
|
|
71
|
+
|
|
72
|
+
### Trade actions need generous targets
|
|
73
|
+
|
|
74
|
+
trading.game involves real money. Buttons that place or confirm a trade should be large enough that a player cannot easily tap the wrong one. The financial consequence of a mistap is real — size and spacing matter more here than anywhere else in the product.
|
|
75
|
+
|
|
76
|
+
---
|
|
77
|
+
|
|
78
|
+
### Irreversible actions need confirmation
|
|
79
|
+
|
|
80
|
+
Placing a trade, cashing out, or any action a player cannot undo should always require a deliberate second step. One tap should never be enough to execute something with financial consequences. The confirmation moment is also a trust moment — it tells the player the product takes their money seriously.
|
|
81
|
+
|
|
82
|
+
---
|
|
83
|
+
|
|
84
|
+
## Agent checklist
|
|
85
|
+
|
|
86
|
+
Run before completing any screen.
|
|
87
|
+
|
|
88
|
+
- [ ] Colour is never the only way information is communicated
|
|
89
|
+
- [ ] Every interactive element is reachable without a mouse
|
|
90
|
+
- [ ] Navigation follows a logical order that matches the screen
|
|
91
|
+
- [ ] Every interactive element communicates its purpose without relying on visuals alone
|
|
92
|
+
- [ ] Live updates are reachable by assistive technology
|
|
93
|
+
- [ ] Animation is an enhancement — outcomes are clear without it
|
|
94
|
+
- [ ] Content holds up when device display settings are adjusted
|
|
95
|
+
- [ ] Trade action targets are large enough to prevent mistaps
|
|
96
|
+
- [ ] Irreversible trade actions require a confirmation step
|
|
97
|
+
|
|
98
|
+
---
|
|
99
|
+
|
|
100
|
+
*trading.game Accessibility Standards — v1.0*
|
|
101
|
+
*Cross-reference: Design System Guide, Content Style Guide, Design Principles*
|
|
@@ -0,0 +1,97 @@
|
|
|
1
|
+
# trading.game — Design Principles
|
|
2
|
+
|
|
3
|
+
*High-level product design guidance for designers and AI agents*
|
|
4
|
+
|
|
5
|
+
Version 1.0 · March 2026
|
|
6
|
+
|
|
7
|
+
---
|
|
8
|
+
|
|
9
|
+
trading.game makes trading feel faster, simpler, and more exciting — without losing the confidence and seriousness that financial products require. These principles define the design personality of the product and guide how AI agents apply components, layouts, motion, copy, and brand assets. This is not a style guide. It is a decision framework — giving AI enough direction to design with the right taste, energy, and priorities without over-constraining creativity.
|
|
10
|
+
|
|
11
|
+
---
|
|
12
|
+
|
|
13
|
+
## How AI agents should use this
|
|
14
|
+
|
|
15
|
+
- Treat these principles as a decision framework, not a checklist
|
|
16
|
+
- Adapt emphasis, hierarchy, density, and motion before inventing new patterns
|
|
17
|
+
- When unsure, reduce friction before adding flair
|
|
18
|
+
|
|
19
|
+
---
|
|
20
|
+
|
|
21
|
+
## Core principles
|
|
22
|
+
|
|
23
|
+
### 1. Trading first
|
|
24
|
+
|
|
25
|
+
Every screen should make trading feel central. Game mechanics, rewards, and visual excitement should support the trading journey, not compete with it.
|
|
26
|
+
|
|
27
|
+
*Agent guidance:* Prioritise price, action, progress, outcome, and decision-making signals. Entertainment should sharpen focus, not pull attention away from the core task.
|
|
28
|
+
|
|
29
|
+
---
|
|
30
|
+
|
|
31
|
+
### 2. Simple by default
|
|
32
|
+
|
|
33
|
+
Complexity must be absorbed by the interface, not pushed onto the user. The product should feel easy to enter, easy to scan, and easy to act on.
|
|
34
|
+
|
|
35
|
+
*Agent guidance:* Reduce visible choices, sequence decisions clearly, and reveal more only when needed. Make the next step obvious.
|
|
36
|
+
|
|
37
|
+
---
|
|
38
|
+
|
|
39
|
+
### 3. Clean and focused
|
|
40
|
+
|
|
41
|
+
The UI should feel lightweight, modern, and intentional. Nothing should look cluttered, accidental, or overworked.
|
|
42
|
+
|
|
43
|
+
*Agent guidance:* Give content room, keep hierarchy obvious, and let one key action or message lead each view.
|
|
44
|
+
|
|
45
|
+
---
|
|
46
|
+
|
|
47
|
+
### 4. Excitement with control
|
|
48
|
+
|
|
49
|
+
The experience should have energy, pace, and momentum — but never feel noisy or chaotic. Excitement should come from progress, timing, and feedback.
|
|
50
|
+
|
|
51
|
+
*Agent guidance:* The product should feel alive and responsive — every action produces a reaction. Use motion, contrast, and celebration selectively. Keep the core experience calm enough for confident decisions.
|
|
52
|
+
|
|
53
|
+
---
|
|
54
|
+
|
|
55
|
+
### 5. Fun, not childish
|
|
56
|
+
|
|
57
|
+
trading.game should feel playful, rewarding, and fresh — but never gimmicky. It should win through confidence and smart interaction design, not novelty for novelty's sake.
|
|
58
|
+
|
|
59
|
+
*Agent guidance:* Favour sophistication over cartoon behaviour. Keep the tone upbeat but grounded.
|
|
60
|
+
|
|
61
|
+
---
|
|
62
|
+
|
|
63
|
+
### 6. Reward progress
|
|
64
|
+
|
|
65
|
+
The experience should make users feel movement, mastery, and achievement. Good design creates momentum and helps users feel better the more they use it.
|
|
66
|
+
|
|
67
|
+
*Agent guidance:* Surface progress, completion, milestones, and positive feedback in a clear, motivating way.
|
|
68
|
+
|
|
69
|
+
---
|
|
70
|
+
|
|
71
|
+
### 7. Trust in every detail
|
|
72
|
+
|
|
73
|
+
Because this is trading, the product must feel dependable at all times. Accuracy, transparency, and professionalism are non-negotiable.
|
|
74
|
+
|
|
75
|
+
*Agent guidance:* Make balances, status, outcomes, pricing, timing, and risk cues clear. Avoid visual tricks or playful treatment of serious information.
|
|
76
|
+
|
|
77
|
+
---
|
|
78
|
+
|
|
79
|
+
### 8. Consistency creates fluency
|
|
80
|
+
|
|
81
|
+
Users should quickly learn how the product behaves and feel faster with every interaction. Familiar patterns build confidence.
|
|
82
|
+
|
|
83
|
+
*Agent guidance:* When a pattern already exists in the product, use it. Consistency is not a constraint — it is how the product earns trust over time. Novelty should only enter when it genuinely improves the experience, not for variety's sake.
|
|
84
|
+
|
|
85
|
+
---
|
|
86
|
+
|
|
87
|
+
## Checklist
|
|
88
|
+
|
|
89
|
+
Run this before completing any screen or feature.
|
|
90
|
+
|
|
91
|
+
- [ ] This screen feels like trading.game — not generic
|
|
92
|
+
- [ ] Trading is still the hero — game elements support, not distract
|
|
93
|
+
- [ ] The next action is obvious without explanation
|
|
94
|
+
- [ ] Energy comes from the experience, not decoration
|
|
95
|
+
- [ ] Serious information is treated seriously
|
|
96
|
+
- [ ] A first-time user would understand this without instructions
|
|
97
|
+
- [ ] One pattern was reused before a new one was invented
|