---
name: Postfamiliar
description: "This design is a strong example of a bold, editorial dark mode aesthetic that uses typography and contrast as its primary visual drivers."
version: alpha

colors:
  background: "#000000"
  primary: "#ffffff"
  tertiary: "#fc3192"
  neutral: "#888888"
  line: "rgba(255, 255, 255, 1)"

typography:
  display:
    fontFamily: grotesque-sans
    fontSize: 230px
    lineHeight: 1.0
    fontWeight: 400
    letterSpacing: "-2.88px"
  heading:
    fontFamily: grotesque-sans
    fontSize: 70.56px
    lineHeight: 1.0
    fontWeight: 400
    letterSpacing: "-1px"
  subhead:
    fontFamily: grotesque-sans
    fontSize: 46.8px
    lineHeight: 1.0
    fontWeight: 400
    letterSpacing: "-0.5px"
  body:
    fontFamily: grotesque-sans
    fontSize: 16px
    lineHeight: 1.0
    fontWeight: 400
    letterSpacing: "0.25px"
  label:
    fontFamily: grotesque-sans
    fontSize: 20px
    lineHeight: 1.3
    fontWeight: 400
    letterSpacing: "0px"

rounded:
  sm: 4px
  md: 16px
  lg: 50px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

Bold, high-contrast dark mode editorial for an exclusive wine club.

*A high-end, exclusive wine club magazine with a brutalist edge.*

## Colors

Strict high-contrast monochrome with a single vibrant pink accent.

- **Background (`#000000`)** — uses `bg` token
- **Primary text (`#ffffff`)** — uses `ink` token
- **Accent (`#fc3192`)** — uses `accent` token
- **Muted (`#888888`)** — uses `muted` token
- **Borders (`rgba(255, 255, 255, 1)`)** — uses `line` token

## Typography

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

- Uppercase text used extensively for headlines and buttons.
- Tight tracking on large display text.

## Layout

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

*Rhythm:* Vertical rhythm established through consistent padding and gap multiples.

## Elevation & Depth

- Borders: High-contrast 2px solid white or black borders define all interactive elements.

## Shapes

- `sm`: 4px
- `md`: 16px
- `lg`: 50px
- `pill`: 999px

## Components

- **button:** Pill-shaped, transparent fill with a 2px solid white border.
- **card:** Square with sharp corners, defined by a 2px solid white border.
- **chip:** Minimal text labels, often uppercase with wide tracking.
- **input:** Pill-shaped with a 2px solid white border.
- **hero:** Full-screen, high-contrast typographic hero with massive display text.

## Do's and Don'ts

**Don't:**
- 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.

---

## System Prompt (paste into AI agent)

```
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.
```