--- title: "Civilus | Brand identity & website | Mattriz Studio" description: "Civilus: brand identity and React website for an online structural-calculus platform, designed and developed by Mattriz Studio." lang: en url: https://mattriz.com/project/civilus/ --- > Civilus: brand identity and React website for an online structural-calculus platform, designed and developed by Mattriz Studio. Case study 2023 # Civilus Visual identity and website for an online structural-calculus platform. [Visit the site](https://civilus.co/) ## At a glance - **Client**: Civilus - **Industry**: Civil engineering · Structural analysis · EdTech / SaaS - **What we did**: Brand Identity, UI/UX Design, Web Development The live site: an I-section’s properties, then a beam solved with its shear and moment diagrams. The Challenge Create a clear, modern identity for Civilus, a startup that offers free online tools for structural calculations, so it feels reliable for students, teachers, and professional engineers. The brand needed to stand out in a technical space while remaining friendly and approachable. The identity had to communicate precision, innovation, and trust, reinforce Civilus as a go-to platform for structural problem-solving, and scale consistently across web, pitch decks, social media, and product UI. [View Website](https://civilus.co/) ![Civilus Logotype - Estudio Mattriz](https://mattriz.com/media/projects/civilus/instagram-post-223-1080.webp) Approach We built a compact brand system using Adobe Creative Cloud, with a geometric logotype and symbol inspired by structural sections and beams. The visual language balances technical precision with a friendly tone through a clean icon set and a focused color palette. For the website, we designed the interface in Figma and translated it into a responsive front-end using React, HTML, CSS, and JavaScript. Working closely with a developer friend, we used GitHub for version control (branches, commits, pull requests) and deployed the site on Netlify, including domain connection and basic configuration. The result is a fast, simple experience that leads users straight into the Cross Section and Beam Solver tools. ![Cross Section Properties with an I-section drawn to scale](https://mattriz.com/media/projects/civilus/cv-site-cross-1600.webp) ![Section properties: area, centroid, inertia, section moduli and torsional constant](https://mattriz.com/media/projects/civilus/cv-site-results-1600.webp) Twelve properties at once, with units you can switch. ![Beam Solver: beam data, supports and the free body diagram](https://mattriz.com/media/projects/civilus/cv-site-beam-1600.webp) ![Shear and bending moment diagrams for the solved beam](https://mattriz.com/media/projects/civilus/cv-site-diagrams2-1600.webp) From supports and loads to shear and moment diagrams, in the browser. ![Civilus Website - Estudio Mattriz](https://mattriz.com/media/projects/civilus/instagram-post-148-1080.webp) ![Civilus Website - Estudio Mattriz](https://mattriz.com/media/projects/civilus/instagram-post-146-1600.webp) What We Do 1. **Brand strategy & key messaging**: Defined Civilus as an accessible, online companion for structural calculations, with messaging focused on speed, reliability, and ease of use. 2. **Brand guidelines**: Usage rules for logo, color, and imagery to keep the brand consistent across the website, decks, and social channels. 3. **Identity system**: Logotype and icon for use on the site header, favicons, and social avatars. 4. **Color system**: Technical yet approachable palette with strong contrast for UI, charts, and call-to-action states. 5. **Typography system**: Google Fonts stack optimized for legibility in dense numerical interfaces and small UI labels. 6. **UI kit**: Buttons, inputs, cards, tables, and layout components designed for reusability across new tools and pages. 7. **Website**: Landing page, tools overview, and contact form designed and coded for a smooth path from explanation to calculation. ![Civilus home page on a phone](https://mattriz.com/media/projects/civilus/cv-m-home-900.webp) ![The tools on a phone](https://mattriz.com/media/projects/civilus/cv-m-tools-900.webp) ![Shear and moment diagrams on a phone](https://mattriz.com/media/projects/civilus/cv-m-beam-900.webp) ![Civilus Website - Estudio Mattriz](https://mattriz.com/media/projects/civilus/instagram-post-188-1080.webp) ![Civilus Website - Estudio Mattriz](https://mattriz.com/media/projects/civilus/instagram-post-124-1080.webp) Impact A cohesive brand and responsive site that make Civilus technical tools feel approachable and trustworthy, helping students and professionals quickly understand the value of the platform and start solving structural problems online. ![Civilus Website - Estudio Mattriz](https://mattriz.com/media/projects/civilus/instagram-post-232-1600.webp) ![Civilus Website - Estudio Mattriz](https://mattriz.com/media/projects/civilus/instagram-post-116-1600.webp) ## Services - Brand system - Guidelines - UI kit - Web design and front-end development - Netlify deployment and domain setup ## Stack - Adobe Creative Cloud (Illustrator / Photoshop) - Figma - Google Fonts - VS Code - React · HTML · CSS · JavaScript - GitHub (version control) - Netlify (build & hosting) ## Deliverables - Brand mini-manual (PDF) - Logo and icon files (SVG/PNG) - Color and typography specs - UI components library (Figma) - Responsive landing page and tools UI - Netlify deployment, domain connection, and basic configuration ## Timeline 6–8 weeks from brand refresh to live website ## 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 civilus.co](https://civilus.co/) --- ## 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