Civilus

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

Year

2023

Client

Civilus

Brand IdentityUI/UX DesignWeb Development

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

What we did

Brand Identity UI/UX Design Web Development

Industry

Civil engineering · Structural analysis · EdTech / SaaS

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.

Services

Brand system
Guidelines
UI kit
Web design and front-end development
Netlify deployment and domain setup

What We Do

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

Stack

Adobe Creative Cloud (Illustrator / Photoshop)
Figma
Google Fonts
VS Code
React · HTML · CSS · JavaScript
GitHub (version control)
Netlify (build & hosting)

Timeline

6–8 weeks from brand refresh to live website

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.