Skip to main content

YSL SS26: Visual Language Study

A personal exploration of how runway silhouettes translate into digital styling systems.

Outcomes & Delivery

This study reimagines the visual language of Saint Laurent’s SS26 runway collection, translating runway looks into a cohesive digital design system.
Through typographic pairings and palette refinement, the goal is to honor YSL’s modern edge while celebrating the elegance and tension that define the brand.

Overview

Roles: Typography design, colour design

Duration: Weekend sprint

Tools: Figma, ChatGPT, Google Fonts

  • Visual Language
  • Typeface Study
  • Colour Exploration
  • Aesthetic Systems
  • Fashion UX

Font Pairings

A model sports a vivid crimson windbreaker over an ochre shirt and burgundy tie, paired with chocolate brown trousers. Oversized black sunglasses and sleek shoes complete the bold palette.

Genos

  • Visual pop: call-to-action, accessories, or hero elements
A red-haired model wears a chocolate brown trench coat over a golden brown shirt and tie, matched with wide-legged brown trousers. The look is finished with large square sunglasses and black shoes.

Cormorant Infant

  • Dramatic serif for headings or expressive blocks. Strong vertical flow and flair, echoing the oversized tailoring.
A model wears a fitted mustard yellow turtleneck tucked into matching pleated trousers. The clean silhouette is accented by dark sunglasses and glossy black shoes.

Italiana

  • Elegant display font for delicate titles or lightweight accents. Tall, narrow, and airy — evokes refined contrast.
A model walks the runway wearing a beige and red striped button-up shirt tucked into high-waisted pleated khaki trousers, cinched with a wide belt. He pairs the look with oversized sunglasses and dark leather shoes.

Cormorant Garamond

  • Classic serif for foundational text. Fountain-pen elegance with a calm presence. Works well across sizes.
A model wears a crisp mint green dress shirt with two chest pockets and a tie, tucked into tailored tan shorts with thick cuffs. The outfit is accessorized with oversized clear sunglasses and dress shoes with socks.

Quicksand

  • Playful sans for UI labels or casual highlights. Rounded and soft, with asymmetry that mirrors the carefree silhouette.
A model wears a translucent mint green shirt with a tied collar, tucked into high-waisted navy trousers. The look is styled with gradient sunglasses and glossy black shoes.

Be Vietnam Pro

  • Functional sans with subtle edge. Good for supporting text or layered design elements — structured but not rigid.
A model presents a classic white pinstriped shirt with a gold tie, paired with navy high-waisted trousers. Oversized brown sunglasses and glossy black shoes complete the clean, minimal look.

Rubik

  • Easygoing geometric sans with soft curves. Ideal for body text or quiet detail — reflects the relaxed, hands-in-pocket vibe.
A model walks in a pale blue ribbed polo-style shirt with long sleeves, tucked into silky cobalt trousers. The look is finished with a black belt and dark sunglasses.

Jost

  • Composed, modern sans. Great for typographic balance — neutral but thoughtful, like well-fitting knitwear.
A model showcases a dusty pink trench coat over a deep plum-toned ensemble, including a shirt, tie, and wide trousers. The look is belted at the waist and styled with gold-rimmed sunglasses.

EB Garamond

  • Classical serif for contrast or narrative tone. Adds warmth and elegance — a soft foil to Genos in Look 1.

Colour System

Accents & Highlights

Crimson Silk

#c9432f

  • Visual pop: call-to-action, accessories, or hero elements

Golden Saffron

#d3a326

  • A warm accent for branding, buttons, or editorial emphasis

Pistachio Veil

#d1e6d4

  • Light UI backgrounds, modern prints, or spring tailoring

Pistachio Veil

#d1e6d4

Chambray Sky

#9cc3dc

  • Secondary highlights, soft overlays, or airy navigation bars

Chambray Sky

#9cc3dc

Tailored Neutrals

Satin Sand

#c9a784

  • Base canvas tone for backgrounds, garments, or product packaging

Blush Taupe

#ab8f72

  • Pairs well with cool or warm tones—great for grounding UIs

Olive Bronze

#705c2f

  • Structured midtone for typography, trim, or muted UI blocks

Olive Bronze

#705c2f

Suit Ink

#2b2e39

  • Core text color, dark theme base, or modern tailoring foundation

Suit Ink

#2b2e39

Evening & Depth

Claret Noir

#3d2330

  • Deep focus color for hovers, overlays, or eveningwear

Royal Plum

#51335e

  • Contrast tone for luxury accents, branding, or UI overlays

Rustwood

#7c4724

  • Rich autumnal base for backgrounds or editorial highlights

Rustwood

#7c4724

Dry Sage

#7a6f4d

  • Transitional neutral that softens strong pairings, good for layout blocks

Dry Sage

#7a6f4d

Edge & Contrast

Jade Mesh

#3b7d63

  • Grounded green for overlays, mesh layers, or utility-trimmed elements

Satin Navy

#4d5e84

  • Strong contrast anchor, buttons, trousers, or modal overlays

Rosewood Smoke

#713d49

  • Versatile plum for hover states, accessories, or rich editorial tones

Rosewood Smoke

#713d49

Pressed Cotton

#d9d9e9

  • Elevated neutral for backgrounds, tailored whites, or minimalist interfaces

Pressed Cotton

#d9d9e9