# Favorit Studio · Design system migration spec

> Source: https://favorit.studio  ·  Curated by OpenDesign  ·  en

> An excellent reference for extreme minimalism, demonstrating how massive typography and strict monochrome constraints can create a powerful visual identity.

## 1. Identity DNA

Favorit Studio's design system is a stark, high-contrast architectural manifesto in digital form. It treats the screen as a raw, unadorned surface where massive typography and extreme negative space become the primary structural elements, defining space with the same precision as steel and concrete.

**One-liner:** A high-contrast, minimalist design studio portfolio defined by massive typography and extreme negative space.
**Keywords:** Minimalist · Architectural · High Contrast · Precise · Bold
**Analogy:** A stark, high-contrast architectural studio manifesto

## 2. Color

The color system is a commitment to absolute polarity. It operates on a strict binary of pure black and pure white, using maximum contrast as its sole expressive tool.

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

**Color principle:** Strict, uncompromising monochrome with maximum contrast between pure black and pure white

The principle is uncompromising: no grays, no accents, no compromise on the monochrome foundation.

## 3. Typography

The typographic voice is defined by a single, confident grotesque-sans. TWKLausanne is used exclusively, its Regular weight deployed at massive scales to command the layout.

- **Display:** grotesque-sans
- **Body:** grotesque-sans
- **Mono:** grotesque-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 189px | 1.0 | 400 | -4px | Massive headline numbers |
| headline | 158px | 1.0 | 400 | -4px | Large section titles |
| subhead | 135px | 1.0 | 400 | -3px | Sub-headlines |
| body | 23px | 1.2 | 400 | -0.23px | Standard text |

**Type rules:**
- Use TWKLausanne (grotesque-sans) exclusively for all text
- Maintain tight negative letter-spacing (-0.1em) for headlines
- Keep font-weight strictly at 400 (Regular)

## 4. Spacing

Spacing is governed by an asymmetric rhythm, carving out vast fields of negative space to frame content with deliberate, uneven tension.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 21 / 46 / 69 / 96 px
- **Rhythm:** Asymmetric with generous negative space

## 5. Surfaces

Surfaces are rendered with absolute flatness. Depth is implied solely through stark value contrast and the precise placement of minimal 1px black borders.

- **Radius:** sm 0px · md 0px · lg 0px · pill 999px
- **Borders:** Minimal 1px black borders on specific elements, otherwise no borders

## 6. Layout

The layout skeleton is built on strict split-screen and full-bleed sections. Composition is defined by extreme asymmetry, creating dynamic imbalance across the viewport.

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

**Skeleton:** Strict split-screen or full-bleed sections with extreme asymmetry

## 7. Motion & Interaction

Motion is a tool for structural transformation, not decoration. Transitions are smooth and elastic, using transform-based reveals to shift planes rather than fade content.

- **Durations:** micro 100ms · small 300ms · medium 600ms
- **Easing:** `cubic-bezier(0.16, 1, 0.3, 1)`
- **Patterns:**
  - Smooth reveal transitions
  - Transform-based sliding

- **Hover:** Subtle transform or opacity changes
- **Click:** Immediate response
- **Transition:** All properties transition smoothly over ~300ms
- **Keyboard:** Standard browser focus

## 8. Voice & Don'ts

The editorial voice is direct, confident, and stripped of all ornament. Language is minimal, headlines are oversized and tightly set, and calls to action are understated text links.

- **Tone:** Direct, confident, minimal
- **Headline style:** Oversized, lowercase or uppercase, extremely tight spacing
- **CTA style:** Understated text links with thin borders
- **Avoid:** Playful language / Excessive punctuation / Rounded corners / Shadows / Gradients

### Don'ts
- ❌ Don't use drop shadows — screenshot shows flat, high-contrast surfaces
- ❌ Don't use border-radius on elements — screenshot shows sharp, 0px corners
- ❌ Don't use multiple font weights — screenshot shows exclusively weight 400
- ❌ Don't introduce accent colors — screenshot is strictly black and white
- ❌ Don't use wide letter-spacing — screenshot shows tight, negative letter-spacing
- ❌ Don't add background textures or gradients — screenshot shows solid pure white/black backgrounds

The system deliberately omits any element that softens the interface—no rounded corners, no drop shadows, no playful language, no visual respite from the stark contrast.

## System Prompt (paste into AI tool)

```
A bold, minimalist design studio portfolio characterized by stark black-and-white contrast and massive grotesque-sans typography. Key colors are strictly #000000 and #FFFFFF. Font categories are exclusively grotesque-sans (TWKLausanne) used at various massive scales (up to 189px) with weight 400. Critical donts: never use border-radius (screens show sharp 0px corners), never use drop shadows (surfaces are completely flat), and never introduce accent colors (palette is strictly monochrome).
```
