Constructer

Branding / UI design / Development

Constructer
Keywords:

Visual design, Branding, UI design, Frontend development, Wordpress development, Database management, Start-up.

Reading time:

1-2 minutes

Status:

Complete

Tools:
  • Pen & paper
  • Notion
  • Figma
  • Adobe
  • WordPress
  • PHP
  • HTML/CSS/SCSS
  • Javascript
Tasks:
  • Business and user research
  • Branding
  • Visual and interaction design
  • Bespoke WordPress theme development
  • Database migration and management

Introduction

The challenge

Construction is one of the world’s largest industries — and one of its least digitised. When launching Constructer.ai, the core challenge wasn’t just building a website. It was translating a complex AI infrastructure platform into a brand that felt:

  • Enterprise-ready
  • Technically credible
  • Deeply aligned with construction workflows
  • Visually differentiated from generic AI startups

The problem

Most AI companies look the same. Most construction platforms feel outdated. Constructer.ai needed to live confidently between both worlds.

Business research

Understanding the industry

The construction sector faces chronic inefficiencies:

  • Budget overruns
  • Delayed timelines
  • Fragmented communication
  • Reactive decision-making

AI offers predictive intelligence, but skepticism is high. Decision-makers demand clarity, reliability, and measurable ROI.

Competitive audit

We analysed:

  • Brand strategy
  • Logo design
  • Website design and bespoke wordpress development

Key insights:

  • Messaging focused too heavily on features.
  • UI systems were visually dense and hard to navigate.
  • Branding leaned either industrial and dated, or abstract and overly futuristic.

Opportunity identified:

Position Constructer.ai as structured intelligence — not experimental AI.

Brand strategy & visual identity

Core positioning

Constructer.ai is the AI infrastructure layer for modern construction operations.

It is not a tool or dashboard. It is an intelligence system.

Brand attributes
  • Calm
  • Perceptive
  • Credible
  • Supportive
  • Unflinching
  • Engineered
  • Intelligent
  • Confident
  • Scalable
Logo concept

The identity system merges:

  • Architectural geometry
  • Modular structures
  • Connecting structures

The mark reflects both:

  • Structural integrity (construction)
  • Network intelligence (AI systems)

Typography is clean and engineered — eliminating unnecessary visual noise.

Constructer logo
Constructer logo
Colour system

Primary colours:

  • #000e30 — Deep Structural Navy
  • #33ffff — Signal Cyan
  • Connecting structures

#000e30 functions as the foundation colour. It represents:

  • Structural integrity
  • Depth
  • Technical authority
  • Enterprise credibility

#33ffff acts as the intelligence signal layer. It is used selectively for:

  • Primary CTAs
  • Interactive states
  • Data highlights
  • Key metrics

The pairing creates a high-contrast, futuristic aesthetic without sacrificing professionalism.

Secondary palette:

The extended system supports layering, hierarchy, and data visualisation.

  • #00e30 — Bright Tech Accent
  • #002080 — Deep System Blue
  • #0037c7 — Core Platform Blue
  • #3366ff — Interface Blue
  • #3399ff — Light Interaction Blue
  • #4ebeed — Data Highlight Blue

These secondary tones enable:

  • Gradient systems for hero sections
  • UI state differentiation (hover, active, focus)
  • Data visualization scaling
  • Modular section separation
  • Subtle depth within dark surfaces
Constructer
Typography system:

Typography was selected to reinforce Constructer.ai’s positioning as engineered intelligence — structured, modern, and enterprise-ready.

Constructer
Constructer

Typographic principles:

  • Clear hierarchy — Large, confident hero statements with controlled scaling.
  • Generous spacing — Increased line-height for readability in technical content.
  • Minimal decorative styling — No unnecessary embellishment.
  • Consistent CTA treatment — Roboto Flex Medium with slight letter-spacing for precision.

Combined system impact:

The integration of color and typography results in a digital presence that feels:

  • Engineered
  • Structured
  • Futuristic without being experimental
  • Clear under cognitive load

Together, the palette and type system reinforce Constructer.ai’s identity as a platform designed with the same rigor as the infrastructure it serves.

UI design system

Modular grid:

Inspired by architectural schematics:

  • Clean vertical rhythm
  • Structured spacing
  • Predictable alignment
  • Balanced density
View Figma prototype

Development

The website was coded with HTML, SCSS, Vanilla Javascript, PHP Wordpress.

HTML5
CSS 3
Sass SCSS
Javascript
PHP
Wordpress
Visit site
Custom WordPress theme architecture

To ensure long-term scalability, editorial flexibility, and enterprise-grade control, Constructer.ai was built on a fully custom WordPress theme — not a pre-built template. This approach allowed us to:

  • Precisely implement the modular design system
  • Maintain strict performance standards
  • Avoid unnecessary plugin bloat
  • Create reusable, structured content blocks
  • Ensure full control over accessibility and SEO
Dual-language implementation

Given Constructer.ai’s international positioning, the site was developed with a dual-language switch system. Key considerations:

  • Seamless language toggle in primary navigation
  • Mirrored layouts across languages
  • Independent SEO indexing per language
  • Clean URL structure per locale
  • CMS-controlled translations for scalability

The language switch maintains:

  • Persistent user selection across sessions
  • No layout shifts during switching
  • Consistent typographic hierarchy across both languages

This ensures the brand voice remains structured and authoritative in each market.

Performance-first engineering
  • Lightweight theme architecture
  • Minimal third-party dependencies
  • Optimised asset loading
  • Image compression and lazy loading
  • Script deferment and code splitting

Want more information? Get in touch.