Irfan Mukhlis - Designer & Developer

LANDING PAGE

WEBADOO

ABOUT

Webadoo is a landing page for a web development agency that operates across both branding and development. The project started as a Framer site, then rebuilt from the ground up into a fully coded, production-ready landing page with its own design system and component library.

CHALLENGE

The original Framer site lacked a proper design system — colors, spacing, and components were inconsistent and not portable into code. The challenge was to establish a structured visual system in Figma, then reconstruct the entire page in code while elevating the aesthetic direction and maintaining full creative control.

SOLUTION

The process began with Google Stitch AI to generate design mockups and establish the creative direction, informed by 5 years of design experience. From there, the design system was built out in Figma — color tokens, typography scale, and reusable components — before being developed into a fully coded landing page using Vite, React, TailwindCSS v4, and TypeScript.

TOOLS

01 Concept & Branding

Webadoo is structured around simplicity and directness — a single-page layout with anchor navigation that brings users to each section without friction. The structure reflects the agency's positioning: no unnecessary complexity, just clear communication of what they do and how they do it.

The brand concept is built around the idea of a studio that operates with precision — every design decision deliberate, every development choice justified. The landing page needed to embody that same discipline visually.

Visit Live Site

02 Aesthetic Direction

Indigo was chosen as the primary color identity for Webadoo as a deliberate signal — it carries a sense of premium quality and professional weight without the coldness of blue or the aggression of purple. It reads as considered and confident.

This is complimented by a dark theme throughout the brand. Dark backgrounds allow the indigo accents to command attention without competing for it — creating a visual atmosphere that feels luxurious and intentional rather than loud.

03 Typography and Typefaces

Inter was chosen as the primary typeface for Webadoo — not by default, but by fit. Its clean, neutral letterforms work in service of the content rather than competing with it, which matters for an agency page where clarity of communication is the priority.

Its extensive weight range allows the typography system to create a clear hierarchy — heavy weights for headlines that demand attention, lighter weights for body copy that supports without distracting. The result is a reading experience that feels structured and professional throughout.

04 Components

Frequently used UI patterns are built as modular, self-contained components — isolated enough to be dropped into any project without modification, consistent enough to maintain visual coherence across the full page.

The same component thinking carries into Figma. Each coded component has a Figma counterpart, keeping the design file and codebase structurally aligned. This means updates, variants, and iterations start from a foundation that's already production-ready on both sides.