---
name: Kinfolk
description: "This site is an excellent example of a digital magazine translating a premium print aesthetic to the web, using typography and whitespace as primary design tools."
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#000000"
  secondary: "#212121"
  neutral: "#333333"
  bg-quiet: "#DBDED5"
  line: "rgba(0,0,0,1)"

typography:
  display:
    fontFamily: didone-serif
    fontSize: 56px
    lineHeight: 1.0
    fontWeight: 400
    letterSpacing: "-0.5px"
  heading:
    fontFamily: humanist-sans
    fontSize: 32px
    lineHeight: 1.18
    fontWeight: 400
    letterSpacing: "-0.16px"
  body:
    fontFamily: humanist-sans
    fontSize: 20px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0.15px"
  small:
    fontFamily: humanist-sans
    fontSize: 13px
    lineHeight: 1.3
    fontWeight: 400
    letterSpacing: "0.15px"

rounded:
  sm: 2px
  md: 6px
  lg: 0px
  pill: 50px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 20px
  xl: 24px
  2xl: 32px
  3xl: 60px

---

## Overview

A refined, minimalist editorial site for a lifestyle magazine, prioritizing clean typography and high-quality photography.

*A premium lifestyle magazine translating its sophisticated print aesthetic to the web.*

## Colors

A restrained, almost monochromatic palette with black text on white, using a muted sage green (#DBDED5) as a subtle background accent.

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#000000`)** — uses `ink` token
- **Secondary text (`#212121`)** — uses `ink-soft` token
- **Muted (`#333333`)** — uses `muted` token
- **Borders (`rgba(0,0,0,1)`)** — uses `line` token

## Typography

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

- Primary display and heading typography uses a didone-serif family.
- UI elements, navigation, and captions use a clean humanist-sans family.
- Text is frequently transformed to uppercase for navigation and labels.
- Letter spacing is subtly adjusted for better readability at different scales.

## Layout

A centered, single-column layout for hero and reading sections, transitioning to a 4-column grid for article listings.

*Rhythm:* A strict vertical rhythm is maintained, with generous whitespace, especially large vertical padding (e.g., 170px) to create a sense of airiness and focus.

## Elevation & Depth

- rgba(0,0,0,0.3) 0px 32px 68px 0px
- Borders: 1px solid black for dividers and some button states.

## Shapes

- `sm`: 2px
- `md`: 6px
- `lg`: 0px
- `pill`: 50px

## Components

- **button:** Minimalist text-based or simple bordered buttons, often using uppercase sans-serif typography.
- **card:** Image-centric cards with muted gray-green backgrounds for placeholders, paired with small, left-aligned sans-serif metadata and serif titles.
- **hero:** A large, centered composition featuring a magazine cover image, prominent serif headlines, and clear calls-to-action.

## Do's and Don'ts

**Don't:**
- Don't use a bright accent color — the screenshot shows a palette restricted to black, white, and muted grays/greens.
- Don't use a bold, sans-serif for headlines — the screenshot shows headlines are always in a refined didone-serif.
- Don't pack content tightly — the screenshot shows ample whitespace and generous vertical padding between sections.
- Don't use decorative, playful icons — the screenshot uses a minimalist two-line hamburger menu.
- Don't use complex, multi-colored backgrounds — the screenshot uses solid white or a single muted sage green.
- Don't use heavy, visible drop shadows on most elements — the screenshot relies on a single deep shadow for a specific image.

---

## System Prompt (paste into AI agent)

```
Kinfolk is a premium lifestyle magazine site with a refined, minimalist editorial aesthetic. The design DNA is built on a stark, monochromatic palette using black (#000000) on white (#FFFFFF) backgrounds, with a subtle muted sage green (#DBDED5) as a quiet accent. Typography is a key differentiator, featuring a didone-serif for display headlines and a clean humanist-sans for UI and body text. The layout is spacious and centered, prioritizing large imagery and generous whitespace (e.g., 170px vertical padding). Critical donts: Do not introduce bold, saturated accent colors; do not use sans-serif fonts for primary headlines; do not crowd the layout with tight spacing or complex borders. Interactions are subtle, relying on smooth opacity and transform transitions with a custom cubic-bezier easing.
```