@deriv-ds/design-intelligence-layer 0.1.0

package/guides/accessibility-standards/trading-game-accessibility-standards.md

@@ -0,0 +1,101 @@
+# trading.game — Accessibility Standards
+
+*Inclusion standards and intent for designers and AI agents.*
+
+Version 1.0 · March 2026
+
+---
+
+## What this is
+
+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.
+
+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.
+
+Target standard: **WCAG 2.1 Level AA**.
+
+---
+
+## The people we design for
+
+Accessibility is not an edge case. At any given moment, our players include people who:
+
+- Navigate entirely by keyboard, with no mouse
+- Use a screen reader that reads the interface aloud
+- Cannot distinguish between red and green
+- Are sensitive to flashing or fast-moving animation
+- Are playing one-handed, or on a small screen in bright sunlight
+- Are new to trading and need extra clarity to feel confident
+
+Good accessibility often makes the experience better for everyone, not just those who need it most.
+
+---
+
+## The standards
+
+### Colour never carries meaning alone
+
+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.
+
+---
+
+### Every player can navigate freely
+
+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.
+
+---
+
+### Every element communicates its purpose
+
+Interactive elements should be understandable in isolation — not just visually, but to anyone experiencing the interface through assistive technology.
+
+---
+
+### Live information reaches everyone
+
+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.
+
+---
+
+### Animation enhances — it never replaces
+
+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.
+
+---
+
+### Content stays readable under any conditions
+
+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.
+
+---
+
+### Trade actions need generous targets
+
+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.
+
+---
+
+### Irreversible actions need confirmation
+
+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.
+
+---
+
+## Agent checklist
+
+Run before completing any screen.
+
+- [ ] Colour is never the only way information is communicated
+- [ ] Every interactive element is reachable without a mouse
+- [ ] Navigation follows a logical order that matches the screen
+- [ ] Every interactive element communicates its purpose without relying on visuals alone
+- [ ] Live updates are reachable by assistive technology
+- [ ] Animation is an enhancement — outcomes are clear without it
+- [ ] Content holds up when device display settings are adjusted
+- [ ] Trade action targets are large enough to prevent mistaps
+- [ ] Irreversible trade actions require a confirmation step
+
+---
+
+*trading.game Accessibility Standards — v1.0*
+*Cross-reference: Design System Guide, Content Style Guide, Design Principles*

package/guides/brand-voice/trading-game-brand-voice.md

@@ -0,0 +1,325 @@
+# trading.game — Brand voice
+
+**Version:** 2.0 · April 2026
+**Adds:** Channel-specific voice application per persona mode; anti-AI writing rules for all copy
+
+---
+
+## What this document is for
+
+The content style guide covers *what* to write. The personas doc covers *who* you're writing for. The field guide covers what's running in their head when they read it.
+
+This document covers the gap between those three: *how the voice changes by channel and by the mode the player is in when they get there*.
+
+Read the field guide before writing anything player-facing. These personas aren't audience segments; they're states. The same person is an Edge Seeker at 9am, a System Runner by lunchtime, and a Public Predictor the moment they go on a streak. Copy that lands across all three in one sentence is the goal.
+
+---
+
+## The one thing we're selling
+
+Not games. Not a platform. Not a crypto product with a trading UI.
+
+The read.
+
+Specifically: the moment you call what a market does next, and you're right. The line moves. The number hits. You say *I called it.* That sentence belongs to us. No other product gives people a fast, clean, verifiable reason to say it. Polymarket is too slow. CFD platforms are too opaque. Casinos don't let you call anything — they just spin. trading.game resolves in five ticks. That's the whole pitch.
+
+Every headline, button, bust state and push notification either reinforces *I called it* or takes it away. There's no neutral option.
+
+---
+
+## Voice in one sentence
+
+Sound like the sharpest person in the room who actually plays the games and doesn't need you to be impressed by either.
+
+---
+
+## The four brand traits
+
+These come from the content style guide. They're reproduced here so you don't have to switch between docs.
+
+**Instant.** No warm-up. No preamble. Get to the point before the player blinks.
+
+**Alive.** The game has a pulse. Copy responds to what just happened; it never reads like something you could have written last Tuesday.
+
+**Fearless.** No disclaimers in the player's face. No hedging. When something needs to be said, say it clearly.
+
+**For everyone.** The language is never gatekeepy. No jargon without context. A first-time player and someone who's watched charts for five years should both feel like this was built for them.
+
+---
+
+## The three modes — and what to lead with
+
+The player field guide calls these Edge Seeker, System Runner, and Public Predictor. The personas doc calls them the Self-Taught Analyst, the Session Tracker, and the Documented Better. Same three people; the field guide is describing what mode they're *in* when they read your copy.
+
+Here's the shorthand for writing:
+
+**Edge Seeker mode:** They came in with a thesis. Lead with the read, not the platform. The win copy should confirm their judgement. The bust copy should name the market, not the mistake. Never say "your selection was incorrect."
+
+**System Runner mode:** They have rules. The rules are probably wrong. It doesn't matter; the system is the thing that keeps them coming back. Loss copy needs to give the bust a shape, not just a result. Session stats are more compelling to this person than any multiplier graphic. Clean withdrawals are not a feature; they're a minimum bar.
+
+**Public Predictor mode:** They post wins within minutes of calling them. The result screen is a content piece they'll screenshot. Every win state needs: the mechanic, the USDT figure, the streak or record context. If it's generic, it won't get shared. The UI is a distribution channel for their audience.
+
+---
+
+## Copy that works across all three modes
+
+Some copy has to serve the player regardless of which mode they're in when they read it. Bust copy is the best example. Here's the principle from the field guide:
+
+> *"One sentence. Three self-images intact. Player goes again."*
+
+Test any bust state against all three modes. "Bust. Market barely moved. Tight range." does this:
+- Gives the Edge Seeker an external explanation (the market, not their read)
+- Gives the System Runner information to work with (the setup was fine; the range was wrong)
+- Gives the Public Predictor a way to post the loss without looking bad ("setup was right, vol just wasn't there")
+
+Compare that to "Your selection was incorrect." That sentence destroys all three frames simultaneously.
+
+---
+
+## The near-miss — write it specifically
+
+When the price lands one tick short of the target, the brain doesn't register a clean loss. It registers *I was right and the resolution was slightly off.* This is neurologically distinct from a normal bust, and it's more motivating than a win; the tension stays alive.
+
+Near-miss copy should never say the player was wrong. They nearly weren't.
+
+| ✅ | ❌ |
+|---|---|
+| "One tick short. The read was right." | "You missed. Try again." |
+| "55.49. You had 55.50. Next one." | "Incorrect selection." |
+| "Close. Vol reversed at the last second." | "Better luck next time." |
+
+---
+
+## Channel application by mode
+
+In-game copy is covered in the style guide. What follows is everything else: social, email, community, announcements.
+
+---
+
+### X (Twitter/X)
+
+One idea per post. Hook on the first line. Cut early.
+
+The tone is not the same for all three modes. Edge Seekers respond to validation of attention and analysis. System Runners respond to data and provably fair mechanics. Public Predictors respond to things worth posting themselves.
+
+**Writing for Edge Seekers on X:**
+Give them something to be early on. Frame the product as a read, not a game.
+
+> "Vol 100 has been oscillating inside a 12-point range for three sessions.
+> Rise & Fall is pricing that in. If you've been watching it, now's the time."
+
+> "The fastest feedback loop on a market read.
+> Five ticks. Real price data. No waiting for a daily close."
+
+**Writing for System Runners on X:**
+State the mechanics plainly. They'll run their own analysis.
+
+> "House edge: 2%. Fixed. Not variable, not hidden in a spread.
+> Black-Scholes CDF pricing. Payout shown before you commit."
+
+> "Session stats live after every trade.
+> Win rate. Net USDT. Number of trades. That's the data your system runs on."
+
+**Writing for Public Predictors on X:**
+Give them something they'd say. Or something that makes trading.game look good to their followers.
+
+> "7-tick streak on Vol 75.
+> Some people screenshot the win. Some people post the chart."
+
+> "Found this platform three weeks ago. Already at 14-7 on calls.
+> If you want the breakdown, the result screen has everything."
+
+**Formatting rules for X:**
+One emoji at most, only if it earns its place. One hashtag maximum, only if it's genuinely relevant. Sentence case always. No triple punctuation. No ALL CAPS.
+
+---
+
+### LinkedIn
+
+More room, more considered. The same voice; more weight on the intellectual frame. Lead with a genuine insight or a contrarian point, not a product update dressed as thought leadership.
+
+**Good:**
+> "Most trading education teaches theory.
+> trading.game teaches decision-making under uncertainty, in five-second intervals, against a live price feed.
+> Knowing the right move and making it under pressure are different skills. Most platforms only train one of them."
+
+> "Prediction markets beat every major poll in the 2024 US election.
+> The edge wasn't smarter models. It was faster feedback loops. People who were wrong found out sooner, adjusted, and were less wrong next time.
+> That's the whole product we built."
+
+**Bad:**
+> "We're excited to share that trading.game has launched exciting new features! Our innovative platform is disrupting the traditional trading education space with cutting-edge gamification technology..."
+
+One structural rule for LinkedIn: never open with "We're pleased / thrilled / excited to announce." Start with the announcement. If it's good, the announcement earns the excitement. If you have to label your own news as exciting, it probably isn't.
+
+---
+
+### Email
+
+Subject line: short, specific, creates a small tension.
+Body: one thing. Then the action.
+
+Subject lines that work are different by mode:
+
+**Edge Seeker:**
+- "Your read on V_100 paid out."
+- "Rise & Fall is running on Vol 200. Your call."
+- "The chart moved where you said it would."
+
+**System Runner:**
+- "Your session stats: 7 trades, 4 wins."
+- "Withdrawal processed. 90 seconds."
+- "Your system is up 3 this week."
+
+**Public Predictor:**
+- "Streak: 7. Post it."
+- "You were early on that Vol 75 move."
+- "Your all-time record is now 47–29."
+
+**Subject lines that don't work for anyone:**
+- "Exciting updates from trading.game!"
+- "Don't miss out on these amazing new features"
+- "A message from our team 🙏"
+
+**Good email opening (Edge Seeker):**
+> "You called the Vol 75 level three days ago.
+> It hit today. Your trade settled 1.96x.
+> That's what attention looks like."
+
+**Good email opening (System Runner):**
+> "Six sessions in: 4 wins, 2 losses, net +340 USDT.
+> That's above the 50% baseline by enough to matter.
+> Your stats are in the app."
+
+**Good email opening (Public Predictor):**
+> "You hit a 7-game streak yesterday.
+> The result screen's been designed so that screenshot is worth posting. Have a look at it."
+
+**Bad email opening (for anyone):**
+> "Hi [First Name]! We hope you're having a wonderful day! We're reaching out with some exciting news about our platform that we think you'll love..."
+
+---
+
+### Community (Discord / Telegram)
+
+Same voice; slightly more relaxed. Not a different person. The biggest mistake community managers make is treating Discord as "informal" and drifting into hype language that doesn't fit the brand.
+
+What works: talking to the mode the community is in. If there's a hot streak in the channel, the System Runner framing works well. After a rough patch, the Edge Seeker loss framing preserves the most self-images.
+
+**Good:**
+> "Vol 100 has been spiking since the open. If you've been watching it, now you know."
+
+> "Clean withdrawal just confirmed for two people in the thread. USDT, 90 seconds."
+
+> "7-game streak in the channel this morning. Two of you got screenshots worth posting."
+
+**Bad:**
+> "WAGMI fam 🚀🚀🚀 who's been crushing it today??"
+
+> "Don't forget — trading season is HERE and gains are waiting for you bestie!! 💸💸"
+
+The rule: write Discord messages the same way you'd write an X post, then relax the formality by about 10%. Not 50%.
+
+---
+
+### Announcements and product updates
+
+State the thing. Then the implication for the player. Don't lead with your feelings about the announcement.
+
+| ✅ | ❌ |
+|---|---|
+| "Rise & Fall now runs on V_200. Higher vol, wider payout range. Check the multiplier before you trade." | "We're excited to announce an exciting new instrument! Amazing opportunity for all traders!" |
+| "Digits is live. Tick-based prediction on the last digit of a price feed. 1–10 ticks, six contract types." | "Introducing Digits, our innovative new game that revolutionises the prediction experience!" |
+| "Withdrawal processing is now instant. Not 'faster.' Instant." | "We've made some improvements to our withdrawal process for a more seamless experience." |
+
+---
+
+## What we never say
+
+Banned because they're empty, borrowed, or destructive to the player's self-image.
+
+| Never say | Why |
+|---|---|
+| "Exciting" (describing our own things) | Show it; don't label it. |
+| "Innovative" / "cutting-edge" | Claims, not descriptions. The product proves it. |
+| "Seamless" | That's the baseline for anything that works. |
+| "Journey" (as in trading journey) | Soft, vague, and corporate. |
+| "Empowering" / "democratising" | Filler unless it's a mission statement. |
+| "Don't miss out!" | Fake urgency. |
+| "We're thrilled / excited / delighted to announce" | Start with the announcement. |
+| "Lucky break" | Destroys the Edge Seeker's self-image. |
+| "Your selection was incorrect" | Destroys all three modes simultaneously. |
+| "Try again for another chance to win" | It's not a chance; it's a read. |
+| "LFG" / "wagmi" / "gm fren" | Borrowed social credibility from a community we're not part of. |
+| "You're getting the hang of this!" | Implies they didn't already have it. Kills the Public Predictor. |
+| Three consecutive exclamation marks | Once is enough. Rarely. |
+
+---
+
+## Competitive positioning in voice
+
+HyperSwap (@HyperSwapX) operates in adjacent social territory. Their tagline "Trade, Copy. Earn" packs a lot into three words. Their community language ("Swappies," point seasons, NFT allocations to top holders) creates belonging through ownership. They're transparent about tokenomics: "75% of protocol revenue to buyback and burn" states the number without hedging.
+
+What they do well isn't transferable to us. Their belonging mechanics are ownership-based — you're a SWAP holder, an early believer, a governance participant. We don't have a token. Our belonging mechanics are mastery-based. "Your win rate: 54%. The baseline is 50%. You're ahead." is our version of "you're a Swappie." The ledger is skill, not holdings.
+
+The other difference: HyperSwap assumes DeFi fluency. We can't. Some players have never held a token. Copy that assumes otherwise loses them at the first acronym.
+
+| HyperSwap register | trading.game register |
+|---|---|
+| "SWAP Genesis is live. Early believers get rewarded 🔥" | "Rise & Fall is live on V_100. Edge is 2%. The rest is skill." |
+| "Swappies, the airdrop is coming 🚀" | "Your win rate this week: 54%. Baseline is 50%. You're ahead." |
+| "Earn boosted rewards for LPs 💰" | "Transferred 20 USDT to GridRush. Your capital, your call." |
+
+---
+
+## Vocabulary reference
+
+| Use | Not |
+|---|---|
+| trading.game | Trading.Game / Trading Game (always lowercase) |
+| USDT | Dollars, funds, money (use the specific term) |
+| Trade (noun/verb) | Bet, wager, gamble |
+| Contract | Position (in most contexts) |
+| Rise / Fall | Up / Down (in game-specific copy) |
+| Win rate | Success rate |
+| Demo mode | Free play mode (in copy; "free play" is a UI label) |
+| Arena | Dashboard, home screen |
+| Real session | Live session, paid session |
+| Settlement | Resolution, result |
+| Bust | Loss (in in-game copy; elsewhere "loss" is fine) |
+
+### Game names — exact
+
+| Correct | Not |
+|---|---|
+| Rise & Fall | Rise and Fall / Rise/Fall |
+| GridRush | Grid Rush / Grid rush |
+| Swipe Cards | Swipe-Cards / SwipeCards |
+| Digits | The Digits game |
+| Dice | The Dice game |
+
+### Formatting
+
+- USDT amounts: `340 USDT` not `$340` (USDT is the platform currency)
+- Percentages: `2%` not `2 percent`
+- Win multipliers: `1.96×` with the multiplication symbol, not `1.96x`
+- Tick counts: `5 ticks`, `1 tick` in UI; spell out in prose ("five ticks")
+
+---
+
+## Quick-reference checklist
+
+Before publishing anything:
+
+- [ ] Would "your selection was incorrect" be better? If so, rewrite it.
+- [ ] Which mode is the player likely in when they read this? Does the copy protect that self-image?
+- [ ] Any banned phrase? (exciting, innovative, seamless, journey, LFG, lucky break)
+- [ ] More than one exclamation mark? Cut to zero.
+- [ ] Does it land the point in the first sentence?
+- [ ] Correct game name formatting?
+- [ ] Is it shorter than it needs to be?
+- [ ] Does it sound like trading.game, or could it belong to any product?
+
+---
+
+*trading.game Brand Voice — v2.0*

package/guides/design-principles/trading-game-design-principles.md

@@ -0,0 +1,98 @@
+# trading.game — Design Principles
+
+*High-level product design guidance for designers and AI agents*
+
+Version 1.1 · April 2026 · *Updated to align with Product Vision & Strategy*
+
+---
+
+trading.game makes trading feel intuitive, fun, and 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. These principles are rooted in the [trading.game Product Vision & Strategy](trading-game-product-vision.md) and should be read alongside it. 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.
+
+---
+
+## How AI agents should use this
+
+- Treat these principles as a decision framework, not a checklist
+- Adapt emphasis, hierarchy, density, and motion before inventing new patterns
+- When unsure, reduce friction before adding flair
+
+---
+
+## Core principles
+
+### 1. Trading first
+
+Every screen should make trading feel central. Game mechanics, rewards, and visual excitement should support the trading journey, not compete with it.
+
+*Agent guidance:* Prioritise price, action, progress, outcome, and decision-making signals. Entertainment should sharpen focus, not pull attention away from the core task.
+
+---
+
+### 2. Intuitive by default
+
+Complexity must be absorbed by the interface, not pushed onto the user. The product should feel natural to navigate, quick to scan, and obvious to act on. Trading is never simple when real money is at stake — but the experience of trading can be intuitive.
+
+*Agent guidance:* Reduce visible choices, sequence decisions clearly, and reveal more only when needed. Make the next step obvious. Never hide complexity — make it make sense.
+
+---
+
+### 3. Clean and focused
+
+The UI should feel lightweight, modern, and intentional. Nothing should look cluttered, accidental, or overworked.
+
+*Agent guidance:* Give content room, keep hierarchy obvious, and let one key action or message lead each view.
+
+---
+
+### 4. Excitement with control
+
+The experience should have energy, pace, and momentum — but never feel noisy or chaotic. Excitement should come from progress, timing, and feedback.
+
+*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.
+
+---
+
+### 5. Fun, not childish
+
+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.
+
+*Agent guidance:* Favour sophistication over cartoon behaviour. Keep the tone upbeat but grounded.
+
+---
+
+### 6. Reward progress
+
+The experience should make users feel movement, mastery, and achievement. Good design creates momentum and helps users feel better the more they use it.
+
+*Agent guidance:* Surface progress, completion, milestones, and positive feedback in a clear, motivating way.
+
+---
+
+### 7. Trust in every detail
+
+Because this is trading, the product must feel dependable at all times. Accuracy, transparency, and professionalism are non-negotiable.
+
+*Agent guidance:* Make balances, status, outcomes, pricing, timing, and risk cues clear. Avoid visual tricks or playful treatment of serious information.
+
+---
+
+### 8. Consistency creates fluency
+
+Users should quickly learn how the product behaves and feel faster with every interaction. Familiar patterns build confidence.
+
+*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.
+
+---
+
+## Checklist
+
+Run this before completing any screen or feature.
+
+- [ ] This screen feels like trading.game — not generic
+- [ ] Trading is still the hero — game elements support, not distract
+- [ ] The next action is obvious without explanation
+- [ ] Energy comes from the experience, not decoration
+- [ ] Serious information is treated seriously
+- [ ] A first-time user would understand this without instructions
+- [ ] The platform layer feels trustworthy enough to deposit real money
+- [ ] One pattern was reused before a new one was invented