Amica.com Design System

I set the shared design rules behind Amica.com’s 615-page rebuild.

Client
Amica
Role
Associate Design Director
Agency
Razorfish
Year
2026
Scope
Visual direction
Color rules for light and dark themes
Homepage and quote screens

Amica.com relaunched on October 2, 2026, after a rebuild covering 615 pages. I led the work on the shared color and component rules.

The problem

The project had gone four sprints without a dedicated design lead. The existing site had no shared color rules, so teams entered colors by hand and duplicated components for dark pages. The site also had to stay live during the rebuild.

The decision

I grouped colors by their job and gave each job a name. Components could then use the same color rules in light and dark themes, without separate copies for each theme.

My contribution

I joined as the first dedicated design lead. I set visual direction and led the team’s work on the homepage, product pages and quote screens. The component library already existed. I rebuilt the color rules and structure it depended on.

The quote form sits over a family photo and asks visitors to choose insurance and enter a ZIP code. Amica’s teal marks the utility bar and main action; the dark green footer carries the brand color below the page.

Amica.com homepage: a father helps his son in the kitchen beside a quote form
The form keeps the first quote step on the homepage: choose insurance, enter a ZIP code, then start.

Quote entry

The old card asked for a ZIP code and used a purple “Get a Quote” button. The new card adds an insurance choice, keeps the ZIP code field, and names the action “Start my quote.”

Before: the old quote card with a purple Get a Quote button
Before
After: the new quote card, product and ZIP code, then Start my quote
After

Design tokens are named rules that components can share. I grouped colors by where they appear: page background, cards and panels, text, borders, and depth. Each role has light and dark values, so components can switch themes without a duplicate set.

Five color roles shown separately and together on a card: page background, card surface, content, border and elevationFive color roles shown separately and together on a card: page background, card surface, content, border and elevation
The diagram shows how the page, card, text, border and depth colors work together.
A base teal maps to a named color rule used by a Continue buttonA base teal maps to a named color rule used by a Continue button
A button uses a named rule instead of a one-off color value.
A translucent hover layer appears over the button’s base colorA translucent hover layer appears over the button’s base color
Hover adds a translucent layer while keeping the base color.

The quote flow collects details about the driver and vehicle, then presents auto, home and bundled prices. It uses the same color rules and components shown above.

Vehicle information step in the quote flow, with options to enter details manually or use the VIN
The vehicle step offers manual entry or VIN entry, then asks for vehicle details.
Quote summary comparing auto, home and combined bundle prices
The summary places the two individual prices beside the bundle price.
The homepage on a phoneThe bundle quote on a phone
The homepage and quote summary use the same visual rules on a phone.

Want to talk about this work?

Email me