EcoIQ
EcoIQ Platform Module

EcoIQ Frontend Experience & Google Stitch Design System

A visual, mobile-first, Microsoft-ready interface for industrial intelligence.

EcoIQ Frontend Experience & Google Stitch Design System defines how EcoIQ should look, feel and behave across Command Centre dashboards, Asset Passports, Country Atlas maps, Knowledge Graphs, Mobile Inspection, Public Trust Portal, Data Room, MRV, Finance Engine and Microsoft-style enterprise workflows. It uses Google Stitch/Figma-style prototyping for UI concepts and production-ready frontend libraries for implementation.

Core purpose: Make EcoIQ visually clear, evidence-first, mobile-friendly and enterprise-ready.

Open Design System Copy Google Stitch Prompts View Command Centre Mockup View Asset Passport UI View Country Atlas UI View Knowledge Graph UI View Mobile Inspection UI View Public Trust Portal UI View Microsoft Partner UI Pack Export Component Library

Connected EcoIQ Modules

Command Centre

Frontend defines the dashboard, pipeline table, map and Kanban views.

Asset Passport

Frontend defines the one-asset, one-story layout and its panels.

Country Transition Atlas

Frontend defines the interactive map and country card views.

Knowledge Graph & Relationship Map

Frontend defines the node-link graph and filter/detail panels.

Mobile / iPad Inspection Mode

Frontend defines the mobile-first field capture screens.

Public Trust & Impact Portal

Frontend defines the public-safe, sensitive-data-free views.

Data Room & Evidence Vault

Frontend defines the evidence and document review interface.

Impact MRV Layer

Frontend defines how estimated vs verified impact is shown.

Institutional Finance Engine

Frontend defines the finance-ready and investor memo views.

Certification & Trust Badge Engine

Frontend defines the trust badge display.

Microsoft Ecosystem Core Stack

Supplies the Microsoft-ready building blocks the frontend can integrate with.

AI Agent Operations Console

Frontend defines how agent traces and approvals are displayed.

Security, Privacy & Compliance Centre

Constrains which frontend views may show which data to which viewer.

Product Analytics & KPI Engine

Consumes frontend usage data to measure clarity and engagement.

Frontend Library Stack

1. Current Django Enhancement Stack
Tailwind CSSHTMXAlpine.jsApache EChartsChart.jsLeafletMapLibreCytoscape.jsSigma.jsPDF.jsSortableJS

Purpose: Improve the current Django frontend without rewriting the whole product.

2. Future SaaS Frontend Stack
Next.jsReactTypeScriptTailwind CSSshadcn/uiFramer MotionReact FlowTanStack TableTanStack QueryApache EChartsMapLibre GLdeck.glpdf.jsCytoscape.js or Sigma.js

Purpose: Build a premium SaaS frontend later when EcoIQ is ready for a full frontend application.

3. Microsoft Enterprise UI Stack
Fluent UI ReactMicrosoft Teams ToolkitAdaptive CardsPower BI EmbeddedMSAL ReactMicrosoft Graph SDKSharePoint integration conceptDynamics 365 integration concept

Purpose: Make EcoIQ feel familiar to Microsoft enterprise users and partners.

Use "Microsoft ecosystem-ready" and "designed to integrate with Microsoft Fabric, Power BI, Teams, SharePoint and Azure Digital Twins." Do not claim Microsoft certification or partnership unless actually obtained.

4. Google Stitch Design Workflow
Google Stitch for fast UI conceptsFigma-style component planningMaterial Design usability principlesGemini-style multimodal evidence concepts where relevant

Purpose: Explore UI concepts and visual direction fast, before production build.

Google Stitch is for design prototyping and visual direction. Production UI should be implemented in Django templates now or Next.js later.

Visual Style

Enterprise SaaSMicrosoft-readyDark institutional themeEmerald/cyan accentsEvidence-firstMap + graph + dashboardMobile-friendlyHigh trustNot crypto-lookingNot toy-likeCalm financial dashboard feelingClear cardsClear badgesReadable tablesSubtle motion only

Design Principles

1. Evidence-first interface

Every AI recommendation should show:

  • Evidence source
  • Confidence
  • Evidence quality
  • Missing data
  • Human approval status
  • No Harm Gate status
2. One project, one story

Each project page should show: asset → problem → evidence → risk → playbook → finance → supplier/funding → MRV → badges → next action.

3. Role-based simplicity

Investor, government, supplier, sponsor, engineer and internal EcoIQ user should each see the most relevant view.

4. Mobile-first inspection

Field evidence capture must work on iPhone, iPad, Android, Mac, Windows, Teams and PWA.

5. Trust by design

Every page should clearly separate:

  • Draft vs verified
  • Estimated vs MRV verified
  • Public vs private
  • AI hypothesis vs expert reviewed
  • Microsoft-ready vs Microsoft-certified

Main UI Screens

Screen 1

Command Centre Dashboard

  • Finance-ready projects
  • High-harm assets
  • Verified impact
  • Missing evidence
  • No Harm alerts
  • Project pipeline
  • Country map
  • Kanban stages
  • Morning briefing
Screen 2

Asset Passport Page

  • Asset summary
  • Owner
  • Location
  • Photos
  • Documents
  • Sensor data
  • Risks
  • Playbook match
  • Finance readiness
  • MRV status
  • Trust badges
  • Next action
Screen 3

Country Transition Atlas

  • Country cards
  • Interactive map
  • Finance-ready clusters
  • Highest-harm zones
  • Highest-impact opportunities
  • Verified impact projects
  • Filters by country, sector, asset type, MRV status and funding status
Screen 4

Knowledge Graph

  • Graph filters
  • Relationship map
  • Node details
  • Evidence trace
  • Missing links
  • No Harm risk paths
  • Process improvement recommendations
Screen 5

Mobile Inspection Mode

  • Start inspection
  • Take photo
  • Record video
  • Scan meter
  • Upload bill
  • Add voice note
  • AI photo diagnosis
  • Create Asset Passport
  • Send to Teams for approval
Screen 6

Public Trust Portal

  • Verified impact map
  • Public MRV registry
  • Before/after stories
  • Country progress
  • Sponsor impact pages
  • Public-safe summaries only

Google Stitch Prompt Library

Copyable prompt blocks for fast UI concepting in Google Stitch:

Prompt 1: Command Centre Dashboard 
Create an enterprise SaaS dashboard for EcoIQ, an industrial modernisation intelligence platform. The screen should show a dark institutional theme with emerald and cyan accents. Design a high-trust Microsoft-ready dashboard for investors, governments and industrial operators. Include top KPI cards for finance-ready projects, high-harm assets, verified impact, missing evidence and No Harm Gate alerts. Add a central project pipeline table, a country/asset map, a Kanban project status view, and a morning briefing panel. The interface should feel like Power BI + enterprise command centre, evidence-first, not crypto-looking, not toy-like, mobile-friendly and professional.
Prompt 2: Asset Passport Page 
Create an Asset Passport page for EcoIQ. The design should show one industrial asset, such as Boiler House #3, with a dark institutional SaaS layout, emerald/cyan accents and high-trust evidence-first design. Left panel: asset summary, owner, location, sector, condition and risk level. Middle panel: photos, documents, sensor readings, energy bills and evidence quality. Right panel: risks, recommended playbook, finance readiness, MRV status, trust badges and No Harm Gate. Bottom panel: timeline, missing data and next actions. Make it clear for engineers, investors and municipalities. The design should be mobile-friendly and Microsoft ecosystem-ready.
Prompt 3: Country Transition Atlas 
Create a Country Transition Atlas interface for EcoIQ. It should show Kazakhstan, United Kingdom, Saudi Arabia and Türkiye as portfolio views. Use a dark institutional enterprise SaaS style with emerald/cyan accents. Main view: interactive map with asset markers for boiler houses, factories, mines, farms, water systems and public buildings. Add filters for country, region, sector, asset type, finance readiness, MRV status and No Harm Gate alerts. Include cards for highest-harm assets, highest-impact opportunities, finance-ready projects and verified impact. The design should feel like a strategic Power BI/geospatial dashboard for governments, development banks and investors.
Prompt 4: Knowledge Graph 
Create a Knowledge Graph and Relationship Map UI for EcoIQ. The screen should show relationships between assets, companies, suppliers, funders, evidence, risks, projects, countries, Maqasid/Mizan principles, MRV claims and verified impact. Use a dark institutional theme with emerald/cyan accents, high-trust enterprise SaaS styling and a Microsoft-ready feel. Left panel: filters by country, asset type, evidence quality, risk, badge, MRV status and Maqasid principle. Centre: interactive node-link graph. Right panel: selected node details with linked evidence, risks, next action, No Harm Gate status and human approval status. Bottom: missing links and process improvement recommendations. Not crypto-looking, not toy-like.
Prompt 5: Mobile Inspection Mode 
Create a mobile-first EcoIQ inspection interface for iPhone and iPad. The user is an engineer or municipal inspector visiting a boiler house, factory, farm or water system. Use dark institutional styling, emerald/cyan accents and simple large touch-friendly controls. Screens should include: Start Inspection, Take Photo, Record Video, Scan Meter, Upload Bill, Add Voice Note, AI Photo Diagnosis, Create Asset Passport, Send to Teams for Approval. Show evidence quality, AI hypothesis warning, missing data checklist and No Harm Gate status. The design should feel professional, field-ready, accessible and Microsoft/Teams-ready.
Prompt 6: Public Trust Portal 
Create a public-facing EcoIQ impact portal. It should show approved, non-sensitive, MRV-supported public summaries only. Use a clean dark institutional style with emerald/cyan accents, trustworthy public-sector feel and no sensitive data exposure. Include a Verified Impact Map, Public MRV Registry, Before/After Impact Stories, Country Progress Cards for Kazakhstan, UK, Saudi Arabia and Türkiye, and Sponsor/CSR Impact Pages. Show labels such as MRV Verified, Expert Reviewed, Public Summary Approved, Needs Verification and Sensitive Data Redacted. Make it clear that estimated impact and verified impact are different. The design should build public trust without looking like crypto or marketing hype.

Microsoft Partner Frontend Pack

  • Teams approval cards
  • Power BI embedded dashboard concept
  • SharePoint evidence pack view
  • Microsoft Fabric data layer card
  • Azure Digital Twins asset map concept
  • Fluent UI-inspired controls
  • Adaptive Cards for approvals
  • Microsoft Graph document permissions concept

Frontend Process Improvement

The design system should improve the whole EcoIQ process by:

  • Reducing user confusion
  • Showing missing evidence earlier
  • Making next actions obvious
  • Making finance readiness visible
  • Making MRV status visible
  • Making public/private boundaries clear
  • Making trust badges visible
  • Helping field teams upload correct evidence
  • Helping investors understand project readiness
  • Helping governments see country priorities visually
  • Helping Microsoft partners understand integration points

UX Quality Checklist

  • Is the page clear in 5 seconds?
  • Is the next action obvious?
  • Is evidence visible?
  • Is uncertainty visible?
  • Is public/private status clear?
  • Is MRV verified separated from estimated?
  • Is the page mobile-friendly?
  • Are tables readable?
  • Are CTAs clear?
  • Is it enterprise and high-trust?
  • Does it avoid fake futuristic/crypto style?
  • Does it avoid unsupported Microsoft partnership claims?

Safety and Governance

  • Frontend design must not hide uncertainty, missing evidence or risk.
  • Visual design must not overstate impact, finance readiness, MRV verification or Microsoft affiliation.
  • Public UI must protect sensitive data.
  • Maqasid/Mizan is ethical decision-support, not a fatwa.
  • Verified impact must be clearly separated from estimated impact.
  • Google Stitch is for prototyping; production UI must be implemented, reviewed and tested in code.
Open Design System Copy Google Stitch Prompts View Command Centre Mockup View Asset Passport UI View Country Atlas UI View Knowledge Graph UI View Mobile Inspection UI View Public Trust Portal UI View Microsoft Partner UI Pack Export Component Library