--- title: "The Grid Digital Twin Branding & Webflow | Mattriz Studio" description: "Brand identity, visual system and Webflow website for The Grid, a digital twin & BIM consultancy. See how we built a bold, flexible design language." lang: en url: https://mattriz.com/project/the-grid/ --- > Brand identity, visual system and Webflow website for The Grid, a digital twin & BIM consultancy. See how we built a bold, flexible design language. Case study 2025 # The Grid Visual identity and website for a construction digital‑twin consultancy. [Visit the site](https://thegrid.es/) ## At a glance - **Client**: The Grid - **Industry**: Construction · Digital‑twin tech · B2B - **What we did**: Brand Identity, UI/UX Design, Web Development, SEO The live site, from the video hero to the team. The Challenge Create a modern, clear, and relatable identity that positions The Grid as a leader in the digitization of the construction sector, bridging physical and digital worlds. The brand must convey precision, innovation, and trust, aligned with its manifesto (data transforming the built environment), and scale across web, decks, social, and technical docs. Keywords: BIM, digital twins, workflow automation, IoT, real‑time data, multi‑stakeholder collaboration, applied research. [View Website](https://thegrid.es/) ![The Grid: project work](https://mattriz.com/media/projects/the-grid/banner-1600.webp) ![The Grid: project work](https://mattriz.com/media/projects/the-grid/iphone-14-pro-psd-1600.webp) ![The Grid: project work](https://mattriz.com/media/projects/the-grid/app-icon-1600.webp) Approach We built a modular brand system (type Centra No.2 + Neue Haas Grotesk, electric blue with mint/black/white/light‑gray accents), clear safe‑zone rules and logo variants (horizontal logotype, isotype/imagotype) for flexibility. We translated the identity into a fast, intuitive website (clear navigation, large‑scale visuals, subtle micro‑interactions, AA accessibility) that strengthens the connection to digital construction solutions. ![Six services on a clean grid of cards](https://mattriz.com/media/projects/the-grid/tg-site-services-1600.webp) ![Tools: the Digital Twin Platform and O-SAM](https://mattriz.com/media/projects/the-grid/tg-site-tools1-1600.webp) Each tool with its own screenshot, a “Learn more” and a way to try it. ![MatchFEM, the Grasshopper plug-in](https://mattriz.com/media/projects/the-grid/tg-site-tools2-1600.webp) ![Project: digital twin of a load test for a high-speed railway bridge](https://mattriz.com/media/projects/the-grid/tg-site-project1-1600.webp) Projects told as cases, each with its own page. ![The Grid: project work](https://mattriz.com/media/projects/the-grid/captura-de-pantalla-2025-12-04-a-las-11-15-36-p-m-1600.webp) ![The Grid: project work](https://mattriz.com/media/projects/the-grid/captura-de-pantalla-2025-12-04-a-las-11-15-47-p-m-1600.webp) ![The Grid: project work](https://mattriz.com/media/projects/the-grid/captura-de-pantalla-2025-12-05-a-las-5-21-14-p-m-1600.webp) ![The Grid: project work](https://mattriz.com/media/projects/the-grid/captura-de-pantalla-2025-12-05-a-las-5-21-32-p-m-1600.webp) ![The Grid: project work](https://mattriz.com/media/projects/the-grid/captura-de-pantalla-2025-12-04-a-las-11-15-59-p-m-1600.webp) What We Do 1. **Brand strategy & key messaging**: positioning, promise, and a professional‑approachable tone. 2. **Brand guidelines**: usage rules, do’s & don’ts, safe‑zones, scales. 3. **Identity system**: logotype and imagotype/isotype in positive/negative and mono. 4. **Color system**: electric blue primary + mint/black/white/light‑gray; documented AA contrast. 5. **Typography**: Centra No.2 + Neue Haas Grotesk; hierarchy, scales, spacing guidance. 6. **Layout system & UI components**: responsive grid, buttons, cards, navigation, states, subtle motion. 7. **Website (Webflow)**: clear site structure; key pages (home, services, cases, contact); CMS for case studies and services. 8. **Accessibility & performance**: AA criteria, best practices; LCP and visual stability goals. 9. **Technical on‑page SEO**: metadata, headings, basic schema, sitemap and robots; copy guidance. 10. **Analytics & measurement**: GA4 and Google Search Console with key events/goals. ![The Grid home page on a phone](https://mattriz.com/media/projects/the-grid/tg-m-hero-900.webp) ![Services on a phone](https://mattriz.com/media/projects/the-grid/tg-m-services-900.webp) ![A project on a phone](https://mattriz.com/media/projects/the-grid/tg-m-projects-900.webp) ![Research driven: the link to the LMDEC lab](https://mattriz.com/media/projects/the-grid/tg-site-research-1600.webp) ![The founding team](https://mattriz.com/media/projects/the-grid/tg-site-team-1600.webp) ![The Grid: project work](https://mattriz.com/media/projects/the-grid/captura-de-pantalla-2025-12-05-a-las-5-22-35-p-m-1600.webp) Impact Consistent brand and site ready for technical use‑cases, metrics, and B2B capture. ![The Grid: project work](https://mattriz.com/media/projects/the-grid/captura-de-pantalla-2025-12-04-a-las-11-16-22-p-m-1600.webp) ![The Grid: project work](https://mattriz.com/media/projects/the-grid/free-l-mockups-macbook-air2-1200.webp) ## Services - Brand system - Guidelines - UI kit - Webflow development - Motion - AA accessibility. ## Stack - Figma - Adobe Illustrator - Webflow - Optional Lottie/JSON - Light GSAP. ## Deliverables - Brand manual (PDF) - UI library - Homepage/key section - CMS webflow collections ## Timeline 4–6 weeks ## Got a project in mind? We design and build websites, online stores and booking and payment systems, and keep them running every month. [Tell us about your project](https://mattriz.com/contact/) [Visit the live site thegrid.es](https://thegrid.es/) --- ## About Mattriz Mattriz is a design and development studio based in Bogotá, Colombia, working with businesses across the US and Latin America. We design the brand, build the website, the online store or the booking and payment system, and keep it running every month. AI speeds up the work; the decisions stay with us. - What we build: booking and operations systems, payment integration (Square, Stripe, Wompi), custom admin dashboards, automation and follow-up, websites that convert. - How we work: a monthly plan to build, maintain and keep improving. No one-off projects. - Capacity: three active clients at a time, a deliberate limit. - Languages: English and Spanish. - Contact: contacto@mattriz.com · https://mattriz.com/contact/ - Book a free 30-minute call: https://calendly.com/contacto-mattriz/30min - Free website scanner: https://mattriz.com/scan/ - Everything about the studio for AI assistants: https://mattriz.com/llms.txt