Civilus | Brand identity & website

Case study2023

Visual identity and website for an online structural-calculus platform.

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.

(01) 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

(02) 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

Section properties: area, centroid, inertia, section moduli and torsional constant — Twelve properties at once, with units you can switch.

Beam Solver: beam data, supports and the free body diagram

Shear and bending moment diagrams for the solved beam — From supports and loads to shear and moment diagrams, in the browser.

(03) What We Do

01Brand strategy & key messaging
Defined Civilus as an accessible, online companion for structural calculations, with messaging focused on speed, reliability, and ease of use.
02Brand guidelines
Usage rules for logo, color, and imagery to keep the brand consistent across the website, decks, and social channels.
03Identity system
Logotype and icon for use on the site header, favicons, and social avatars.
04Color system
Technical yet approachable palette with strong contrast for UI, charts, and call-to-action states.
05Typography system
Google Fonts stack optimized for legibility in dense numerical interfaces and small UI labels.
06UI kit
Buttons, inputs, cards, tables, and layout components designed for reusability across new tools and pages.
07Website
Landing page, tools overview, and contact form designed and coded for a smooth path from explanation to calculation.

(04) 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.

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

Visit the live sitecivilus.co

Next projectSpot On Mobile Wash & Detailing Visit the site