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
Font Pairings
Genos
- Visual pop: call-to-action, accessories, or hero elements
Cormorant Infant
- Dramatic serif for headings or expressive blocks. Strong vertical flow and flair, echoing the oversized tailoring.
Italiana
- Elegant display font for delicate titles or lightweight accents. Tall, narrow, and airy — evokes refined contrast.
Cormorant Garamond
- Classic serif for foundational text. Fountain-pen elegance with a calm presence. Works well across sizes.
Quicksand
- Playful sans for UI labels or casual highlights. Rounded and soft, with asymmetry that mirrors the carefree silhouette.
Be Vietnam Pro
- Functional sans with subtle edge. Good for supporting text or layered design elements — structured but not rigid.
Rubik
- Easygoing geometric sans with soft curves. Ideal for body text or quiet detail — reflects the relaxed, hands-in-pocket vibe.
Jost
- Composed, modern sans. Great for typographic balance — neutral but thoughtful, like well-fitting knitwear.
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