Chanel
Fashion Calendar App
UX/UI, Design & Creative
Principles
Full-bleed image, one date, one line of type. Nothing competes. Negative space is the luxury.
Black and white carry the brand. Champagne appears once per screen, never as decoration.
Fixed header, fixed footer tabs, editorial middle. The frame is constant so content can change daily.
Fades and slow reveals only. Movement should feel like a page turning, never like an interface reacting.
Logo
Chanel
App icon & favicon. The interlocking mark centred in a black square, with generous clear space.
Minimum clear space equals the cap-height of the wordmark on every side.
✕ stretch✕ rotate✕ recolourColour
Ink and Paper do the work. Champagne is reserved for a single accent per view — a live date, an active tab, an italic byline. Greys are for structure only, never large fills.
Typography
Cormorant 40
Oswald 28 · caps
Cormorant italic 22
Oswald 12 · 0.24em
Helvetica 15
Iconography
A minimal, hairline set. 1.25px strokes, square caps, drawn on a 24px grid. Icons are navigational only — never illustrative.
Imagery
High-contrast monochrome photography, shot close and cropped tight. Fabric, hands, texture — detail over full looks. Colour images are desaturated toward greyscale before publishing.
Tight crops · natural light · matte grain · one subject.
Saturated colour · busy backgrounds · stock gloss · heavy filters.
White type, bottom-anchored, with a subtle bottom gradient for legibility.
UI Components
Square badge = active day. Filled champagne circle = an event date. Outline = default.
Live from the atelier — the season's first look, streamed at 20:00 CET.
App Screens
The system applied. Fixed wordmark header, editorial body, three-tab footer — the same frame across Day, Month, and Category.
Motion
Movement is slow and deliberate — a page turning, not an app reacting. One transition per interaction.
Wordmark fades up over black as letter-spacing tightens from wide to set. 1.4s, ease-out.
Horizontal cross-fade between days. No slide bounce. 400ms, ease-in-out.
Champagne underline slides to the active tab; content fades. 250ms.
cubic-bezier(0.22, 1, 0.36, 1). Nothing linear, nothing springy.
Design Screens
