№ uniqlo-com--au-en-products-e487566-000-00

Uniqlo

Soft, airy coastal serenity: muted blues and sandy neutrals with clean, open typography.

Marquee Herominimalism editorial fashion ecommercelight

The image is a full-screen shot of a woman on a beach, promoting a Memorial Day sale. The typography is clean and bold, with a focus on large, impactful lettering. The overall feel is airy and aspirational, emphasizing a lifestyle. · summer sale, beachwear, sportswear, memorial day, uniqlo, activewear, lifestyle, sale promotion, minimalist design, fullbleed hero

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 · cool · monochrome

SwatchHexOKLCHSuggested roleCopy

Hex#157dca
OKLCHoklch(57.5% 0.147 248)
RoleDominant
find sites →
Hex#874c3c
OKLCHoklch(48.3% 0.084 36)
RoleSurface
find sites →
Hex#a0d4f0
OKLCHoklch(84.3% 0.067 232)
RoleInk
find sites →
Hex#80919d
OKLCHoklch(64.7% 0.027 239)
RoleAccent
find sites →
Hex#b0c5cf
OKLCHoklch(81.1% 0.027 228)
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	Sample
h1	Twemoji Country Flags	32px	700	1.4	Aa Bb Cc
h2	Twemoji Country Flags	22px	400	1.2	Aa Bb Cc
h3	Twemoji Country Flags	22px	400	1.2	Aa Bb Cc
body	Twemoji Country Flags	16px	400	1.4	Aa Bb Cc
button	Arial	13px	400	1.4	Aa Bb Cc

Spacing scale

12px

16px

24px

32px

Radius scale

0px

4px

Container

Max content width 1200px

Export

:root {
  --color-dominant: #157dca;
  --color-surface: #874c3c;
  --color-ink: #a0d4f0;
  --color-accent: #80919d;
  --color-detail: #b0c5cf;
}

/* CSS variables exposed by source */
:root {
  --type-scale-latin-plus-9: 3.375rem;
  --spacing-negative-03: -0.75rem;
  --type-scale-cjk-plus-5: 1.875rem;
  --borderNeutralHover: #f4f4f4;
  --spacing36: 36px;
  --shadowBottom2: 0px 1px 2px #000c;
  --borderAttentionPressed: #ff728d;
  --secondaryPressedBorderColor: #ababab;
  --borderWidth2: 2px;
  --text-primary-light-color: #fff;
  --accentDefaultBorderColor: #005db5;
  --accentPressedTextColor: #007aff;
  --textTertiaryDefault: #767676;
  --spacing-gutter-md: 1.5rem;
  --backgroundNeutralHover: #f4f4f4;
  --spacing-outset-sm: 1rem;
  --size-chart-border-width: 0.0625rem;
  --backgroundAttentionDefault: #e00;
  --secondaryPressedTextColor: #ababab;
  --text-placeholder-hover-color: #767676;
  --backgroundPrimaryDefault: #000;
  --size-chart-image-min-height: 8rem;
  --borderPositiveHover: #34bc3f;
  --primaryPressedIconColor: #3e3e3e;
  --size-chart-scroll-thumb-margin: 0 0.5rem;
  --borderPrimaryHover: #2a2a2a;
  --text-placeholder-color: #767676;
  --borderAttentionHover: #ef5555;
  --border-error-hover-color: #dd3535;
  --type-scale-cjk-plus-2: 1.1875rem;
  --borderSecondaryPressed: #ababab;
  --primaryDefaultIconColor: #000;
  --borderTertiaryPressed: #fafafa;
  --type-scale-latin-minus-2: 0.75rem;
  --primaryPressedBackgroundColor: #3e3e3e;
  --backgroundNeutralPressed: #dadada;
  --accentDefaultBackgroundColor: #005db5;
  --accentHoverIconColor: #006ec7;
  --primaryDefaultBorderColor: #000;
  --spacing-negative-07: -3.25rem;
  --secondaryHoverTextColor: #767676;
  --type-scale-latin-plus-8: 3rem;
  --borderNeutralDefault: #fff;
  --type-scale-latin-plus-4: 1.75rem;
  --size-chart-cell-min-width: 3.75rem;
  --size-chart-button-min-height-md: 7rem;
  --textSecondaryPressed: #ababab;
  --shadowBottom4: 0px 2px 4px #0000001a;
  --border-radius-round: 0;
  --borderRadius1: 1px;
  --spacing-gridMarginAtExtraLarge: auto;
  --borderPositivePressed: #55c75e;
  --secondaryHoverIconColor: #767676;
  --size-chart-scroll-thumb-border-radius: 0.56rem;
  --borderTertiaryHover: #f4f4f4;
  --type-scale-cjk-plus-10: 3.5rem;
  --textAttentionPressed: #ff728d;
  --secondaryDefaultIconColor: #6a6a6a;
  --borderPrimaryPressed: #3e3e3e;
  --secondaryDefaultTextColor: #6a6a6a;
}

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 Uniqlo.
Reference design system (extracted from the live site):
- Palette: #157dca, #874c3c, #a0d4f0, #80919d, #b0c5cf
- Typefaces: Twemoji Country Flags, Arial
- 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/uniqlo-com--au-en-products-e487566-000-00

Sites that feel similar

Same macrostructure, different voice.

Role

Family

Size

Weight

Leading

Tracking

Sample

Twemoji Country Flags

32px

700

1.4

Aa Bb Cc

Twemoji Country Flags

22px

400

1.2

Aa Bb Cc

Twemoji Country Flags

22px

400

1.2

Aa Bb Cc

body

Twemoji Country Flags

16px

400

1.4

Aa Bb Cc

button

Arial

13px

400

1.4

Aa Bb Cc

:root { --color-dominant: #157dca; --color-surface: #874c3c; --color-ink: #a0d4f0; --color-accent: #80919d; --color-detail: #b0c5cf; } /* CSS variables exposed by source */ :root { --type-scale-latin-plus-9: 3.375rem; --spacing-negative-03: -0.75rem; --type-scale-cjk-plus-5: 1.875rem; --borderNeutralHover: #f4f4f4; --spacing36: 36px; --shadowBottom2: 0px 1px 2px #000c; --borderAttentionPressed: #ff728d; --secondaryPressedBorderColor: #ababab; --borderWidth2: 2px; --text-primary-light-color: #fff; --accentDefaultBorderColor: #005db5; --accentPressedTextColor: #007aff; --textTertiaryDefault: #767676; --spacing-gutter-md: 1.5rem; --backgroundNeutralHover: #f4f4f4; --spacing-outset-sm: 1rem; --size-chart-border-width: 0.0625rem; --backgroundAttentionDefault: #e00; --secondaryPressedTextColor: #ababab; --text-placeholder-hover-color: #767676; --backgroundPrimaryDefault: #000; --size-chart-image-min-height: 8rem; --borderPositiveHover: #34bc3f; --primaryPressedIconColor: #3e3e3e; --size-chart-scroll-thumb-margin: 0 0.5rem; --borderPrimaryHover: #2a2a2a; --text-placeholder-color: #767676; --borderAttentionHover: #ef5555; --border-error-hover-color: #dd3535; --type-scale-cjk-plus-2: 1.1875rem; --borderSecondaryPressed: #ababab; --primaryDefaultIconColor: #000; --borderTertiaryPressed: #fafafa; --type-scale-latin-minus-2: 0.75rem; --primaryPressedBackgroundColor: #3e3e3e; --backgroundNeutralPressed: #dadada; --accentDefaultBackgroundColor: #005db5; --accentHoverIconColor: #006ec7; --primaryDefaultBorderColor: #000; --spacing-negative-07: -3.25rem; --secondaryHoverTextColor: #767676; --type-scale-latin-plus-8: 3rem; --borderNeutralDefault: #fff; --type-scale-latin-plus-4: 1.75rem; --size-chart-cell-min-width: 3.75rem; --size-chart-button-min-height-md: 7rem; --textSecondaryPressed: #ababab; --shadowBottom4: 0px 2px 4px #0000001a; --border-radius-round: 0; --borderRadius1: 1px; --spacing-gridMarginAtExtraLarge: auto; --borderPositivePressed: #55c75e; --secondaryHoverIconColor: #767676; --size-chart-scroll-thumb-border-radius: 0.56rem; --borderTertiaryHover: #f4f4f4; --type-scale-cjk-plus-10: 3.5rem; --textAttentionPressed: #ff728d; --secondaryDefaultIconColor: #6a6a6a; --borderPrimaryPressed: #3e3e3e; --secondaryDefaultTextColor: #6a6a6a; }

Build a landing page in the visual style of Uniqlo. Reference design system (extracted from the live site): - Palette: #157dca, #874c3c, #a0d4f0, #80919d, #b0c5cf - Typefaces: Twemoji Country Flags, Arial - 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/uniqlo-com--au-en-products-e487566-000-00