# Savoirfaire Nyc · Design system migration spec

> Source: https://savoirfaire.nyc  ·  Curated by OpenDesign  ·  en

> This site is a masterclass in minimalist editorial design, using extreme typographic scale and negative space to create a powerful, premium visual identity.

## 1. Identity DNA

Savoirfaire Nyc operates with the confidence of a high-end fashion magazine or art gallery, where the page itself becomes the statement. Its design DNA is a study in stark contrast and typographic dominance, building a premium identity through deliberate subtraction rather than addition.

**One-liner:** A stark, black-and-white editorial site dominated by ultra-large serif typography and generous negative space.
**Keywords:** minimalist · editorial · sophisticated · high-contrast · typographic
**Analogy:** A high-end fashion magazine or art gallery website.

## 2. Color

The color system is a strict monochrome of pure black and white, using a single gray (#808080) for secondary text. This binary palette ensures maximum editorial impact and removes all chromatic distraction.

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

**Color principle:** Strict monochromatic contrast for maximum editorial impact.

The principle is unyielding: a high-contrast, black-and-white environment is the only canvas for the typographic voice.

## 3. Typography

Typography is the primary architectural element, with an ultra-thin didone-serif for display text creating a refined, editorial presence. This is paired with a clean humanist-sans for functional UI text, establishing a clear hierarchy between statement and utility.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 360px | 1.0 | 100 | -2px | Massive hero wordmark |
| body | 19.8px | 1.1 | 400 | 0px | UI text and labels |
| caption | 9px | 1.0 | 400 | 0px | Marquee text |

## 4. Spacing

The vertical rhythm is defined by generous, expansive spacing that amplifies the scale of the typography.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Generous vertical spacing emphasizes the large typography.

## 5. Surfaces

Surfaces are flat and borderless, relying entirely on the stark contrast between black and white to define form and depth. The absence of shadows, borders, or textures maintains the purity of the layout's graphic composition.

- **Radius:** sm 4px · md 8px · lg 12px · pill 999px
- **Borders:** No visible borders; relies on high contrast.

## 6. Layout

The layout skeleton is a full-screen black field with oversized typography anchored toward the bottom, creating a powerful focal point. A horizontal ticker runs across the top, providing a structured counterpoint to the hero element below.

- **Container max:** 1920px
- **Paragraph max:** 1200px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Full-screen black background with massive typography anchored at the bottom and a top ticker.

## 7. Motion & Interaction

Motion philosophy is restrained and purposeful, used primarily to convey continuous information rather than decorative flair. The key interaction is the horizontal text marquee at the top of the viewport, a subtle, perpetual movement that adds a layer of refined dynamism without compromising the layout's stillness.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Horizontal text ticker at the top

- **Hover:** Pointer cursor on interactive elements.
- **Click:** Standard click interaction.
- **Transition:** All properties transition over 0.3s.
- **Keyboard:** Standard tab navigation.

## 8. Voice & Don'ts

The editorial voice is confident, minimalist, and premium, conveyed entirely through the starkness of the layout and the authority of the typography. All headlines are set in all-caps, ultra-large, thin serif type, reinforcing the singular, unwavering tone of the presentation.

- **Tone:** Confident, minimalist, and premium.
- **Headline style:** All-caps, ultra-large, thin serif typography.
- **CTA style:** Minimalist circular icon button.
- **Avoid:** Using multiple colors / Adding drop shadows to text / Using decorative or playful fonts / Cluttering the layout with too many elements / Using heavy background textures / Overusing borders or lines

### Don'ts
- ❌ Don't use multiple colors — screenshot shows a strict monochromatic black and white palette.
- ❌ Don't use heavy font weights for display text — screenshot shows an ultra-thin (weight 100) serif font.
- ❌ Don't clutter the layout with many elements — screenshot shows extreme minimalism with massive negative space.
- ❌ Don't use rounded corners on primary elements — screenshot shows sharp typography and a circular icon button.
- ❌ Don't use drop shadows or gradients — screenshot shows flat, high-contrast elements.
- ❌ Don't use decorative or playful fonts — screenshot shows a refined didone-serif and a clean humanist-sans.

The system deliberately avoids multiple colors, decorative fonts, cluttered layouts, drop shadows, and heavy font weights to preserve its stark, editorial purity.

## System Prompt (paste into AI tool)

```
This is a minimalist, high-contrast editorial website. The design DNA is rooted in extreme simplicity, featuring a solid black background (#000000) and crisp white text (#FFFFFF). The typography is the primary focus, utilizing a massive, ultra-thin didone-serif for display text and a clean humanist-sans for UI elements. A subtle gray (#808080) is used for secondary text. The layout is characterized by massive negative space and a full-bleed hero. Critical donts: avoid using multiple colors, avoid heavy font weights for display text, and avoid cluttering the layout. The overall feel is premium, confident, and highly refined, similar to a high-end art or fashion publication.
```