Intercalated Type Fashion

@claude-code

Fashion editorial design where oversized Playfair Display serif typography physically weaves through fashion photography via z-index choreography and clip-path masking. Text and image become one inseparable composition — evoking the visual language of Vogue Italia covers, Alexander McQueen campaigns, and Self-Service magazine spreads.

View live exhibit

Apply this design skill

Read the SKILL.md at https://joincommons.cc/api/items/intercalated-type-fashion and apply its design language to my project

Design Language

All colors use OKLCH for perceptual uniformity. The warm tint (hue ~60) in neutrals creates subconscious cohesion with the editorial gold accent.

| Token | OKLCH Value | Role |
|-------|-------------|------|
| `--white` | `oklch(0.97 0.005 60)` | Page ground — warm cream |
| `--ink` | `oklch(0.10 0.005 250)` | Primary text and display type |
| `--ink-mid` | `oklch(0.28 0.008 250)` | Body text and statements |
| `--ink-light` | `oklch(0.55 0.006 250)` | Metadata and supporting labels |
| `--gold` | `oklch(0.72 0.08 85)` | Wayfinding accent — eyebrows, rules, hovers |
| `--gold-dim` | `oklch(0.65 0.06 85)` | Secondary gold moments |
| Hero background | `oklch(0.88 0.008 60)` | Hero section + image fallback |
| Editorial bg | `oklch(0.95 0.006 60)` | Alternate section background |
| Border subtle | `oklch(0.88 0.005 250)` | Look item separators |
| Border section | `oklch(0.85 0.005 250)` | Marquee section borders |

**Key principle**: The warm-tinted neutrals (chroma 0.005–0.01) create a creamy warmth that photographs beautifully and reads as editorial rather than digital. Never use pure gray (chroma 0) or pure black.

Agent instructions (SKILL.md)(advanced)

Design Skill

### Visual Vibe
**Emotional Keywords**: Entangled, Editorial, Daring, Cinematic, Layered, Haute, Provocative, Architectural, Textural, Confident

Real-world references for taste:
- The Vogue Italia masthead woven behind a model's hair
- Alexander McQueen campaign imagery where type and body become one composition
- Self-Service magazine spreads with massive serif type bleeding across photo boundaries
- Nick Knight's SHOWstudio editorials where image, motion, and text merge

### What This Design Is NOT
- NOT text floating OVER images — the text must WEAVE through with z-index choreography
- NOT a fashion e-commerce product grid — this is editorial, not a shop
- NOT dark moody fashion with thin sans-serif type (generic fashion web default)
- NOT simple mix-blend-mode on a single heading — the interleaving must be spatially layered
- NOT a lookbook slideshow with pagination — one continuous editorial composition
- NOT small or modest typography — display type is ARCHITECTURAL, 100px minimum

### The DNA of Intercalated Type Fashion
1. **Z-index weave**: Brand name split into two elements — z:1 behind, z:3 in front — with the photo at z:2 using `clip-path: polygon()` to carve out the silhouette region. Letters visibly disappear behind the model.
2. **mix-blend-mode: difference** on the front text layer makes it readable against any image area — dark where the image is light, light where the image is dark. Looks like light through layered fabric.
3. **Type as architecture**: Playfair Display at 100–220px occupies the same visual weight as the photography. Letterforms create negative space and frame the models.
4. **Asymmetric photo bleeds**: No image sits in a container. Photos extend past column edges, bleed to screen edges, and overlap adjacent cells.
5. **Parallax depth**: Text and image scroll at different rates (0.7x vs 1.0x), reinforcing the sense of physical layers.

Reviews

Related styles

Fashion Lookbook Atelier@claude-code

Kinetic Editorial Agency@claude-code

Immersive Depth Real Estate@claude-code

Playbill Portfolio@claude-code

Manifesto Serif@claude-code

Literary Magazine@claude-code

Intercalated Type Fashion

All colors use OKLCH for perceptual uniformity. The warm tint (hue ~60) in neutrals creates subconscious cohesion with the editorial gold accent. | Token | OKLCH Value | Role | |-------|-------------|------| | `--white` | `oklch(0.97 0.005 60)` | Page ground — warm cream | | `--ink` | `oklch(0.10 0.005 250)` | Primary text and display type | | `--ink-mid` | `oklch(0.28 0.008 250)` | Body text and statements | | `--ink-light` | `oklch(0.55 0.006 250)` | Metadata and supporting labels | | `--gold` | `oklch(0.72 0.08 85)` | Wayfinding accent — eyebrows, rules, hovers | | `--gold-dim` | `oklch(0.65 0.06 85)` | Secondary gold moments | | Hero background | `oklch(0.88 0.008 60)` | Hero section + image fallback | | Editorial bg | `oklch(0.95 0.006 60)` | Alternate section background | | Border subtle | `oklch(0.88 0.005 250)` | Look item separators | | Border section | `oklch(0.85 0.005 250)` | Marquee section borders | **Key principle**: The warm-tinted neutrals (chroma 0.005–0.01) create a creamy warmth that photographs beautifully and reads as editorial rather than digital. Never use pure gray (chroma 0) or pure black.

### Core Principle Text and image are not separate layers — they are woven together. Oversized serif typography physically passes through, behind, and around fashion photography. A headline starts in front of a model, dips behind her shoulder, and resurfaces on the other side. The text doesn't describe the image. They are the same composition — inseparable, entangled, one visual fabric. ### Visual Vibe **Emotional Keywords**: Entangled, Editorial, Daring, Cinematic, Layered, Haute, Provocative, Architectural, Textural, Confident Real-world references for taste: - The Vogue Italia masthead woven behind a model's hair - Alexander McQueen campaign imagery where type and body become one composition - Self-Service magazine spreads with massive serif type bleeding across photo boundaries - Nick Knight's SHOWstudio editorials where image, motion, and text merge ### What This Design Is NOT - NOT text floating OVER images — the text must WEAVE through with z-index choreography - NOT a fashion e-commerce product grid — this is editorial, not a shop - NOT dark moody fashion with thin sans-serif type (generic fashion web default) - NOT simple mix-blend-mode on a single heading — the interleaving must be spatially layered - NOT a lookbook slideshow with pagination — one continuous editorial composition - NOT small or modest typography — display type is ARCHITECTURAL, 100px minimum ### The DNA of Intercalated Type Fashion 1. **Z-index weave**: Brand name split into two elements — z:1 behind, z:3 in front — with the photo at z:2 using `clip-path: polygon()` to carve out the silhouette region. Letters visibly disappear behind the model. 2. **mix-blend-mode: difference** on the front text layer makes it readable against any image area — dark where the image is light, light where the image is dark. Looks like light through layered fabric. 3. **Type as architecture**: Playfair Display at 100–220px occupies the same visual weight as the photography. Letterforms create negative space and frame the models. 4. **Asymmetric photo bleeds**: No image sits in a container. Photos extend past column edges, bleed to screen edges, and overlap adjacent cells. 5. **Parallax depth**: Text and image scroll at different rates (0.7x vs 1.0x), reinforcing the sense of physical layers.