Case Study // 2024

Furniro Furniture

Pixel-Perfect E-Commerce UI built with Next.js and Tailwind CSS

Project Meta

IndustryE-Commerce & Retail
RoleFurniture E-Commerce
Year2024
WebsiteLaunch Live

The Vision

From Figma to Responsive Reality

I developed this professional, clean e-commerce interface for a hackathon based directly on a Figma design. Writing the code manually, line by line, I ensured it was fully responsive across all devices. This project also served as my deep dive into learning Tailwind CSS for the first time, resulting in a highly polished and performant frontend architecture.

System Spec // 01

Brand Design System

RGB / HEX / HSL

Furniro Gold

// Primary Action Accent

A sophisticated, warm gold chosen for the primary buttons. It establishes an immediate sense of premium quality and luxury, driving focus to the main calls to action.

HEX CODE#b88f30

RGB SPECrgb(184, 143, 48)

HSL VALUEhsl(42, 59%, 45%)

APPLICATIONS:Primary buttons, key UI highlights, and active state markers.

Soft Ivory Canvas

// Highlight Backgrounds

A soft, creamy ivory utilized for highlighting background sections. It provides a warm contrast against the products, making the furniture pieces visually pop while maintaining a clean aesthetic.

HEX CODE#faf3eb

RGB SPECrgb(250, 243, 235)

HSL VALUEhsl(32, 50%, 95%)

APPLICATIONS:Product card backdrops, section highlighters, and soft UI spacing.

Deep Oak Brown

// Button Hover States

A rich, deep oak brown applied to hover states. It provides excellent tactile feedback for users interacting with buttons, grounding the design with an earthy, solid feel.

HEX CODE#6e561f

RGB SPECrgb(110, 86, 31)

HSL VALUEhsl(42, 56%, 28%)

APPLICATIONS:Interactive button hover states and deep text accents.

Visual Showcase