Design System
Analysis of Gucci

A near-monochrome editorial system — pure black on white, an ultra-thin display weight, razor-sharp corners, and tight letter-spacing standing in for colour.

01 — Foundations

Colour Palette

There is essentially no palette — only the discipline of black and white, a tight grey ramp for hierarchy, hairlines for structure, and a single functional green reserved for form feedback.

02 — Foundations

Typography

Proprietary Gucci Sans Pro, shown here in its nearest Google substitute, Archivo. Hierarchy is built from weight and tracking, not size: a feather-thin weight-100 display up top, tight negative letter-spacing everywhere, and a 12px label doing most of the interface work.

03 — Components

Button Variants

button-primary
Solid black fill, white uppercase label with slight positive tracking, square corners. The single highest-emphasis action.
button-dark
Identical black to primary — the system's emphasis colour and its dark surface are one and the same.
button-secondary
A 1px black outline on white. Equal footprint, lower emphasis.
button-pill
The rare rounded form — used only for chips and toggles, never primary actions.
04 — Components

Cards & Surfaces

Product cards are borderless and shadowless at rest — image, name, price — lifting on a single faint shadow only on hover.

05 — Components

Form Elements

On the live site, fields are drawn as underlined rules rather than boxes; shown here boxed for the style guide, always on a 1px hairline.

text-input
textarea
06 — Foundations

Spacing Scale

An 8px base with a 4px half-step; gutters and module padding run generously to 40px and beyond.

07 — Foundations

Border Radius

Corners are effectively square — 1–2px almost everywhere — with larger radii reserved for the occasional circular icon or pill chip.

08 — Foundations

Elevation & Depth

Level 0 — 1px hairline only. The default state of nearly every surface; structure comes from borders and whitespace, not shadow.
Level 1 — a faint 0 4px 8px rgba(0,0,0,.08) lift, used almost exclusively on hovered product cards.
Level 2 — a deeper 0 0 18px rgba(0,0,0,.20) halo, reserved for floating overlays and dialogs.
09 — Responsive

Responsive Behavior

NameWidthKey changes
Mobile< 768pxSingle-column product grid, hamburger menu, centred wordmark; display type shrinks but keeps its thin weight.
Tablet768–1023pxTwo-up product grids, condensed utility nav, 40px gutters maintained.
Laptop1024–1279pxFour-up product rows return; full horizontal navigation under the centred logo.
Desktop≥ 1280pxEdge-to-edge imagery, maximal whitespace, the thin display scales up to its full editorial size.

The constant across every breakpoint is the ratio: a lot of white, a little black, and almost nothing else competing for attention.

10 — Patterns

Service Tiers

The House has no subscription pricing; these delivery & service options demonstrate the card and emphasis pattern — note the featured tier inverts to solid black.

Standard
Free
Complimentary delivery in 3–5 business days.
  • Signature packaging
  • Complimentary returns
  • Order tracking
Express● Most chosen
$25/ order
Next-business-day delivery, signature on receipt.
  • Everything in Standard
  • Next-day delivery
  • Priority handling
  • Gift wrapping
By Appointment
Private
One-to-one styling at your nearest boutique.
  • Dedicated client advisor
  • Private fitting room
  • Collection previews
11 — Patterns

Order History

Account tables — orders, addresses — use uppercase hairline headers and a quiet, zebra-free divider rhythm.

OrderItemBoutiqueStatusWhen
#US-4837Leather Shoulder BagMilanShipped2 days ago
#US-4821Horsebit LoaferNew YorkDelivered1 week ago
#US-4810Silk Twill ShirtOnlineProcessing1 week ago
#US-4795Wool & Silk ScarfLondonDelivered3 weeks ago
#US-4788Leather WalletOnlineReturned1 month ago
1–5 of 412
123
12 — Patterns

Account Access

Sign-in and registration share the same hairline fields and full-width black actions, with the heading set in the thin display weight.

Sign in

Welcome back

OR
Create account

Join Gucci

OR