Build Log #5: Week 4 — Visuals, Metrics & the Flywheel
Week 4 was about making everything look and feel polished — and building the automation that would keep the platform alive without constant manual intervention.
The Visual Overhaul
For three weeks, the platform had functional UI but inconsistent visual identity. Different card styles on different pages. Font sizes that didn't follow a hierarchy. Spacing that was... creative.
The visual overhaul involved:
- Typography system — Poppins for headings, Inter for body text, enforced via CSS variables (
--font-poppins,--font-inter) - Theme-aware classes everywhere — replacing hardcoded colours with
bg-card,text-foreground,text-muted-foreground,border-border - Dark mode audit — the GLB-010 saga: finding and fixing every place where dark mode made text invisible or backgrounds clash
- Card consistency — unified card component with consistent padding, border radius, hover states, and shadow depth
- Blog imagery — generating featured images for all 100+ posts that were missing them. Three rounds of AI image generation (15 per batch limit), plus manual web searches for specific topics.
The image audit was surprisingly time-consuming. 37 posts had no featured image. Each needed a unique, topically relevant image that matched the platform's dark navy/cyan aesthetic. AI generation handled most of them, but some required web searches for specific subjects (regulatory bodies, specific companies, named technologies).
Charts & Data Visualisation
The Insights page got its visual identity: 16 widgets with proper charts, gauges, and data tables. Each widget type got its own visual treatment:
- Froth gauges — radial gauges for the MAG-7 stock froth metric (how overheated are the Magnificent Seven?). Colour-coded from green (value zone) through amber to red (bubble territory). MAX_FROTH set to 5.0 after the original 2.5 cap was too restrictive.
- VIX display — the fear index with proper number formatting and historical context bands
- Generation mix — stacked area charts showing UK electricity generation by fuel type (using data from the Elexon API)
- Carbon intensity — line charts with colour bands (very low → very high) from National Grid ESO data
- Crypto overview — price cards with 24h change indicators, pulled from CoinGecko
The gauge components were the trickiest. Radial gauges with animated fills, proper colour gradients, and responsive sizing that works on mobile. We went through three iterations before landing on a design that was both informative and visually clean.
The Content Flywheel
The real breakthrough in week 4: building the automation that makes the platform self-sustaining.
By the end of the build, we had 10 scheduled tasks running autonomously:
| Task | Schedule | Purpose |
|---|---|---|
| Intelligence Collector | Every 6h | RSS feeds → normalised intelligence items |
| Content Synthesiser v2 | 3x daily | AI digests, pulse signals, daily editions |
| Market Data Collector | Every 6h | Crypto, traditional markets, DeFi data |
| UK Energy Collector | Every 6h | 7 data sources from Elexon + Carbon Intensity APIs |
| Social Intel Collector | Every 6h | X/Grok analysis across 5 topics |
| Weekly Blog Generator | Mon 08:00 UTC | AI-written blog post (human-reviewed) |
| Monthly Report Generator | 1st of month | 5,000-word monthly deep dive |
This is the flywheel: data flows in automatically → AI synthesises it → content appears on the platform → users see fresh intelligence every time they visit → no manual intervention required.
The key insight: the flywheel only works if every component is reliable. One broken pipeline means stale data in that section, which erodes trust in the whole platform. We added monitoring: CollectorRun records tracking every task execution, items inserted, errors encountered. The tech team can see pipeline health at a glance.
Social Automation
The Social Intel Collector deserves special mention. It uses x.ai's Grok API (grok-3-mini model) to analyse trending topics across five domains: energy markets, Bitcoin, real-world assets, AI technology, and DeFi. The output is structured intelligence items — not raw social media posts, but synthesised takes with source attribution.
This was the most controversial design decision. Social intelligence is noisy by nature. Our filter: Grok analyses trends and produces a structured summary with a relevance score. Only items above the threshold make it into the intelligence pipeline. The rest are discarded.
Week 4 State
By end of week 4 — day 30 — the platform had: 126 published blog posts, 3,000+ intelligence items, 70+ database tables, 10 automated tasks, 6 Lumen dashboard pages, interactive calculators, and a design system that held together in both light and dark mode.
Was it perfect? No. Was it real? Absolutely.