NOIRÉ

INDEPENDENT FASHION STUDIO
COLLECTIONS / CREATIVE DIRECTION

Explore the collection

NOIRÉ / THE COMPONENT LIBRARY

A working
style guide.

Type. Material. Interaction.
A visual reference for the template.17 CHAPTERS / ATELIER EDITION

01 / TYPOGRAPHY

A hierarchy of voices.

DISPLAY / .ui-display

AFTERIMAGE

H1 / .ui-h1

A different point of view.

H2 / .ui-h2

The shape of a question.

H3 / .ui-h3

Volume held in shadow.

H4 / .ui-h4

A considered detail.

Body Large / .ui-body-large

Cloth becomes a way of seeing.

Body / .ui-body

Every garment begins with a conversation between the body and the material.

Small / .ui-small

A studio note, a practical detail.

Caption / .ui-caption

Look 01 / Milan, 2026

Editorial serif / .ui-editorial

Between movement and stillness.

Metadata / eyebrow / .eyebrow

NOIRÉ / INDEPENDENT FASHION STUDIO

02 / COLORS

The material palette.

Ink

#171817

Primary text / canvas

Charcoal

#20201f

Training / dark surfaces

Graphite

#353633

Material / media surfaces

Paper

#efede6

Warm page background

Ash

#bcb6ad

Secondary text on charcoal

Stone

#625f58

Secondary text on paper

Flax

#c4b58e

Navigation emphasis

Burgundy

#591d2c

Campaign / inquiry accent

Rule

#cfccc2

Light surface dividers

Error

#8b1023

Form validation on paper

Success

#35553e

Positive feedback on paper

Values reflect the current template. Flax belongs on dark surfaces; burgundy, error and success text belong on paper. Semantic aliases are defined in main.css.

03 / BUTTONS & LINKS

Clear next steps.

LIGHT SURFACE

Primary Secondary Text action Arrow link

DARK SURFACE

Explore collections Contact Atelier
STATE SPECIMENS

Hover or Tab to test actual interaction states. Example buttons open the service information below.

04 / FORM CONTROLS

Studio correspondence.

All fields are required. This static demonstration validates a draft locally. No message is sent or stored.

Enter a complete email address.

Working format

Success — your working format is selected.

05 / CARDS

Four families. One system.

PROJECT / .project-card

COLLECTION / .collection-stage

COLLECTION 01 / 01

AFTERIMAGE

Autumn / Winter 2026

A model seen from behind in a sculptural black coat against an oxblood backdrop.
VOLUME / SHADOW
LOOK 01 / NOIRÉ / STUDIO STUDY

Volume held in shadow. Black wool, folded surfaces and restrained interruption.

EXPLORE COLLECTION

JOURNAL / .journal-card

SERVICE / .service-item

06 / ACCORDION

Before we begin.

Share the intended wearer, purpose and starting point. The studio defines a working brief with you.

A question and your current experience. Materials and preparation are agreed before the session.

The format follows the work. Concept reviews can be remote; fittings require a considered physical arrangement.

07 / TABS

Three ways into the work.

A silhouette held away from the body.

Controlled volume allows the garment to interrupt the outline without losing its relationship to the wearer.

Construction follows the line.

A raised shoulder, a restrained closure and a folded hem establish the silhouette.

Matte wool. Paper. Thread.

A dense cloth holds the plane; soft lining keeps the structure close to the body.

08 / TABLES

A working specification.

AFTERIMAGE / GARMENT STUDY 01
ElementMaterialConstructionPurpose
BodyBlack woolFolded panelHold volume
LiningCuproFloating seamAllow movement
ClosureCovered fasteningConcealed placketRestrain interruption
HemSelf fabricDeep facingMaintain weight

11 / MEDIA

Frame the subject.

Hands guiding fabric under an industrial sewing machine.
RESPONSIVE IMAGE / 3:2.page-media
MEDIA FRAME / POSTER ONLY

In the atelier.

Visit the atelier
Video placeholder / no autoplay
3:2 / Landscape
1:1 / Detail
4:5 / Portrait

12 / TAGS & METADATA

The small, useful details.

Category
Fashion Campaign
Year
2026
Index
01 / 03
Role
Creative Direction

MILAN / AUTUMN — WINTER 2026

TailoringMaterial studySelected campaign

13 / PAGINATION

Continue the sequence.

Page 1 of 3

15 / FEEDBACK STATES

A clear response.

FORM ERROR

Please enter a complete email address.

FORM SUCCESS

Draft validated. This demonstration does not send messages.

EMPTY STATE

No studies selected.

Browse projects

Preparing the image study…

16 / MOTION & INTERACTION

A controlled gesture.

UNDERLINE / ARROW

Explore a collection

.text-link / --motion-normal

IMAGE / CARD HOVER

Burgundy tailoring in an editorial campaign portrait.

.media-link / --ease-enter
Card interactions are demonstrated in 05.

MASK REVEAL

Ivory folded planes on a neutral ground.

180ms fast / 350ms normal / 650ms slow. With prefers-reduced-motion, transitions and reveals become immediate. No scroll interception.

17 / LAYOUT / GRID

Measured intervals.

EDITORIAL / 2 COLUMNS

12

EDITORIAL / 3 COLUMNS

123

MOBILE / 4 COLUMNS

1234

TABLET / 8 COLUMNS

12345678

DESKTOP / 12 COLUMNS

123456789101112
8px
16px
24px
32px
48px
64px

.wrap / max-width 105rem. Margins: 2.5rem desktop, 1.25rem below 640px. Flexible columns use minmax(0, 1fr).

NOIRÉ / IMAGE STUDY