Canopy design system
Version 2 · Launch trading and documentation.
Product language
Canopy is a pons trading workspace. Use short, concrete labels: Launches, Preview buy, Positions, Orders and Activity. Keep simulation status at the trade action. Never label an indicative price as an executable quote.
Color and type
Shared colors live in data/design-tokens.json. Use a warm canvas, white panels and lime primary actions. Lavender marks paper mode. Green and red describe signed performance, with numbers and labels carrying meaning independently of color.
Use system sans-serif type, restrained headings and tabular numbers. Token logos identify assets; they do not establish endorsement or safety.
App layout
Top navigation connects discovery, positions, orders and activity. Desktop places the launch list beside a trade ticket. On phones, launch discovery comes first; selecting a token opens a trade sheet. Four bottom tabs keep primary destinations available. Desktop keeps the market table beside a persistent ticket, with tighter spacing on shorter laptop screens. Keep wallet reads separate from the paper account.
Documentation
Use the existing three-column documentation shell: grouped navigation, article and section rail. Collapse navigation on mobile. Short diagrams explain a flow with labels; avoid repeating the diagram in a caption.
Financial UI
Show source timestamps, unavailable values and stale states. Separate market cap from FDV, reference value from realized proceeds, and simulation fees from real venue charges. No invented charts, APY or success rates.
Accessibility
Use semantic links and buttons, visible focus, labeled fields, keyboard-operable dialogs and status messages. Tables can scroll without making the whole page overflow. Keep essential warnings near the relevant action.
Implementation
web/styles.css styles trading; web/docs.css styles docs. web/lp/ preserves the prior LP landing page with its own stylesheet and ledger. Generate shared tokens and SVGs with python scripts/render_docs_visuals.py.
Appearance
The header’s appearance control offers Warm Paper (default), Mist, Sage and Original. It changes canvas, surfaces and borders across trading and docs. The preference is saved locally. Accent and text colors stay consistent; the archived LP page retains its original theme. Presets live in web/appearance.css.
Apple HIG adaptation
Canopy applies Apple’s interaction principles to the web; it is not a native iOS app or a claim of full HIG compliance.
| Principle | Canopy change | Reason |
|---|---|---|
| Clear hierarchy | Launches is a task screen; one primary trade action | Keep attention on the decision |
| Legibility | Larger financial labels and system typography | Make quantities and costs easier to read |
| Accessible interaction | 44 CSS px minimum touch controls, explicit labels and focus states | Reduce missed taps and support keyboard use |
| Stable navigation | Four mobile destination tabs | Keep discovery, positions, orders and history within reach |
| Focused tasks | Trading opens in a mobile sheet after token selection | Browse first, then review one trade |
| Appropriate feedback | Inline loading, errors and a retained activity ledger | Explain state without unnecessary alerts |
| Deliberate destructive actions | Red reset action; Cancel receives initial focus | Distinguish reset from routine confirmation |
Apple’s point-based native sizing is adapted here to CSS pixels. Validate the result in actual browsers and assistive technology rather than assuming native behavior. The mobile trade sheet uses the browser’s native dialog focus management and Escape dismissal. Preferences respect reduced motion, increased contrast and reduced transparency where supported.
Sources: Apple accessibility, buttons, modality, feedback, design principles.