Skip navigation
  • Work
  • About

Abercrombie Kids Design System

Fall 2019

Abercrombie Kids was transitioning to a CMS and needed to create a design system for their marketing creative. I reviewed all of their recent creative from different designers to find themes and happy middle grounds. Using what I know about marketing design from my experience at Abercrombe & Fitch and Victoria's Secret, I broke these down into elements and simplified them until I had an efficient system for building marketing creative that still allowed for flexibility. I completed this project while delivering spec sheets and assets for the 2019 holiday season marketing homepages.

UI Design
Style Guide Design
Development Deliveries

Desktop Editorial Lockup Elements - Atoms

Style guide showing all the atoms available for a desktop editorial lockup. The diagram starts at the top listing all the leadin styles horizontally. Next is headline styles, organized into large and small, with one line and two line options for both sizes. Subheadline style is below that, then body copy, and then button styles. Desktop editorial lockup atoms with padding and css classes specified.

Desktop Editorial Lockups - Molecules

Style guide showing all the possible combinations of desktop editorial atoms. Across the X axis of the diagram is all the headline styles, and across the y axis is all the stacking combinations with leadin, subhead, and body copy.

Desktop Lockup Positioning

Style guide document showing nine feature space placements for desktop editorial lockups. Across the X axis is left, center, and right. Along the y axis is top, center and bottom. The diagram includes margin specifications. Below the feature lockups are examples of how to place lockups in small and large offer banners, with margin specifications.

Desktop Offer Lockup Elements - Atoms

Style guide showing all the atoms that are possible in a desktop offer lockup. Starting with lead-ins, through headlines, to buttons. Offer lockup atoms with padding specifications.

Desktop Offer Lockup Examples - Molecules

Three examples of how the offer atoms can be combined into molecules. One lockup is for a free plush moose with $75 purchase. Another one is more complex, combining two offers: Winter Sale all clearance up to 70% off, plus take an extra 20% off entire purchase.

Mobile Editorial Lockup Elements - Atoms

Mobile versions of the editorial lockup atoms in the same format as the desktop editorial lockup atoms. Mobile editorial lockup atoms with padding and class names specified.

Mobile Editorial Lockups - Molecules

Style guide document showing all possible combinations of the mobile editorial atoms.

Mobile Lockups Positioning

Document showing the possible placements for mobile editorial lockups within features. From left to right, the images show margin specifications for the bottom, middle, and top alignment, as well as a variation for button placement.

Mobile Offer Lockup Elements

Mobile offer lockup atoms, listed with the leadin options at the top through the headlines and the buttons at the bottom. Mobile offer lockup attoms with padding and css classes specified.

Black Friday Abercombie Kids Homepage

Abercombie Kids black friday homepage at the desktop browser size. The entire page is telling the story of 40% off entire store, with the tagline the moose is loose. Abercrombie Kids black friday homepage at the mobile browser size.

Next Project

Abercrombie & Fitch

web design, art direction