← Back to portfolio

Shop with Aaron · Brand Kit

Keeping the cart, the color, and the type consistent everywhere it shows up.

The current mark system, the colors already live on shopwithaaron.com, and the two typefaces the site runs on, collected in one place so anything new gets designed from the same starting point.

Logo

One cart icon, five ways to use it. Pick the version that fits the space. Never distort or rebuild the mark to force a fit.

Round badge mark
Badge
Horizontal lockup
Horizontal
Icon only
Icon
Stacked lockup, one line
Stacked
Stacked lockup, two lines
Stacked, 2-line

Clear space

Cart icon with clear space guide

Keep clear space equal to the height of the cart on all sides. Text, edges, and other logos should never cross that line.

Minimum size

Badge at 88pxBadge: 88px
Wordmark at minimum widthWordmark: 140px wide
Icon at 24pxIcon: 24px

The badge and stacked marks carry small text, and below their minimums the ring copy blurs out. The icon has no text, so it can go all the way down to a favicon.

Wrong color example
Don't recolor the cart outside brand blue & ink
Stretched example
Don't stretch or squash a lockup
Rotated example
Don't tilt or rotate the mark

Color Palette

Pulled straight from the tokens already running on shopwithaaron.com. This is the live palette, not a proposal.

Brand Blue

#2061B7
rgb(32,97,183)

Primary color for buttons, links, and the cart icon.

Brand Deep

#174A8A
rgb(23,74,138)

Hover states, headers, high-contrast text on light blue.

Brand Soft

#BDE9FB
rgb(189,233,251)

Tinted panels, badges, secondary fills.

Brand Tint

#E9F8FD
rgb(233,248,253)

Section backgrounds, the palest touch of blue.

Ink

#0F1F3A
rgb(15,31,58)

Body text, the icon's line work.

Muted

#6A7A93
rgb(106,122,147)

Captions, secondary copy, timestamps.

Paper

#EAE0DA
rgb(234,224,218)

The warm neutral, used for alternate backgrounds, receipts, and print.

White

#FFFFFF
rgb(255,255,255)

Cards, the app background, negative space.

AAA 16.4:1Ink on white body textAAA 8.8:1White on Brand Deep buttonsAA 6.1:1White on Brand Blue buttonsAAA 12.7:1Ink on Brand Soft panels

Typography

The two faces already loaded on shopwithaaron.com. Oswald carries headlines, Fira Sans carries everything you read.

Display Oswald · 600–700

Your Order Is On The Way

Condensed and upright, with the same energy as the cart's speed lines. Reserve it for headlines and buttons. Never set long paragraphs in it.

Body Fira Sans · 400–600

A real, dedicated shopper on every order, from your list to your door in Rancho Cucamonga and nearby.

Regular 400Medium 500Semibold 600Bold 700

Quick Reference

Colors

  • Brand#2061B7
  • Brand Deep#174A8A
  • Brand Soft#BDE9FB
  • Brand Tint#E9F8FD
  • Ink#0F1F3A
  • Paper#EAE0DA

Type & Marks

  • DisplayOswald
  • BodyFira Sans
  • Icon minimum24px
  • Badge minimum88px
  • Clear space1× cart height
  • Marks in system5 current

Shop with Aaron is a DBA of Aaron Wilson LLC. Brand designed and documented by Aaron Wilson LLC.