TwinTopics: Designing the Future of Real Estate Management
Philip Wallage
TwinTopics is a digital workspace for future-proof real estate management. Their platform centralises property data, reduces failure costs, and helps organisations make data-driven maintenance and sustainability decisions.
When they reached out, the goal was clear: bring their complex technology to life through a clean, modern, and scalable website — one that feels as innovative as the product itself.
I handled the entire process: from design system setup in Figma to Webflow development, AI-assisted copywriting, and on-brand photography generation.
Defining the Design System
Before a single layout was built, I created a Figma Design System to ensure consistency across every screen.
Because fifty shades of green didn’t make the cut.
Colors
I defined a modular palette inspired by construction materials — soft neutrals, dark graphite tones, and a distinct green accent that mirrors the TwinTopics identity. The system includes semantic color tokens for backgrounds, accents, and alerts, allowing for scalable use across future modules.
Fonts so well-paired they could be married.
Typography
For typography, I built a clear hierarchy that balances precision with approachability — pairing a strong sans-serif for headings with a humanist body font for readability. Every size, weight, and line height was documented and synced to Webflow for pixel-perfect parity.
The moment TwinTopics went from spreadsheet to spaceship.
Bringing It to Life in Webflow
The site was built entirely in Webflow, using a class-based system that mirrors the Figma structure. This setup allows TwinTopics to expand the site without breaking its design logic.
Each page was built responsively from the start — optimized for mobile, tablet, and widescreen. I used Webflow’s flex and grid systems to create layouts that adapt seamlessly while maintaining visual balance. The final build runs fast, clean, and fully editable by the TwinTopics team.
Where structure meets story and finally makes sense.
Using AI for On-Brand Photography
TwinTopics didn’t have an existing photo library — so I used AI to generate realistic imagery that matches their brand aesthetic.
By combining AI-generated environments with product mockups, I created visuals that blend architecture, technology, and sustainability. The result: a cohesive set of images that feel both human and innovative, perfectly fitting the message of “future-proof real estate management.”
No photographers were harmed in the making of these images.
A Consistent Experience Across Every Section
From hero to footer, the website was designed to build trust through clarity. The hero section introduces the product with bold typography and a focused CTA.
The content sections highlight key platform features using modular blocks.
The FAQ and CTA sections help guide decision-makers deeper into the story.
Proof that even the footer can have main-character energy.
And on mobile, every element reflows beautifully without losing intent or hierarchy.
Looks just as good in your hand as it does on a 27-inch screen.
The Result
The new TwinTopics website translates a complex platform into an accessible digital experience.
A structured design system, seamless Webflow build, and thoughtful use of AI tools allowed me to deliver a site that is responsive, scalable, and unmistakably on-brand.
Book a Call
Curious how I can help you bring your own product to life in Webflow with strategy, design systems, and AI-powered storytelling?
Book a call and let’s talk about your project.
Like this project
Posted Oct 6, 2025
Webflow + AI for TwinTopics: I built a scalable, responsive site with a Figma design system, brand-aligned visuals, and clear, confident copy.
Likes
1
Views
22
Timeline
Aug 1, 2025 - Sep 30, 2025
