MONOFORM — Design SystemCase Study · 2026

MONOFORM.

The Art of Essential Dressing
Autumn / Winter 2026International Typographic StyleScroll ↓
MONOFORM. Case Study — Swiss Design System · AW26 · 12 sections
Autumn / Winter 2026 Issue 01

The art of
essential dressing.

MONOFORM is a women's atelier built on one idea: reduce a dress to its essential form, then photograph it with museum clarity — black and white, flush-left, nothing that doesn't earn its place.

MONOFORM — Look 01
Fig. 01 — Look 01, the silk slip dressAW26 / RC-001
I

The Brief

A women's atelier that needed to sell trust through restraint — and a reason the Swiss school was the right answer.
01 · The Challenge

One label.
No seasonal noise.

MONOFORM is a young women's ready-to-wear house with a single conviction: a dress should be reduced to its essential form, then shown with museum clarity. The problem was that every reference in the category pulled the other way — scripts, gradients, drop-shadows, a new look-and-feel every drop.

The brief asked for an identity and storefront that read as rigorous, neutral and confident across five surfaces — desktop web, responsive, tablet, a native app and a store-admin — without inventing a new visual language for each. Everything had to come from one system, so the brand stayed recognisable whether you met it on a billboard or a bag screen.

The core tension

Fashion sells novelty; this brand sells permanence. The design had to feel expensive by removing things, not adding them.

Client
MONOFORM — women's ready-to-wear atelier
Sector
Fashion · E-commerce · Editorial
Scope
Identity · storefront · lookbook · app · admin
Surfaces
Web · Responsive · Tablet · Mobile app · Admin
System
Swiss DS — International Typographic Style
Type
Inter — one family, four roles
Atelier still
Fig. 01Atelier — AW26 / RC-001
1
signal accent — red, rationed
12
column modular grid
5
surfaces, one component kit
02 · Research & References

Standing on the Swiss school.

We anchored the work in the International Typographic Style that came out of Zürich and Basel in the 1950s — Müller-Brockmann's grids, Hofmann's poster discipline, the objective photography of the era. The school's promise maps almost perfectly onto a fashion problem: let an objective structure carry the message so the subject — here, the garment — is never competing with decoration.

From the research we kept three moves: the mathematical grid as the only layout tool, flush-left ragged-right setting for every block of text, and photography treated as objective record rather than mood. Everything decorative was filed under "not this project."

AMüller-Brockmann — the grid as a system, not a guess.
BHofmann — contrast of scale, weight and void.
CAkzidenz lineage — one neutral sans, many roles.
Reference — objective photography
Fig. 02Objective record, not mood
03 · Why Swiss Fits Fashion

Restraint is the luxury signal.

Fashion drowns in decoration; the Swiss style does the opposite — it gets out of the garment's way. A strict grid frames the clothing like a plate in a catalogue raisonné, grayscale keeps the eye on cut and cloth, and a single signal red carries only the decisions that matter: the price, the add-to-bag, the one piece you should see first.

The effect reads as a credible house, not a loud boutique. When nothing shouts, the product speaks — and the absence of ornament becomes the most expensive thing on the page.

01The grid frames the garment.
02Grayscale keeps the eye on cloth.
03One red — spent once per view.
04Type is flush-left, never centered.
05Whitespace is the packaging.
II

The System

Process, grid, palette, type, photography rules, component anatomy and accessibility — the parts that build every screen.
04 · Process

Sketch, grid, system.

We worked from structure outward. First, low-fidelity sketches resolved hierarchy and flow with no styling at all — just boxes on a grid. Once the skeleton held, we fixed the grid and spacing scale, then built the component kit against it. Styling came last, because in a Swiss system the layout is the design.

Principle

If a screen reads correctly as grey boxes, colour and photography only have to confirm it — never rescue it.

01 Sketch
Lo-fi
Hierarchy & flow, no style
02 Grid
12-col
Columns, gutters, margins fixed
03 Scale
4 / 8
Spacing & type scale locked
04 Kit
Build
Components against the grid
05 Skin
Last
B&W photography + one red
05 · Grid & Layout System

Twelve columns, one rhythm.

Every surface is laid out on a 12-column grid with a fixed margin and a 4/8px spacing scale. Type sits on a consistent vertical rhythm so headings, body and data always align across the fold.

Columns
12
Modular — collapses to 6 / 4 / 2 by surface
Gutter
24px
Constant across breakpoints
Margin
var(--margin)
Page edge, fluid to viewport
Spacing
4 / 8
All gaps are multiples of 4
Rules
1px
Hairlines divide; never boxes with shadow
06 · Foundations — Palette

Black, white, and one red.

No second accent — ever. The red marks exactly one thing per screen; everything else lives in ink, paper and a single muted grey.

White
#FFFFFF
Paper
#F6F5F2
Muted
#8C8A85
Ink
#0E0E0E
Signal Red
#C2261B
Imagery
Grayscale
The one-red rule

If two things are red on a screen, one of them is wrong. The accent is a budget, spent on the single most important action in view.

07 · Foundations — Type

Inter, doing all the work.

One neutral sans, four roles — display, heading, body and tabular data. No second family, no italics for emphasis; weight and scale carry the hierarchy.

MONOFORM.
DisplayThe art of essential dressing78–104px · 700 · −.03em
HeadingAutumn / Winter 202628–46px · 600/700
BodyComfortable measure, flush-left, ragged-right.18px · 400 · 1.65
Data£480 · M · 01 / 12Tabular numerals
08 · Photography Art-Direction

Grayscale, as a rule.

Every image ships in black and white, high-key, with the garment centred in the frame and generous negative space. We grade for contrast and cloth detail — texture over drama — and crop to the grid, never to a mood. Colour is reserved entirely for the interface, so a photograph can never compete with the one red.

01Grayscale + contrast 1.04 — no colour casts.
02Garment centred; space above and below.
03Crop to the column grid, not the subject's mood.
04One look per plate — never a collage.
Look — silk slip
Fig. 03Silk slip
Look — column gown
Fig. 04Column gown
Pleated midi
Fig. 05Pleated midi
Cashmere knit
Fig. 06Cashmere knit
Shirt dress
Fig. 07Cotton shirt dress
09 · Component Anatomy

Components, on the shop floor.

Every component is built from the same rules — hairline borders, flush-left labels, tabular prices, red reserved for the primary action. Below, the live kit rendered straight from the MONOFORM components.

01Product cardImage plate · name · category · tabular price1px border · 0 radius
02Primary buttonAdd to bag / checkout — the red actionSignal red · 1 per view
03Size selectorTabular, struck-through when out of stockTabular nums
04Filter chipsAll / Day / Evening / KnitwearFlush-left row
05Status badgePaid / Pending / Refunded — admin statesInk / muted / red
10 · Accessibility & Contrast

High contrast, by default.

A near-monochrome palette makes accessibility almost automatic — ink on paper clears AAA, and the one red is only ever used at large sizes or as a fill behind white, never as small text on white.

Pairing
Ratio
WCAG
Use
Ink on Paper
18.6 : 1
AAA
Body
Muted on Paper
3.4 : 1
AA Lg
Captions
White on Red
4.8 : 1
AA
Buttons
Red on Paper
4.6 : 1
AA Lg
Accents only
Not by colour alone

Because the red is rationed, no state depends on it alone — labels, position and weight carry meaning so the interface survives in pure greyscale.

III

The Screens

A responsive strategy, then the storefront, native app and store-admin — every platform built from the one kit.
11 · Responsive Strategy

One grid, four widths.

The 12-column grid collapses predictably: desktop runs the full twelve, tablet folds to six, responsive web to four, and the native app to a two-column or single feed. Margins and the spacing scale stay constant, so a product card looks like itself at every width — only the column count changes.

App ≠ shrunk web

The native app uses a bottom tab-bar and full-bleed plates rather than a scaled-down desktop nav — same components, a layout native to the device.

Desktop1440+
12 col
Tablet768–1439
6 col
Responsive420–767
4 col
Mobile app≤ 420
2 / 1 col
12 · The Screens — every platform

One system, five surfaces.

The same components, composed into the storefront, the native app, and the store admin — rendered live from the MONOFORM kit.

MONOFORM.
The art of essential dressing — est. Milan, 2026 · Swiss Design System
NewsletterStockistsColophon