The Background
When Harmony Auto approached us, they had a unique vision - to build an online presence that not only showcased their exceptional range of automotive services but also conveyed their commitment to quality, craftsmanship, and attention to detail. We were thrilled to take on this project and turn their vision into reality. Our goal was to design a website from scratch that would resonate with their target audience and reflect the premium quality of their brand.
Style Guide
Logo
Typography
HEADINGS
Font Size: 40px
Font Weight: Bold
Line height: 48px
Font Size: 33px
Font Weight: Bold
Line height: 39.6px
Font Size: 27px
Font Weight: Bold
Line height: 32.4px
Font Size: 24px
Font Weight: Semibold
Line height: 28.8px
Font Size: 20px
Font Weight: Light
Line height: 30px
Letter Spacing: 1.2px
Font Size: 16px
Font Weight: Light
Line height: 24px
Letter Spacing: 0.96px
Mobile
Font Size: 30px
Font Weight: Bold
Line height: 36px
Mobile
Font Size: 28px
Font Weight: Bold
Line height: 33.6px
Mobile
Font Size: 20px
Font Weight: Bold
Line height: 24px
Mobile
Font Size: 18px
Font Weight: Semibold
Line height: 21.6px
Mobile
Font Size: 20px
Font Weight: Light
Line height: 30px
Letter-spacing: 2.8px
Mobile
Font Size: 16px
Font Weight: Light
Line height: 24px
Letter Spacing: 0.96px
BODY, LABELS
Font size: 24px
Line height: 39px
Font size: 20px
Line height: 35px
Font size: 18px
Line height: 27px
Font size: 16px
Line height: 24px
Font size: 14px
Line height: 21px
Font size: 12px
Line height: 18px
Colors
Gold (Metallic)
#D4AF37
Dark Cerulean
#0A417A
White
#FFFFFF
Slate Grey
#708090
Burgundy
#800020
Dark Charcoal
#333333
Accent Colors
BYD Red
#D70C19
BYD Grey
#686D71
UI Elements
Images
Figma 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.
Ready to work with us?
Explore Plans
More Projects
View All Works
CARD NUMBER 1
View All Works