# Postfamiliar · Design system migration spec

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

> This design is a strong example of a bold, editorial dark mode aesthetic that uses typography and contrast as its primary visual drivers.

## 1. Identity DNA

Postfamiliar's identity is constructed with the deliberate severity of a brutalist wine label. It operates as a high-contrast, dark-mode editorial system, where every element is stripped back to serve a single, authoritative voice. The analogy is a high-end, exclusive wine club magazine with a brutalist edge—luxury defined by constraint, not ornament.

**One-liner:** Bold, high-contrast dark mode editorial for an exclusive wine club.
**Keywords:** Curated · Exclusive · Bold · Minimal · Editorial
**Analogy:** A high-end, exclusive wine club magazine with a brutalist edge.

## 2. Color

The color system is a strict, high-contrast monochrome of solid black and white, grounded by a single, vibrant pink accent. This palette is not decorative; it is functional, directing attention and defining hierarchy with absolute clarity.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#000000` | main background |
| `--ink` | `#ffffff` | body text |
| `--muted` | `#888888` | placeholder |
| `--accent` | `#fc3192` | single accent |
| `--line` | `rgba(255, 255, 255, 1)` | divider |

**Color principle:** Strict high-contrast monochrome with a single vibrant pink accent.

The principle is unwavering: contrast is the primary tool for establishing visual order.

## 3. Typography

Type is the dominant structural element, set in a combination of grotesque-sans and transitional-serif categories. The voice is bold and authoritative, heavily reliant on uppercase text and tight tracking on large display sizes to create a stark, editorial presence.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 230px | 1.0 | 400 | -2.88px | Main headline |
| heading | 70.56px | 1.0 | 400 | -1px | Section title |
| subhead | 46.8px | 1.0 | 400 | -0.5px | Subheadline |
| body | 16px | 1.0 | 400 | 0.25px | Body text |
| label | 20px | 1.3 | 400 | 0px | Button text |

**Type rules:**
- Uppercase text used extensively for headlines and buttons.
- Tight tracking on large display text.

## 4. Spacing

Rhythm is established through a consistent system of padding and gap multiples that create vertical and horizontal order.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 / 144 px
- **Rhythm:** Vertical rhythm established through consistent padding and gap multiples.

## 5. Surfaces

Depth is communicated not through shadow, but through stark, high-contrast 2px solid borders. These borders define every interactive element and card, creating a flat, graphic space where structure is drawn, not implied.

- **Radius:** sm 4px · md 16px · lg 50px · pill 999px
- **Borders:** High-contrast 2px solid white or black borders define all interactive elements.

## 6. Layout

The layout skeleton is centered and full-bleed, anchored by a fixed-width content column. A massive typographic hierarchy, often within a full-screen hero, establishes an immediate and uncompromising focal point.

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

**Skeleton:** Centered, full-screen hero with a fixed-width content column.

## 7. Motion & Interaction

Motion is subtle and purposeful, limited to opacity transitions for reveals and transform transitions for hover states. The philosophy avoids complex animation, using smooth 0.3s to 0.4s transitions only to provide clear, immediate feedback on state changes.

- **Durations:** micro 220ms · small 300ms · medium 400ms
- **Easing:** `cubic-bezier(0.25, 1, 0.5, 1)`
- **Patterns:**
  - Opacity transitions for reveals.
  - Transform transitions for hover states.

- **Hover:** Invert colors or change border color to pink.
- **Click:** Immediate visual feedback via scale or opacity.
- **Transition:** Smooth 0.3s to 0.4s transitions on color and transform.
- **Keyboard:** Focus outlines follow the pink accent color.

## 8. Voice & Don'ts

The editorial voice is authoritative, exclusive, and minimalist, mirroring the visual system's restraint. Headlines are massive, bold, and uppercase; calls-to-action are direct, pill-shaped, and set in uppercase.

- **Tone:** Authoritative, exclusive, and minimalist.
- **Headline style:** Massive, bold, uppercase sans-serif.
- **CTA style:** Direct, uppercase, pill-shaped buttons.
- **Avoid:** Friendly or casual language. / Rounded, soft shapes. / Complex gradients or drop shadows. / Cluttered layouts. / Serif fonts for body text. / Desaturated color palettes.

### Don'ts
- ❌ don't use drop shadows — screenshot shows elements defined by 2px solid borders instead.
- ❌ don't use a light background — screenshot shows a solid #000000 dark mode background.
- ❌ don't use lowercase headlines — screenshot shows massive uppercase typography.
- ❌ don't use rounded card corners — screenshot shows sharp, 90-degree corners on cards.
- ❌ don't use muted, desaturated colors — screenshot shows a high-contrast palette with a vibrant pink accent.
- ❌ don't use centered text for everything — screenshot shows left-aligned body copy and right-aligned navigation elements.

The system deliberately avoids friendly language, soft shapes, gradients, shadows, clutter, and desaturated palettes.

## System Prompt (paste into AI tool)

```
A bold, high-contrast dark mode editorial design for an exclusive wine club. Key hex colors are #000000 (background), #ffffff (ink), and #fc3192 (accent). The design uses a combination of grotesque-sans and transitional-serif font categories. Critical donts: Do not use light backgrounds, do not use rounded card corners, do not use lowercase headlines. The layout relies on massive, tight-tracked typography and thin, high-contrast borders to define structure and hierarchy.
```