Sustain.
Sustain.
Workflow-first CSRD readiness dashboard for German mid-market teams.
50,000 European companies face a new reporting mandate. Most have no system for it.
The EU’s Corporate Sustainability Reporting Directive (CSRD) requires companies to report on approximately 1,100 data points across environmental, social, and governance dimensions. For German Mittelstand companies — manufacturers with 250–5,000 employees — this is an entirely new category of compliance work.
The data lives across five or more departments. HR owns workforce metrics, Operations owns emissions data, Legal owns governance policies. No single person has a complete picture, and there’s no established workflow for cross-department ESG data collection.
What must a solution deliver?
Desk research before pixels. Understanding the regulation, the users, and the gap.
I spent four days studying the ESRS framework, reading CSRD implementation guides from the German Federal Ministry for Economic Affairs, reviewing Bundesanzeiger filing examples, and comparing six ESG platforms at the pattern level — Sphera, Persefoni, Watershed, Plan A, Sweep, and Normative. Three patterns emerged.
Data import from ERP systems (SAP, Oracle). Audit trail and version history. Automated plausibility checks against industry benchmarks. PDF report generation matching ESRS disclosure requirements.
No clear ‘what do I do next?’ workflow. Data collection is passive — wait for CSV uploads — rather than active: assign, remind, track. Progress exists but doesn’t connect to regulatory deadlines.
Three screens for three questions every user asks.
Instead of a feature-packed platform, I organized the product around three sequential questions a sustainability manager asks every working day.
Linear workflow — each screen feeds the next. DMA defines scope → Data Hub collects → Report assembles.
Every visual choice traces back to a user need or regulatory constraint.
Dark interface for daily-driver use
Sustainability managers spend 2–3 hours daily in this tool. A dark theme reduces eye strain during long sessions and lets the E/S/G color system remain clearly legible. It also signals ‘professional tool,’ not ‘marketing dashboard.’
Bilingual toggle, not auto-detection
German professionals read ESRS in English but discuss compliance in German. A manual toggle lets them switch context mid-task — checking the English standard name while drafting German descriptions.
E/S/G color system as wayfinding
Environmental (green), Social (blue), Governance (amber). These three colors appear in badges, chart accents, border highlights, and navigation across all screens. Users know which pillar they’re working in without reading labels.
Active collection, not passive input
The Data Collection Hub doesn’t show empty fields. It shows assigned tasks with owners, deadlines, and ‘Send Reminder’ buttons. The tool creates accountability workflows, not just data storage.
Progress framing over deficit framing
The dashboard leads with ‘67% ready’ — not ‘33% missing.’ The scatter plot shows positioned topics, not checklists. Positive framing drives engagement; deficit framing creates avoidance in compliance tools.
Container queries for Framer compatibility
All three screens use ResizeObserver instead of viewport media queries. They adapt correctly in full-screen view, Framer canvas, or embedded panels. No assumptions about viewport width.
Three interactive screens, fully responsive, zero dependencies.
Each screen is a single React component (<800 lines) deployed directly in Framer. No npm packages, no build step. Bilingual DE/EN toggle, staggered load animations, and container-query responsive layout.
Compliance Dashboard
Four animated KPI cards, E/S/G compliance rings with gradient progress bars, interactive emissions chart with scope-level detail, alert panel with severity-based ordering, quick navigation grid.
Double Materiality Assessment
Interactive scatter plot matrix: 10 sustainability topics positioned by financial × impact materiality. Animated dot placement, hover tooltips, click-to-select with synced detail panel.
Data Collection Hub
Three-column operational layout: ESRS standard filters (left), data point list with inline actions (center), context-sensitive detail panel (right). Supports bulk assignment, deadline tracking, and validation.
Two weeks from blank canvas to interactive prototype.
Read ESRS standards, CSRD guides, and audited 6 competitors. Mapped data collection workflows and department ownership patterns.
Defined the 3-screen architecture. Paper sketches. Identified the Dashboard → DMA → Data Hub sequential flow.
Established dark theme, E/S/G color system, and typographic scale. Built component tokens. Designed hi-fi screens.
Built all screens as React components. Zero dependencies. Animations, bilingual support, responsive layout. Deployed in Framer.
What I’d do differently with more time and real users.
This is a concept project built from desk research. The design decisions are grounded in regulatory requirements and competitor analysis, but they haven’t been validated with real sustainability managers. Honesty about that boundary matters.
B2B compliance tools fail when they organize around features instead of workflows. Sustain works by mapping to the three questions every sustainability manager asks daily: where do we stand, what matters most, and who owes what data.