Rule29
Worked with a marketing agency on their own rebrand.
Accessible doesn't mean ugly.
As a B Corporation®, Rule29 is committed to accessibility. We had the challenge of making sure the site met AA ADA requirements, while also looking fresh. On the developer side, that means making sure semantic HTML is used, that the CMS is creating valid syntax trees, that keyboard navigation is clear and easy, and that alt text and other ARIA roles are clearly presented to the user.
On the design side, we needed to make sure the text-to-background color contrast ratio was ample, that videos had transcripts or captions, that outbound links were clear, and that site links were clear.
Custom Storyblok Sections and Plugins
At the onset of building the site, I worked with the eagle-eyed designer, Susan Herda, to create a list of site wide styles. This included brand colors, gradients, fonts, button radii, image radii for desktop and mobile, a list of loading animations.
These lived as a design system in global CSS variables, so any adjustments during the project or after hand-off would be consistent throughout the site.
As a beta test for future clients, I created a custom Storyblok plugin that generates brand-compliant color gradients. The goal was to give content managers creative freedom to experiment with different gradients while keeping them locked into approved brand colors. The plugin lets users choose between color spaces like RGB, OKLCH, and sRGB. Each one renders completely different gradients from the same brand colors, so designers can find the perfect look without breaking brand guidelines.
"Trey was instrumental in the success of our website – clear communication and quick problem-solving from the initial build to final launch and beyond."
Susan Herda
— Rule29
Fluid Typography and Responsive Design
Rule29 got its start as a print-first design agency. Their designers are some of the best, but they were still learning how to design for a canvas with an unknown size: the screen. I worked with the design team to develop a responsive design system that would make their work look good no matter the device. This effort includes fluid typography and size conditional layouts.
Media Files
One of the recent trends in web design is a catchy hero video. Done incorrectly, these can severely impact key performance metrics, like LCP, that affect user experience and search ranking. I created an encoding preset that kept video quality and sharpness, while shrinking the video to 4MB.
All images use Storyblok's image engine to optimize for quality, size, and focus of subject matter.
Project Details
Website:
View Live SiteTechnologies: