Below you'll find all of the brand assets and CSS styles used throughout the Scaleworks website.
The Scaleworks website is built with a utility framework called Hatch. Hatch is similar to Bootstrap, but built for Webflow. It is made up of over 2,000 low-level utility classes, helping us work efficiently.
Need a section with some vertical padding? Try this.
Need a container div to center your content with a max width? Maybe at 1280px? Add this.
What about some margin-bottom? Say 2rem (32px).
Ok, but what if you want to remove that margin on Tablet sizes. Add a combo class like this.
Hatch works out of the box by scaling down font sizes and spacing at each breakpoint, but it's still flexible with breakpoint classes to set the exact style you want at each size.
Just start your class with Tablet, Landscape, or Portrait to apply a style at a specific breakpoint.
Be sure to check out the documentation to see all the utility classes Hatch has available.
The Scaleworks website has two brand fonts. For headings and short blocks of text we use Maison Neue. For smaller sizes and long paragraphs we use Source Serif Pro and all of the headings and paragraphs inherit that font from the body element.
This a longer paragraph using the font Source Serif pro.
Forms
The Scaleworks geometric pattern is used in hero sections of the website. The pattern source files can be downloaded as an Illustrator file from the below link.
The majority of the photography on the Scaleworks website was provided by Scaleworks. However some of the photos were treated with filters to more closely match the Scaleworks brand. Below are source files for those photoshopped photos.
All of the company logos that appear on top of the photos can be downloaded from the following link:
The Scaleworks animations were created with Adobe After Effects and exported using the Bodymovin plugin. They are rendered on the website from .json files using Lottie
Please don't hesitate to reach out if you have issues or find bugs erik@hunterdesign.io.
