№ toryburch-com

Toryburch

Quiet coastal haze—deep teal ribbons dance across a spacious, softly brushed ivory canvas.

Photographicminimalism editorial monochrome vintage fashion ecommercelight

The image dominates the viewport, establishing a mood of relaxed luxury. The typography is clean and minimal, allowing the visual to take center stage. The overall feel is sophisticated and aspirational. · luxury fashion, summer campaign, womenswear, tory burch, beach style, editorial fashion, minimalist style

Hero - desktop 1440 × 900 · mobile 375

See history ↻Visit source ↗

The whole page, top to bottom - desktop & mobile

Palette

Click any value to copy. Roles are suggestions, not gospel.

Reads as: muted · pastel · monochrome

SwatchHexOKLCHSuggested roleCopy

Hex#2c5974
OKLCHoklch(44.4% 0.067 237)
RoleDominant
find sites →
Hex#2a4b64
OKLCHoklch(39.9% 0.058 243)
RoleSurface
find sites →
Hex#9ec4da
OKLCHoklch(80.0% 0.051 234)
RoleInk
find sites →
Hex#967c63
OKLCHoklch(60.4% 0.048 66)
RoleAccent
find sites →
Hex#bcbcc3
OKLCHoklch(79.7% 0.010 286)
RoleDetail
find sites →

How to build one like this

Read off the live site. Treat it as reference, not a recipe.

Download .md View raw ↗

Type ramp

Role	Family	Size	Weight	Leading	Tracking	Sample
h1	Times	16px	700	0	0	Aa Bb Cc
body	Times	16px	400	1.4	0	Aa Bb Cc

Radius scale

0px

Container

Max content width 1440px

Export

:root {
  --color-dominant: #2c5974;
  --color-surface: #2a4b64;
  --color-ink: #9ec4da;
  --color-accent: #967c63;
  --color-detail: #bcbcc3;
}

/* CSS variables exposed by source */
:root {
  --secondary-font: "sweet-sans-pro", sans-serif;
  --btn-line-height-sm: 1.9;
  --add-to-bag-btn-line-height: 1.7;
  --multi-cta-item-line-height-mob: 18px;
  --tb-heading-weight-sm: 800;
  --ss-font-weight-sm: 800;
  --max-layout-width: 1500px;
  --multi-cta-item-font-weight: 600;
  --btn-line-height-md: 1.7;
  --heading-line-height-xs: 1.9;
  --main-font: "neue-haas-grotesk-text", sans-serif;
  --neue-haas-font: "neue-haas-grotesk-text", "tbicons", sans-serif;
  --multi-cta-item-bottom-mob: -3px;
  --header-sticky-height: 70px;
  --multi-cta-item-line-height: 20px;
  --heading-weight-xs: 800;
  --kings-caslon-font: "kings-caslon", sans-serif;
  --multi-cta-item-font-size-mob: 12px;
  --tb-heading-weight-md: 700;
  --spp-title-margin-desktop: -3px 0 2px;
  --container-max-width: 1500px;
  --sweet-sans-pro-font: "sweet-sans-pro", sans-serif;
  --btn-link-line-height: 1.9;
  --btn-line-height-xlg: 1.47;
  --heading-weight-sm: 800;
  --btn-font-weight: 800;
  --multi-cta-item-font-size: 14px;
  --tb-heading-weight-lg: 600;
  --app-height: 900px;
  --btn-line-height-lg: 1.4;
  --filters-panel-content-padding: 0px;
  --heading-weight-md: 700;
  --appear-animation-duration: 300ms;
  --multi-cta-item-underline-weight: 1px;
}

For your coding agent

Drop-in prompt

Paste this into Claude Code, Cursor, or any chat-based agent. Pairs the captured tokens with a short brief so the model has both the style and the goal in one block.

Build a landing page in the visual style of Toryburch.
Reference design system (extracted from the live site):
- Palette: #2c5974, #2a4b64, #9ec4da, #967c63, #bcbcc3
- Typefaces: Times, Arial
- Macrostructure: Photographic
Use the dominant colour for surfaces, the accent sparingly,
and lean on type weight + scale rather than colour for hierarchy.
Full DESIGN.md: https://inspomcp.dev/api/design/toryburch-com

Sites that feel similar

Same macrostructure, different voice.

Role

Family

Size

Weight

Leading

Tracking

Sample

Times

16px

700

Aa Bb Cc

body

Times

16px

400

1.4

Aa Bb Cc

:root { --color-dominant: #2c5974; --color-surface: #2a4b64; --color-ink: #9ec4da; --color-accent: #967c63; --color-detail: #bcbcc3; } /* CSS variables exposed by source */ :root { --secondary-font: "sweet-sans-pro", sans-serif; --btn-line-height-sm: 1.9; --add-to-bag-btn-line-height: 1.7; --multi-cta-item-line-height-mob: 18px; --tb-heading-weight-sm: 800; --ss-font-weight-sm: 800; --max-layout-width: 1500px; --multi-cta-item-font-weight: 600; --btn-line-height-md: 1.7; --heading-line-height-xs: 1.9; --main-font: "neue-haas-grotesk-text", sans-serif; --neue-haas-font: "neue-haas-grotesk-text", "tbicons", sans-serif; --multi-cta-item-bottom-mob: -3px; --header-sticky-height: 70px; --multi-cta-item-line-height: 20px; --heading-weight-xs: 800; --kings-caslon-font: "kings-caslon", sans-serif; --multi-cta-item-font-size-mob: 12px; --tb-heading-weight-md: 700; --spp-title-margin-desktop: -3px 0 2px; --container-max-width: 1500px; --sweet-sans-pro-font: "sweet-sans-pro", sans-serif; --btn-link-line-height: 1.9; --btn-line-height-xlg: 1.47; --heading-weight-sm: 800; --btn-font-weight: 800; --multi-cta-item-font-size: 14px; --tb-heading-weight-lg: 600; --app-height: 900px; --btn-line-height-lg: 1.4; --filters-panel-content-padding: 0px; --heading-weight-md: 700; --appear-animation-duration: 300ms; --multi-cta-item-underline-weight: 1px; }

Build a landing page in the visual style of Toryburch. Reference design system (extracted from the live site): - Palette: #2c5974, #2a4b64, #9ec4da, #967c63, #bcbcc3 - Typefaces: Times, Arial - Macrostructure: Photographic Use the dominant colour for surfaces, the accent sparingly, and lean on type weight + scale rather than colour for hierarchy. Full DESIGN.md: https://inspomcp.dev/api/design/toryburch-com