№ columbia-com--p-womens-roc-shorts-2155891-html

Columbia

Earthy, playful sans-serif—soft greens and browns, spacious and functional.

Marquee Herominimalism editorial playful fashion ecommercelight

The hero image is a full-screen, slightly surreal shot of a person interacting with a large, friendly alligator. The typography is clean and bold, emphasizing the product's engineering. The overall feel is adventurous and approachable. · outdoor apparel, adventure wear, technical clothing, sportswear campaign, alligator ad, columbia marketing, engineered for, hero image, fullbleed

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: earthy · muted · cool

SwatchHexOKLCHSuggested roleCopy

Hex#bea250
OKLCHoklch(72.0% 0.107 91)
RoleDominant
find sites →
Hex#188037
OKLCHoklch(52.7% 0.142 148)
RoleSurface
find sites →
Hex#c6b480
OKLCHoklch(77.3% 0.072 91)
RoleInk
find sites →
Hex#99965d
OKLCHoklch(66.2% 0.077 106)
RoleAccent
find sites →
Hex#ccc9ae
OKLCHoklch(83.1% 0.037 102)
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	GerTT CD	112px	400	0.85	-2.24px	Aa Bb Cc
h2	Avenir Next	18px	600	1.1	-0.36px	Aa Bb Cc
h3	Avenir Next	24px	600	1.1	-0.48px	Aa Bb Cc
body	Avenir Next	16px	400	1.5	0	Aa Bb Cc
button	Avenir Next	16px	400	1.5	0	Aa Bb Cc

Spacing scale

8px

Radius scale

0px

6px

Container

Max content width 1440px

Export

:root {
  --color-dominant: #bea250;
  --color-surface: #188037;
  --color-ink: #c6b480;
  --color-accent: #99965d;
  --color-detail: #ccc9ae;
}

/* CSS variables exposed by source */
:root {
  --color-white-alpha-1000: #FFF;
  --type-font-size-heading-1: 2.5rem;
  --chakra-colors-component-button-sale-fg-primary: #FFFFFF;
  --semantics-color-text-primary: #000;
  --chakra-transition-easing-ease-out: cubic-bezier(0, 0, 0.2, 1);
  --chakra-fontSizes-3xl: 1.875rem;
  --chakra-sizes-52: 13rem;
  --chakra-colors-green-300: #97EFAC;
  --header-mobile-bg: white;
  --chakra-radii-none: 0;
  --chakra-sizes-44px-Sorel: 44px;
  --chakra-space-0-5: 0.125rem;
  --chakra-colors-red-700: #991919;
  --chakra-colors-blue-800: #003A57;
  --chakra-colors-tech-cool-700: #147FA7;
  --chakra-space-56: 14rem;
  --chakra-colors-orange-800: #6C2710;
  --chakra-colors-teal-800: #114240;
  --chakra-sizes-12: 3rem;
  --chakra-fonts-mono: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
  --chakra-colors-component-button-disabled-fg-inverted: #A5A6A6;
  --chakra-space-9: 2.25rem;
  --chakra-space-48: 12rem;
  --chakra-sizes-48px-Sorel: 48px;
  --chakra-sizes-3-5: 0.875rem;
  --chakra-space-52: 13rem;
  --header-position-top: 4.5rem;
  --desktop-logo-color: white;
  --chakra-sizes-384px-Sorel: 384px;
  --chakra-sizes-24px-Sorel: 24px;
  --chakra-sizes-sm: 24rem;
  --chakra-borders-1px: 1px solid;
  --chakra-transition-duration-normal: 200ms;
  --chakra-colors-purple-300: #D8B4FE;
  --chakra-colors-cyan-500: #06B6D4;
  --chakra-sizes-6: 1.5rem;
  --chakra-colors-info-secondary: #CBEDFF;
  --chakra-colors-purple-200: #E9D5FF;
  --chakra-sizes-20px-undefined: 20px;
  --chakra-letterSpacings-widest: 0.1em;
  --chakra-colors-info-contrast: #00527A;
  --chakra-space-4: 1rem;
  --chakra-colors-pink-800: #4F1122;
  --chakra-colors-yellow-200: #FEF08A;
  --chakra-sizes-14px-undefined: 14px;
  --chakra-sizes-28px-Columbia: 28px;
  --chakra-colors-warning-contrast: #92310A;
  --chakra-colors-tech-cool-600: #188FBF;
  --chakra-sizes-96px-Columbia: 96px;
  --chakra-colors-white: #FFFFFF;
  --chakra-fonts-body: 'Avenir Next','Avenir','Segoe UI','Noto Sans','Helvetica Neue','Arial',sans-serif;
  --chakra-sizes-0px-undefined: 0px;
  --chakra-colors-blackAlpha-700: rgba(0, 0, 0, 0.64);
  --chakra-colors-gray-600: #7A7B7B;
  --chakra-space-11: 2.75rem;
  --chakra-colors-red-600: #D42B2B;
  --chakra-colors-cyan-100: #CFFAFE;
  --chakra-colors-green-950: #03190C;
  --chakra-colors-black-alpha-1000: #000000;
  --chakra-lineHeights-3: .75rem;
}

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 Columbia.
Reference design system (extracted from the live site):
- Palette: #bea250, #188037, #c6b480, #99965d, #ccc9ae
- Typefaces: GerTT CD, Avenir Next
- Macrostructure: Marquee Hero
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/columbia-com--p-womens-roc-shorts-2155891-html

Sites that feel similar

Same macrostructure, different voice.

Role

Family

Size

Weight

Leading

Tracking

Sample

GerTT CD

112px

400

0.85

-2.24px

Aa Bb Cc

Avenir Next

18px

600

1.1

-0.36px

Aa Bb Cc

Avenir Next

24px

600

1.1

-0.48px

Aa Bb Cc

body

Avenir Next

16px

400

1.5

Aa Bb Cc

button

Avenir Next

16px

400

1.5

Aa Bb Cc

:root { --color-dominant: #bea250; --color-surface: #188037; --color-ink: #c6b480; --color-accent: #99965d; --color-detail: #ccc9ae; } /* CSS variables exposed by source */ :root { --color-white-alpha-1000: #FFF; --type-font-size-heading-1: 2.5rem; --chakra-colors-component-button-sale-fg-primary: #FFFFFF; --semantics-color-text-primary: #000; --chakra-transition-easing-ease-out: cubic-bezier(0, 0, 0.2, 1); --chakra-fontSizes-3xl: 1.875rem; --chakra-sizes-52: 13rem; --chakra-colors-green-300: #97EFAC; --header-mobile-bg: white; --chakra-radii-none: 0; --chakra-sizes-44px-Sorel: 44px; --chakra-space-0-5: 0.125rem; --chakra-colors-red-700: #991919; --chakra-colors-blue-800: #003A57; --chakra-colors-tech-cool-700: #147FA7; --chakra-space-56: 14rem; --chakra-colors-orange-800: #6C2710; --chakra-colors-teal-800: #114240; --chakra-sizes-12: 3rem; --chakra-fonts-mono: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace; --chakra-colors-component-button-disabled-fg-inverted: #A5A6A6; --chakra-space-9: 2.25rem; --chakra-space-48: 12rem; --chakra-sizes-48px-Sorel: 48px; --chakra-sizes-3-5: 0.875rem; --chakra-space-52: 13rem; --header-position-top: 4.5rem; --desktop-logo-color: white; --chakra-sizes-384px-Sorel: 384px; --chakra-sizes-24px-Sorel: 24px; --chakra-sizes-sm: 24rem; --chakra-borders-1px: 1px solid; --chakra-transition-duration-normal: 200ms; --chakra-colors-purple-300: #D8B4FE; --chakra-colors-cyan-500: #06B6D4; --chakra-sizes-6: 1.5rem; --chakra-colors-info-secondary: #CBEDFF; --chakra-colors-purple-200: #E9D5FF; --chakra-sizes-20px-undefined: 20px; --chakra-letterSpacings-widest: 0.1em; --chakra-colors-info-contrast: #00527A; --chakra-space-4: 1rem; --chakra-colors-pink-800: #4F1122; --chakra-colors-yellow-200: #FEF08A; --chakra-sizes-14px-undefined: 14px; --chakra-sizes-28px-Columbia: 28px; --chakra-colors-warning-contrast: #92310A; --chakra-colors-tech-cool-600: #188FBF; --chakra-sizes-96px-Columbia: 96px; --chakra-colors-white: #FFFFFF; --chakra-fonts-body: 'Avenir Next','Avenir','Segoe UI','Noto Sans','Helvetica Neue','Arial',sans-serif; --chakra-sizes-0px-undefined: 0px; --chakra-colors-blackAlpha-700: rgba(0, 0, 0, 0.64); --chakra-colors-gray-600: #7A7B7B; --chakra-space-11: 2.75rem; --chakra-colors-red-600: #D42B2B; --chakra-colors-cyan-100: #CFFAFE; --chakra-colors-green-950: #03190C; --chakra-colors-black-alpha-1000: #000000; --chakra-lineHeights-3: .75rem; }

Build a landing page in the visual style of Columbia. Reference design system (extracted from the live site): - Palette: #bea250, #188037, #c6b480, #99965d, #ccc9ae - Typefaces: GerTT CD, Avenir Next - Macrostructure: Marquee Hero 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/columbia-com--p-womens-roc-shorts-2155891-html