KaveGuild Website Replication

This project was an internship activity at Kaveguild: a replication exercise designed to get familiar with their existing website layout, design patterns, and Figma workflow. The goal wasn't to redesign or improve anything, but to reproduce the desktop UI as faithfully as possible, pixel by pixel, color by color, building foundational confidence in Figma while developing a sharper eye for design detail.

Replicating the desktop site from scratch was the most direct way to learn by doing, and the challenge was in how precisely it could be done.

• Studied and broke down the existing Kaveguild desktop layout, identifying grid structures, spacing rhythms, and typographic hierarchy before touching Figma.
• Rebuilt each section of the site with a focus on pixel-level accuracy, using the color dropper to match exact brand colors, carefully replicating font sizes, weights, and line spacing.
• Paid close attention to the small details that make a replication feel seamless, button states, padding consistency, image ratios, and element alignment.
• Used the exercise to get hands-on with Figma's core tools: frames, auto layout, text styles, and layer organization, in a real-world design context.

This exercise taught me that good design lives in the details. Replicating someone else's work forces you to slow down and really look, noticing the exact padding between sections, the precise color values, the subtle weight difference between a heading and a subheading. None of that is obvious until you have to reproduce it yourself.

What I genuinely enjoyed was the pursuit of getting it just right. Using the color dropper to match exact hues, adjusting spacing until it felt identical, and refining elements until the replica was indistinguishable from the original — that attention to detail became something I carried into every project after. It also gave me a strong, practical foundation in Figma that made everything that followed feel much more natural.