@deriv-ds/design-intelligence-layer 0.4.6 → 0.5.0

package/guides/design-principles/quill-design-principles.md

@@ -0,0 +1,138 @@
+# Quill Design Principles
+
+> Decision framework for AI agents and developers generating UI for Deriv products.
+> Version 1.0 · May 2026
+
+---
+
+## Context
+
+Deriv = online trading platform (CFDs, options, crypto exchange). Users: Global South, mostly mobile, lower-end Android, variable networks, beginner-to-expert range. Multiple products share one design system (Quill) and one brand voice.
+
+**Core tension:** Powerful enough for experienced traders ↔ accessible enough for someone on a low-end device making their first trade.
+
+---
+
+## Principles (priority order — higher wins on conflict)
+
+### P1: Be honest before being persuasive
+- Financial data (balances, prices, payouts, leverage, risk) = always clear, accurate, unambiguous
+- Risk info in plain language with concrete numbers — no marketing spin, no legal walls
+- Serious information gets serious treatment — no playful styling on financial data
+- ✅ "You could lose more than your deposit" with specific multiplier shown
+- ❌ "Unlock 1000x leverage!" · ❌ Animated account balances · ❌ Playful tone on money screens
+
+### P2: Lead with the decision, not the data
+- One primary action + one key supporting info per screen
+- Progressive disclosure: one tap away, never zero taps overwhelmed
+- Next step visually obvious without instructions
+- ✅ Trade form starts essential, expands for advanced params
+- ❌ All parameters shown at equal weight · ❌ 8+ fields visible at once · ❌ Info icons compensating for bad layout
+
+### P3: Design every state, not just the happy path
+- Every component handles 5 states: **empty, loading, partial, error, ideal**
+- Loading = skeleton screens (no raw spinners, no blank screens)
+- Error structure: what happened → why → what user can do next
+- Empty states guide toward action, never dead ends
+- ✅ Skeleton matching content layout · ✅ "Couldn't load history. Tap to retry."
+- ❌ Raw spinner · ❌ Blank screen · ❌ "Something went wrong" with no recovery
+
+### P4: Design for the smallest screen first
+- Mobile-first, then expand to desktop — never the reverse
+- Minimum tap targets: 44×44pt
+- Thumb-zone ergonomics for spacing
+- Performance = design decision: cache, prefetch, lazy-load, always show loading feedback
+- ✅ Design mobile layout first, test on mid-range Android
+- ❌ Desktop Figma frame adapted by shrinking · ❌ Hover-dependent patterns · ❌ Animations that stutter on low-end devices
+
+### P5: Write in one voice, everywhere
+- **British English · Sentence case · Active voice · Plain language**
+- Error format: what happened → why → what to do next
+- Tone scales with stakes: money/risk = direct and neutral; progress/onboarding = warmer
+- Written for global, non-native-English-speaking audience — no idioms, no culturally specific metaphors
+- ✅ "Your withdrawal is being processed" · ✅ "Deposit successful"
+- ❌ "Withdrawal Is Being Processed" · ❌ "An error has occurred" · ❌ Mixing "colour"/"color"
+
+### P6: Reuse before you reinvent
+- Use existing Quill/Shadcn pattern before creating new ones
+- Decision tree: Shadcn component → extend with Quill variant → Radix primitive → custom (last resort)
+- Same action type = same screen position across flows
+- Same element type = same animation/behaviour everywhere
+- ✅ Extend existing component with new variant
+- ❌ Unique layout per screen · ❌ Custom component when Shadcn equivalent exists · ❌ CTA position moving between screens
+
+### P7: Educate in context, not in advance
+- Just-in-time guidance at point of decision, not front-loaded onboarding
+- Progressive disclosure serves both novices (guidance) and experts (speed)
+- Content must be translatable — no idioms
+- ✅ Inline explanation of "Stop Loss" when user first encounters the field
+- ❌ 5-screen onboarding tutorial · ❌ Assuming users know "pip" or "lot size"
+
+### P8: Measure journeys, not just screens
+- No design change ships on a single metric in isolation
+- Evaluate against end-to-end user journey
+- Local win that degrades overall flow = not a win
+- ✅ Measure deposit redesign by full intent-to-first-trade journey
+- ❌ Optimising one step without checking downstream friction
+
+---
+
+## Quick defaults
+
+| Unsure about... | Default to... |
+|---|---|
+| More info vs. less | Less — disclose progressively |
+| New pattern vs. existing | Existing — consistency beats novelty |
+| Desktop-first vs. mobile-first | Mobile-first |
+| Playful vs. serious tone | Match the stakes |
+| More decoration vs. less | Less — earn every element |
+| Assume knowledge vs. explain | Explain — in context, at moment of need |
+| Marketing language vs. plain | Plain — especially for risk/money |
+| One screen vs. the journey | The journey |
+| British vs. American English | British — always |
+| Title Case vs. sentence case | Sentence case — always |
+| Custom build vs. Shadcn/Quill | Shadcn/Quill first |
+
+---
+
+## Failure modes checklist
+
+Before shipping, verify your output doesn't match these anti-patterns:
+
+| # | Anti-pattern | Fix |
+|---|---|---|
+| 1 | **Information overload** — all data shown at equal weight | P2: Lead with the decision |
+| 2 | **Inconsistent copy** — mixed case, mixed English, vague errors | P5: One voice everywhere |
+| 3 | **Happy-path-only** — no loading/empty/error states designed | P3: Design every state |
+| 4 | **Risk as marketing or legalese** — hype or boilerplate, neither helpful | P1: Honest before persuasive |
+| 5 | **Desktop-first afterthought** — cramped mobile, undersized targets | P4: Smallest screen first |
+| 6 | **Pattern fragmentation** — new components when existing ones work | P6: Reuse before reinvent |
+| 7 | **Metric tunnel vision** — optimising one step, breaking the journey | P8: Measure journeys |
+
+---
+
+## Pre-completion checklist
+
+- [ ] Primary action and key info immediately obvious?
+- [ ] Trustworthy with real money?
+- [ ] All 5 states designed (empty, loading, partial, error, ideal)?
+- [ ] Works on mid-range mobile + slow connection?
+- [ ] Copy: British English, sentence case, active voice?
+- [ ] Risk/financial info in plain, honest language?
+- [ ] Reused existing Quill/Shadcn pattern first?
+- [ ] Clear forward path — no dead ends?
+- [ ] First-time trader can understand without prior knowledge?
+- [ ] Serves the broader journey, not just this screen's metric?
+- [ ] Content translatable — no idioms or cultural references?
+
+---
+
+## Mapping to Quill UX pillars
+
+| Quill pillar | Principles |
+|---|---|
+| Simplicity & Purpose | P2, P7 |
+| Stay Consistent | P5, P6 |
+| Design for Everyone | P1, P3, P4 |
+
+Foundation: Deriv values (Integrity, Customer Focus, Competence, Teamwork) sit above all principles.

package/guides/design-system-guide/deriv-design-intelligence-guide.md

@@ -584,8 +584,7 @@ These are styling behaviors you can't discover from TypeScript types alone:
 ## 8.5 — Blocks Catalogue
 
 > Blocks are fully composed UI sections built from design system primitives. They appear in the **Blocks** tab of the playground.
-> - Blocks are **NOT exported** from the npm package — they are playground demonstrations only.
-> - To build them in a consuming project, import the underlying components (`Button`, etc.) from `@deriv-ds/design-intelligence-layer` and compose them manually using design tokens only.
+> - Blocks **are exported** from the npm package — import them by name from `@deriv-ds/design-intelligence-layer` (e.g. `import { Navbar, Section } from "@deriv-ds/design-intelligence-layer"`). When a user asks for a block by name, import it directly instead of recreating it.
 > - Do NOT mistake a Block for a component — it will not appear in Rule 1's component list.
 
 ### NavBar
@@ -620,6 +619,35 @@ Landing page hero sections in multiple layout types.
 
 ---
 
+### Section
+
+A section header pattern: an eyebrow tag, a title with an optional trailing chevron, an optional right-aligned control cluster, a description, an optional full-width segmented control, and a content slot for the section body.
+
+```tsx
+import { Section } from "@deriv-ds/design-intelligence-layer"
+
+<Section
+  title="Markets"
+  description="Pick a market to start trading"
+  titleSize="titleLg"          // titleLg | titleMd | titleSm | titleCaption | loading
+  showTag tag={{ label: "New" }}
+  showTitle showChevron
+  showControlSection showButton buttonLabel="See all" showNavigation
+  showDescription
+  showSegmentedControl segments={["All", "Favourites"]}
+>
+  {/* section content */}
+</Section>
+```
+
+**Props:** `title`, `description`, `titleSize`, `showTag` + `tag`, `showTitle`, `showChevron` + `onTitleClick`, `showControlSection`, `showButton` + `buttonLabel` + `onButtonClick`, `showNavigation` + `onPrev`/`onNext`, `controlSegments`, `showDescription`, `showSegmentedControl` + `segments` + `value`/`onValueChange`, `children`. All flags default off except `showTitle`; `titleSize="loading"` renders a skeleton title.
+
+**Components used:** `Tag` (`outline-neutral`, size `2xs`), `Icon` (`chevron-left`/`chevron-right`), `SegmentedControl`, `Skeleton`
+
+**Tokens used:** `bg-primary-surface`, `text-prominent`, `text-subtle`, `--background-default-opacity-default`, `--background-hover-default`, `body-md`, `rounded-2xl`, `rounded-full`
+
+---
+
 ## 9 — Common Mistakes
 
 | Mistake | Correct Approach |

package/guides/design-system-guide/icon-reference.md

@@ -1,7 +1,7 @@
 <!-- AUTO-GENERATED by scripts/generate-icon-reference.mjs — do not edit by hand.
-     Regenerate with: npm run build && npm run generate:icon-reference -->
+     Regenerate with: npm run generate:icon-reference -->
 
-# Icon reference — FontAwesome Pro via `<Icon />`
+# Icon reference — `@deriv/quill-icons` via `<Icon />`
 
 The design system's only icon source. **Never install or import `lucide-react`** or any other icon library — every icon below ships with the package.
 
@@ -82,7 +82,7 @@ A "—" means that weight is not mapped for the icon; passing it falls back to t
 | `bell` | ✓ | ✓ | ✓ |
 | `book-circle-question` | ✓ | ✓ | ✓ |
 | `book-open` | ✓ | ✓ | ✓ |
-| `book-open-cover-circle-question` | ✓ | ✓ | — |
+| `book-open-cover-circle-question` | ✓ | ✓ | ✓ |
 | `box-archive-circle-arrow-down` | ✓ | ✓ | ✓ |
 | `box-archive-circle-arrow-up` | ✓ | ✓ | ✓ |
 | `brand-harmony-os` | — | ✓ | — |
@@ -94,12 +94,12 @@ A "—" means that weight is not mapped for the icon; passing it falls back to t
 | `brand-microsoft-store` | — | ✓ | — |
 | `brand-trustpilot` | — | ✓ | — |
 | `calculator` | ✓ | ✓ | ✓ |
-| `calendar-circle-arrow-left` | ✓ | ✓ | — |
-| `calendar-circle-arrow-right` | ✓ | ✓ | — |
+| `calendar-circle-arrow-left` | ✓ | ✓ | ✓ |
+| `calendar-circle-arrow-right` | ✓ | ✓ | ✓ |
 | `chart-bar` | ✓ | ✓ | ✓ |
 | `chart-candlestick` | ✓ | ✓ | ✓ |
 | `chart-line` | ✓ | ✓ | ✓ |
-| `chart-line-clock` | ✓ | ✓ | — |
+| `chart-line-clock` | ✓ | ✓ | ✓ |
 | `chart-line-up-down-clock` | ✓ | ✓ | ✓ |
 | `chart-tradingview` | ✓ | ✓ | ✓ |
 | `chart-trend-down` | ✓ | ✓ | ✓ |
@@ -117,7 +117,7 @@ A "—" means that weight is not mapped for the icon; passing it falls back to t
 | `circle-user-slash` | ✓ | ✓ | ✓ |
 | `clock-rotate-left` | ✓ | ✓ | ✓ |
 | `copy` | ✓ | ✓ | ✓ |
-| `crosshairs-slash` | ✓ | ✓ | — |
+| `crosshairs-slash` | ✓ | ✓ | ✓ |
 | `deal-cancellation` | ✓ | ✓ | ✓ |
 | `deal-protection` | ✓ | ✓ | ✓ |
 | `deriv` | ✓ | ✓ | ✓ |
@@ -132,7 +132,7 @@ A "—" means that weight is not mapped for the icon; passing it falls back to t
 | `fiat-onramp` | ✓ | ✓ | ✓ |
 | `field-password` | ✓ | ✓ | ✓ |
 | `file-lines` | ✓ | ✓ | ✓ |
-| `file-lines-magnifying-glass` | ✓ | ✓ | — |
+| `file-lines-magnifying-glass` | ✓ | ✓ | ✓ |
 | `file-xmark` | ✓ | ✓ | ✓ |
 | `fingerprint` | ✓ | ✓ | ✓ |
 | `gear` | ✓ | ✓ | ✓ |
@@ -140,8 +140,8 @@ A "—" means that weight is not mapped for the icon; passing it falls back to t
 | `hand-gesture-swipe-left-right` | ✓ | ✓ | ✓ |
 | `hand-gesture-tap-left` | ✓ | ✓ | ✓ |
 | `hand-gesture-tap-right` | ✓ | ✓ | ✓ |
-| `handshake-lock` | ✓ | ✓ | — |
-| `handshake-shield` | ✓ | ✓ | — |
+| `handshake-lock` | ✓ | ✓ | ✓ |
+| `handshake-shield` | ✓ | ✓ | ✓ |
 | `horizontal-rule-dashed` | ✓ | ✓ | ✓ |
 | `house` | ✓ | ✓ | ✓ |
 | `house-blank` | ✓ | ✓ | ✓ |
@@ -149,7 +149,7 @@ A "—" means that weight is not mapped for the icon; passing it falls back to t
 | `inbox` | ✓ | ✓ | ✓ |
 | `lock-pattern` | ✓ | ✓ | ✓ |
 | `magnifying-glass` | ✓ | ✓ | ✓ |
-| `memo-shield` | ✓ | ✓ | — |
+| `memo-shield` | ✓ | ✓ | ✓ |
 | `minus` | ✓ | ✓ | ✓ |
 | `mobile-notch-rotate` | ✓ | ✓ | ✓ |
 | `moon` | ✓ | ✓ | ✓ |
@@ -157,22 +157,22 @@ A "—" means that weight is not mapped for the icon; passing it falls back to t
 | `options` | ✓ | ✓ | ✓ |
 | `page-circle-arrow-right` | ✓ | ✓ | ✓ |
 | `passkey` | ✓ | ✓ | ✓ |
-| `pen-field-circle-xmark` | ✓ | ✓ | — |
-| `pen-field-lock` | ✓ | ✓ | — |
-| `pen-field-slash` | ✓ | ✓ | — |
+| `pen-field-circle-xmark` | ✓ | ✓ | ✓ |
+| `pen-field-lock` | ✓ | ✓ | ✓ |
+| `pen-field-slash` | ✓ | ✓ | ✓ |
 | `phone` | ✓ | ✓ | ✓ |
 | `playback-speed` | ✓ | ✓ | ✓ |
 | `plus` | ✓ | ✓ | ✓ |
 | `puzzles-piece-two` | ✓ | ✓ | ✓ |
-| `quill` | — | ✓ | ✓ |
-| `rectangle-history-circle-dollar` | ✓ | ✓ | — |
+| `quill` | ✓ | ✓ | ✓ |
+| `rectangle-history-circle-dollar` | ✓ | ✓ | ✓ |
 | `right-from-bracket` | ✓ | ✓ | ✓ |
 | `rotate-device` | ✓ | ✓ | ✓ |
 | `rotate-right` | ✓ | ✓ | ✓ |
-| `shield-circle-check` | ✓ | ✓ | — |
-| `shield-halved-circle-minus` | ✓ | ✓ | — |
-| `shield-halved-lock` | ✓ | ✓ | — |
-| `shield-lock` | ✓ | ✓ | — |
+| `shield-circle-check` | ✓ | ✓ | ✓ |
+| `shield-halved-circle-minus` | ✓ | ✓ | ✓ |
+| `shield-halved-lock` | ✓ | ✓ | ✓ |
+| `shield-lock` | ✓ | ✓ | ✓ |
 | `sparkles` | ✓ | ✓ | ✓ |
 | `spinner` | ✓ | ✓ | ✓ |
 | `square` | ✓ | ✓ | ✓ |
@@ -190,11 +190,11 @@ A "—" means that weight is not mapped for the icon; passing it falls back to t
 | `user` | ✓ | ✓ | ✓ |
 | `user-circle-arrow-right` | ✓ | ✓ | ✓ |
 | `user-circle-arrow-up` | ✓ | ✓ | ✓ |
-| `user-circle-dollar` | ✓ | ✓ | — |
-| `user-large-circle-dollar` | ✓ | ✓ | — |
+| `user-circle-dollar` | ✓ | ✓ | ✓ |
+| `user-large-circle-dollar` | ✓ | ✓ | ✓ |
 | `user-tie-circle-dollar` | ✓ | ✓ | ✓ |
-| `users-line-circle-dollar` | ✓ | ✓ | — |
-| `users-rectangle-circle-dollar` | ✓ | ✓ | — |
+| `users-line-circle-dollar` | ✓ | ✓ | ✓ |
+| `users-rectangle-circle-dollar` | ✓ | ✓ | ✓ |
 | `wallet` | ✓ | ✓ | ✓ |
 | `wallet-circle-minus` | ✓ | ✓ | ✓ |
 | `wallet-circle-plus` | ✓ | ✓ | ✓ |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deriv-ds/design-intelligence-layer",
-  "version": "0.4.6",
+  "version": "0.5.0",
   "description": "Deriv Design System — shadcn/ui components with Tailwind CSS v4",
   "license": "UNLICENSED",
   "type": "module",
@@ -37,6 +37,11 @@
     "dist/",
     "src/styles.css",
     "guides/",
+    "public/assets/no-transaction.png",
+    "public/assets/icon-cfds.png",
+    "public/assets/icon-setup-profile.png",
+    "public/assets/icon-more.png",
+    "public/assets/logo-deriv-x.png",
     "AGENTS.md",
     "README.md"
   ],
@@ -46,14 +51,8 @@
     "tailwindcss": ">=4"
   },
   "dependencies": {
-    "@awesome.me/kit-394c25e5aa": "^1.0.61",
-    "@awesome.me/kit-a9f9eb613f": "^1.0.278",
     "@base-ui/react": "^1.2.0",
-    "@fortawesome/fontawesome-svg-core": "^6.7.2",
-    "@fortawesome/pro-light-svg-icons": "^6.7.2",
-    "@fortawesome/pro-regular-svg-icons": "^6.7.2",
-    "@fortawesome/pro-solid-svg-icons": "^6.7.2",
-    "@fortawesome/react-fontawesome": "^3.3.1",
+    "@deriv/quill-icons": "^2.8.2",
     "@hookform/resolvers": "^5.2.2",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
@@ -93,9 +92,9 @@
     "lodash": "^4.18.0",
     "postcss": "^8.5.10",
     "qs": "^6.15.2",
-    "hono": "^4.12.21",
+    "hono": "^4.12.25",
     "esbuild": "^0.28.1",
-    "js-yaml": ">=4.2.0",
-    "@babel/core": ">=7.29.6"
+    "js-yaml": "^4.2.0",
+    "@babel/core": "^7.29.6"
   }
 }

package/src/styles.css

@@ -1313,6 +1313,12 @@
   background-color: var(--button-ghost-static-dark-bg-pressed) !important;
 }
 
+/* Banner pagination fill — animates the selected pill from 0% to 100% width */
+@keyframes banner-fill {
+  from { width: 0% }
+  to   { width: 100% }
+}
+
 /* Spinner — pill-style activity indicator */
 @keyframes spinner-fade {
   0% {
@@ -1798,6 +1804,19 @@
   --pagination-text-default: var(--primitive-slate-1200);
   --pagination-text-disabled: var(--primitive-slate-alpha-200);
 
+  /* Banner block */
+  --banner-bg-surface-blue: var(--primitive-blue-alpha-100);
+  --banner-bg-surface-dark: var(--background-default-solid-static-dark);
+  --banner-tag-bg-sapphire: oklch(0.393 0.254 264.1);
+  --banner-close-bg-light: var(--primitive-slate-alpha-100);
+  --banner-close-bg-light-hover: var(--primitive-slate-alpha-200);
+  --banner-close-bg-dark: var(--primitive-white-alpha-100);
+  --banner-close-bg-dark-hover: var(--primitive-white-alpha-200);
+
+  /* Feedback success card (always dark bg) */
+  --feedback-success-bg: var(--primitive-slate-1200);
+  --feedback-success-tag-border: var(--primitive-slate-200);
+
   /* Notification */
   --notification-title-banner: var(--primitive-slate-50);
   --notification-title-item: var(--primitive-slate-1200);
@@ -2130,6 +2149,15 @@
   --chip-lg-border-width-selected: var(--semantic-size-border-1-5);
 
   /* ── Tag ── */
+  --tag-2xs-height:             var(--semantic-size-width-height-16);
+  --tag-2xs-padding-horizontal: var(--semantic-size-spacing-4);
+  --tag-2xs-gap:                var(--semantic-size-spacing-4);
+  --tag-2xs-font-size:          var(--semantic-size-width-height-8);
+  --tag-2xs-font-weight:        600;
+  --tag-2xs-radius:             var(--semantic-size-radius-4);
+  --tag-2xs-min-width:          var(--semantic-size-width-height-16);
+  --tag-2xs-icon-size:          10px;
+
   --tag-sm-height:             var(--semantic-size-width-height-24);
   --tag-sm-padding-horizontal: var(--semantic-size-spacing-8);
   --tag-sm-gap:                var(--semantic-size-spacing-4);
@@ -2554,6 +2582,13 @@
   --tag-fill-bg-green: var(--primitive-green-alpha-200);
   --tag-fill-bg-blue: var(--primitive-blue-alpha-200);
 
+  /* Banner block — dark */
+  --banner-bg-surface-blue: var(--primitive-blue-alpha-300);
+
+  /* Feedback success card — dark (same as :root; block is always dark bg) */
+  --feedback-success-bg: var(--primitive-slate-1200);
+  --feedback-success-tag-border: var(--primitive-slate-200);
+
   /* Chip */
   --chip-text-prominent:  var(--primitive-slate-50);
   --chip-text-disabled:   var(--primitive-white-alpha-200);

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

@@ -1,98 +0,0 @@
-# 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