A nail studio's visual identity, rebuilt until it stopped reading as a template.
Overview
A portfolio and services site for a nail studio, built on the same technical foundation as a sibling project but given a distinct visual identity of its own.
The first version leaned too heavily on a sibling project's layout patterns — competent, but not distinctive enough for a business that depends on visual craft to sell itself.
Challenge
The NH monogram — the identity's central mark.
Approach
Redesigned the core sections around a calmer, modular composition once the initial direction was judged too close to a recolor of the sibling site, then hardened the result against two real cross-browser rendering bugs before it shipped.
The site, as built
Design & Development
- A layout built to look considered, not recolored
- Every section was redesigned into a bento-style, asymmetric composition — one considered focal point per section — rather than reusing another site's grid with new colors.
Technical Decisions
- A gradient-text bug traced to a layout mode conflict
- A CSS clip effect used for the wordmark was silently rendering blank on any element that was also a flex container — the two properties conflict in how the browser lays out the clipped text. Fixed by applying the effect only to non-flex elements.
- A second animation silently overwritten by the first
- Two separate animated effects on the same element don't combine automatically — the second one declared simply replaces the first. Fixed by merging both into a single animation list instead of two competing ones.
- Correct entity data, not just correct copy
- Structured data was rebuilt to accurately describe the practitioner and the business she works within, matching her real, verified business listing.
Results
Largest Contentful Paint
348ms
Median of three unthrottled loads with the browser cache disabled. No before is claimed: the earlier direction was a design draft that never shipped, so there is no measured prior state to improve on.
Cumulative Layout Shift
0
Nothing on the page moves after it paints — measured as an exact zero across all three loads, not rounded down to one.
- Role
- Design, Development
- Stack
- Next.js, TypeScript, Tailwind CSS
- Year
- 2026
- Industry
- Beauty