Hana Sauce Co
![](https://cdn.prod.website-files.com/657fd557465ed5c6e7ef8181/65e84597799429dd36c17314_codevidia-hanasauceco-web-design-portfolio-new.webp)
The Background
Clientwise is a cutting-edge case management web application developed with WordPress, showcasing our advanced WordPress development capabilities. This robust system is designed to seamlessly integrate with essential e-commerce functionalities, leveraging custom-coded themes and plugins to extend the capabilities of WooCommerce, WooCommerce Memberships, and WooCommerce Subscriptions.
![](https://cdn.prod.website-files.com/657fd557465ed5c6e7ef8181/661c8d33674cb453721f19ed_Group%20162880.webp)
![](https://cdn.prod.website-files.com/657fd557465ed5c6e7ef8181/661c8d4c8cb8825e6fea6828_Group%20162878.webp)
![](https://cdn.prod.website-files.com/657fd557465ed5c6e7ef8181/661c8d653f78201c6aedb895_Group%20162879.webp)
Style Guide
Typography
HEADINGS
Font Size: 65px / 4.063rem
Font Weight: Medium
Line height: 24px / 1.5rem
Letter Space: -0.24px / -0.015rem
Font Size: 38.4px / 2.4rem
Font Weight: Medium
Line height: 53px / 3.313rem
Letter Space: -0.24px / -0.015rem
Mobile
Font Size: 50px / 3.125rem
Font Weight: Medium
Line height: 69px / 4.313rem
Letter Space: -0.24px / -0.015rem
Mobile
Font Size: 25px / 1.563rem
Font Weight: Medium
Line height: 35px / 2.188rem
Letter Space: -0.24px / -0.015rem
BODY, LABELS
Font size: 25.6px / 1.6rem
Line height: 30.72px / 1.92rem
Letter Spacing: 0.96px / 0.06rem
Font size: 22.5px / 1.406rem
Line height: 27px / 1.688rem
Letter Spacing: 0.96px / 0.06rem
Font size: 18.9px / 1.181rem
Line height: 22.68px / 1.418rem
Letter Spacing: 0.96px / 0.06rem
Font size: 16.8px / 1.05rem
Line height: 20.16px / 1.26rem
Letter Spacing: 0.96px / 0.06rem
Font size: 13.65px / 0.853rem
Line height: 16.38px / 1.024rem
Letter Spacing: 0.96px / 0.06rem
Colors
Arsenic
#3F454C
Rich Black
#020912
White
#FFFFFF
UI Elements
![](https://cdn.prod.website-files.com/657fd557465ed5c6e7ef8181/65e1987cefd7661f448c0e4f_hana-sauce-form.png)
Images
![](https://cdn.prod.website-files.com/657fd557465ed5c6e7ef8181/65e198d70a8864c3f3ccaa62_IMG_8912.png)
![](https://cdn.prod.website-files.com/657fd557465ed5c6e7ef8181/65e1998f799428a3f091f72e_Artboard_2.png)
UI Design
Our UI/UX design process on Figma involves a meticulous exploration of client requirements, followed by the creation of pixel-perfect responsive designs. Leveraging Figma's collaborative features, we seamlessly transition from wireframes to high-fidelity designs, ensuring a visually stunning and flawlessly responsive user interface across diverse devices.
![](https://cdn.prod.website-files.com/657fd557465ed5c6e7ef8181/65dda9bb4a2ec3d7ff58945a_Hana%20Sauce%20Co%20home.png)
![](https://cdn.prod.website-files.com/657fd557465ed5c6e7ef8181/65dda9d17a91d9431c8c7622_Hana%20Sauce%20Co%20catalog.png)
![](https://cdn.prod.website-files.com/657fd557465ed5c6e7ef8181/65dda9eecd4cb92b57c5372c_Hana%20Sauce%20Co%20About.png)
![](https://cdn.prod.website-files.com/657fd557465ed5c6e7ef8181/65ddaa0beddb6cc5e53ba7f9_Hana%20Sauce%20Co%20Contact.png)
Ready to work with us?
Explore Plans
More Projects
View All Works