Griffith Bros

WEB DESIGN

WEBFLOW DEV

figma

Griffith Bros. Service Centre has been a family-owned auto repair shop in South River and Sundridge, Ontario, since 1960.

I designed the site in Figma and built it in Webflow, keeping the UI clean, straightforward, and easy to navigate. The focus was on making key services quick to find while keeping the design professional and approachable. The layout is simple but effective, with a clear hierarchy that helps customers get the info they need without any friction.

A laptop displaying a dark-themed auto repair website for Griffith Bros, featuring a bold headline and an image of a branded service truck. The laptop is placed on a rugged rock surface, creating a contrast between technology and texture.

A mobile app shopping cart screen displaying three environmental projects with images, titles, and purchase details. Each project lists the amount of carbon offset in kilograms and its price in USD, with quantity selectors and delete icons. Below, a summary shows the subtotal of $370, tax of $48.10, and a total of $418.10. A blue 'Continue' button is at the bottom, along with a navigation bar featuring home, community, analytics, and settings icons.

A laptop displaying the Griffith Bros towing services webpage. The screen features a bold headline stating 'Reliable Towing Services by Griffith Bros.' alongside an image of a large black tow truck with the company’s branding. The page includes a 'Schedule Towing' button and a navigation menu with links to towing services, testimonials, and contact information.

A spacing system guide displaying various spacing tokens with corresponding pixel values. Each row lists a token name, size in pixels, and a visual representation of the spacing using horizontal bars that increase in length as the spacing size increases.

A button style guide displaying different button variations categorized as Primary, Secondary, Outlined, and Tertiary, along with their Destructive counterparts. Buttons feature a label and an icon, with styles ranging from solid-filled to outlined and text-only variations in blue and red hues.

A typography scale guide using a 1.250 Major Third scale. It displays different heading sizes from Heading 1 to Heading 6, with their corresponding REM and pixel values. The guide also includes body text sizes labeled as 'Body' and 'Body Small' with their respective measurements.

A neutral colour palette for Griffith Bros, displaying a range of grayscale shades. The palette consists of twelve swatches, from light gray to dark black, each labeled with a corresponding hex code and shade number, arranged from the lightest (S3) to the darkest (950).