docs: Align design docs, skills, patterns & terminology with simplified blue+gold UX #489
Labels
No labels
agent:fix_bugfix
agent:fix_conflicts
agent:fix_security
agent:gap_analysis
agent:implement
agent:implement
agent:implement
agent:open_issues
agent:ready
agent:research
agent:security_audit
agent:verify
architecture
backend
blocker:hybrid
blocker:launch
blocker:limit-orders
blocker:v2
block:log_only
block:security
bug
ci
contracts
correctness
deploy
dev
devops
docs
documentation
duplicate
e2e
enhancement
epic
feature
frontend
functional-completion
gas
good first issue
governance
help wanted
high-risk
hooks
hybrid
indexer
infra
infrastructure
integrators
invalid
launch-blocker
limit-orders
localnet
localterra
low priority
missing-implementation
needs-design
ops
performance
priority
high
priority
medium
product
qa
QA
question
ready
ready
research
scripts
security
security-hardening
smartcontracts
tech-debt
testing
ux
UX
v2
verification
wontfix
No milestone
No project
No assignees
1 participant
Notifications
Due date
No due date set.
Dependencies
No dependencies set.
Reference
code/cl8y-dex-terraclassic#489
Loading…
Add table
Add a link
Reference in a new issue
No description provided.
Delete branch "%!s()"
Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?
Summary
Update design documentation, agent skills, patterns, standards, and terminology to match the community-approved QuickSwap-inspired blue + gold concept and to minimize cognitive overload: prefer familiar, simple UX; hide details in docs (or, only when absolutely necessary, a single-word link to docs)—not long on-UI explanations.
Companion implementation issue: #488 (UI theme + brand assets). This issue is the source-of-truth / agent-guardrail update so future work does not regress to the warm amber “glass + mint” rules or over-explanatory trade/limit copy.
Community signals:
Current codebase
Authoritative design docs (amber / glass / anti-blue)
docs/design-system.md— “Cyberminimalist Glass System”; warm--mintaccents; documents removal of blueprimary/dexpalettes (#415/#416).docs/frontend.md— engineering invariants, WCAG, trade bootstrap, many UI behaviors.QA_TEMPLATE.md§ design/visual checks (if still amber-oriented).Agent skills enforcing old visual + copy patterns
skills/AGENTS_FRONTEND_DESIGN_SYSTEM.md— rule: do not introduce a parallel blue Tailwind primary.AGENTS_FRONTEND_TRADE_PAGE_LAYOUT.mdAGENTS_FRONTEND_TRADE_ONBOARDING_IA.mdAGENTS_FRONTEND_LIMIT_ORDER_PRICE.mdAGENTS_FRONTEND_LIMIT_ORDER_SIDE_SELECTOR.mdAGENTS_FRONTEND_SWAP_ROUTE_DISPLAY.mdAGENTS_FRONTEND_SWAP_SAFETY_CTA.mdAGENTS_FRONTEND_POOL_SIGNING_CONFIRMATION.md(already notes cognitive overload — extend principle globally)AGENTS_FRONTEND_RISK_DISCLAIMERS.md(must stay compliant while avoiding redundant NFA walls)AGENTS_FRONTEND_USER_ERRORS.md,AGENTS_FRONTEND_THEME_TOGGLE.md, shell/nav/wallet skills as needed for terminologyscripts/check_design_tokens.py— may encode old token names/expectations.Terminology today
--mint/ “warm accent”,*-glassprimitives, “shell-panel”, neo→glass migration language.Why this is needed
mint= gold? blue primary restored?) will cause inconsistent MRs unless renamed/aliased in docs deliberately.Constraints & guardrails
AGENTS_FRONTEND_TRUST_BOUNDARIES.md), and MEV/posture skills stay authoritative.docs/*; if a UI affordance is unavoidable, prefer a single-word control (e.g.Docs) pointing to GitLab/pages docs—not multi-sentence tooltips everywhere.AGENTS.mdrelated playbooks list if new skill names appear.Relevant files
docs/design-system.md,docs/frontend.md, QA templates referencing visualsskills/AGENTS_FRONTEND_DESIGN_SYSTEM.md, trade/limit/swap/onboarding/risk/theme/header skills underskills/AGENTS_FRONTEND_*.mdscripts/check_design_tokens.py, any docs-drift scripts.tmp-brand-concepts/README.md+ palette (feedback only; cite principles, don’t require the temp folder in CI)Recommended direction
A. Design system rewrite
btn-primary,card-glass, …) vs visual refresh only.B. Cognitive-load standard (new shared principle)
Add a short UX writing / density section (design-system + skill) with rules such as:
C. Terminology glossary
Publish a glossary used in skills + frontend.md, e.g.:
Align component/skill names to glossary where cheap; avoid massive renames of React symbols unless necessary.
D. Skill sweep
AGENTS_FRONTEND_DESIGN_SYSTEM.mdverify steps for new tokens.Acceptance criteria
docs/design-system.mddescribes blue+gold dual theme and familiar DEX layout principles; amber-as-identity is marked superseded.AGENTS_FRONTEND_DESIGN_SYSTEM.mdno longer forbids blue primary; tokens/rules match #488.docs/frontend.md(and QA template if needed) updated for theme/bootstrap/visual QA under the new system.Test plan (all paths)
parallel blue, “warm accent only”, brown/amber identity as required) and fix or historicize.AGENTS_FRONTEND_DESIGN_SYSTEM.md, a new contributor can implement a button/card without reading conflicting rules.check_design_tokens.py/ docs checkers updated if they assert old token semantics; run them green.DOCS_GITLAB_BASE/ FAQ hrefs still valid.Test plan — attack / hack / abuse vectors
Verification criteria
docs/design-system.md+AGENTS_FRONTEND_DESIGN_SYSTEM.mdand correctly describe blue primary, gold accents, and no-brown-identity without consulting the temp concept folder.rg -n 'parallel blue|warm accent|Cyberminimalist' skills docsshows only intentional historical references or updated wording.marked as related to #488
mentioned in merge request !1023
mentioned in issue #488
mentioned in commit
9e047ade12mentioned in merge request !1026
Acceptance checklist progress (#489 / MR !1026)
docs/design-system.mddescribes blue+gold dual theme; amber-as-identity supersededAGENTS_FRONTEND_DESIGN_SYSTEM.mdno longer forbids blue primary; tokens match #488docs/frontend.md+ QA template updated for theme/bootstrap/visual QAAlso done in this MR (beyond pure docs)
/tradeticket instructional chrome (Side/Limit/Market) and cool blue action wash so UI matches the documented standarddocs/qa/issue-489/Not in scope / deferred
Visual QA screenshots (#489)
Captured via Playwright against local Vite with
VITE_INDEXER_URL=https://indexer.dex.cl8y.com.Branch:
docs/489-design-docs-skills-alignment· MR !1026Verified
Also in repo:
docs/qa/issue-489/header-dark.png
header-light.png
limits-dark.png
limits-light.png
limits-place-dark.png
limits-place-light.png
risk-ack-modal-dark.png
swap-dark.png
swap-light.png
trade-dark.png
trade-light.png
trade-ticket-dark.png
trade-ticket-light.png
wallet-modal-dark.png
mentioned in commit
193c643f8cmentioned in issue #490
mentioned in merge request !1037
mentioned in merge request !1039
mentioned in commit
9071be6ef4mentioned in issue #524
marked as related to #524
mentioned in issue #527
mentioned in issue #528
mentioned in issue #531
mentioned in issue #530
mentioned in issue #533
mentioned in issue #541
mentioned in issue #542
mentioned in issue #544
mentioned in issue #547
marked as related to #547
mentioned in issue #546
mentioned in issue #548
mentioned in issue #550
marked as related to #550
mentioned in issue #556
mentioned in issue #557
mentioned in issue #559
mentioned in issue #561
mentioned in issue #562
marked as related to #562
mentioned in issue #563
mentioned in issue #564
mentioned in issue #565
mentioned in issue #567
mentioned in issue #569
mentioned in issue #570
mentioned in issue #571
mentioned in issue #572
mentioned in issue #574
mentioned in issue #575
mentioned in issue #576
mentioned in issue #586
mentioned in issue #587
mentioned in issue #593
mentioned in issue #598
mentioned in issue #599
mentioned in issue #619
mentioned in issue #630
mentioned in issue #632
mentioned in issue #633
mentioned in issue #634
mentioned in issue #628
mentioned in issue #651
mentioned in issue #652
mentioned in issue #653
mentioned in merge request !1151
mentioned in issue #655
mentioned in issue #656
mentioned in issue #657
marked as related to #657
mentioned in issue #658
mentioned in issue #659
mentioned in issue #660
marked as related to #660
mentioned in issue #661
mentioned in issue #662
mentioned in issue #663
mentioned in issue #664
mentioned in issue #665
mentioned in issue #667
mentioned in issue #668
mentioned in issue #669
mentioned in issue #670
marked as related to #670
mentioned in issue #671
mentioned in issue #672
mentioned in issue #677
mentioned in issue #678
marked as related to #678
mentioned in issue #679
mentioned in issue #681
mentioned in issue #682
mentioned in issue #683
mentioned in issue #689
mentioned in issue #690
mentioned in issue #692
mentioned in issue #693
mentioned in issue #703
mentioned in issue #711
mentioned in issue #713
mentioned in issue #715
mentioned in issue #717