feat(frontend): Apply community-approved blue+gold QuickSwap-inspired design + brand assets #488

Closed
opened 2026-07-13 13:24:17 +00:00 by PlasticDigits · 33 comments
PlasticDigits commented 2026-07-13 13:24:17 +00:00 (Migrated from gitlab.com)

Summary

Apply the community-approved visual concept across the dApp: cool QuickSwap-inspired blue chrome (dark + light), gold brand accents (not purple, not brown/amber fade), familiar centered trade UX, and simplified limit order layout. Also replace logo / Open Graph / favicon assets to match.

Community feedback captured:

  • "Loving the new limit orders page, a huge improvement imo."
  • "Yes, that’s looking much cleaner to my eye"
  • "I really like the design of the updated USTR CMM. It is simple, but a little colorful. It probably looks great in blue, too."
  • Prior direction: brown fade isn’t working; prefer QuickSwap simplicity/familiarity over reinventing UX; limit orders should use the intuitive stacked layout with no extra explanatory copy.

Concept references (local feedback pack, not production): .tmp-brand-concepts/ (swap/limit dark+light, blue vs gold CTA compare, OG cards, logo marks).


Current codebase

Theme / design system (warm amber–brown “glass”)

Limit / swap UX (more explanatory than approved concept)

Approved concept direction for limits: “When 1 {token} is worth” → Pay → Receive → Expiry; percentage chips; no helper paragraphs in the primary card (details → docs / rare single-word doc links only).


Why this is needed

  1. Community rejected the warm brown/amber fade as less effective than prior/cleaner designs.
  2. Familiar DEX patterns (QuickSwap-like centered card, blue primary actions) reduce onboarding friction vs bespoke layouts.
  3. Limit order IA with less on-card explanation was explicitly praised as a huge improvement.
  4. Brand assets still advertise the old amber-glass identity; shipping a blue+gold UI with mismatched favicon/OG creates trust and recognition gaps (especially social previews).

Constraints & guardrails

  • No contract / indexer protocol changes in this issue — visual + layout only.
  • Do not weaken safety gates: escrow/gas place gates, non-crossing checks, risk acknowledgement, blacklist, paused-pair handling, wallet connect flows must remain correct; only reduce redundant prose.
  • Legal / risk copy: keep required disclaimers (footer, first-visit ack). Prefer short labels + optional Docs link; do not bury mandatory risk ack behind “simplicity.”
  • A11y: maintain :focus-visible, contrast for blue/gold on both themes (WCAG), form labels (AGENTS_FRONTEND_A11Y_*).
  • Theme bootstrap: trade-bootstrap.css / theme.js must not flash wrong palette on /trade.
  • Token-first: extend CSS variables / primitives; avoid one-off hex sprawl in components.
  • Accent decision: default concept uses blue CTAs (QuickSwap-true) with gold for brand mark, network chip, CL8Y token accents, and selective active chips. If product picks gold CTAs from concept board §06, document in MR and keep one system only.
  • Asset pipeline: replace raster/SVG consistently; update index.html OG/Twitter tags; keep dimensions suitable for Discord/X (og-image ~1200×630).
  • Do not commit .tmp-brand-concepts/ as production assets — promote finalized SVGs/PNGs into frontend-dapp/public/.
  • Coordinate with the companion docs/skills issue so agents stop enforcing “no blue primary / warm mint only.”

Relevant files (non-exhaustive)

Area Paths
Themes / CSS frontend-dapp/src/theme-*.css, index.css, public/bootstrap/trade-bootstrap.css
Layout / nav components/common/Layout.tsx, header/footer CSS in index.css
Swap components/swap/*, swap pages
Limit pages/LimitOrdersPage.tsx, components/trade/LimitOrder*.tsx
Brand public/assets/cl8y-dex-glass-logo.svg, public/favicon*, public/og-image.png, index.html
Checks scripts/check_design_tokens.py, frontend unit/e2e specs touching theme or chrome

  1. Redefine design tokens for dark (#0d111c-class navy) and light (#f4f6fb-class) with blue primary (~#448aff) and gold accent (~#e8b84a); remap --mint / --accent roles or introduce clearer names (--blue, --gold) and migrate aliases carefully.
  2. Restyle primitives (btn-primary, tabs, cards, inputs) to flatter QuickSwap-like surfaces (layered darks over heavy warm glass bloom).
  3. Limit IA: restructure primary place card toward concept §04/§05; collapse advanced/ladder behind progressive disclosure; remove redundant explanatory strings from the default path.
  4. Swap / trade: favor centered familiar Pay/Receive card patterns where the route already is a swap shell; keep power-user panels secondary.
  5. Assets: ship circular blue disc + gold “8” mark (concept), wordmark lockup, favicons (16/32/ICO), header logo, OG dark (and optional light) 1200×630; wire Layout + index.html.
  6. Update cursor/icon tints only if they clash with the new palette (optional follow-up if out of scope).

Acceptance criteria

  • Dark and light themes use cool blue surfaces; no brown/amber page fade as the dominant identity.
  • Primary interactive accents follow the chosen blue/gold system consistently (header, CTAs, tabs, focus rings).
  • Limit order default place UI matches the approved simple flow (rate → pay → receive → expiry) without extra instructional paragraphs on-card.
  • Swap and shared chrome (header, footer, modals, buttons) visually match the new system.
  • Logo in header matches new mark; favicon set and og-image / Twitter image updated; social preview shows new brand.
  • trade-bootstrap.css matches hydrated theme (no amber→blue flash).
  • python3 scripts/check_design_tokens.py, make lint-frontend, and affected unit tests pass.
  • Manual spot-check: Swap, Limit, Trade, Pool, Portfolio, Connect Wallet modal — both themes.

Test plan (all paths)

  1. Theme toggle: dark ↔ light on Swap, Limit, Trade, Pool, Portfolio, Tiers, Create pair; no token regressions (unreadable text, invisible borders).
  2. Swap path: select tokens, quote, settings, connect wallet, simulated wallet place (LocalTerra) if available.
  3. Limit path: Best Trade/Limit tab mental model; set “when 1 X is worth”; % chips; pay/receive; expiry; place/cancel/claim; ladder/advanced only if still exposed — verify gates still block bad prices / insufficient escrow / gas.
  4. Trade page: bootstrap CSS first paint vs hydrated CSS; chart/order book still legible.
  5. Responsive: mobile header/bottom nav, tablet compact header (AGENTS_FRONTEND_RESPONSIVE_HEADER).
  6. Assets: hard-refresh favicon; share OG debugger or curl/img check for /og-image.png; header logo SVG/PNG.
  7. Automated: make test-frontend; relevant Playwright e2e (navigation, trader page, limit specs) on CI or LocalTerra.
  8. A11y smoke: keyboard focus rings visible on primary controls; axe/CI a11y jobs if present.

Test plan — attack / hack / abuse vectors

Vector What to verify
Phishing / brand spoof New favicon/OG are distinctive; no leftover amber assets linked from HTML that could confuse “official” vs old mirrors. Document canonical asset paths.
Misleading simplification Removing copy must not hide blocking errors (crossing, escrow, paused, blacklist). Errors remain visible and accurate.
Clickjacking / CTA confusion Primary CTA color contrast sufficient; disabled vs enabled states unambiguous so users don’t spam-sign.
Theme spoof / FOUC Bootstrap + CSP/theme.js cannot leave a forged or broken theme that obscures warnings.
Malicious token icons Token logo allowlist behavior unchanged (tokenLogoAllowlist); brand gold must not be confused with unverified token chrome.
Social preview injection og:image remains same-origin static file; no user-controlled OG URL.
Contrast abuse (light theme) Gold/blue on light backgrounds meet readable contrast for CTAs and errors (red/green semantics unchanged).

Verification criteria

  • Side-by-side with approved concept screenshots (.tmp-brand-concepts/02-swap-dark.png, 04-limit-dark.png, logo/OG): production UI is recognizably the same system.
  • Community can open /limits and complete a place flow without reading instructional paragraphs on the card.
  • External share of the site URL shows the new OG image and title.
  • Design-token check + frontend lint/tests green on the MR.
  • Linked docs/skills issue updated or explicitly sequenced so agents don’t regress to amber-only rules.
## Summary Apply the **community-approved** visual concept across the dApp: cool **QuickSwap-inspired blue** chrome (dark + light), **gold** brand accents (not purple, not brown/amber fade), familiar centered trade UX, and simplified **limit order** layout. Also replace **logo / Open Graph / favicon** assets to match. Community feedback captured: - *"Loving the new limit orders page, a huge improvement imo."* - *"Yes, that’s looking much cleaner to my eye"* - *"I really like the design of the updated USTR CMM. It is simple, but a little colorful. It probably looks great in blue, too."* - Prior direction: brown fade isn’t working; prefer QuickSwap simplicity/familiarity over reinventing UX; limit orders should use the intuitive stacked layout with no extra explanatory copy. Concept references (local feedback pack, not production): `.tmp-brand-concepts/` (swap/limit dark+light, blue vs gold CTA compare, OG cards, logo marks). --- ## Current codebase ### Theme / design system (warm amber–brown “glass”) - Spec: [`docs/design-system.md`](https://gitlab.com/PlasticDigits/cl8y-dex-terraclassic/-/blob/main/docs/design-system.md) — **Cyberminimalist Glass**, warm `--mint` / amber accents; explicitly **removed** parallel blue Tailwind `primary` / `dex` palettes (#416). - Tokens: [`frontend-dapp/src/theme-dark.css`](https://gitlab.com/PlasticDigits/cl8y-dex-terraclassic/-/blob/main/frontend-dapp/src/theme-dark.css), [`theme-light.css`](https://gitlab.com/PlasticDigits/cl8y-dex-terraclassic/-/blob/main/frontend-dapp/src/theme-light.css) - Primitives & chrome: [`frontend-dapp/src/index.css`](https://gitlab.com/PlasticDigits/cl8y-dex-terraclassic/-/blob/main/frontend-dapp/src/index.css) (`btn-primary`, `shell-panel`, `card-glass`, header/footer, swap IO stack) - Trade first paint: [`frontend-dapp/public/bootstrap/trade-bootstrap.css`](https://gitlab.com/PlasticDigits/cl8y-dex-terraclassic/-/blob/main/frontend-dapp/public/bootstrap/trade-bootstrap.css) (must stay token-aligned) - Tailwind aliases: [`frontend-dapp/tailwind.config.js`](https://gitlab.com/PlasticDigits/cl8y-dex-terraclassic/-/blob/main/frontend-dapp/tailwind.config.js) - Theme toggle: `data-theme` on `<html>` + [`skills/AGENTS_FRONTEND_THEME_TOGGLE.md`](https://gitlab.com/PlasticDigits/cl8y-dex-terraclassic/-/blob/main/skills/AGENTS_FRONTEND_THEME_TOGGLE.md) - Agent rules still say **do not introduce a parallel blue primary** — this issue **supersedes** that constraint for the new concept (docs issue will rewrite the playbooks). ### Brand assets (amber glass logo) - Header mark: [`frontend-dapp/public/assets/cl8y-dex-glass-logo.svg`](https://gitlab.com/PlasticDigits/cl8y-dex-terraclassic/-/blob/main/frontend-dapp/public/assets/cl8y-dex-glass-logo.svg) via [`Layout.tsx`](https://gitlab.com/PlasticDigits/cl8y-dex-terraclassic/-/blob/main/frontend-dapp/src/components/common/Layout.tsx) - Favicons / OG: [`frontend-dapp/index.html`](https://gitlab.com/PlasticDigits/cl8y-dex-terraclassic/-/blob/main/frontend-dapp/index.html) → `/favicon-*.png`, `/favicon.ico`, `/og-image.png` - Related: `public/logo.png`, `logo-full.png`, `assets/cl8y-dex-header-logo.png`, `assets/cl8y-logo.png` ### Limit / swap UX (more explanatory than approved concept) - Limit page: [`frontend-dapp/src/pages/LimitOrdersPage.tsx`](https://gitlab.com/PlasticDigits/cl8y-dex-terraclassic/-/blob/main/frontend-dapp/src/pages/LimitOrdersPage.tsx) + trade components under `frontend-dapp/src/components/trade/` (`LimitOrderPriceField`, `LimitOrderBidAskSideSelector`, `LimitOrderPreSubmitSummary`, ladder, advanced settings, onboarding strip, etc.) - Swap / trade shells: swap components + [`skills/AGENTS_FRONTEND_TRADE_PAGE_LAYOUT.md`](https://gitlab.com/PlasticDigits/cl8y-dex-terraclassic/-/blob/main/skills/AGENTS_FRONTEND_TRADE_PAGE_LAYOUT.md), [`AGENTS_FRONTEND_LIMIT_ORDER_PRICE.md`](https://gitlab.com/PlasticDigits/cl8y-dex-terraclassic/-/blob/main/skills/AGENTS_FRONTEND_LIMIT_ORDER_PRICE.md) Approved concept direction for limits: **“When 1 {token} is worth”** → Pay → Receive → Expiry; percentage chips; **no helper paragraphs** in the primary card (details → docs / rare single-word doc links only). --- ## Why this is needed 1. Community rejected the warm brown/amber fade as less effective than prior/cleaner designs. 2. Familiar DEX patterns (QuickSwap-like centered card, blue primary actions) reduce onboarding friction vs bespoke layouts. 3. Limit order IA with less on-card explanation was explicitly praised as a huge improvement. 4. Brand assets still advertise the old amber-glass identity; shipping a blue+gold UI with mismatched favicon/OG creates trust and recognition gaps (especially social previews). --- ## Constraints & guardrails - **No contract / indexer protocol changes** in this issue — visual + layout only. - **Do not weaken safety gates**: escrow/gas place gates, non-crossing checks, risk acknowledgement, blacklist, paused-pair handling, wallet connect flows must remain correct; only reduce *redundant* prose. - **Legal / risk copy**: keep required disclaimers (footer, first-visit ack). Prefer short labels + optional **Docs** link; do not bury mandatory risk ack behind “simplicity.” - **A11y**: maintain `:focus-visible`, contrast for blue/gold on both themes (WCAG), form labels ([`AGENTS_FRONTEND_A11Y_*`](https://gitlab.com/PlasticDigits/cl8y-dex-terraclassic/-/tree/main/skills)). - **Theme bootstrap**: `trade-bootstrap.css` / `theme.js` must not flash wrong palette on `/trade`. - **Token-first**: extend CSS variables / primitives; avoid one-off hex sprawl in components. - **Accent decision**: default concept uses **blue CTAs** (QuickSwap-true) with **gold** for brand mark, network chip, CL8Y token accents, and selective active chips. If product picks gold CTAs from concept board §06, document in MR and keep one system only. - **Asset pipeline**: replace raster/SVG consistently; update `index.html` OG/Twitter tags; keep dimensions suitable for Discord/X (`og-image` ~1200×630). - **Do not commit** `.tmp-brand-concepts/` as production assets — promote finalized SVGs/PNGs into `frontend-dapp/public/`. - Coordinate with the companion docs/skills issue so agents stop enforcing “no blue primary / warm mint only.” --- ## Relevant files (non-exhaustive) | Area | Paths | |------|--------| | Themes / CSS | `frontend-dapp/src/theme-*.css`, `index.css`, `public/bootstrap/trade-bootstrap.css` | | Layout / nav | `components/common/Layout.tsx`, header/footer CSS in `index.css` | | Swap | `components/swap/*`, swap pages | | Limit | `pages/LimitOrdersPage.tsx`, `components/trade/LimitOrder*.tsx` | | Brand | `public/assets/cl8y-dex-glass-logo.svg`, `public/favicon*`, `public/og-image.png`, `index.html` | | Checks | `scripts/check_design_tokens.py`, frontend unit/e2e specs touching theme or chrome | --- ## Recommended direction 1. **Redefine design tokens** for dark (`#0d111c`-class navy) and light (`#f4f6fb`-class) with blue primary (`~#448aff`) and gold accent (`~#e8b84a`); remap `--mint` / `--accent` roles or introduce clearer names (`--blue`, `--gold`) and migrate aliases carefully. 2. Restyle primitives (`btn-primary`, tabs, cards, inputs) to flatter QuickSwap-like surfaces (layered darks over heavy warm glass bloom). 3. **Limit IA**: restructure primary place card toward concept §04/§05; collapse advanced/ladder behind progressive disclosure; remove redundant explanatory strings from the default path. 4. **Swap / trade**: favor centered familiar Pay/Receive card patterns where the route already is a swap shell; keep power-user panels secondary. 5. **Assets**: ship circular blue disc + gold “8” mark (concept), wordmark lockup, favicons (16/32/ICO), header logo, OG dark (and optional light) 1200×630; wire `Layout` + `index.html`. 6. Update cursor/icon tints only if they clash with the new palette (optional follow-up if out of scope). --- ## Acceptance criteria - [ ] Dark and light themes use cool blue surfaces; **no** brown/amber page fade as the dominant identity. - [ ] Primary interactive accents follow the chosen blue/gold system consistently (header, CTAs, tabs, focus rings). - [ ] Limit order **default** place UI matches the approved simple flow (rate → pay → receive → expiry) without extra instructional paragraphs on-card. - [ ] Swap and shared chrome (header, footer, modals, buttons) visually match the new system. - [ ] Logo in header matches new mark; favicon set and `og-image` / Twitter image updated; social preview shows new brand. - [ ] `trade-bootstrap.css` matches hydrated theme (no amber→blue flash). - [ ] `python3 scripts/check_design_tokens.py`, `make lint-frontend`, and affected unit tests pass. - [ ] Manual spot-check: Swap, Limit, Trade, Pool, Portfolio, Connect Wallet modal — both themes. --- ## Test plan (all paths) 1. **Theme toggle**: dark ↔ light on Swap, Limit, Trade, Pool, Portfolio, Tiers, Create pair; no token regressions (unreadable text, invisible borders). 2. **Swap path**: select tokens, quote, settings, connect wallet, simulated wallet place (LocalTerra) if available. 3. **Limit path**: Best Trade/Limit tab mental model; set “when 1 X is worth”; % chips; pay/receive; expiry; place/cancel/claim; ladder/advanced only if still exposed — verify gates still block bad prices / insufficient escrow / gas. 4. **Trade page**: bootstrap CSS first paint vs hydrated CSS; chart/order book still legible. 5. **Responsive**: mobile header/bottom nav, tablet compact header ([`AGENTS_FRONTEND_RESPONSIVE_HEADER`](https://gitlab.com/PlasticDigits/cl8y-dex-terraclassic/-/blob/main/skills/AGENTS_FRONTEND_RESPONSIVE_HEADER.md)). 6. **Assets**: hard-refresh favicon; share OG debugger or `curl`/`img` check for `/og-image.png`; header logo SVG/PNG. 7. **Automated**: `make test-frontend`; relevant Playwright e2e (navigation, trader page, limit specs) on CI or LocalTerra. 8. **A11y smoke**: keyboard focus rings visible on primary controls; axe/CI a11y jobs if present. --- ## Test plan — attack / hack / abuse vectors | Vector | What to verify | |--------|----------------| | **Phishing / brand spoof** | New favicon/OG are distinctive; no leftover amber assets linked from HTML that could confuse “official” vs old mirrors. Document canonical asset paths. | | **Misleading simplification** | Removing copy must not hide **blocking** errors (crossing, escrow, paused, blacklist). Errors remain visible and accurate. | | **Clickjacking / CTA confusion** | Primary CTA color contrast sufficient; disabled vs enabled states unambiguous so users don’t spam-sign. | | **Theme spoof / FOUC** | Bootstrap + CSP/`theme.js` cannot leave a forged or broken theme that obscures warnings. | | **Malicious token icons** | Token logo allowlist behavior unchanged ([`tokenLogoAllowlist`](https://gitlab.com/PlasticDigits/cl8y-dex-terraclassic/-/blob/main/frontend-dapp/src/utils/tokenLogoAllowlist.ts)); brand gold must not be confused with unverified token chrome. | | **Social preview injection** | `og:image` remains same-origin static file; no user-controlled OG URL. | | **Contrast abuse (light theme)** | Gold/blue on light backgrounds meet readable contrast for CTAs and errors (red/green semantics unchanged). | --- ## Verification criteria - Side-by-side with approved concept screenshots (`.tmp-brand-concepts/02-swap-dark.png`, `04-limit-dark.png`, logo/OG): production UI is recognizably the same system. - Community can open `/limits` and complete a place flow without reading instructional paragraphs on the card. - External share of the site URL shows the new OG image and title. - Design-token check + frontend lint/tests green on the MR. - Linked docs/skills issue updated or explicitly sequenced so agents don’t regress to amber-only rules.
PlasticDigits commented 2026-07-13 13:24:43 +00:00 (Migrated from gitlab.com)

mentioned in issue #489

mentioned in issue #489
PlasticDigits commented 2026-07-13 13:24:43 +00:00 (Migrated from gitlab.com)

marked as related to #489

marked as related to #489
PlasticDigits commented 2026-07-14 07:23:32 +00:00 (Migrated from gitlab.com)

Due to updated cognitive overload policy, text copy for disclosures must be minimized to only the key few words necessary.

Due to updated cognitive overload policy, text copy for disclosures must be minimized to only the key few words necessary.
PlasticDigits commented 2026-07-14 07:24:13 +00:00 (Migrated from gitlab.com)

Implementation checklist — every surface to update (#488)

Target palette (from .tmp-brand-concepts/palette.md): dark #0d111c / light #f4f6fb, blue primary ~#448aff, gold brand ~#e8b84a. No brown/amber page fade. Token-first; keep safety gates and required legal copy.


A. Design tokens & global CSS

  • frontend-dapp/src/theme-dark.css — redefine all --bg-*, --surface-*, --ink*, --line*, --mint/--accent roles (or introduce --blue/--gold), --panel-bg*, --card-bg, --menu-bg, --hero-glow, --accent-gradient, --focus-ring, scroll thumbs, shadows, alert tokens
  • frontend-dapp/src/theme-light.css — same token set for light (#f4f6fb-class, cool lines/ink)
  • frontend-dapp/src/index.css — restyle every primitive/chrome class to flatter QuickSwap-like surfaces (see §B)
  • frontend-dapp/public/bootstrap/trade-bootstrap.css — must match hydrated tokens (no amber→blue FOUC on /trade)
  • frontend-dapp/public/bootstrap/theme.js — confirm data-theme bootstrap still correct with new defaults
  • frontend-dapp/public/bootstrap/trade-shell.js + trade-bootstrap-fixture.html — shell first-paint chrome
  • frontend-dapp/tailwind.config.js — remap mint/accent aliases (and add blue/gold if introduced)
  • frontend-dapp/src/designTokens.test.ts — expect new token values / theme selectors
  • scripts/check_design_tokens.py — invert #416 blue ban; assert blue+gold system + bootstrap/theme alignment
  • docs/design-system.md — rewrite Cyberminimalist warm-glass → blue+gold QuickSwap-inspired
  • skills/AGENTS_FRONTEND_DESIGN_SYSTEM.md — stop enforcing “no blue primary / warm mint only”
  • skills/AGENTS_FRONTEND_THEME_TOGGLE.md — token/bootstrap notes for new palette
  • Any .cursor/agent rules that still ban parallel blue primary (issue supersedes)

B. Global CSS primitives / chrome classes (index.css)

Buttons / CTAs

  • .btn-primary
  • .btn-primary.btn-cta (+ hover / focus-visible)
  • .btn-muted
  • .btn-disabled

Surfaces / cards / inputs / tabs / badges

  • .shell-panel / .shell-panel-strong
  • .card-glass
  • .input-glass / .select-glass
  • .label-glass
  • .tab-glass / .tab-glass-active / .tab-glass-inactive
  • .badge-glass / .badge-glass-accent / .badge-glass-success / .badge-glass-warning / .badge-glass-error

Swap IO stack

  • .swap-io-stack
  • .swap-io-card-pay / .swap-io-card-receive
  • .swap-io-amount-input (+ focus-visible)

Token / portal listbox

  • .token-select-root / .token-select-trigger / .token-select-chevron
  • .token-select-dropdown / .token-select-option* (hover, active, keyboard-active)

Alerts / status

  • .alert-error / .alert-success / .alert-warning / .alert-info

App shell

  • .app-shell / .app-hero-glow / page background grid
  • .app-top-sticky / .app-header-shell / .app-header
  • .app-brand / .app-brand-mark / .app-brand-logo / .app-brand-copy / .app-brand-title
  • .app-desktop-nav / .app-nav-link / .app-nav-link-active / .app-nav-link-label
  • .app-more-wrap / .app-more-trigger
  • .app-menu / .app-menu-link / .app-menu-dismiss
  • .app-header-controls / .app-header-theme-group
  • .app-main-shell / .app-main / .app-main-content
  • .app-footer-shell / .app-footer / .app-footer-copy / .app-footer-title
  • .app-footer-theme-group / .app-footer-theme-button / .app-footer-theme-button-active
  • .app-mobile-nav-shell / .app-mobile-link / .app-mobile-link-active
  • .app-mobile-more / .app-mobile-more-active / .app-mobile-more-sheet / .app-mobile-theme-group
  • .app-mobile-legal-strip / .app-legal-footer-notice
  • .app-env-ribbon (+ --local / --testnet / --mainnet + light overrides)

Wallet chrome

  • .wallet-trigger / .wallet-trigger-connected / .wallet-trigger-icon
  • .wallet-chip-network / .wallet-chip-network-label
  • .wallet-dropdown-wrap / .wallet-menu / .wallet-menu-item
  • .network-badge / .network-badge-active
  • .wallet-option-card / .wallet-option-install-cta

Modals / overlays

  • .app-modal-portal-root / .app-modal-backdrop / .app-modal-panel
  • .app-modal-header / .app-modal-header--blocking

Misc chrome

  • .copy-button / .explorer-link focus rings
  • Custom scrollbar (::-webkit-scrollbar*) — replace brown thumbs
  • Animations that assume warm glow (.animate-fade-in-up, shimmer, etc.) if tinted
  • All :focus-visible rings using --focus-ring (a11y contrast on blue/gold)

C. Brand assets & HTML meta

  • frontend-dapp/public/assets/cl8y-dex-glass-logo.svg → new circular blue disc + gold “8” mark
  • frontend-dapp/public/assets/cl8y-dex-header-logo.png
  • frontend-dapp/public/assets/cl8y-logo.png
  • frontend-dapp/public/logo.png / logo-full.png
  • frontend-dapp/public/favicon-16.png / favicon-32.png / favicon.png / favicon.ico
  • frontend-dapp/public/og-image.png (~1200×630; optional light OG)
  • frontend-dapp/index.html — favicon links, og:image, Twitter image/title/description
  • Layout.tsx brand <img> path (currently /assets/cl8y-dex-glass-logo.svg)
  • Optional: tinted nav icons under public/assets/icon-*.png if they clash
  • Optional: custom cursors under public/assets/cursor-*.png if warm-tinted
  • Do not commit .tmp-brand-concepts/ — promote finalized assets into public/ only
  • Leave public/chains/* alone unless brand-confused with gold/network chip

D. Routes / pages (every routed scene)

Route Page file Checklist
/ SwapPage.tsx [ ] shell, IO cards, slippage/deadline chips, settings panel, route/fee rows, CTA, banners
/pool PoolPage.tsx [ ] provide/withdraw tabs, inputs, pre-submit, CTAs, fee-discount banner
/limits LimitOrdersPage.tsx [ ] IA rewrite to rate→pay→receive→expiry; strip on-card instructional paragraphs; chips; place card
/trade, /trade/:pair TradePage.tsx [ ] workspace chrome, bootstrap first paint, ticket/book/chart panels
/portfolio PortfolioPage.tsx [ ] connect prompt, LP/limits sections, activity shell
/charts ChartsPage.tsx [ ] pair search/sort selects, stats grid, leaderboard tabs, mint/accent inline colors
/trader, /trader/:address TraderPage.tsx [ ] profile header, stats, positions tables
/protocol ProtocolPage.tsx [ ] panels, address rows, accent links
/tiers TiersPage.tsx [ ] tier cards, CTAs, accent/mint usage
/create CreatePairPage.tsx [ ] form chrome, token selectors, CTA
/mint MintPage.tsx [ ] faucet UI chrome (More menu only when enabled)
redirects /my-portfolio → /portfolio [ ] n/a visual (verify still works)

E. Layout / navigation / chrome components

  • components/common/Layout.tsx — header, More menu, mobile bottom nav + More sheet, logo, footer
  • components/common/AppShellNavLink.tsx
  • components/common/navItems.ts — no color logic, but verify active states after CSS change
  • components/common/ThemeSegmentedControl.tsx — dark/light segmented control (header + mobile sheet)
  • components/common/TradeOnboardingStrip.tsx
  • components/common/AmountBalanceActions.tsx — Max / percentage chips
  • components/common/ErrorBoundary.tsx
  • components/common/LazyRoute.tsx — loading fallback chrome
  • components/common/LcdConnectivityBanner.tsx
  • components/common/LcdQueryGate.tsx
  • components/common/MarketDataLoadingStatus.tsx
  • components/common/MarketDataServiceOutageBanner.tsx
  • components/common/TerraClassicTxFeeHint.tsx
  • components/common/RouteContentReadyMarker.tsx (if visible)

F. Modals / dialogs / overlays

  • components/ui/Modal.tsx — shared portal panel/backdrop
  • components/wallet/WalletModal.tsx — Connect Wallet options
  • components/legal/RiskAcknowledgementModal.tsx — first-visit ack (keep required copy)
  • components/swap/ExpertModeModal.tsx
  • Toast viewport styling in contexts/ToastContext.tsx (success/error/info borders/bg — currently ad-hoc Tailwind)
  • components/ui/TxResultAlert.tsx
  • Menu dismiss overlay .app-menu-dismiss (Layout)

G. Menus / dropdowns / selectors / listboxes / popovers

  • Header More dropdown (.app-menu)
  • Mobile More sheet (.app-mobile-more-sheet)
  • components/wallet/WalletButton.tsx + WalletDropdownMenuItems.tsx — connected wallet menu
  • components/wallet/NetworkBadge.tsx / WalletChipNetworkIndicator.tsx / WalletLuncBalance.tsx — gold network/brand accents
  • components/ui/TokenSelect.tsx — trigger + portal options
  • components/ui/MenuSelect.tsx
  • components/ui/PortalListbox.tsx (+ keyboard/position helpers CSS consumers)
  • components/trade/PairSearchSelect.tsx
  • components/trade/TokenSearchSelect.tsx
  • components/charts/PriceChartOverlayMenu.tsx — chart indicator/overlay popover
  • Native <select> / .select-glass usages on Charts (sort/order) and elsewhere
  • components/trade/TradeWorkspaceDisclosure.tsx — disclosure/accordion chrome

H. Pills / chips / segmented controls / tabs

  • Theme segmented control (Dark / Light)
  • Swap slippage preset chips (.tab-glass)
  • Swap transaction deadline chips
  • Limit % amount chips / expiry presets
  • Limit bid/ask side selector (LimitOrderBidAskSideSelector.tsx)
  • Trade order ticket Market / Limit tabs
  • Trade market slippage presets
  • Pool Provide / Withdraw tabs
  • Charts leaderboard sort tabs
  • Fee-tier / badge pills (Badge.tsx + .badge-glass*)
  • Pair list badges (utils/pairListBadges.ts consumers)
  • Environment ribbon pills (local/testnet/mainnet)
  • Active nav pills (desktop + mobile)

I. User inputs / forms / fields

  • Swap You Pay / You Receive amount inputs
  • Swap custom slippage + custom deadline inputs
  • SwapAdvancedSettings.tsx fields
  • Pool amount inputs + pair/token selectors
  • Create Pair form inputs
  • Mint faucet inputs/buttons
  • LimitOrderPriceField.tsx (“When 1 {token} is worth”)
  • LimitOrderEscrowAmountField.tsx
  • LimitOrderExpiryField.tsx
  • LimitOrderAdvancedLimitSettings.tsx
  • LimitOrderLadderPanel.tsx rung inputs
  • Trade market book-leg / max-makers inputs
  • Trade cancel-limit order id input
  • Charts pair search input
  • Token/pair search query boxes inside selects
  • All input-glass / decimal amount patterns (AGENTS_FRONTEND_DECIMAL_AMOUNT_INPUT)

J. Swap components

  • SwapPage.tsx scene (centered familiar Pay/Receive card)
  • SwapAdvancedSettings.tsx
  • SwapPreSubmitSummary.tsx
  • ExpertModeModal.tsx
  • Fee discount CTA/warning on swap (FeeDiscountRegistryWarning.tsx, FeeDiscountUnregisteredCta.tsx)

K. Limit / trade components (layout + chrome)

  • LimitOrdersPage.tsx — primary place card IA (concept §04/§05)
  • LimitOrderPriceField.tsx
  • LimitOrderBidAskSideSelector.tsx
  • LimitOrderEscrowAmountField.tsx
  • LimitOrderEscrowPlaceGuardMessage.tsx (keep blocking errors visible)
  • LimitOrderExpiryField.tsx
  • LimitOrderPreSubmitSummary.tsx
  • LimitOrderAdvancedLimitSettings.tsx — progressive disclosure
  • LimitOrderLadderPanel.tsx — progressive disclosure
  • LimitOrderMyPlacementsPanel.tsx
  • TradeOrderTicket.tsx
  • TradeMarketOrderPanel.tsx
  • OrderBookPanel.tsx (bid/ask row colors stay semantic; chrome/borders retoken)
  • TradeRecentTradesSection.tsx
  • WalletIndexerHistoryPanel.tsx
  • TradePageWorkspaceSkeleton.tsx / TradePageRouteFallback.tsx
  • TradePairSwitchStatus.tsx
  • TradeMarketDataUnavailableNotice.tsx
  • InvalidPairLinkNotice.tsx / PairNotFoundLinkNotice.tsx
  • PairSearchSelect.tsx / TokenSearchSelect.tsx

L. Pool / portfolio / trader / protocol / tiers / mint

  • PoolPage.tsx + PoolPreSubmitSummary.tsx
  • PortfolioPage.tsx + PortfolioLpOverviewSection.tsx + PortfolioOpenLimitsSection.tsx
  • TraderPage.tsx + TraderSummaryStats.tsx + TraderPositionsTable.tsx + PnlValue.tsx
  • ProtocolPage.tsx
  • TiersPage.tsx
  • MintPage.tsx
  • Fee-discount registry warning/CTA on pool/swap pages

M. Charts / visual scenes

  • ChartsPage.tsx layout chrome
  • PriceChart.tsx — toolbar, empty/loading chrome
  • PriceChartLightweightCanvas.tsx — grid/text colors from theme (replace hard #9ca3af if needed)
  • PriceChartEmptyState.tsx
  • PriceChartOverlayMenu.tsx
  • priceChartLightweightIndicatorSync.ts — indicator line colors vs new accent (--focus-ring / gold/blue)
  • Volume histogram up/down remain --color-positive / --color-negative (unchanged semantics)

N. Shared UI kit

  • Card.tsx (shell-panel-strong / card-glass)
  • Badge.tsx
  • Modal.tsx
  • TokenLogo.tsx / TokenDisplay.tsx (fallback chrome only)
  • TokenSelect.tsx / MenuSelect.tsx / PortalListbox.tsx
  • StatBox.tsx / FeeDisplay.tsx / AddressRow.tsx / CopyButton.tsx
  • TradesTable.tsx
  • Skeleton.tsx / Spinner.tsx / RetryError.tsx
  • TerraBroadcastPendingLink.tsx / TxResultAlert.tsx

  • EnvironmentRibbon.tsx
  • LegalFooterNotice.tsx
  • RiskAcknowledgementModal.tsx — restyle only; do not bury ack
  • legalCopy.ts — copy unchanged unless product asks

P. Inline var(--mint) / var(--accent) / hard color consumers

Audit and retoken every file that sets style={{ color: 'var(--mint|accent|…)' }} (non-exhaustive from current tree):

  • Pages: SwapPage, PoolPage, LimitOrdersPage, TradePage, ChartsPage, PortfolioPage, TraderPage, ProtocolPage, TiersPage, CreatePairPage, MintPage
  • Trade/limit/swap/pool/portfolio/trader/wallet/ui/common components listed above that inline token colors
  • Prefer CSS classes / new --blue/--gold over one-off hex

Q. Tests / E2E / QA that encode the old warm look

  • frontend-dapp/e2e/design-tokens-visual.spec.ts — currently asserts warm brown page ≠ slate/blue; rewrite expectations
  • Other e2e selectors using .shell-panel*, .card-glass, .tab-glass* (swap/limit/pool helpers) — visual spot-check, update if broken
  • Unit tests asserting mint/amber hex or “no blue” (designTokens.test.ts, chart canvas theme stubs)
  • make lint-frontend / make test-frontend / python3 scripts/check_design_tokens.py
  • Manual matrix (both themes): Swap, Limit, Trade, Pool, Portfolio, Charts, Trader, Protocol, Tiers, Create, Mint, Connect Wallet modal, Risk ack, toasts
  • Responsive: desktop header, tablet compact More, mobile bottom nav + More sheet
  • A11y: focus rings, contrast for blue/gold CTAs on light+dark

R. Docs / skills coordination (companion work)

  • docs/design-system.md
  • docs/frontend.md (if it describes warm glass)
  • skills/AGENTS_FRONTEND_DESIGN_SYSTEM.md
  • skills/AGENTS_FRONTEND_THEME_TOGGLE.md
  • skills/AGENTS_FRONTEND_SHELL_NAV.md / RESPONSIVE_HEADER / WALLET_* / TRADE_PAGE_LAYOUT / LIMIT_ORDER_* as needed for IA/chrome wording
  • Sequence companion docs issue so agents don’t regress to amber-only rules

Suggested implementation order

  1. Tokens (theme-*.css) + bootstrap + check_design_tokens.py + Tailwind aliases
  2. Primitives in index.css (buttons, shells, inputs, tabs, menus, modals)
  3. Brand assets + index.html + Layout logo
  4. Limit IA simplification on /limits
  5. Sweep pages/components for leftover warm inline colors
  6. Charts/theme-aware canvas colors
  7. Tests/E2E expectation updates + manual theme matrix

Out of scope (per issue): contracts, indexer protocol, weakening safety/error gates, committing .tmp-brand-concepts/.

## Implementation checklist — every surface to update (#488) Target palette (from `.tmp-brand-concepts/palette.md`): dark `#0d111c` / light `#f4f6fb`, blue primary `~#448aff`, gold brand `~#e8b84a`. No brown/amber page fade. Token-first; keep safety gates and required legal copy. --- ### A. Design tokens & global CSS - [ ] `frontend-dapp/src/theme-dark.css` — redefine all `--bg-*`, `--surface-*`, `--ink*`, `--line*`, `--mint`/`--accent` roles (or introduce `--blue`/`--gold`), `--panel-bg*`, `--card-bg`, `--menu-bg`, `--hero-glow`, `--accent-gradient`, `--focus-ring`, scroll thumbs, shadows, alert tokens - [ ] `frontend-dapp/src/theme-light.css` — same token set for light (`#f4f6fb`-class, cool lines/ink) - [ ] `frontend-dapp/src/index.css` — restyle every primitive/chrome class to flatter QuickSwap-like surfaces (see §B) - [ ] `frontend-dapp/public/bootstrap/trade-bootstrap.css` — must match hydrated tokens (no amber→blue FOUC on `/trade`) - [ ] `frontend-dapp/public/bootstrap/theme.js` — confirm `data-theme` bootstrap still correct with new defaults - [ ] `frontend-dapp/public/bootstrap/trade-shell.js` + `trade-bootstrap-fixture.html` — shell first-paint chrome - [ ] `frontend-dapp/tailwind.config.js` — remap `mint`/`accent` aliases (and add `blue`/`gold` if introduced) - [ ] `frontend-dapp/src/designTokens.test.ts` — expect new token values / theme selectors - [ ] `scripts/check_design_tokens.py` — **invert #416 blue ban**; assert blue+gold system + bootstrap/theme alignment - [ ] `docs/design-system.md` — rewrite Cyberminimalist warm-glass → blue+gold QuickSwap-inspired - [ ] `skills/AGENTS_FRONTEND_DESIGN_SYSTEM.md` — stop enforcing “no blue primary / warm mint only” - [ ] `skills/AGENTS_FRONTEND_THEME_TOGGLE.md` — token/bootstrap notes for new palette - [ ] Any `.cursor`/agent rules that still ban parallel blue primary (issue supersedes) --- ### B. Global CSS primitives / chrome classes (`index.css`) **Buttons / CTAs** - [ ] `.btn-primary` - [ ] `.btn-primary.btn-cta` (+ hover / focus-visible) - [ ] `.btn-muted` - [ ] `.btn-disabled` **Surfaces / cards / inputs / tabs / badges** - [ ] `.shell-panel` / `.shell-panel-strong` - [ ] `.card-glass` - [ ] `.input-glass` / `.select-glass` - [ ] `.label-glass` - [ ] `.tab-glass` / `.tab-glass-active` / `.tab-glass-inactive` - [ ] `.badge-glass` / `.badge-glass-accent` / `.badge-glass-success` / `.badge-glass-warning` / `.badge-glass-error` **Swap IO stack** - [ ] `.swap-io-stack` - [ ] `.swap-io-card-pay` / `.swap-io-card-receive` - [ ] `.swap-io-amount-input` (+ focus-visible) **Token / portal listbox** - [ ] `.token-select-root` / `.token-select-trigger` / `.token-select-chevron` - [ ] `.token-select-dropdown` / `.token-select-option*` (hover, active, keyboard-active) **Alerts / status** - [ ] `.alert-error` / `.alert-success` / `.alert-warning` / `.alert-info` **App shell** - [ ] `.app-shell` / `.app-hero-glow` / page background grid - [ ] `.app-top-sticky` / `.app-header-shell` / `.app-header` - [ ] `.app-brand` / `.app-brand-mark` / `.app-brand-logo` / `.app-brand-copy` / `.app-brand-title` - [ ] `.app-desktop-nav` / `.app-nav-link` / `.app-nav-link-active` / `.app-nav-link-label` - [ ] `.app-more-wrap` / `.app-more-trigger` - [ ] `.app-menu` / `.app-menu-link` / `.app-menu-dismiss` - [ ] `.app-header-controls` / `.app-header-theme-group` - [ ] `.app-main-shell` / `.app-main` / `.app-main-content` - [ ] `.app-footer-shell` / `.app-footer` / `.app-footer-copy` / `.app-footer-title` - [ ] `.app-footer-theme-group` / `.app-footer-theme-button` / `.app-footer-theme-button-active` - [ ] `.app-mobile-nav-shell` / `.app-mobile-link` / `.app-mobile-link-active` - [ ] `.app-mobile-more` / `.app-mobile-more-active` / `.app-mobile-more-sheet` / `.app-mobile-theme-group` - [ ] `.app-mobile-legal-strip` / `.app-legal-footer-notice` - [ ] `.app-env-ribbon` (+ `--local` / `--testnet` / `--mainnet` + light overrides) **Wallet chrome** - [ ] `.wallet-trigger` / `.wallet-trigger-connected` / `.wallet-trigger-icon` - [ ] `.wallet-chip-network` / `.wallet-chip-network-label` - [ ] `.wallet-dropdown-wrap` / `.wallet-menu` / `.wallet-menu-item` - [ ] `.network-badge` / `.network-badge-active` - [ ] `.wallet-option-card` / `.wallet-option-install-cta` **Modals / overlays** - [ ] `.app-modal-portal-root` / `.app-modal-backdrop` / `.app-modal-panel` - [ ] `.app-modal-header` / `.app-modal-header--blocking` **Misc chrome** - [ ] `.copy-button` / `.explorer-link` focus rings - [ ] Custom scrollbar (`::-webkit-scrollbar*`) — replace brown thumbs - [ ] Animations that assume warm glow (`.animate-fade-in-up`, shimmer, etc.) if tinted - [ ] All `:focus-visible` rings using `--focus-ring` (a11y contrast on blue/gold) --- ### C. Brand assets & HTML meta - [ ] `frontend-dapp/public/assets/cl8y-dex-glass-logo.svg` → new circular blue disc + gold “8” mark - [ ] `frontend-dapp/public/assets/cl8y-dex-header-logo.png` - [ ] `frontend-dapp/public/assets/cl8y-logo.png` - [ ] `frontend-dapp/public/logo.png` / `logo-full.png` - [ ] `frontend-dapp/public/favicon-16.png` / `favicon-32.png` / `favicon.png` / `favicon.ico` - [ ] `frontend-dapp/public/og-image.png` (~1200×630; optional light OG) - [ ] `frontend-dapp/index.html` — favicon links, `og:image`, Twitter image/title/description - [ ] `Layout.tsx` brand `<img>` path (currently `/assets/cl8y-dex-glass-logo.svg`) - [ ] Optional: tinted nav icons under `public/assets/icon-*.png` if they clash - [ ] Optional: custom cursors under `public/assets/cursor-*.png` if warm-tinted - [ ] Do **not** commit `.tmp-brand-concepts/` — promote finalized assets into `public/` only - [ ] Leave `public/chains/*` alone unless brand-confused with gold/network chip --- ### D. Routes / pages (every routed scene) | Route | Page file | Checklist | |-------|-----------|-----------| | `/` | `SwapPage.tsx` | [ ] shell, IO cards, slippage/deadline chips, settings panel, route/fee rows, CTA, banners | | `/pool` | `PoolPage.tsx` | [ ] provide/withdraw tabs, inputs, pre-submit, CTAs, fee-discount banner | | `/limits` | `LimitOrdersPage.tsx` | [ ] **IA rewrite** to rate→pay→receive→expiry; strip on-card instructional paragraphs; chips; place card | | `/trade`, `/trade/:pair` | `TradePage.tsx` | [ ] workspace chrome, bootstrap first paint, ticket/book/chart panels | | `/portfolio` | `PortfolioPage.tsx` | [ ] connect prompt, LP/limits sections, activity shell | | `/charts` | `ChartsPage.tsx` | [ ] pair search/sort selects, stats grid, leaderboard tabs, mint/accent inline colors | | `/trader`, `/trader/:address` | `TraderPage.tsx` | [ ] profile header, stats, positions tables | | `/protocol` | `ProtocolPage.tsx` | [ ] panels, address rows, accent links | | `/tiers` | `TiersPage.tsx` | [ ] tier cards, CTAs, accent/mint usage | | `/create` | `CreatePairPage.tsx` | [ ] form chrome, token selectors, CTA | | `/mint` | `MintPage.tsx` | [ ] faucet UI chrome (More menu only when enabled) | | redirects | `/my-portfolio` → `/portfolio` | [ ] n/a visual (verify still works) | --- ### E. Layout / navigation / chrome components - [ ] `components/common/Layout.tsx` — header, More menu, mobile bottom nav + More sheet, logo, footer - [ ] `components/common/AppShellNavLink.tsx` - [ ] `components/common/navItems.ts` — no color logic, but verify active states after CSS change - [ ] `components/common/ThemeSegmentedControl.tsx` — dark/light segmented control (header + mobile sheet) - [ ] `components/common/TradeOnboardingStrip.tsx` - [ ] `components/common/AmountBalanceActions.tsx` — Max / percentage chips - [ ] `components/common/ErrorBoundary.tsx` - [ ] `components/common/LazyRoute.tsx` — loading fallback chrome - [ ] `components/common/LcdConnectivityBanner.tsx` - [ ] `components/common/LcdQueryGate.tsx` - [ ] `components/common/MarketDataLoadingStatus.tsx` - [ ] `components/common/MarketDataServiceOutageBanner.tsx` - [ ] `components/common/TerraClassicTxFeeHint.tsx` - [ ] `components/common/RouteContentReadyMarker.tsx` (if visible) --- ### F. Modals / dialogs / overlays - [ ] `components/ui/Modal.tsx` — shared portal panel/backdrop - [ ] `components/wallet/WalletModal.tsx` — Connect Wallet options - [ ] `components/legal/RiskAcknowledgementModal.tsx` — first-visit ack (**keep required copy**) - [ ] `components/swap/ExpertModeModal.tsx` - [ ] Toast viewport styling in `contexts/ToastContext.tsx` (success/error/info borders/bg — currently ad-hoc Tailwind) - [ ] `components/ui/TxResultAlert.tsx` - [ ] Menu dismiss overlay `.app-menu-dismiss` (Layout) --- ### G. Menus / dropdowns / selectors / listboxes / popovers - [ ] Header **More** dropdown (`.app-menu`) - [ ] Mobile **More** sheet (`.app-mobile-more-sheet`) - [ ] `components/wallet/WalletButton.tsx` + `WalletDropdownMenuItems.tsx` — connected wallet menu - [ ] `components/wallet/NetworkBadge.tsx` / `WalletChipNetworkIndicator.tsx` / `WalletLuncBalance.tsx` — **gold** network/brand accents - [ ] `components/ui/TokenSelect.tsx` — trigger + portal options - [ ] `components/ui/MenuSelect.tsx` - [ ] `components/ui/PortalListbox.tsx` (+ keyboard/position helpers CSS consumers) - [ ] `components/trade/PairSearchSelect.tsx` - [ ] `components/trade/TokenSearchSelect.tsx` - [ ] `components/charts/PriceChartOverlayMenu.tsx` — chart indicator/overlay popover - [ ] Native `<select>` / `.select-glass` usages on Charts (sort/order) and elsewhere - [ ] `components/trade/TradeWorkspaceDisclosure.tsx` — disclosure/accordion chrome --- ### H. Pills / chips / segmented controls / tabs - [ ] Theme segmented control (Dark / Light) - [ ] Swap slippage preset chips (`.tab-glass`) - [ ] Swap transaction deadline chips - [ ] Limit % amount chips / expiry presets - [ ] Limit bid/ask side selector (`LimitOrderBidAskSideSelector.tsx`) - [ ] Trade order ticket Market / Limit tabs - [ ] Trade market slippage presets - [ ] Pool Provide / Withdraw tabs - [ ] Charts leaderboard sort tabs - [ ] Fee-tier / badge pills (`Badge.tsx` + `.badge-glass*`) - [ ] Pair list badges (`utils/pairListBadges.ts` consumers) - [ ] Environment ribbon pills (local/testnet/mainnet) - [ ] Active nav pills (desktop + mobile) --- ### I. User inputs / forms / fields - [ ] Swap You Pay / You Receive amount inputs - [ ] Swap custom slippage + custom deadline inputs - [ ] `SwapAdvancedSettings.tsx` fields - [ ] Pool amount inputs + pair/token selectors - [ ] Create Pair form inputs - [ ] Mint faucet inputs/buttons - [ ] `LimitOrderPriceField.tsx` (“When 1 {token} is worth”) - [ ] `LimitOrderEscrowAmountField.tsx` - [ ] `LimitOrderExpiryField.tsx` - [ ] `LimitOrderAdvancedLimitSettings.tsx` - [ ] `LimitOrderLadderPanel.tsx` rung inputs - [ ] Trade market book-leg / max-makers inputs - [ ] Trade cancel-limit order id input - [ ] Charts pair search input - [ ] Token/pair search query boxes inside selects - [ ] All `input-glass` / decimal amount patterns (`AGENTS_FRONTEND_DECIMAL_AMOUNT_INPUT`) --- ### J. Swap components - [ ] `SwapPage.tsx` scene (centered familiar Pay/Receive card) - [ ] `SwapAdvancedSettings.tsx` - [ ] `SwapPreSubmitSummary.tsx` - [ ] `ExpertModeModal.tsx` - [ ] Fee discount CTA/warning on swap (`FeeDiscountRegistryWarning.tsx`, `FeeDiscountUnregisteredCta.tsx`) --- ### K. Limit / trade components (layout + chrome) - [ ] `LimitOrdersPage.tsx` — primary place card IA (concept §04/§05) - [ ] `LimitOrderPriceField.tsx` - [ ] `LimitOrderBidAskSideSelector.tsx` - [ ] `LimitOrderEscrowAmountField.tsx` - [ ] `LimitOrderEscrowPlaceGuardMessage.tsx` (**keep blocking errors visible**) - [ ] `LimitOrderExpiryField.tsx` - [ ] `LimitOrderPreSubmitSummary.tsx` - [ ] `LimitOrderAdvancedLimitSettings.tsx` — progressive disclosure - [ ] `LimitOrderLadderPanel.tsx` — progressive disclosure - [ ] `LimitOrderMyPlacementsPanel.tsx` - [ ] `TradeOrderTicket.tsx` - [ ] `TradeMarketOrderPanel.tsx` - [ ] `OrderBookPanel.tsx` (bid/ask row colors stay semantic; chrome/borders retoken) - [ ] `TradeRecentTradesSection.tsx` - [ ] `WalletIndexerHistoryPanel.tsx` - [ ] `TradePageWorkspaceSkeleton.tsx` / `TradePageRouteFallback.tsx` - [ ] `TradePairSwitchStatus.tsx` - [ ] `TradeMarketDataUnavailableNotice.tsx` - [ ] `InvalidPairLinkNotice.tsx` / `PairNotFoundLinkNotice.tsx` - [ ] `PairSearchSelect.tsx` / `TokenSearchSelect.tsx` --- ### L. Pool / portfolio / trader / protocol / tiers / mint - [ ] `PoolPage.tsx` + `PoolPreSubmitSummary.tsx` - [ ] `PortfolioPage.tsx` + `PortfolioLpOverviewSection.tsx` + `PortfolioOpenLimitsSection.tsx` - [ ] `TraderPage.tsx` + `TraderSummaryStats.tsx` + `TraderPositionsTable.tsx` + `PnlValue.tsx` - [ ] `ProtocolPage.tsx` - [ ] `TiersPage.tsx` - [ ] `MintPage.tsx` - [ ] Fee-discount registry warning/CTA on pool/swap pages --- ### M. Charts / visual scenes - [ ] `ChartsPage.tsx` layout chrome - [ ] `PriceChart.tsx` — toolbar, empty/loading chrome - [ ] `PriceChartLightweightCanvas.tsx` — grid/text colors from theme (replace hard `#9ca3af` if needed) - [ ] `PriceChartEmptyState.tsx` - [ ] `PriceChartOverlayMenu.tsx` - [ ] `priceChartLightweightIndicatorSync.ts` — indicator line colors vs new accent (`--focus-ring` / gold/blue) - [ ] Volume histogram up/down remain `--color-positive` / `--color-negative` (unchanged semantics) --- ### N. Shared UI kit - [ ] `Card.tsx` (`shell-panel-strong` / `card-glass`) - [ ] `Badge.tsx` - [ ] `Modal.tsx` - [ ] `TokenLogo.tsx` / `TokenDisplay.tsx` (fallback chrome only) - [ ] `TokenSelect.tsx` / `MenuSelect.tsx` / `PortalListbox.tsx` - [ ] `StatBox.tsx` / `FeeDisplay.tsx` / `AddressRow.tsx` / `CopyButton.tsx` - [ ] `TradesTable.tsx` - [ ] `Skeleton.tsx` / `Spinner.tsx` / `RetryError.tsx` - [ ] `TerraBroadcastPendingLink.tsx` / `TxResultAlert.tsx` --- ### O. Legal / env / trust chrome - [ ] `EnvironmentRibbon.tsx` - [ ] `LegalFooterNotice.tsx` - [ ] `RiskAcknowledgementModal.tsx` — restyle only; **do not bury** ack - [ ] `legalCopy.ts` — copy unchanged unless product asks --- ### P. Inline `var(--mint)` / `var(--accent)` / hard color consumers Audit and retoken every file that sets `style={{ color: 'var(--mint|accent|…)' }}` (non-exhaustive from current tree): - [ ] Pages: `SwapPage`, `PoolPage`, `LimitOrdersPage`, `TradePage`, `ChartsPage`, `PortfolioPage`, `TraderPage`, `ProtocolPage`, `TiersPage`, `CreatePairPage`, `MintPage` - [ ] Trade/limit/swap/pool/portfolio/trader/wallet/ui/common components listed above that inline token colors - [ ] Prefer CSS classes / new `--blue`/`--gold` over one-off hex --- ### Q. Tests / E2E / QA that encode the old warm look - [ ] `frontend-dapp/e2e/design-tokens-visual.spec.ts` — currently asserts warm brown page ≠ slate/blue; **rewrite expectations** - [ ] Other e2e selectors using `.shell-panel*`, `.card-glass`, `.tab-glass*` (swap/limit/pool helpers) — visual spot-check, update if broken - [ ] Unit tests asserting mint/amber hex or “no blue” (`designTokens.test.ts`, chart canvas theme stubs) - [ ] `make lint-frontend` / `make test-frontend` / `python3 scripts/check_design_tokens.py` - [ ] Manual matrix (both themes): Swap, Limit, Trade, Pool, Portfolio, Charts, Trader, Protocol, Tiers, Create, Mint, Connect Wallet modal, Risk ack, toasts - [ ] Responsive: desktop header, tablet compact More, mobile bottom nav + More sheet - [ ] A11y: focus rings, contrast for blue/gold CTAs on light+dark --- ### R. Docs / skills coordination (companion work) - [ ] `docs/design-system.md` - [ ] `docs/frontend.md` (if it describes warm glass) - [ ] `skills/AGENTS_FRONTEND_DESIGN_SYSTEM.md` - [ ] `skills/AGENTS_FRONTEND_THEME_TOGGLE.md` - [ ] `skills/AGENTS_FRONTEND_SHELL_NAV.md` / `RESPONSIVE_HEADER` / `WALLET_*` / `TRADE_PAGE_LAYOUT` / `LIMIT_ORDER_*` as needed for IA/chrome wording - [ ] Sequence companion docs issue so agents don’t regress to amber-only rules --- ### Suggested implementation order 1. Tokens (`theme-*.css`) + bootstrap + `check_design_tokens.py` + Tailwind aliases 2. Primitives in `index.css` (buttons, shells, inputs, tabs, menus, modals) 3. Brand assets + `index.html` + Layout logo 4. Limit IA simplification on `/limits` 5. Sweep pages/components for leftover warm inline colors 6. Charts/theme-aware canvas colors 7. Tests/E2E expectation updates + manual theme matrix **Out of scope (per issue):** contracts, indexer protocol, weakening safety/error gates, committing `.tmp-brand-concepts/`.
PlasticDigits commented 2026-07-14 07:43:15 +00:00 (Migrated from gitlab.com)

Visual QA screenshots (#488)

Captured from local Vite (make dev) after blue+gold token/brand apply. LocalTerra LCD was down during capture — LCD connectivity banners appear; chrome/theme/brand still verify.

Surface Dark Light
Swap see below see below
Limits see below see below
Trade / Pool / Portfolio / Charts see below —
Header brand see below —
Wallet modal / Risk ack see below —
Favicon / OG see below —
## Visual QA screenshots (#488) Captured from local Vite (`make dev`) after blue+gold token/brand apply. LocalTerra LCD was down during capture — LCD connectivity banners appear; chrome/theme/brand still verify. | Surface | Dark | Light | |---------|------|-------| | Swap | see below | see below | | Limits | see below | see below | | Trade / Pool / Portfolio / Charts | see below | — | | Header brand | see below | — | | Wallet modal / Risk ack | see below | — | | Favicon / OG | see below | — |
PlasticDigits commented 2026-07-14 07:44:41 +00:00 (Migrated from gitlab.com)

Visual QA screenshots (#488)

Captured via Playwright against local Vite after blue+gold apply. LocalTerra LCD was unavailable during capture (connectivity banners visible); chrome, CTAs, brand mark, and theme surfaces still verify.

charts-dark.png

charts-dark

create-dark.png

create-dark

favicon-32.png

favicon-32

header-brand-dark.png

header-brand-dark

limits-dark.png

limits-dark

limits-light.png

limits-light

og-image.png

og-image

pool-dark.png

pool-dark

portfolio-dark.png

portfolio-dark

risk-ack-modal-dark.png

risk-ack-modal-dark

swap-dark.png

swap-dark

swap-light.png

swap-light

tiers-dark.png

tiers-dark

trade-dark.png

trade-dark

wallet-modal-dark.png

wallet-modal-dark

## Visual QA screenshots (#488) Captured via Playwright against local Vite after blue+gold apply. LocalTerra LCD was unavailable during capture (connectivity banners visible); chrome, CTAs, brand mark, and theme surfaces still verify. ### charts-dark.png ![charts-dark](/uploads/06a8aec8936794db4709c414f0911b65/charts-dark.png) ### create-dark.png ![create-dark](/uploads/5f9c9e29fa5d45b9fdd19926e98832cd/create-dark.png) ### favicon-32.png ![favicon-32](/uploads/e3dd703e198bda00d1f7a2bd2a542173/favicon-32.png) ### header-brand-dark.png ![header-brand-dark](/uploads/a3c5df394a91969712b5c872865220b2/header-brand-dark.png) ### limits-dark.png ![limits-dark](/uploads/a8716d19b1be9f7878285b48f11f5334/limits-dark.png) ### limits-light.png ![limits-light](/uploads/72b1af5ec268baec1828fddd7d331a26/limits-light.png) ### og-image.png ![og-image](/uploads/519536960c35be7f160e17e911127800/og-image.png) ### pool-dark.png ![pool-dark](/uploads/babbe3682faa96a4691d2fbae78c82cd/pool-dark.png) ### portfolio-dark.png ![portfolio-dark](/uploads/9f296117802810a757edf393d16b1a15/portfolio-dark.png) ### risk-ack-modal-dark.png ![risk-ack-modal-dark](/uploads/ba4fd317029abbb7747f106530eeaef6/risk-ack-modal-dark.png) ### swap-dark.png ![swap-dark](/uploads/c3bf75d224dbee2c945b23e140aaaeb2/swap-dark.png) ### swap-light.png ![swap-light](/uploads/a9a3247acf3c0abc4fc006a1922b93ba/swap-light.png) ### tiers-dark.png ![tiers-dark](/uploads/348558c1b91c1aa4e437ef533ff11269/tiers-dark.png) ### trade-dark.png ![trade-dark](/uploads/acb73f670a9da8533f7f7670134d8ede/trade-dark.png) ### wallet-modal-dark.png ![wallet-modal-dark](/uploads/d14d6821bd8698209f0775a9b07a52f7/wallet-modal-dark.png)
PlasticDigits commented 2026-07-14 07:46:52 +00:00 (Migrated from gitlab.com)

mentioned in commit 1b638d4be9

mentioned in commit 1b638d4be959cf963fdf2e494790003d8fd80d2f
PlasticDigits commented 2026-07-14 07:46:54 +00:00 (Migrated from gitlab.com)

mentioned in merge request !1023

mentioned in merge request !1023
PlasticDigits commented 2026-07-14 07:47:05 +00:00 (Migrated from gitlab.com)

Implementation status (MR !1023)

Branch: feat/488-blue-gold-design-system → https://gitlab.com/PlasticDigits/cl8y-dex-terraclassic/-/merge_requests/305

Acceptance criteria

  • Dark/light cool blue surfaces (no brown/amber page fade as dominant identity)
  • Blue CTAs + gold brand/network accents consistent
  • Limit default place UI: When 1 {token} is worth → Pay → Expiry; instructional paragraphs minimized
  • Shared chrome restyled via tokens/primitives
  • Logo / favicon / OG updated
  • trade-bootstrap.css aligned (no warm FOUC tokens)
  • check_design_tokens.py + lint + affected unit tests
  • Screenshots posted on this issue + docs/qa/issue-488/

Not done / follow-ups

  • Full LocalTerra-connected place-card screenshot (LCD was down during capture — banners visible)
  • Explicit Receive row on limits (Pay label + side selector cover flow; concept board also showed Receive)
  • Price % chips (0%/+1%/+5%/+10%) from concept — not implemented
  • Broader docs/skills terminology sweep → companion #489
  • Optional: retint warm custom cursors / nav icons if they still clash

Accent decision shipped: blue CTAs + gold brand/network.

## Implementation status (MR !1023) Branch: `feat/488-blue-gold-design-system` → https://gitlab.com/PlasticDigits/cl8y-dex-terraclassic/-/merge_requests/305 ### Acceptance criteria - [x] Dark/light cool blue surfaces (no brown/amber page fade as dominant identity) - [x] Blue CTAs + gold brand/network accents consistent - [x] Limit default place UI: When 1 {token} is worth → Pay → Expiry; instructional paragraphs minimized - [x] Shared chrome restyled via tokens/primitives - [x] Logo / favicon / OG updated - [x] `trade-bootstrap.css` aligned (no warm FOUC tokens) - [x] `check_design_tokens.py` + lint + affected unit tests - [x] Screenshots posted on this issue + `docs/qa/issue-488/` ### Not done / follow-ups - [ ] Full LocalTerra-connected place-card screenshot (LCD was down during capture — banners visible) - [ ] Explicit Receive row on limits (Pay label + side selector cover flow; concept board also showed Receive) - [ ] Price % chips (`0%/+1%/+5%/+10%`) from concept — not implemented - [ ] Broader docs/skills terminology sweep → companion [#489](https://gitlab.com/PlasticDigits/cl8y-dex-terraclassic/-/work_items/489) - [ ] Optional: retint warm custom cursors / nav icons if they still clash Accent decision shipped: **blue CTAs** + **gold** brand/network.
PlasticDigits commented 2026-07-14 07:52:17 +00:00 (Migrated from gitlab.com)
  • There are still excss browns used clearly visible in the screenshots for both light and dark themes. These do not create an elegant gold highlight effect, and instead create a dirty brouwn feel. Gold should only be used in very tiny amounts such as in borders to create an elegant emphasis, not as a dirty brown background.
  • The screenshots show exccessive text copy. These disclosures are for all practical purposes useless, as they are triggering excess cognitive overload in the user, and must be replaced with tight, extremely limited copy. The site should be made for humans, not ai readers - ai agents can always refer to docs, so the copy does not need to be on the page.
  • The OG image should be an opegrapgh image describing the site to people seeing the link on social media, not describting the theme. It needs to emphasize easy swaps, limit orders, and terraclassic native experience, not the color theme. Howver, the design and layout is correct, only the copy needs to be fixed.
  • The screenshots show the dapp was not properly connected to the indexer when they were taken. The frontend must be run locally but with remote connection to indexer.dex.cl8y.com.
  • The swap and limit order layouts do not comply with the community approved designs from .tmp-brand-concepts or to the the quickswap layouts. Check quickswap and screenshot limits and swaps for inspiration. Notice how they do not have excessive discolsure copy and have a much simpler design. Additionally, follow our approved .tmp-brand-concepts for layout and design.
- There are still excss browns used clearly visible in the screenshots for both light and dark themes. These do not create an elegant gold highlight effect, and instead create a dirty brouwn feel. Gold should only be used in very tiny amounts such as in borders to create an elegant emphasis, not as a dirty brown background. - The screenshots show exccessive text copy. These disclosures are for all practical purposes useless, as they are triggering excess cognitive overload in the user, and must be replaced with tight, extremely limited copy. The site should be made for humans, not ai readers - ai agents can always refer to docs, so the copy does not need to be on the page. - The OG image should be an opegrapgh image describing the site to people seeing the link on social media, not describting the theme. It needs to emphasize easy swaps, limit orders, and terraclassic native experience, not the color theme. Howver, the design and layout is correct, only the copy needs to be fixed. - The screenshots show the dapp was not properly connected to the indexer when they were taken. The frontend must be run locally but with remote connection to indexer.dex.cl8y.com. - The swap and limit order layouts do not comply with the community approved designs from .tmp-brand-concepts or to the the quickswap layouts. Check quickswap and screenshot limits and swaps for inspiration. Notice how they do not have excessive discolsure copy and have a much simpler design. Additionally, follow our approved .tmp-brand-concepts for layout and design.
PlasticDigits commented 2026-07-14 07:52:42 +00:00 (Migrated from gitlab.com)

mentioned in commit 68dc7d3f9a

mentioned in commit 68dc7d3f9a8f19d046c2410693abfc91f23ebfa0
PlasticDigits commented 2026-07-14 08:35:37 +00:00 (Migrated from gitlab.com)

mentioned in commit 488a5cfc25

mentioned in commit 488a5cfc259bdd05e1e07e2767796304632f049b
PlasticDigits commented 2026-07-14 08:35:59 +00:00 (Migrated from gitlab.com)

mentioned in merge request !1024

mentioned in merge request !1024
PlasticDigits commented 2026-07-14 08:40:05 +00:00 (Migrated from gitlab.com)

mentioned in commit df1af539fe

mentioned in commit df1af539fef385b57f7cbc39e46ca7cace5e4f77
PlasticDigits (Migrated from gitlab.com) closed this issue 2026-07-14 08:43:37 +00:00
PlasticDigits commented 2026-07-14 09:00:18 +00:00 (Migrated from gitlab.com)

mentioned in merge request !1026

mentioned in merge request !1026
PlasticDigits commented 2026-07-14 11:12:37 +00:00 (Migrated from gitlab.com)

mentioned in issue #490

mentioned in issue #490
PlasticDigits commented 2026-07-15 04:03:41 +00:00 (Migrated from gitlab.com)

mentioned in issue #494

mentioned in issue #494
PlasticDigits commented 2026-08-15 13:18:35 +00:00 (Migrated from gitlab.com)

mentioned in issue #527

mentioned in issue #527
PlasticDigits commented 2026-08-15 21:45:47 +00:00 (Migrated from gitlab.com)

mentioned in issue #528

mentioned in issue #528
PlasticDigits commented 2026-08-19 11:53:24 +00:00 (Migrated from gitlab.com)

mentioned in issue #578

mentioned in issue #578
PlasticDigits commented 2026-08-20 01:38:20 +00:00 (Migrated from gitlab.com)

mentioned in merge request !1097

mentioned in merge request !1097
PlasticDigits commented 2026-08-22 10:59:13 +00:00 (Migrated from gitlab.com)

mentioned in issue #593

mentioned in issue #593
PlasticDigits commented 2026-08-26 01:06:41 +00:00 (Migrated from gitlab.com)

mentioned in issue #651

mentioned in issue #651
PlasticDigits commented 2026-08-26 01:11:06 +00:00 (Migrated from gitlab.com)

mentioned in issue #653

mentioned in issue #653
PlasticDigits commented 2026-08-26 01:37:11 +00:00 (Migrated from gitlab.com)

mentioned in merge request !1151

mentioned in merge request !1151
PlasticDigits commented 2026-08-26 04:08:08 +00:00 (Migrated from gitlab.com)

mentioned in issue #659

mentioned in issue #659
PlasticDigits commented 2026-08-26 04:18:46 +00:00 (Migrated from gitlab.com)

mentioned in issue #667

mentioned in issue #667
PlasticDigits commented 2026-08-26 04:19:23 +00:00 (Migrated from gitlab.com)

mentioned in issue #669

mentioned in issue #669
PlasticDigits commented 2026-08-26 04:20:46 +00:00 (Migrated from gitlab.com)

mentioned in issue #670

mentioned in issue #670
PlasticDigits commented 2026-08-26 04:22:42 +00:00 (Migrated from gitlab.com)

mentioned in issue #671

mentioned in issue #671
PlasticDigits commented 2026-08-26 04:23:24 +00:00 (Migrated from gitlab.com)

mentioned in issue #672

mentioned in issue #672
PlasticDigits commented 2026-08-28 05:28:47 +00:00 (Migrated from gitlab.com)

mentioned in issue #693

mentioned in issue #693
PlasticDigits commented 2026-08-29 14:16:58 +00:00 (Migrated from gitlab.com)

mentioned in issue #705

mentioned in issue #705
Sign in to join this conversation.
No milestone
No project
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
code/cl8y-dex-terraclassic#488
No description provided.