CMD Pro UI/UX Design Standards
A Complete Design System for CMD Pro
The CMD Pro UI/UX Design Standards establish a consistent, professional, and
user-friendly visual language across the entire plugin. These standards ensure
that the dashboard delivers a premium experience that instills trust, enhances
usability, and reflects the quality expected of a commercial-grade financial
intelligence tool. The design system follows modern UI principles, prioritizing
clarity, efficiency, and accessibility.
📑 Table of Contents
🎨
Design System at a Glance
7
Design Principles
5
Font Weights
20+
Color Variables
9
Spacing Tokens
4
Breakpoints
4
Button Types
12+
UI Components
8
WCAG 2.1 AA Targets
17.1. Design Principles
🎯 Clarity First
Information is presented clearly, without unnecessary clutter or ambiguity.
Financial data must be immediately understandable to support quick decision-making.
📊 Data-Driven
Every design element serves the purpose of presenting data effectively.
The dashboard is a tool for analysis, not decoration.
💎 Professional Aesthetic
Clean, modern, and trustworthy appearance befitting a commercial financial product.
Builds user confidence and credibility.
📱 Responsive & Adaptive
Seamless experience across all devices and screen sizes.
Users access data on desktops, tablets, and mobile devices.
🔄 Consistent
Uniform design language throughout all components and screens.
Reduces learning curve and enhances usability.
♿ Accessible
Compliant with WCAG 2.1 AA standards for inclusive design.
Ensures all users, including those with disabilities, can use the tool.
⚡ Performance-Oriented
Optimized for fast loading and smooth interactions.
Slow interfaces undermine user trust and productivity.
17.2. Typography
17.2.1. Font Family
| Type | Font Stack | Usage |
|---|---|---|
| Primary Font | 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif |
Body text, UI elements, labels |
| Monospace Font | 'JetBrains Mono', 'Fira Code', 'Consolas', monospace |
Price data, numerical values, code snippets |
| Fallback Font | sans-serif |
System default fallback |
Rationale: Inter is a highly legible, modern sans-serif font optimized for screens. It offers excellent readability at all sizes and supports a wide range of weights. JetBrains Mono provides clear, distinguishable characters for financial data.
17.2.2. Font Weights
| Weight | CSS Value | Usage |
|---|---|---|
| Light | 300 | Subtle labels, secondary information |
| Regular | 400 | Body text, paragraph content |
| Medium | 500 | Subheadings, emphasized text |
| Semibold | 600 | Headings, card titles, navigation |
| Bold | 700 | Primary headings, price values, key metrics |
17.2.3. Type Scale
| Level | Size | Line Height | Weight | Usage |
|---|---|---|---|---|
| H1 | 32px / 2rem | 1.2 | 700 | Page title, dashboard header |
| H2 | 24px / 1.5rem | 1.3 | 600 | Section headings |
| H3 | 20px / 1.25rem | 1.4 | 600 | Card titles, subsection heads |
| H4 | 18px / 1.125rem | 1.4 | 500 | Metric labels, subheadings |
| H5 | 16px / 1rem | 1.5 | 600 | Small section headers |
| Body Large | 16px / 1rem | 1.6 | 400 | Paragraphs, descriptions |
| Body | 14px / 0.875rem | 1.6 | 400 | General text, labels |
| Body Small | 12px / 0.75rem | 1.5 | 400 | Helper text, timestamps, disclaimers |
| Price Large | 28px / 1.75rem | 1.2 | 700 | Primary price display |
| Price Medium | 20px / 1.25rem | 1.3 | 600 | Secondary price display |
| Price Small | 14px / 0.875rem | 1.4 | 600 | Small price labels |
17.3. Colors
17.3.1. Primary Color Palette
Primary Blue
#2563EB
Primary brand color, buttons, links, active states
Primary Blue Hover
#1D4ED8
Hover states for primary actions
Primary Blue Light
#DBEAFE
Backgrounds, highlights, selected items
Primary Dark
#1E293B
Headings, dark UI elements
Primary White
#FFFFFF
Text on dark backgrounds, card backgrounds
17.3.2. Neutral Palette
| Color | Hex Code | Usage |
|---|---|---|
| Slate 900 | #0F172A | Darkest text, primary body text |
| Slate 800 | #1E293B | Headings, bold text |
| Slate 700 | #334155 | Secondary text, labels |
| Slate 600 | #475569 | Muted text, placeholders |
| Slate 500 | #64748B | Disabled text, secondary labels |
| Slate 400 | #94A3B8 | Borders, dividers, form borders |
| Slate 300 | #CBD5E1 | Light borders, backgrounds |
| Slate 200 | #E2E8F0 | Card backgrounds, section backgrounds |
| Slate 100 | #F1F5F9 | Page background, hover states |
| Slate 50 | #F8FAFC | Lightest background |
17.3.3. Status & Semantic Colors
Success Green
#22C55E
Price increases, positive changes, success states
Success Dark
#16A34A
Hover states for success actions
Success Light
#DCFCE7
Success backgrounds, positive indicators
Danger Red
#EF4444
Price decreases, negative changes, errors
Danger Dark
#DC2626
Hover states for danger actions
Danger Light
#FEE2E2
Error backgrounds, negative indicators
Warning Yellow
#F59E0B
Warnings, alerts, caution states
Warning Light
#FEF3C7
Warning backgrounds
Info Blue
#3B82F6
Informational messages, help text
Info Light
#DBEAFE
Info backgrounds
17.3.4. Price Movement Colors
| Color | Hex Code | Usage |
|---|---|---|
| Up (Green) | #22C55E | Price increase, upward movement |
| Up (Bright) | #16A34A | Strong price increase |
| Down (Red) | #EF4444 | Price decrease, downward movement |
| Down (Dark) | #DC2626 | Strong price decrease |
| Neutral | #64748B | No change, stable price |
| Background Up | #DCFCE7 | Background for positive changes |
| Background Down | #FEE2E2 | Background for negative changes |
17.4. Spacing & Layout
17.4.1. Spacing Scale
sp-0
0
sp-1
4px (0.25rem)
sp-2
8px (0.5rem)
sp-3
12px (0.75rem)
sp-4
16px (1rem)
sp-5
24px (1.5rem)
sp-6
32px (2rem)
sp-8
48px (3rem)
sp-10
64px (4rem)
17.4.2. Grid System
| Property | Value | Description |
|---|---|---|
| Number of Columns | 12 | Standard 12-column grid |
| Gutter | 24px | Horizontal and vertical spacing between columns |
| Container Width | 1350px | Maximum content width |
| Margin | 24px | Margin on left and right of container |
| Column Width | (container – gutter) / 12 | Fluid column width |
17.4.3. Responsive Breakpoints
CMD Pro is designed to provide a seamless experience across all devices. The following breakpoints define how the interface adapts to different screen sizes, ensuring that functionality remains accessible and visually consistent at every viewport width.
| Breakpoint | Screen Width | Layout | Target Devices |
|---|---|---|---|
| Small Mobile | < 480px | Single column | Small phones |
| Mobile | 480px – 767px | Single column | Phones |
| Tablet | 768px – 1023px | Two-column | Tablets, large phones |
| Desktop | 1024px – 1279px | Three-column | Small laptops, desktops |
| Large Desktop | ≥ 1280px | Full grid | Large monitors |
Component Behavior by Breakpoint
| Component | Desktop (≥ 1024px) | Tablet (768–1023px) | Mobile (< 768px) |
|---|---|---|---|
| 12-Column Grid | Full 12 columns | 6 columns (stacked) | Single column (stacked) |
| Commodity Cards | 3–4 per row | 2 per row | 1 per row (full width) |
| Tables | Full table, all columns | Scrollable horizontally | Scrollable horizontally or collapsed view |
| Ticker | Horizontal scrolling bar | Horizontal scrolling bar | Smaller height, slower scroll |
| Charts | Full size, interactive | Reduced height (250px) | Compact height (200px), touch-friendly |
| Navigation | Horizontal menu | Horizontal menu (condensed) | Hamburger menu |
| Dashboard Filters | Horizontal inline | Horizontal inline (wrapped) | Vertical stacked |
| Buttons | Standard size | Standard size | Larger touch targets (min 44px) |
| Typography | Full size | Slightly reduced | Reduced for readability |
| Spacing | sp-6 (32px) | sp-5 (24px) | sp-4 (16px) |
17.5. Component Standards
17.5.1. Cards
Description: Cards are the primary container for grouping related content and information.
| Property | Value |
|---|---|
| Background | #FFFFFF |
| Border Radius | 12px |
| Border | 1px solid #E2E8F0 |
| Box Shadow | 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04) |
| Padding | 24px (sp-6) |
| Margin | 16px (sp-4) |
| Hover Shadow | 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06) |
17.5.2. Buttons
| Property | Primary | Secondary | Outlined | Ghost |
|---|---|---|---|---|
| Background | #2563EB | #F1F5F9 | Transparent | Transparent |
| Text Color | #FFFFFF | #1E293B | #2563EB | #475569 |
| Border | 1px solid #2563EB | 1px solid #E2E8F0 | 1px solid #2563EB | None |
| Border Radius | 8px | 8px | 8px | 8px |
| Padding | 10px 20px | 10px 20px | 10px 20px | 10px 20px |
| Font Weight | 500 | 500 | 500 | 500 |
| Hover BG | #1D4ED8 | #E2E8F0 | #DBEAFE | #F1F5F9 |
Button Sizes
| Size | Padding | Font Size | Usage |
|---|---|---|---|
| Small | 6px 12px | 12px | Compact actions, tables |
| Medium | 10px 20px | 14px | Standard buttons (default) |
| Large | 14px 28px | 16px | Primary calls to action |
Button Preview
17.5.3. Tables
| Property | Value |
|---|---|
| Header Background | #F1F5F9 |
| Header Text | #475569, 600 weight, 12px size |
| Row Background | #FFFFFF |
| Row Hover | #F8FAFC |
| Row Alternate | #FAFBFC |
| Border | 1px solid #E2E8F0 |
| Cell Padding | 12px 16px |
| Border Radius | 8px |
17.5.4. Icons
| Property | Value |
|---|---|
| Icon Library | Font Awesome 6 (Solid & Regular) or Heroicons |
| Size | 16px, 20px, 24px |
| Color | Inherits parent text color or specific semantic colors |
| Spacing | 8px margin from adjacent text |
17.5.5. Charts
Chart Library: Chart.js 4.x
| Property | Value |
|---|---|
| Height | 300px – 400px |
| Width | 100% of container |
| Background | #FFFFFF |
| Grid Lines | #E2E8F0, 1px, dashed |
| Axis Labels | #64748B, 12px |
| Line Color | #2563EB (Primary Blue) |
| Line Width | 2px |
| Fill Area | rgba(37, 99, 235, 0.1) |
| Point Radius | 3px |
| Point Hover | 5px |
| Legend | #1E293B, 12px, positioned top-right |
17.5.6. CMD Pro-Specific Components
These components are unique to CMD Pro and form the core building blocks of the commodity market intelligence interface.
Price Card
Displays commodity price with USD/PKR, change, and timestamp
Commodity Selector
Dropdown or tabbed interface for selecting commodities
Currency Selector
Toggle between USD, PKR, and other currencies
Date Picker
Custom date range selection for charts and reports
Ticker Item
Individual price display within the scrolling ticker feed
Trend Badge
Color-coded badge showing price movement (▲/▼ with percentage)
Alert Badge
Notification indicator for triggered price alerts
Loading/Skeleton State
Animated placeholders while content is loading
Empty State
Friendly message when no data is available
API Error State
Clear error message with retry option when API fails
Tooltip
Contextual help on hover or focus
Modal
Focused overlay for alerts, settings, and confirmations
17.6. Accessibility Standards (WCAG 2.1 AA)
| Guideline | Requirement | Design Implementation |
|---|---|---|
| Contrast Ratio | Minimum 4.5:1 for normal text | 🎯 TARGET: WCAG 2.1 AA All text meets contrast requirements |
| Focus Indicators | Visible focus on all interactive elements | 🎯 TARGET: WCAG 2.1 AA :focus styles with outline: 2px solid #2563EB |
| Alt Text | All non-text content has text alternative | 🎯 TARGET: WCAG 2.1 AA Images, icons, charts have descriptive alt text |
| Keyboard Navigation | All functionality operable via keyboard | 🎯 TARGET: WCAG 2.1 AA Full keyboard support (Tab, Enter, Space, Esc) |
| ARIA Labels | Proper ARIA labels for interactive elements | 🎯 TARGET: WCAG 2.1 AA aria-label, aria-describedby, role attributes |
| Font Size | Text can be resized without loss of content | 🎯 TARGET: WCAG 2.1 AA Relative units (rem, em) instead of px |
| Reduced Motion | Respect user’s motion preferences | 🎯 TARGET: WCAG 2.1 AA prefers-reduced-motion media query support |
| Screen Reader | Compatible with screen readers | 🎯 TARGET: WCAG 2.1 AA Semantic HTML, proper heading hierarchy |
📌 Note: These are design requirements and targets. Final WCAG 2.1 AA compliance should be verified through automated testing and manual audits on the implemented product.
17.7. Design Tokens (CSS Variables)
/* ── Colors — Primary ── */
–color-primary: #2563EB;
–color-primary-hover: #1D4ED8;
–color-primary-light: #DBEAFE;
–color-primary-dark: #1E293B;
–color-white: #FFFFFF;
/* ── Colors — Neutral ── */
–color-slate-900: #0F172A;
–color-slate-800: #1E293B;
–color-slate-700: #334155;
–color-slate-600: #475569;
–color-slate-500: #64748B;
–color-slate-400: #94A3B8;
–color-slate-300: #CBD5E1;
–color-slate-200: #E2E8F0;
–color-slate-100: #F1F5F9;
–color-slate-50: #F8FAFC;
/* ── Colors — Semantic ── */
–color-success: #22C55E;
–color-success-dark: #16A34A;
–color-success-light: #DCFCE7;
–color-danger: #EF4444;
–color-danger-dark: #DC2626;
–color-danger-light: #FEE2E2;
–color-warning: #F59E0B;
–color-warning-light: #FEF3C7;
–color-info: #3B82F6;
–color-info-light: #DBEAFE;
/* ── Typography ── */
–font-family: ‘Inter’, -apple-system, BlinkMacSystemFont, sans-serif;
–font-size-h1: 2rem;
–font-size-h2: 1.5rem;
–font-size-h3: 1.25rem;
–font-size-body: 0.875rem;
–font-size-price-large: 1.75rem;
/* ── Spacing ── */
–sp-0: 0;
–sp-1: 0.25rem;
–sp-2: 0.5rem;
–sp-3: 0.75rem;
–sp-4: 1rem;
–sp-5: 1.5rem;
–sp-6: 2rem;
–sp-8: 3rem;
–sp-10: 4rem;
/* ── Layout ── */
–container-width: 1350px;
–grid-gutter: 1.5rem;
–border-radius: 0.75rem;
–border-radius-sm: 0.5rem;
–border-radius-lg: 1rem;
/* ── Shadows ── */
–shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
–shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
–shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
–color-primary: #2563EB;
–color-primary-hover: #1D4ED8;
–color-primary-light: #DBEAFE;
–color-primary-dark: #1E293B;
–color-white: #FFFFFF;
/* ── Colors — Neutral ── */
–color-slate-900: #0F172A;
–color-slate-800: #1E293B;
–color-slate-700: #334155;
–color-slate-600: #475569;
–color-slate-500: #64748B;
–color-slate-400: #94A3B8;
–color-slate-300: #CBD5E1;
–color-slate-200: #E2E8F0;
–color-slate-100: #F1F5F9;
–color-slate-50: #F8FAFC;
/* ── Colors — Semantic ── */
–color-success: #22C55E;
–color-success-dark: #16A34A;
–color-success-light: #DCFCE7;
–color-danger: #EF4444;
–color-danger-dark: #DC2626;
–color-danger-light: #FEE2E2;
–color-warning: #F59E0B;
–color-warning-light: #FEF3C7;
–color-info: #3B82F6;
–color-info-light: #DBEAFE;
/* ── Typography ── */
–font-family: ‘Inter’, -apple-system, BlinkMacSystemFont, sans-serif;
–font-size-h1: 2rem;
–font-size-h2: 1.5rem;
–font-size-h3: 1.25rem;
–font-size-body: 0.875rem;
–font-size-price-large: 1.75rem;
/* ── Spacing ── */
–sp-0: 0;
–sp-1: 0.25rem;
–sp-2: 0.5rem;
–sp-3: 0.75rem;
–sp-4: 1rem;
–sp-5: 1.5rem;
–sp-6: 2rem;
–sp-8: 3rem;
–sp-10: 4rem;
/* ── Layout ── */
–container-width: 1350px;
–grid-gutter: 1.5rem;
–border-radius: 0.75rem;
–border-radius-sm: 0.5rem;
–border-radius-lg: 1rem;
/* ── Shadows ── */
–shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
–shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
–shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
UI/UX Design Standards Conclusion
This comprehensive UI/UX Design Standards document provides a complete design system for CMD Pro, ensuring consistency, professionalism, and usability across all components and devices. With 7 design principles, 4 responsive breakpoints, 12+ UI components, and a WCAG 2.1 AA design target, the design system establishes a premium visual language that builds trust, enhances user experience, and supports the brand’s positioning as a leading commodity market intelligence tool.
✅
Document Status: Approved for Design
📋
Design Version: 2.1
📅
Last Updated: August 2026