05

Shapeflux Case Study

  • Role Lead Web Designer
  • Tools WordPress · Elementor Pro · Custom CSS · Photoshop
  • Live site View on Behance
Agency Website Dark Mode Advanced Elementor Web Development 2022
Shapeflux — agency website
Overview

The Concept

Shapeflux was conceptualized as a high-end digital agency portfolio. The goal was to build a visual presence that reflects their broad technical expertise — from UI design to back-end and mobile app development. Utilizing a deep dark mode canvas, the design relies on a striking custom gradient to evoke a sense of innovation and creative fluidity, positioning the agency as a premium, forward-thinking partner for global clients.

Built entirely using WordPress and Elementor, the project demonstrates advanced structural control and custom styling implementation. The entire architecture was optimized for performance and responsive behavior, proving that advanced visual effects can seamlessly coexist with a lightweight and maintainable structure.

5 Core services
100% Elementor build
Fluid CSS gradients
Responsive design
Interaction

Dynamic Workflow Snippets

Each service card integrates a 5-second looping video of the actual work process. This instantly demonstrates the agency's expertise in action from coding to video timelines without requiring user clicks.

Shapeflux Our Solution
Design System

Component-Driven Design

The Shapeflux interface relies on a highly focused token system — a strict dark palette, an energetic neon gradient, and a component library built for ultimate consistency across the agency's diverse service offerings.

01 · Color Palette (Deep Space & Neon Flow)

A single deep-black canvas anchors the layout, while a fluid neon gradient from Brand Green to Brand Blue creates striking glowing effects that guide the eye without overwhelming content.

Surface #1A1A1A
Neon Flow #6BFF8C 0% → #75BDFF 100%
Brand Green #6BFF8C
Brand Blue #75BDFF
Text #F1F8FF
02 · Typography

Clean, modern Sans-Serif optimized for digital interfaces. High-impact display headlines draw attention to the agency's value proposition, paired with scannable body text for technical descriptions.

Display Shapeflux Sans · 800
Heading Our Services Sans · 700
Body Premium digital solutions for global clients. Sans · 400
Label Web Development Sans · 400
03 · Spatial System & Architecture

Card-based services UI with generous padding and structured grid alignments. The layout breathes, maintaining an elegant uncluttered feel even when displaying dense technical information.

8px
16px
24px
32px
48px
Green
#6BFF8C
Blue
#75BDFF
14px
Cards

Pills