Beryll

The problem

Beryll's blog articles had no consistent layout from one post to the next. Image aspect ratios varied post to post, and the default 16:9 ratio was too tall for a site built around a full-width, limited-height design. Typography wasn't matching the brand's own design documentation, and the BuyItNow button on the product detail page had a broken hover state.

What I built

A reusable blog template

I built a self-service template that applies consistent layout across articles, including "5 Benefits of Wearing Sunglasses Regularly" and "Taking Care of Your Sunglasses: How It's Done," so new posts don't need a developer to look right.

A standardized image ratio

I set 21:9 or 16:7 as the standard instead of the default 16:9, documented against a target canvas size of 2002×858, so every new image fits the site's design language without trial and error.

Typography matched to the brand's design doc

I evaluated Space Mono and Overpass Mono, both free, against Klim Financier at roughly $400, against the client's own design documentation, to land on typography that actually matched the intended brand.

Fixing the product page

I restored the broken hover state on the BuyItNow button, and scoped a client request for duplicate-blog-post functionality, which turned out to need a third-party app rather than a native fix.

What actually changed

What changed	Before	After
Blog consistency	Inconsistent layouts	Reusable template
Image display	Wrong ratios	Standardized 21:9 / 16:7
Typography	Mismatched	Design-doc aligned
Product UX	Broken hover state	Fixed