Services
Product Design
UX UI
Illustration
Brand
Nocci Furniture
Industry
Retail / E-commerce
I designed this UI kit for Noci, a furniture shopping app tailored to European users aged 25–50 with a passion for curated interiors and clean aesthetics. The goal was to create a refined yet welcoming interface, combining functionality with an editorial tone.
I designed this UI kit for Noci, a furniture shopping app tailored to European users aged 25–50 with a passion for curated interiors and clean aesthetics. The goal was to create a refined yet welcoming interface, combining functionality with an editorial tone.
The experience includes a soft onboarding flow with warm messaging, a catalog organized by room and material, a thoughtfully designed shopping cart, and a discovery section that encourages inspiration and exploration.
The experience includes a soft onboarding flow with warm messaging, a catalog organized by room and material, a thoughtfully designed shopping cart, and a discovery section that encourages inspiration and exploration.
I developed UI elements for product details, pricing cart, and check out interactions, balancing clarity with character throughout.z
Custom iconography made for the app.
I developed UI elements for product details, pricing cart, and check out interactions, balancing clarity with character throughout.z
Custom iconography made for the app.
The system was built in Figma and designed to scale. I created reusable components, defined text styles, icon sizes, color variables and tokens, border radii, elevation styles, and spacing rules. I also designed the app’s icon set in both filled and outline styles, including placeholders for future expansion.
The system was built in Figma and designed to scale. I created reusable components, defined text styles, icon sizes, color variables and tokens, border radii, elevation styles, and spacing rules. I also designed the app’s icon set in both filled and outline styles, including placeholders for future expansion.
Global Colors
Gray 100
Gray 100
#FFFEFC
Gray 200
Gray 200
#F2EFEB
Gray 300
Gray 300
#E3E3E3
Gray 400
Gray 400
#F2F0EC
Gray 500
Gray 500
#BCB7B2
Gray 600
Gray 600
#A39D98
Gray 700
Gray 700
#97928D
Gray 800
Gray 800
#5F564D
Gray 900
Gray 900
#403A34
Orange 100
Orange 100
#FFF0CF
Orange 200
Orange 200
#FFE6AE
Orange 300
Orange 300
#FFD270
Orange 400
Orange 400
#FFB34F
Orange 500
Orange 500
#FF9F23
Orange 600
Orange 600
#FF9811
Orange 700
Orange 700
#F38E0A
Orange 800
Orange 800
#ED6F00
Orange 900
Orange 900
#E46A00
Red 100
Red 100
#FFE9E9
Red 200
Red 200
#FFD7D7
Red 300
Red 300
#FFB4B4
Red 400
Red 400
#FF8C8C
Red 500
Red 500
#FF6060
Red 600
Red 600
#FF3F3F
Red 700
Red 700
#FF0000
Red 800
Red 800
#DF0505
Red 900
Red 900
#AA0000
Yellow 100
Yellow 100
#FFFBE5z
Yellow 200
Yellow 200
#FFF6C8
Yellow 300
Yellow 300
#FFF0A6
Yellow 400
Yellow 400
#FFEC8E
Yellow 500
Yellow 500
#FFE873
Yellow 600
Yellow 600
#FFDF3F
Yellow 700
Yellow 700
#F8D72E
Yellow 800
Yellow 800
#F8C92E
Yellow 900
Yellow 900
#EAB91B
Blue 100
Blue 100
#E7F2FF
Blue 200
Blue 200
#CBE3FF
Blue 300
Blue 300
#B1D5FF
Blue 400
Blue 400
#9CC7F8
Blue 500
Blue 500
#7BB2F0
Blue 600
Blue 600
#5F9ADD
Blue 700
Blue 700
#5088C8
Blue 800
Blue 800
#2E6FB9
Blue 900
Blue 900
#134F94
Green 100
Green 100
#E8FFF7
Green 200
Green 200
#C4FFEA
Green 300
Green 300
#9CFFDC
Green 400
Green 400
#84F1CB
Green 500
Green 500
#57EAB6
Green 600
Green 600
#37DDA3
Green 700
Green 700
#12CF8D
Green 800
Green 800
#0CB57A
Green 900
Green 900
#06A36C
Pure Black
Pure Black
#000000
Pure White
Pure White
#FFFFFF
Color Tokens
Font Styles
Borders + Elevations
The Outcome
The result is a flexible UI foundation that captures the brand’s personality while supporting future growth into a more advanced design system.
The Outcome
The result is a flexible UI foundation that captures the brand’s personality while supporting future growth into a more advanced design system.
The Outcome
The result is a flexible UI foundation that captures the brand’s personality while supporting future growth into a more advanced design system.