Brand identity case studyIdentity · Packaging · E-commerce UI

LYLS.Let your looksspeak.

A fashion and lifestyle label that needed to feel premium and minimal, yet quirky enough to stand apart from the sportswear giants it sits next to. One eye, four colours, two typefaces, and a storefront where colour tells shoppers where they are before any label does.

Brand strategyLogo designIdentity systemPackaging and merchUX and UI

Client

LYLS

Industry

Fashion and lifestyle e-commerce

Role

Brand identity, UI and UX

Scope

Logo, system, packaging, merch, storefront

Year

2024

00 Overview

A fashion label for people who would rather be seen than explained.

Challenge

Premium, minimal, still quirky

LYLS sits on the same shelf as the sportswear giants. It had to look as sharp as them and still have a personality of its own, and the storefront had to make a large catalogue across two audiences easy to browse.

Approach

Build everything from the name

Let Your Looks Speak became an eye, one symbol for seeing and being seen. A strict monochrome base keeps the product in focus, and two signal colours give each collection its own territory.

Outcome

One mark, every surface

A mark that holds up from a 16px favicon to a shipping box, and a storefront where colour tells shoppers where they are before any label does.

01 Process

From a name to a shipping box.

Strategy first, then the mark, then the system, then every surface it lives on. Each step was signed off before the next began.

Strategy

What the brand stands for.

Positioning
Tone of voice
This, not that

Idea

Find the symbol in the name.

Looks → eye
Seeing and being seen

Mark

Draw it with one stroke.

Construction
Scale tests
Animation

System

Make it reusable.

Lock-ups
Colour map
Type pair

Surfaces

Put it to work.

Cards, merch
Packaging

Storefront

Design to be browsed.

Home, collections
Product, mobile
UI kit

Chapter one

Strategy.

Before any drawing: who LYLS is for, how it should sound, and where the symbol was hiding all along.

PositioningThis, not thatThe idea in the name

This

Confident. Minimal. Seen before explained. A wink, not a wave.

Not this

Loud sportswear energy. Gradients and swooshes. A logo that shouts.

The idea in the name

LETYOURLOOKSSPEAK

Pull Looks out of the line and you get the eye: a mark about seeing and being seen. Three short rays add the quirk, a glint of light that keeps the symbol from feeling clinical.

Principle 01

The product is the hero

Ink and white carry the brand so clothing and shoes carry the colour. The identity never competes with the thing being sold.

Principle 02

Colour is wayfinding

Red always means men, violet always means women. Never decoration, so shoppers learn the system in one visit.

Principle 03

Loud and quiet, together

A heavy grotesk for the shout, a soft italic serif for the whisper. The brand voice in miniature: bold looks, personal tone.

Chapter two

The mark.

Drawn with one stroke weight. Step through how it was built, from guides to final symbol.

ConstructionGeometryLogo animationLock-ups and scale

Construction Six steps

Drawn with one stroke weight.

Every part comes from the same circle. Click a step or press play.

Identity Logo animation

The eye opens.

A short ident for the storefront and social. The lids draw, the iris lands, the rays flick on. Under two seconds, so it never delays a page.

Chapter three

The system.

One colour on every surface, a four-colour map, and two typefaces that argue politely. Everything below is live: copy the colours, type in the fonts.

Lock-upsScaleColourTypographyContrast

System Logo system

One colour. Every surface.

The mark is always a single flat colour, so it embroiders, foil-stamps and prints on cardboard without a second plate. Pick a colour to see it invert.

LYLS

Primary lock-up

Men

Women

LYLSStacked

643216Scales to 16px

Primary lock-up on:

System Colour

Colour is the map.

Ink and white carry the brand. Red and violet are never decoration: red always means men, violet always means women. Shoppers learn the system in one visit. Click to copy.

Balance on any screen45 · 35 · 10 · 10

MenNew arrivals

Shop men

WomenNew arrivals

Shop women

Same layout, different voice. The header, hero and primary button take the collection colour; everything else stays ink and white.

System Typography

Loud and quiet, together.

A wide, heavy grotesk shouts the collection names. A soft italic serif speaks the supporting lines. The contrast is the brand voice in miniature.

Primary · Archivo

Archivo Black

Bold, uppercase · Collection names, headings, navigation

ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789

Secondary · Lora Italic

Lora Italic

Regular · Taglines, descriptions, product meta

Making you look good, anytime, anywhere.

Try the pair

Weight

Signature collection

Let your looks speak.

System Contrast

Every pair checked.

A four-colour system only works if every combination reads. One pair is for fills only.

15.1:1AAA

White on Ink · headers, packaging

6.2:1AA

White on Signal Red · men's chrome

9.6:1AAA

White on Ultra Violet · women's chrome

2.5:1Fills only

Ink on Red · never for text

✓

The rule: text on a collection colour is always white. Ink sits on white or mist. Red and violet never touch each other, and never carry ink type.

Chapter four

Worn, carried, handed over.

The mark on fabric, card and cardboard. Flip the card, spin the box.

Business cards in ink, red and violet — Business cards · ink, red, violet

Chest print on a black tee — Chest print

Applications Business card

One side says it. The other side shows it.

Ink front with the eye alone. Collection colour on the back with the wordmark and the line. Hover to flip.

LYLS

Let your looks speak.

hello@lyls.co · @lyls

Applications Packaging

The box is the billboard.

Every order ships in ink or white, with the mark big enough to read across a room. Hover to turn it.

LET YOUR
LOOKS SPEAK

LYLS

Chapter five

Designed to be browsed, not searched.

The identity becomes a storefront. Colour as wayfinding, product first, quiet chrome.

HomepageCollectionsProduct pageMobileUI kit

lyls.co

01 · Hero

Every visit starts with a look.

A carousel of signature looks, the eye above the collection name, one button: Shop now.

Why: the product is the hero. The brand steps back to a mark and a line.

02 · Collections

Colour as wayfinding.

The header, hero and section bands take the collection colour. A shopper always knows which side of the store they are on.

Why: two audiences, one catalogue. Colour sorts it before any label does.

03 · Product first

Quiet chrome.

Neutral mist tiles and generous whitespace make the product the brightest thing on screen. Outlined secondary buttons, one filled primary.

Why: the same trust strip and footer on every page means nothing has to be relearned.

04 · Newsletter

Weekly drops, before anyone else sees them.

The eye above a single field. The last thing on the page is the brand idea, not a form.

Why: one field, one line, in the brand's own voice.

Storefront Collections

Same layout. Different voice.

Drag to compare the men's and women's collection pages. Every element is in the same place; only the colour changes.

MenWomen

Product page, men's and women's — **One decision per screen.** Gallery with video on the left, choices on the right: colour, size, quantity, then a single Add to bag.

Storefront UX principles — **Three rules.** Colour as wayfinding, product first, quiet chrome. Home, Collection, Product, Add to bag.

Storefront Mobile

Thumb-first.

Cart and menu in the top bar, the carousel swipes, and every list ends with a single View all.

Move your cursor · scroll to tilt

Storefront UI kit

Small parts, one family.

The kit, rebuilt live. Click, hover and type.

ButtonsHover

Ink and outline for the brand. Red and violet only when the button leads into a collection.

Collection switchClick

Men's collection

The switch recolours the page. Nothing else moves.

Product tile and bagHover · add

👟

Nike React InfinityRun Flyknit · $160

👜0

Price and Add appear on hover. The bag count pops with a spring when something goes in.

NewsletterType · submit

NEWSLETTER

Weekly drops, before anyone else sees them.

Trust stripHover

🚚

Free shipping

🔒

Secure payment

↩

30-day returns

Three promises under every product, in the same order on every page.

The eye as faviconScale

The 22-unit stroke was chosen so the pupil still reads at 16px.

06 Outcome

One mark that holds up from 16px to a shipping box.

And a storefront where colour tells shoppers where they are before any label does.

Strategy

Idea

Positioning and tone
This, not that
The symbol found in the name

Identity

Mark and system

Eye mark, one stroke weight
Lock-ups, scale to 16px, ident animation
Four-colour map, Archivo and Lora

Applications

Surfaces

Cards, tee, cap, packaging
Home, collections, product, mobile
UI kit

What we learned

Find the symbol in the nameThe best mark was already in the tagline. Strategy found it before sketching did.

One stroke weight travelsA single flat weight is what let the eye embroider, foil-stamp and shrink to a favicon.

Give colour a jobRed for men, violet for women, nothing else. A rule a shopper learns in one visit.

LYLS.Let your looksspeak.

Premium, minimal, still quirky

Build everything from the name

One mark, every surface

From a name to a shipping box.

Strategy

Idea

Mark

System

Surfaces

Storefront

Strategy.

This

Not this

The product is the hero

Colour is wayfinding

Loud and quiet, together

The mark.

Drawn with one stroke weight.

The eye opens.

The system.

One colour. Every surface.

Colour is the map.

Loud and quiet, together.

Every pair checked.

Worn, carried, handed over.

One side says it. The other side shows it.

The box is the billboard.

Designed to be browsed, not searched.

Every visit starts with a look.

Colour as wayfinding.

Quiet chrome.

Weekly drops, before anyone else sees them.

Same layout. Different voice.

Thumb-first.

Small parts, one family.

One mark that holds up from 16px to a shipping box.

Idea

Mark and system

Surfaces

Everything your brand needs, in one place

Brand identity

Website design and build

Brand and social video

Identity and stationery

Event website and RSVP

Event video

Let’s build something worth noticing