Strategy
Data-driven plans
Growth Marketing Agency
We connect brands to growth.
A practical design system for Wasel Agency: bold purple surfaces, lime growth signals, clean white workspaces, and animated upward paths that turn strategy into momentum.
120+
Projects delivered
85+
Happy clients
250%
Average growth
Creative
Scroll-stopping ideas
Performance
Campaigns that convert
Analytics
Insights that scale
01 / Foundations
Identity rules extracted from the PDF and assets.
Wasel should feel energetic, clear, and performance-led. The system uses a small palette, large confident type, and a repeating growth arrow motif.
Core signal
Purple owns the brand. Use it for hero areas, navigation, badges, icons, and campaign surfaces.
Growth cue
Lime is the action color. Reserve it for CTAs, highlights, progress, and arrow-led motion.
Workspace
White gives the system breathing room. Use it for service cards, dashboards, forms, and content-heavy views.
Wasel Purple
#704EF0
Primary brand, icons, active state
Growth Lime
#D8FF33
CTA, highlight, growth path
Pure White
#FFFFFF
Surfaces, content fields, contrast
Performance Ink
#17122F
Headlines and dense text
Typography
Ara Hamah 1982 for brand feel. Poppins for UI clarity.
The PDF names Ara Hamah 1982, while the application mockups use a Poppins-like UI rhythm. This build keeps the round, open spacing while using a reliable web stack.
Growth
We connect brands to growth
Strategy, creative content, performance marketing, and analytics work together as one system.
Asset usage
Use the 3D mark as a campaign hero, not as a tiny icon.
The flat mark works for compact navigation and product UI. The 3D mark should anchor social posts, launch visuals, pitch covers, and animated growth moments.
02 / Components
Production-ready building blocks.
Buttons, cards, metrics, navigation, forms, and service modules are shaped around clear action and fast scanning.
WaselAgency
Campaign header
Purple shell, lime CTA, translucent metric cards, and motion path in the background.
Animate pathPerformance Marketing
ROI-focused campaigns across Meta, TikTok, Google, Snapchat, and growth channels.
Revenue growth after a full-funnel campaign sprint.
03 / Motion language
Movement should draw growth, not decorate the page.
Motion rules are based on the brand arrow: curves, lifts, reveals, progress, and confident upward transitions.
01
Discover
02
Strategize
03
Create
04
Launch
05
Optimize
06
Scale
Reveal
Fade in with 16px upward lift. Duration 600ms.
Path draw
Stroke draws from left to right. Duration 1600ms.
Hover
Move 4px up and intensify the lime or purple glow.
Reduced motion
Keep state changes visible without continuous animation.
04 / Responsive system
Desktop depth, mobile focus.
Desktop can carry layered hero visuals and service stacks. Mobile should prioritize brand mark, headline, CTA, and one action at a time.
Desktop
Wide hero, split content, visible metrics, and layered services.
Grow with precision
Mobile
Single-column flow, large CTA, compact cards, and fewer overlays.
System summary
Back to top
Wasel should look fast, clean, and growth-obsessed.
Keep purple as the world, lime as the action, white as the work surface, and the arrow path as the recurring brand gesture.