# Friendsofthenew · Design system migration spec

> Source: https://www.friendsofthenew.com  ·  Curated by OpenDesign  ·  en

> Worth including for its bold, uncompromising use of typography and photographic layout to create a high-end editorial feel without any color or decoration.

## 1. Identity DNA

The design system for Friendsofthenew operates like a high-fashion art gallery magazine, where every element is curated for maximum impact within strict formal constraints. Its identity is built on the tension between massive typographic presence and generous photographic whitespace, all rendered in a strict monochrome palette.

**One-liner:** A monochrome editorial showcase for emerging artists with massive typographic presence and photographic collage layouts.
**Keywords:** editorial · curatorial · photographic · minimalist · avant-garde
**Analogy:** A high-fashion art gallery magazine

## 2. Color

The color system is radically reductive, employing only black ink on a warm off-white background. This binary palette forces visual interest to emerge from typography, composition, and the photographic content itself.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#f4f4ef` | main background |
| `--ink` | `#000000` | body text |
| `--muted` | `#000000` | placeholder |
| `--line` | `rgba(0,0,0,1.0)` | divider |

**Color principle:** Strict monochrome palette relying on stark black and warm off-white for maximum contrast and editorial elegance.

The governing principle is that contrast is achieved through value and scale, never through hue.

## 3. Typography

The typographic voice is defined by a stark hierarchy: a high-contrast transitional serif for dramatic logotype statements, paired with a clean humanist sans-serif for functional UI elements. The scale ranges from massive, anchor-weight display text to discreet navigation and metadata.

- **Display:** transitional-serif
- **Body:** humanist-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 200px | 0.85 | 400 | -2px | Massive brand logotype anchored at the bottom |
| body | 10px | 1.4 | 400 | 0px | Small navigation and metadata text |

**Type rules:**
- Logotype uses a high-contrast transitional serif for dramatic visual impact
- UI elements use a clean humanist sans-serif for legibility at small sizes
- Tight letter-spacing applied to large display text for cohesion

## 4. Spacing

Spacing follows a strict 20px gutter grid, creating an editorial rhythm that paces content like a carefully laid-out magazine spread.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 20 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Grid-based with 20px gutters and generous whitespace for editorial pacing.

## 5. Surfaces

Surfaces are completely flat, defined by crisp 1px solid borders and an absence of shadows or gradients. The depth comes from the layering of unframed photographic elements, not from skeuomorphic effects.

- **Radius:** sm 0px · md 0px · lg 0px · pill 999px
- **Borders:** 1px solid rgb(0, 0, 0)

## 6. Layout

The layout skeleton is anchored by a fixed logotype at the viewport's base, with a floating, collage-style grid of images occupying the space above. This creates a persistent gallery wall against which the photographic content is dynamically arranged.

- **Container max:** 1440px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 20px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Fixed bottom logotype with floating, collage-style image grid above it

## 7. Motion & Interaction

Motion is minimal and purposeful, limited to smooth 0.3-second filter transitions on hover and subtle state changes. The philosophy is that movement should clarify interaction, not distract from the static photographic compositions.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1.0)`
- **Patterns:**
  - Smooth image filter transitions on hover (0.3s ease-out)
  - General element transitions for state changes

- **Hover:** Image filters or slight visual shifts
- **Click:** Direct navigation without modal interruptions
- **Transition:** 0.3s ease-out for filter properties
- **Keyboard:** Standard sequential navigation through top menu items

## 8. Voice & Don'ts

The editorial voice is sophisticated, understated, and confident, expressed through massive, unapologetic typographic headlines and subtle, text-based navigation that avoids traditional button styling.

- **Tone:** Sophisticated, understated, and confident
- **Headline style:** Massive, unapologetic typographic statements
- **CTA style:** Subtle, text-based navigation without traditional button styling
- **Avoid:** Bright colors / Rounded corners / Drop shadows / Decorative icons / Busy patterns / Center-aligned text / Sans-serif headings

### Don'ts
- ❌ Don't use bright accent colors — screenshot shows strict black and warm off-white only
- ❌ Don't use rounded corners — screenshot shows sharp edges and circular pill shapes only
- ❌ Don't center-align text — screenshot shows left-aligned navigation and bottom-anchored logotype
- ❌ Don't use drop shadows — screenshot shows completely flat photographic layers
- ❌ Don't use sans-serif for display text — screenshot shows a transitional serif for the main logotype
- ❌ Don't add decorative borders or frames — screenshot shows unframed, floating photographic elements

The system deliberately excludes bright colors, rounded corners, drop shadows, decorative icons, and center-aligned text to preserve its stark, editorial integrity.

## System Prompt (paste into AI tool)

```
This website is a minimalist, editorial-style portfolio for an artist collective, characterized by a monochrome palette and massive typography. The design relies on a stark contrast between a warm off-white background and black ink, using a transitional serif for the dominant logotype and a humanist sans-serif for small UI text. A key constraint is the avoidance of color, rounded corners, and drop shadows, emphasizing a flat, photographic collage aesthetic. The layout features a fixed bottom logotype with floating images above, creating a gallery-like experience. Avoid any vibrant colors or decorative elements, focusing instead on typography, photography, and generous whitespace.
```